Instantly share code, notes, and snippets.

# oguzgelal/toptal-p5-example.pde

Created Nov 22, 2015
 /* * 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 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); } ``````
Owner Author

### oguzgelal commented Jun 18, 2020

 @pmsoares Looks good!