updated-sketch.js

var d;

var dots = [];
var increment2 = 0.001;

function setup() {
  createCanvas(windowWidth, windowHeight);
  // LM: use double for loops to create a grid to determine x and y positions
  for (var i=0; i<10; i++) {
    for (var j=0; j<10; j++) {
      dots.push(new ball(i*50, j*50));
    }
  }
}

function windowResized(){
  resizeCanvas(windowWidth,windowHeight);
}


function draw() {
  
  // // if (mouseX = 0){
  // displayPage1();
  // }
  // if (mouseX = 10){
  displayPage2();
  // }
}
 
// // Page1
// function displayPage1() {
//   background(0, 25);
//   ball();
//   move();
//   glow();
// }
// function ball() {
//   fill(0, 230, 200);
//   noStroke();
//   ellipse(windowWidth/2, windowHeight/2, 30 + increment, 30 + increment);
// }
// function move (){
//   increment = increment + 1.8;
// }
// function glow (){
//   if (increment > rangeMax){
//     increment = increment - 70;
// }
// }

// Page2
function displayPage2() {
  background(0, 25);
  for (var i=0; i<dots.length; i++) {
    dots[i].move();
    dots[i].display();
  }
    
    if (mouseIsPressed){ 
      for (var i=0; i<dots.length; i++) {
      dots[i].explode();
      dots[i].display();
      }
    }
}

// LM: change function to take two arguments x and y, instead of assigning random values
function ball(x, y) {
  
  this.x = x;
  this.y = y;
  this.diameter = random(5, 30);
  this.speed = 1;
  
  this.move = function() {
    this.diameter = random(5, 30);
  };

  this.display = function() {
    fill(0, 230, 200);
    noStroke();
    ellipse(this.x, this.y, this.diameter, this.diameter);
  };
  
  this.explode = function() {
    this.diameter = 5 + increment2;
    increment2 = increment2 + 0.01;
  };
  
}