Bouncing Ball Array

http://itp.jscottdutcher.com/ball_array/

I wanted to make a whole bunch of bouncing balls, so that eventually I can add them back into the pong game. I ran into a couple of problems

Too many circles:

I banged my head against this one for a while, until I remembered that we actually did a bouncing ball example in class. I pulled up that code and compared it to mine. Turns out I was creating circles in draw as well as setup, so I was getting way more circles than I wanted. I removed that line of code and everything was good

Balls disappear:

I added some acceleration to the balls, so after they hit the ‘walls’ they would go faster. After I did this the balls would eventually disappear. Maybe they were going faster than the frame rate?

Stuff that would be cool to add to bouncing balls:

• Balls bounce off each other.
• Balls are added every second, rather than all at once.

Working with Jesse’s code. 

http://itp.jscottdutcher.com/bouncing_peeps/

Jesse sent me the code for his evil peeps, so I added my bouncing and moving code to the peeps. I’m sure that there’s a lot in the code that doesn’t need to be, since my method was basically to paste in his code and then delete things until it worked correctly. That basically worked.

My bouncing ball code:

var circles = [];
//var circle;

function setup() {
  createCanvas(1000, 700);

  for (var i = 0; i <= 100; i++) {
    circles[i] = new Ball();

    //circles[i].move();
    //circles[i].display();
  }


}

function draw() {
  background(64, 161, 76);

  //if (millis() < 5000){
  fill(198, 237, 44);
  for (var i = 0; i <= 100; i++) {
    //circles[i] = new Ball();
    circles[i].move();
    circles[i].display();
    circles[i].bounce();
    print("check");
    print(circles.length);
    //}

  }


  /*for (var i = 0; i < 100; i++) { circles[i].move(); circles[i].display(); }*/ } function Ball() { this.xpos = random(width); this.ypos = random(height); this.xdir = random (-5, 5); this.ydir = random (-5, 5); this.display = function() { noStroke(); ellipse(this.xpos, this.ypos, 20, 20); } this.move = function() { this.xpos = this.xpos + this.xdir; this.ypos = this.ypos + this.ydir; } this.bounce = function() { if (this.xpos >= width || this.xpos <= 0) { this.xdir = this.xdir * -1 } if (this.ypos >= height || this.ypos <= 0) {
      this.ydir = this.ydir * -1
    }
}
}