Step 4: Creating an array of objects using a class

 based on http://www.openprocessing.org/sketch/48960

 Interactivity:

 - mouse click: adds a circle

 Challenges:

 1 - Make each new circle have a random colour from a palette

     of colours

 2 - Limit the circles to at most 15, deleting the older circles

     when new circles are made

 3 - Change the logic in the mouse click handler to get

     a more interesting aesthetic effect with the motion / size

     of the added circles

 */

​

// Defaults

// Using 'g' to prefix the name of global variables

let gXSpeedMax = 4;

let gYSpeedMax = 7;

let gCircleSizeMin = 15;

let gCircleSizeMax = 30;

​

​

​

// create an empty array for a bunch of MovingCircle objects

let gCircleArray = [];

​

function setup() {

  console.log('setup');

  let numCircles = 10;

​

  createCanvas(400, 400);

  smooth();

  // array with them

  for (var i = 0; i < numCircles; i++) {

    // Choose the size for the new circle randomly within a range

    let circleSize = random(gCircleSizeMin, gCircleSizeMax);

    // Similarly for the speed

    let xSpeed = random(-gXSpeedMax, gXSpeedMax);

    let ySpeed = random(-gYSpeedMax, gYSpeedMax);

​

    // don't start at the edge or the ball will get stuck

    gCircleArray.push(

      new MovingCircle(

        // Choose random positions, but always onscreen

        random(circleSize, width - circleSize),

        random(circleSize, height - circleSize),

        xSpeed,

        ySpeed,

        circleSize,

        random(120)

      )

    );

  }

}

​

function draw() {

  background(0);

​

​

  // Have each circle update and draw itself

  for (var i = 0; i < gCircleArray.length; i++) {

    gCircleArray[i].update();

    gCircleArray[i].checkCollisions();

    gCircleArray[i].drawSelf();

  }

}

​

function mouseClicked() {

  // Add a circle!

  print("Adding a new MovingCircle!");

  // Create a new circle

  // Let's make the circle move towards the center

  // See https://p5js.org/reference/#/p5/map

  let xSpeed = map(mouseX, 0, height, gXSpeedMax, -gXSpeedMax);

  let ySpeed = map(mouseY, 0, height, gYSpeedMax, -gYSpeedMax);

  let circleSize = random(gCircleSizeMin, gCircleSizeMax);

  let newCircle = new MovingCircle(

      mouseX,

      mouseY,

      xSpeed,

      ySpeed,

      circleSize, 

    random(150)

  );

  // Add it to the global array of all circles

  gCircleArray.push(newCircle);

  if(gCircleArray.length > 15){gCircleArray.shift()}

}

​

function keyTyped() {

  if (key === 'c') {

    print("Clearing circles");

    gCircleArray = [];

  }

}

​

// Start with the name of the class:

class MovingCircle {

  constructor(xpos, ypos, xSpeed, ySpeed, circleSize, Ccolor ) {

    // Create instance variables from the passed parameters

    // by creating new properties of `this`

    // `this` refers to the current object in the function

    this.x = xpos;

    this.y = ypos;

    this.xSpeed = xSpeed;

    this.ySpeed = ySpeed;

    this.circleSize = circleSize;

    this.circleColor = Ccolor;

  }

​

  // Now come the functions (methods) of the class that

  // can be called. These functions describe what the

  // object can do:

  // The update() function adds the speed to the position, making

  // our circle move around:

  update() {

    this.x += this.xSpeed;

    this.y += this.ySpeed;

  }

​

  // The checkCollisions() function checks to see if our circle has gone off

  // the edge of the screen, and if so reverses the speed and hence the direction:

  checkCollisions() {

    let r = this.circleSize / 2;

    if (this.x < r || this.x > width - r) {

      this.xSpeed = -this.xSpeed;

    }

    if (this.y < r || this.y > height - r) {

      this.ySpeed = -this.ySpeed;

    }

  }

​

  // This function finally draws the circle

  drawSelf() {

    strokeWeight(random(20));

    fill(50,80,this.circleColor);

    ellipse(this.x, this.y, this.circleSize, this.circleSize);

  }

}

// End of the MovingCircle class

​