The Processing (http://www.processing.org) Programming/Scripting language is so powerful that it can achieve many many stuffs using just a few lines of code.
The Processing is ideal for Computer Graphics/Animation. It can be also used to make games quick. It is based on Java, so it is a interpreting language unlike C/C++. Computer Science/Arts students often use Processing in data plotting, arts sketching etc.
In this coding exercise using Processing, I am going to show you how to animate a few balls. To define the balls, you can use arrays.
1 2 3 4 5 6 7 8 | // the number of balls final int NUM_OF_BALLS = 64; // ball coordinates float ball_x[] = new float[NUM_OF_BALLS]; float ball_y[] = new float[NUM_OF_BALLS]; // ball moving directions. float ball_dx[] = new float[NUM_OF_BALLS]; float ball_dy[] = new float[NUM_OF_BALLS]; |
// the number of balls final int NUM_OF_BALLS = 64; // ball coordinates float ball_x[] = new float[NUM_OF_BALLS]; float ball_y[] = new float[NUM_OF_BALLS]; // ball moving directions. float ball_dx[] = new float[NUM_OF_BALLS]; float ball_dy[] = new float[NUM_OF_BALLS];
Then we can set the balls up in the initialization function (setup()).
1 2 3 4 5 6 7 8 9 | void setup() { size(WIDTH, HEIGHT); for (int i = 0; i < NUM_OF_BALLS; i ++) { ball_x[i] = random(0, WIDTH); ball_y[i] = random(0, HEIGHT); ball_dx[i] = random(-3, 3); ball_dy[i] = random(-3, 3); } } |
void setup() {
size(WIDTH, HEIGHT);
for (int i = 0; i < NUM_OF_BALLS; i ++) {
ball_x[i] = random(0, WIDTH);
ball_y[i] = random(0, HEIGHT);
ball_dx[i] = random(-3, 3);
ball_dy[i] = random(-3, 3);
}
}Then when the animation starts (on each frame), then we can move each ball according to their moving direction and check the boundary accordingly.
1 2 3 4 5 6 7 8 9 10 11 12 | void draw() { background(0); for (int i = 0; i < NUM_OF_BALLS; i ++) { ellipse(ball_x[i], ball_y[i], BALL_SIZE, BALL_SIZE); ball_x[i] += ball_dx[i]; ball_y[i] += ball_dy[i]; if (ball_x[i] >= WIDTH - BALL_SIZE) ball_dx[i] = -ball_dx[i]; if (ball_y[i] >= HEIGHT - BALL_SIZE) ball_dy[i] = -ball_dy[i]; if (ball_x[i] <= BALL_SIZE) ball_dx[i] = -ball_dx[i]; if (ball_y[i] <= BALL_SIZE) ball_dy[i] = -ball_dy[i]; } } |
void draw() {
background(0);
for (int i = 0; i < NUM_OF_BALLS; i ++) {
ellipse(ball_x[i], ball_y[i], BALL_SIZE, BALL_SIZE);
ball_x[i] += ball_dx[i];
ball_y[i] += ball_dy[i];
if (ball_x[i] >= WIDTH - BALL_SIZE) ball_dx[i] = -ball_dx[i];
if (ball_y[i] >= HEIGHT - BALL_SIZE) ball_dy[i] = -ball_dy[i];
if (ball_x[i] <= BALL_SIZE) ball_dx[i] = -ball_dx[i];
if (ball_y[i] <= BALL_SIZE) ball_dy[i] = -ball_dy[i];
}
}The entire source code is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // helloacm.com final int WIDTH = 500; final int HEIGHT = 450; final int NUM_OF_BALLS = 64; final int BALL_SIZE = 20; float ball_x[] = new float[NUM_OF_BALLS]; float ball_y[] = new float[NUM_OF_BALLS]; float ball_dx[] = new float[NUM_OF_BALLS]; float ball_dy[] = new float[NUM_OF_BALLS]; void setup() { size(WIDTH, HEIGHT); for (int i = 0; i < NUM_OF_BALLS; i ++) { ball_x[i] = random(0, WIDTH); ball_y[i] = random(0, HEIGHT); ball_dx[i] = random(-3, 3); ball_dy[i] = random(-3, 3); } } void draw() { background(0); for (int i = 0; i < NUM_OF_BALLS; i ++) { ellipse(ball_x[i], ball_y[i], BALL_SIZE, BALL_SIZE); ball_x[i] += ball_dx[i]; ball_y[i] += ball_dy[i]; if (ball_x[i] >= WIDTH - BALL_SIZE) ball_dx[i] = -ball_dx[i]; if (ball_y[i] >= HEIGHT - BALL_SIZE) ball_dy[i] = -ball_dy[i]; if (ball_x[i] <= BALL_SIZE) ball_dx[i] = -ball_dx[i]; if (ball_y[i] <= BALL_SIZE) ball_dy[i] = -ball_dy[i]; } } |
// helloacm.com
final int WIDTH = 500;
final int HEIGHT = 450;
final int NUM_OF_BALLS = 64;
final int BALL_SIZE = 20;
float ball_x[] = new float[NUM_OF_BALLS];
float ball_y[] = new float[NUM_OF_BALLS];
float ball_dx[] = new float[NUM_OF_BALLS];
float ball_dy[] = new float[NUM_OF_BALLS];
void setup() {
size(WIDTH, HEIGHT);
for (int i = 0; i < NUM_OF_BALLS; i ++) {
ball_x[i] = random(0, WIDTH);
ball_y[i] = random(0, HEIGHT);
ball_dx[i] = random(-3, 3);
ball_dy[i] = random(-3, 3);
}
}
void draw() {
background(0);
for (int i = 0; i < NUM_OF_BALLS; i ++) {
ellipse(ball_x[i], ball_y[i], BALL_SIZE, BALL_SIZE);
ball_x[i] += ball_dx[i];
ball_y[i] += ball_dy[i];
if (ball_x[i] >= WIDTH - BALL_SIZE) ball_dx[i] = -ball_dx[i];
if (ball_y[i] >= HEIGHT - BALL_SIZE) ball_dy[i] = -ball_dy[i];
if (ball_x[i] <= BALL_SIZE) ball_dx[i] = -ball_dx[i];
if (ball_y[i] <= BALL_SIZE) ball_dy[i] = -ball_dy[i];
}
}With the Processing JS project (http://processingjs.org), you can view the demo https://helloacm.com/processing/balls/ in the modern browser e.g. Chrome.
Although this animation is made using just arrays to represent the balls, it would be better to define classes for each ball. The OOP (Object Oriented Programming) concept is also supported in Processing.
–EOF (The Ultimate Computing & Technology Blog) —
loading...
Last Post: PHP Function to Post to Twitter
Next Post: Tutorial 8 – C Programming in 6502 – Sprites
