/* | |
* We define coordinate variables first. We define them | |
* here because we want them to be global. | |
*/ | |
int x1, y1; | |
int x2, y2; | |
int x3, y3; | |
int x4, y4; | |
/* | |
* We define the speed variables here. Speed variables are | |
* just integer values we add to or take from the coordinates. | |
* The larger we add or take, the faster balls will move. | |
* That's whe we call them speed. | |
*/ | |
int b1Speed=4; | |
int b2Speed=1; | |
int b3Speed=6; | |
int b4Speed=2; | |
/* | |
* We also set the rgb values for each ball as variables | |
* here. Note that if we ever want to change the color of an | |
* object, this is how we can achieve that. | |
*/ | |
int b1r=255, b1g=120, b1b=200; | |
int b2r=0, b2g=220, b2b=0; | |
int b3r=30, b3g=150, b3b=110; | |
int b4r=50, b4g=100, b4b=75; | |
void setup() { | |
size(500, 500); | |
// Call the method that sets the starting points (see below). | |
setStartingPoints(); | |
} | |
void draw() { | |
// Set the background to white at each loop, so that | |
// balls doesn't leave a mark behind. | |
background(255); | |
// Set the strokes of the ball to black | |
stroke(0); | |
// Set the ellipseMode to CENTER so all the balls could | |
// be aligned from the center. | |
ellipseMode(CENTER); | |
// Here, we set the fill of a ball and draw it. Next line, | |
// we repeat the process, set the color of the next ball and | |
// draw it again. We give the global color and coordinate | |
// varaiables instead of plain integer values like in the examples. | |
fill(b1r, b1g, b1b); | |
ellipse(x1, y1, 20, 20); | |
fill(b2r, b2g, b2b); | |
ellipse(x2, y2, 20, 20); | |
fill(b3r, b3g, b3b); | |
ellipse(x3, y3, 20, 20); | |
fill(b4r, b4g, b4b); | |
ellipse(x4, y4, 20, 20); | |
// The lines in the if block are the ones that moves the ball. | |
// This if says, "if mouse is not in a clicked state, move the | |
// ball". That's why the balls freezes when the mouse is clicked. | |
if (!mousePressed) { | |
// These lines makes the balls move. It adds the speed variables | |
// to relevant coordinates. When the coordinates change, the balls | |
// location changes. Note that whichever direction the ball goes when | |
// when we add the speed, it will go to the oposite direction when we subtract | |
// the speed. | |
x1+=b1Speed; | |
y1+=b1Speed; | |
x2-=b2Speed; | |
y2+=b2Speed; | |
x3+=b3Speed; | |
y3-=b3Speed; | |
x4-=b4Speed; | |
y4-=b4Speed; | |
} | |
} | |
// This method fires when the mouse is released. | |
void mouseReleased() { | |
// This method call sets the balls position to its initial. | |
setStartingPoints(); | |
} | |
/* | |
* Here, we defined a method for setting the starting points | |
* of the balls to their initial position. We could have used | |
* these codes instead of defining a method and calling it, | |
* but this a better practice because there are multiple places we | |
* set the balls coordinates to their initial values, at the | |
* setup and after mouse button is released. And we don't want | |
* code duplication. | |
*/ | |
void setStartingPoints() { | |
/* | |
* Note that 'width' and 'height' are global variables that | |
* stores the size of the container. In this case, both are 500 | |
*/ | |
x1=0; | |
y1=0; | |
x2=width; | |
y2=0; | |
x3=0; | |
y3=height; | |
x4=width; | |
y4=height; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment