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

Blogger and Processing

I have found that i can create stuff in processing and post them on to the blog, this is good, it means I will be able to post examples with my notes etc XD.

You do it using processingjs wich can be found at processingjs.org.

You can either have the processing.js file on your server or you can load it from the application website. I got the example moving circle below along with the code/script used.

The script I used (copy and pasted from Link) is as follows:

< script type="application/processing" >
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

void setup(){
size( 200, 200 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = width / 2;
nX = X;
nY = Y;
}

void draw(){
radius = radius + sin( frameCount / 4 );
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
background( 100 );
fill( 0, 121, 184 );
stroke(255);
ellipse( X, Y, radius, radius );
}

void mouseMoved(){
nX = mouseX;
nY = mouseY;
}

< canvas width="320" height="240">
< script src='http://processingjs.org/source/current/pjs-init.js'>
"