Skip to content

Instantly share code, notes, and snippets.

Embed
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).
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;
}
@pmsoares

This comment has been minimized.

Copy link

pmsoares commented Jun 18, 2020

Hi.
I've implemented this code with OOP.

class Ball {
   color c;
   float x, y, w, h;
   float s;

   Ball(color c, float w, float h, float s) {
      this.c = c;
      this.w = w;
      this.h = h;
      this.s = s;
   }

   void setX(float x) {
      this.x = x;
   }

   void setY(float y) {
      this.y = y;
   }

   float getX() {
      return x;
   }

   float getY() {
      return y;
   }

   float getSpeed() {
      return s;
   }

   void drawBall() {
      stroke(0);
      fill(c);
      ellipse(x, y, w, h);
   }
}

Ball b1 = new Ball(color(random(255), random(255), random(255)), 20, 20, random(10));
Ball b2 = new Ball(color(random(255), random(255), random(255)), 20, 20, random(10));
Ball b3 = new Ball(color(random(255), random(255), random(255)), 20, 20, random(10));
Ball b4 = new Ball(color(random(255), random(255), random(255)), 20, 20, random(10));

void setup() {
   size(500, 500);
   reset();
}

void draw() {
   background(255);
   b1.drawBall();
   b2.drawBall();
   b3.drawBall();
   b4.drawBall();

   if (!mousePressed) {
      b1.setX(b1.getX()+b1.getSpeed());
      b1.setY(b1.getY()+b1.getSpeed());

      b2.setX(b2.getX()-b2.getSpeed());
      b2.setY(b2.getY()+b2.getSpeed());

      b3.setX(b3.getX()+b3.getSpeed());
      b3.setY(b3.getY()-b3.getSpeed());

      b4.setX(b4.getX()-b4.getSpeed());
      b4.setY(b4.getY()-b4.getSpeed());
   }
}

void mouseReleased() {
   reset();
}

void reset() {
   b1.setX(0);
   b1.setY(0);
   b2.setX(width);
   b2.setY(0);
   b3.setX(0);
   b3.setY(height);
   b4.setX(width);
   b4.setY(height);
}
@oguzgelal

This comment has been minimized.

Copy link
Owner Author

oguzgelal commented Jun 18, 2020

@pmsoares Looks good!

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.