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: 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.

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'>
"

Processing: Bouncing Sound Ball

So I decided that the first thing I wanted to make in processing (after mucking around a bit) was a musical bouncing ball.

The first problem that I came across was that processing doesn't support midi. Not as standard anyway. After feeling sad for a little while, I did a bit of research and found out that you can extend the functionality (dunno if thats the correct way of describing it) of the core programme with user created and shared libraries.

There are several midi libraries available, but so far the one I have had most success with is The midi bus. Which, if you are interested, can be found here:
Smallbutdigital.com

All you have to do (for MAC OSX anyway, as that is what I use) is create a folder called libraries in your processing sketchbook, and extract the files to that location. (USER/DOCUMENTS/PROCESSING is the default folder, although you can check it/change it under processing>preferences)

Processing

Processing is a program I have started to use recently. It is 'an open source programming language and environment for people who want to create images, animations, and interactions.' I started using it because I am interested in learning to program and I was informed this would be a good place to start learning about it.

I have a few ideas to try and create in it and i shall write about them and post on here as I do them and encounter problems. That way, if I forget my own solutions, I can come back here and teach myself again :D

The first thing I am going to try and create is an animation of a bouncing ball that plays a musical note when it bounces.

Link for Processing