Gravity v.2 – Multiple, independently moving balls

For this week’s project, I wanted to make my bouncing ball project from last week more complex. Initially, the concept I had in mind involved creating a new independent ball each time the user clicked the mouse. This seems like it is too complicated for the current tools at my disposal, but even if not I could not figure out exactly how to do it. Instead, I figured I’d have a set number of balls each moving independently. This seemed doable, and once the code was all finished it only took an additional 3 lines to add another ball to the mix. In this way, it would be fairly easy to create 10, 20, 50 or 100 balls that all move independently.

At first, I was trying to construct the code without objects, but soon realized I would definitely need to create each ball as a separate instance of a ball() function. It took a lot of trial and error to realize that much of the work was simply restructuring my existing code within a function, replacing variables used for a single ball with this.[variable]. I also had to work through nesting functions within ball to move and draw them without having their position reset every frame.

I wish I had more documentation this week, but it was mostly just working through the process of making an existing sketch more complex.

See the sketch here

function preload() {
 font = loadFont("HVD_Bodedo.ttf");
}
function setup() {
 createCanvas(windowWidth,windowHeight);
 //assign starting variables by calling ball() function
 ball1 = new ball();
 ball2 = new ball();
 ball3 = new ball();
 ball4 = new ball();
 ball5 = new ball();
}
function draw() {
 background('rgba(62,172,177,0.04)');
 //call the move() and display() functions within ball() for each
 ball1.move();
 ball1.display();
 ball2.move();
 ball2.display();
 ball3.move();
 ball3.display();
 ball4.move();
 ball4.display();
 ball5.move();
 ball5.display();
 buttons(); //function to draw button and instructions
}
function ball() {
 //give each ball unique starting variables
 this.x = width/2;
 this.y = height/2;
 this.r = random(255);
 this.g = random(255);
 this.b = random(255);
 this.gravDir = random(1);
 this.xVel = random(-4,4);
 this.yVel = random(-4,4);
 this.grav = random(-3,3);
 this.move = function() {  //called to update position, velocity, and acceleration of balls
 //checking to ensure balls are within canvas
 if (this.x >= width-15) {
   this.x = width-15;
   this.xVel = this.xVel * -1;
 }
 if (this.x <= 15) {
   this.x = 15;
   this.xVel = this.xVel * -1;
 }
 if (this.y >= height-15) {
   this.y = height-15;
   this.yVel = this.yVel * -1;
 }
 if (this.y <= 15) {
   this.y = 15;
   this.yVel = this.yVel * -1;
 }
 //change a ball's color each time it hits an edge
 if (this.x >= width-15 || this.x <= 15 || this.y >= height-15 || this.y <= 15) {
   this.r = random(255);
   this.g = random(255);
   this.b = random(255);
 }
 //based on direction of gravity for each ball, update velocity relative to each ball's gravity
 if (this.gravDir <= .5) {
   this.yVel = this.yVel + this.grav;
 } else {
   this.xVel = this.xVel + this.grav;
 }
 //update each ball's position relative to velocity
 this.x = this.x + this.xVel;
 this.y = this.y + this.yVel;
 //if button is pressed, assign new randomized gravity values
 //otherwise, change positions of balls to mouse position without changing anything else
 if (mouseIsPressed && mouseX >= 30 && mouseX <= 190 && mouseY >=30 && mouseY <= 130) {
   this.grav = this.grav + random(-.3,.3) * -1
   this.gravDir = random(1);
 } else if (mouseIsPressed) {
     if (this.gravDir <= .5) {
       this.yVel = this.yVel - this.grav
       this.x = mouseX;
       this.y = mouseY;
 }
     if (this.gravDir > .5) {
       this.xVel = this.xVel - this.grav
       this.x = mouseX;
       this.y = mouseY;
 }
 }
 }
 this.display = function() {  //called to draw each ball
 strokeWeight(4);
 fill(this.r,this.g,this.b);
 ellipse(this.x,this.y,50,50);
 }
}
//creates a background without transparency when either shift key is pressed
function keyPressed() {
 if(keyCode === SHIFT) {
   background(68,156,152);
 }
}
function buttons() {
 //draw button
 strokeWeight(4);
 fill(40,40,60)
 rect(33,33,160,100);
 fill (152, 200, 224);
 rect(30,30,160,100);
 fill(40,40,60);
 textFont(font);
 textSize(42);
 text("PUSH",38,100);
 //draw instructions
 strokeWeight(4)
 fill (152,200,224);
 stroke(152,200,224);
 rect(30,170,425,100);
 strokeWeight(0);
 stroke(0,0,0);
 fill(40,40,60);
 textSize(18);
 text("* Click button to change gravity",35,200);
 text("* Click anywhere to adjust positions",35,230);
 text("* Hold down shift to remove tails",35,260);
}

Leave a Reply

Your email address will not be published.