Particleengine with sound DSDN 142 Creative Coding
A Bouncing Ball
int ballW = 16; int ballH = 16; float ballXPos = 0; float ballYPos = 0; float ballYSpeed = 0; void setup() { size(500,500); ballXPos = random(0, width); } void draw() { background(127); fill(255,0,0); ellipse(ballXPos, ballYPos, ballW, ballH); ballYPos += ballYSpeed; ballYSpeed += 1; if (ballYPos > height) { ballYPos = height; ballYSpeed = -random(4,30); } }
From these variables we can say that a ball has a width, height, x position, y position and a y speed
Particleengine with sound DSDN 142 Creative Coding
What is a Ball? (pg 1) int ballW; int ballH; float ballXPos; float ballYPos; float ballYSpeed; Is a bunch of data
Particleengine with sound DSDN 142 Creative Coding
What is a Ball? (pg 2) ellipse(ballXPos, ballYPos, ballW, ballH); ballYPos += ballYSpeed; ballYSpeed += 1; if (ballYPos > height) { ballYPos = height; ballYSpeed = -random(4,30); }
Code that manipulates that data
Particleengine with sound DSDN 142 Creative Coding
Our Problems I want lots of things/objects I don't want to type out lots of code I want to write out code and data for one Ball and I want other Balls to be based off that
Laziness is one of a programmer's best qualities!
Particleengine with sound DSDN 142 Creative Coding
PROBLEM: I want more Balls int ballW; int ballH; float ballXPos; float ballYPos; float ballYSpeed;
int ball4W; int ball4H; float ball4XPos; float ball4YPos; float ball4YSpeed;
int ball2W; int ball2H; float ball2XPos; float ball2YPos; float ball2YSpeed;
int ball5W; int ball5H; float ball5XPos; float ball5YPos; float ball5YSpeed;
int ball3W; int ball3H; float ball3XPos; float ball3YPos; float ball3YSpeed;
int ball6W; int ball6H; float ball6XPos; float ball6YPos; float ball6YSpeed;
int ball7W; int ball7H; float ball7XPos; float ball7YPos; float ball7YSpeed;
the code that manipulates this looks much worse!
Particleengine with sound DSDN 142 Creative Coding
Solution to the data problem int ballW; int ballH; float ballXPos; float ballYPos; float ballYSpeed;
class Ball { int w; int h; float xPos; float yPos; float ySpeed; }
We need to make our own variable type, in fact we're going to make a Ball type. (There are other types out there: int, float, String, Color)
Particleengine with sound DSDN 142 Creative Coding
Slightly Improved Bouncing Ball class Ball {
void draw() {
background(255); fill(255,0,0); ellipse(ball1.xPos, ball1.yPos, ball1.w, ball1.h); ball1.yPos += ball1.ySpeed; ball1.ySpeed += 1; if (ball1.yPos > height) { ball1.yPos = height; ball1.ySpeed = -random(4,30); }
int w; int h; float xPos; float yPos; float ySpeed; } Ball ball1;
void setup()
}
{
}
size(500,500); ball1 = new Ball(); ball1.xPos = random(0, width); ball1.w = 16; ball1.h = 16;
Particleengine with sound DSDN 142 Creative Coding
PROBLEM: lots of code needed class Ball {
}
void draw() {
int w = 16; int h = 16; float xPos; float yPos; float ySpeed;
Ball ball1; Ball ball2;
void setup() {
}
size(500,500); ball1 = new Ball(); ball1.xPos = random(0, width); ball2 = new Ball(); ball2.xPos = random(0, width);
}
background(255); fill(255,0,0); ellipse(ball1.xPos, ball1.yPos, ball1.w, ball1.h); ball1.yPos += ball1.ySpeed; ball1.ySpeed += 1; if (ball1.yPos > height) { ball1.yPos = height; ball1.ySpeed = -random(4,30); } ellipse(ball2.xPos, ball2.yPos, ball2.w, ball2.h); ball2.yPos += ball2.ySpeed; ball2.ySpeed += 1; if (ball2.yPos > height) { ball2.yPos = height; ball2.ySpeed = -random(4,30); }
yuck, disgusting and inefficient
Particleengine with sound DSDN 142 Creative Coding
Solution to the code problem class Ball {
int w = 16; int h = 16; float xPos; float yPos; float ySpeed;
void drawball(Ball myball) {
} Ball ball1; Ball ball2; Ball ball3;
void setup() {
}
fill(255,0,0); ellipse(myball.xPos, myball.yPos, myball.w,myball.h); myball.yPos += myball.ySpeed; myball.ySpeed += 1; if (myball.yPos > height) { myball.yPos = height; myball.ySpeed = -random(4,30); }
}
size(500,500); ball1 = new Ball(); ball1.xPos = random(0, width); ball2 = new Ball(); ball2.xPos = random(0, width); ball3 = new Ball(); ball3.xPos = random(0, width);
void draw() {
}
background(255); drawball(ball1); drawball(ball2); drawball(ball3);
clean and abstract
Particleengine with sound DSDN 142 Creative Coding
PROBLEM: I want TONS of balls void draw() {
background(255); drawball(ball1); drawball(ball2); drawball(ball3); drawball(ball4); drawball(ball5); drawball(ball6); drawball(ball7);
drawball(ball8); drawball(ball9); drawball(ball10); drawball(ball11); drawball(ball12); drawball(ball13); [sic] drawball(ball41); drawball(ball15); drawball(ball16); drawball(ball17); drawball(ball18);
}
drawball(ball19); drawball(ball20); drawball(ball21); drawball(ball22); drawball(ball23); drawball(ball24); drawball(ball25); drawball(ball23); drawball(ball27); drawball(ball28); drawball(ball29); drawball(ball30); drawball(ball31); drawball(ball32); drawball(ball33); drawball(ball34);
too much duplication
Particleengine with sound DSDN 142 Creative Coding
Enter the Array We need a system that manages and can hold lots of variables. Access to the variables should be easy. An Array is a type of variable that does this for us.
Particleengine with sound DSDN 142 Creative Coding
A Shopping List Shopping List 1.Avocado 2.Toilet Paper 3.Raisins 4.Spam 5.Marmite 6.Watermelon 7.Tomatoes 8.Noodles 9.Tooth paste
Pretend we're going to get groceries with a shopping list that works like a whiteboard. Then, we can manipulate this shopping list in different ways: We can add an item to it We can remove an item from it We can find out the size of it We can get information from it We can clear it And probably more...
Particleengine with sound DSDN 142 Creative Coding
An ArrayList ArrayList 0. redball 1. myball 2. yellowball 3. greenball 4. ball001 5. violetball 6. ball005 7. dragonball 8. ball003
In Processing we have something called an ArrayList. This is basically just a type of variable that we can add other variables to. Example code: ArrayList balls = new ArrayList(); balls.add(redball); balls.add(myball); balls.add(greenball); balls.add(new Ball()); balls.remove(myball); balls.size(); balls.get(0); balls.get(3); balls.clear();
Particleengine with sound DSDN 142 Creative Coding
ArrayList Procedures .add(variable) – adds a variable to the list .get(int) - gets an object on the list at that position .remove(variable) – removes that variable from the list .clear() - removes all variables from the list .size() - tells us how many items are in the list .indexOf(variable) - what is the position of the object on the list?
There are more! Check out http://java.sun.com/j2se/1.5.0/docs/api/java/util/ArrayList.html
Particleengine with sound DSDN 142 Creative Coding
The Ultimate Bouncing Balls class Ball {
}
void setup()
}
{
int w = 16; int h = 16; float xPos; float yPos; float ySpeed;
ArrayList balls = new ArrayList();
{
void draw()
}
background(255); fill(255,0,0); for (int ii=0; ii<balls.size(); ii = ii + 1) { Ball ball = (Ball)balls.get(ii); drawball(ball); }
void drawball(Ball myball) {
size(500,500); for (int ii = 0; ii<20; ii=ii+1) { Ball ball1 = new Ball(); ball1.xPos = random(0, width); balls.add(ball1); } }
ellipse(myball.xPos, myball.yPos, myball.w, myball.h); myball.yPos += myball.ySpeed; myball.ySpeed += 1; if (myball.yPos > height) { myball.yPos = height; myball.ySpeed = -random(4,30); }
Particleengine with sound DSDN 142 Creative Coding
Moving through the ArrayList: for (int ii=0; ii<balls.size(); ii = ii + 1) { Ball ball = (Ball)balls.get(ii); drawball(ball); }
OR for (int ii=balls.size()-1; ii>=0; ii = ii - 1) { Ball ball = (Ball)balls.get(ii); drawball(ball); }
*****************************
Particleengine with sound DSDN 142 Creative Coding
Adding individual sounds to each ball A common problem people have is that they want to add sound to each ball seperately. This is easily achieved by adding an audioplayer variable to the ball class! This means each individual ball now contains its own sound variable and you can now load a different sound into every ball.
class Ball {
}
int w = 16; int h = 16; float xPos; float yPos; float ySpeed; AudioPlayer sound;
Particleengine with sound DSDN 142 Creative Coding
Loading in the sounds class Ball {
}
int w = 16; int h = 16; float xPos; float yPos; float ySpeed;
ArrayList balls = new ArrayList();
void setup() {
AudioPlayer sound;
size(500,500); for (int ii = 0; ii<20; ii=ii+1) { Ball ball1 = new Ball(); ball1.xPos = random(0, width); balls.add(ball1); }
for (int ii=0; ii<balls.size(); ii = ii + 1) { Ball ball = (Ball)balls.get(ii); ball.sound = minim.loadFile(ii+".wav"); }
}
This example assumes that there are 20 sound files in your data folder named “0.wav”, “1.wav”, “2.wav” etc etc... up until “19.wav”
Particleengine with sound DSDN 142 Creative Coding
Interacting with the balls Once we have a whole heap of balls we need some method of interacting with them to play the sounds they contain. This function gives the ability to click on an individual ball to play it's sound.
void mousePressed() { for (int ii=0; ii<balls.size(); ii = ii + 1) { Ball ball = (Ball)balls.get(ii); if(dist(mouseX, mouseY, ball.xPos, ball.yPos) < ball.w/2.0) ball.sound.loop(0); } } The if statement here merely asks if the mouse is â&#x20AC;&#x153;overâ&#x20AC;? this ball when the mouse is pressed. It asks ALL the balls this same question. If it IS over any of them it plays the corresponding sound.
Particleengine with sound DSDN 142 Creative Coding
Exercise See if you can go through this presentation and put all the code together into a working application. There should be 20 balls each with a seperate sound, and when you click on one it plays that ball's sound. (no answer is given as all you need is contained in this presentation)