Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
* 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).
void draw() {
// Set the background to white at each loop, so that
// balls doesn't leave a mark behind.
// Set the strokes of the ball to black
// Set the ellipseMode to CENTER so all the balls could
// be aligned from the 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.
// This method fires when the mouse is released.
void mouseReleased() {
// This method call sets the balls position to its initial.
* 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.