First Problem!

Problem with continuing my Audoballs, is that now I have gotten so excited about being able to post it on the internet all working etc, I am determined to get them working on the blog.

Now that doesn't sound that bad, as you will see, so far so good. All the sketches up at the moment are working.

The problem is that, as far as I can tell, I cannot use third party libraries with processingJS. Which means that I cannot use the 'themidibus' library that I am using at the moment.... Midi balls don't work so well if they don't do midi stuff!!

So I am currently looking for a way around this. I am hoping there is a clever way to get the libraries working.

If not then I am wondering if it is possible to accomplish it in another way. Like having the note values output to a separate script that can produce midi notes...

Confused :(

Audoballs: The circle is Bouncing!

So as you can see here we now have a bouncing ball :D Result! The code is:

float xpos, ypos;
int Size = 60;
float xspeed = 3.5;
float yspeed = 3.2;

int xdirection = 1;
int ydirection = 1;

void setup() {
size(320, 240);
background(255);
smooth();
noStroke();
frameRate(30);

xpos = width/2;
ypos = height/2;
}

void draw() {
background(255);

xpos = xpos + (xspeed * xdirection);
ypos = ypos + (yspeed * ydirection);

if (xpos > width-Size || xpos < 0) { xdirection *= -1;} if (ypos > height-Size || ypos < 0) {
ydirection *= -1;
}

fill(144);
ellipse(xpos+Size/2, ypos+Size/2, Size, Size);
}

So as you (We, I) can see we have created a few more float's representing various numbers. (size, xspeed, yspeed, x/ypos)

We have told it the size of the ellipse and the x and y location to draw it: ellipse(xpos+Size/2, ypos+Size/2, Size, Size);

Then we make the xpos and ypos move by making a calculation that changes the value. So each run through the draw() command changes the value of the xpos to xpos + (xspeed * xdirection).

Therefore on initialising the xpos value is the width/2 (320/2 = 160). Then the draw command will run the lines "xpos = xpos + (xspeed * xdirection)

So the first time it runs will be something like xpos(currently 160) = 160(xpos) + (3.5 * 1). The same applies for ypos.

xpos = xpos + (xspeed * xdirection);
ypos = ypos + (yspeed * ydirection);

The other part that has been added in is the "if".

Essentially this means that if the statements in the brackets are true then the direction is multiplied by -1. This has the effect of reversing the direction. (so rather than it being 160 + (3.5 * 1), which would cause the ball to move along the x axis at a rate of 3.5 pixels per run through (the xpos value increases by 3.5) it is xpos + (3.5 * -1) which causes the xpos value to decrease by 3.5 each run through (xpos + -3.5). This has the effect of making the circle reverse.

A few of the other commands:
smooth() makes the sketch draw shapes with smooth edges.
noStroke() stops the sketch from drawing an outline.
frameRate() specifies the speed of the sketch.

So there we have a moving circle :D

Audoballs: Drawing a circle in the display area.

Now that I have a display area I need a circle, which will eventually become my bouncing ball. This looks like:

float xpos, ypos;

void setup() {
size(320, 200);
smooth();
background(255);
}
void draw() {

xpos = width/2;
ypos = height/2;

fill(144);
ellipse(xpos, ypos, 60, 60);
}

I have added a few extra lines in and as you will see below we now have a nice grey circle in the middle of the display area.

float allows you to assign a floating point number to a value. A floating point number has a decimal place in it and allows 'a greater resolution than integers' as is explained here. So float xpos, ypos; is instructing processing that xpos and ypos are floating point numbers.

the draw() command is used after setup and continuously executes the code within. Explanation here

So within the draw command I am basically doing 4 things. I am saying that "xpos" has the value of the width divided by 2. I am saying that the 'ypos" has the value of the height divided by 2.

I am then saying the colour of the fill of the ellipse is (144), a grayscale colour. (/shade, grey isn't really a colour)

Then I am instructing it to draw an ellipse(x, y, width, height) - the brackets contain the properties of the ellipse.

The result of this is:

ProcessingJS/HTML

Ok so I need to figure out how adding scripts using the HTML works. I know that I can load an external script from another webpage and can therefore load the processing script and run the processing sketches in the blog.

Link to my post with the code I found that allows you to do this.

So....

< script type="application/processing" >

I think you would describe it as a declaration of what script(type?!) to use. Type and name maybe? so its an application called processing?

Useful little explanation of scripts:

"A client-side script is a program that may accompany an HTML document or be embedded directly in it. The program executes on the client's machine when the document loads, or at some other time such as when a link is activated. HTML's support for scripts is independent of the scripting language."

Scripts offer authors a means to extend HTML documents in highly active and interactive ways. For example:

• Scripts may be evaluated as a document loads to modify the contents of the document dynamically.
• Scripts may accompany a form to process input as it is entered. Designers may dynamically fill out parts of a form based on the values of other fields. They may also ensure that input data conforms to predetermined ranges of values, that fields are mutually consistent, etc.
• Scripts may be triggered by events that affect the document, such as loading, unloading, element focus, mouse movement, etc.
• Scripts may be linked to form controls (e.g., buttons) to produce graphical user interface elements.

There are two types of scripts authors may attach to an HTML document:

• Those that are executed one time when the document is loaded by the user agent. Scripts that appear within a SCRIPT element are executed when the document is loaded. For user agents that cannot or will not handle scripts, authors may include alternate content via the NOSCRIPT element.
• Those that are executed every time a specific event occurs. These scripts may be assigned to a number of elements via the intrinsic event attributes.

I am going to assume that canvas width/height is the size of the display area for the moment, although there is a size() command in the processing script also, I shall have to find out.

< canvas width="320" height="240" >

The next line indicates the destination to get the script from

< script src='http://processingjs.org/source/current/pjs-init.js' >

Seems fairly simple, I understand this if my posts have working examples in them! (other than the expanding/contracting blue and white circle once, as that is simply a copy and pasted example/test.

I also learned(put into practice) the tiniest bit of HTML formatting writing this post WOOOP! (for example the bullet point list)

Blogger HTML

1
2
3
4
5

Realised that to use this blog more effectively I am going to have to learn some HTML stuff also, especially if i want to incorporate sketch examples into my posts.

Now I know how to get a sketch working in the post but I do not understand HTML and I do not really like copy and pasting stuff without understanding it. Plus what will I do when something goes wrong?

Some links to some HTML info at the top for me to trawl through (or you, if you aren't me reading this)

First step will be to get links working, so if you see clickable links in my posts then I have achieved this at least :D

Audoballs: Creating a display area

so the first thing i want to do is create a display area in Processing. This is very easy and is accomplished simply by writing.

void setup() {
size(320, 200);
background(255);
}

That does nothing other than create a white area that is 320 pixels by 200 pixels.

void means it returns no result. Its kind of a funny concept. Best understanding of it I have so far is that it just means do this but don't return a value.

http://processing.org/discourse/yabb2/YaBB.pl?num=1114658331/5

Some people discussing it in that forum post, some links to help understand it in there.

setup() is called only once when the program is started and it defines initial properties for the sketch such as the screen size(display area), background colour etc.

size() is pretty self explanatory, it defines the dimensions of the display area in pixels.

background() is the colour of the background, I set it to white so that the blank area is clearly seen.

So I have accomplished my first step, I have an area in which to make my balls bounce!

Result:

Project X: Audoballs - Bouncing balls with sound!

So my first quest is trying to get something I want to make working in processing. I decided I wanted to make some bouncing balls that play musical notes as they bounce. I figure if I get it working correctly then I might try and make it output something interesting also! (like make it generate a random ambient song or something).

My first port of call is trying to separate the elements of what will be in the sketch. Hopefully this will help to make it easier to create it. For this I just got a piece of paper and jotted down the occasionally random thoughts I had on it.

So I figured the basic elements I want are:

A display area for the ball to bounce around.

A ball/ Multiple balls.

A way of deciding where the ball is and converting that into a range of values. (range of values would probably be the pitch values that correspond to a scale)

I then need a function (not sure what the correct description would be) that moves the ball around.

A function that tells the ball to reverse direction (bounce) when it hits the sides of the display area. This would probably incorporate the midi note on also.

I believe the correct way for me to make the balls is to create a class that describes it and then I can, I believe, create as many balls as I want from that template.