​

let generatedColor;

let circles = [];

let count = 0;

​

class CircleStruct {

  constructor(x, y) {

    this.x = x || random(width);

    this.y = y || random(height);

    this.color = randomColor();

    this.radius = random(250);

    this.xInc = random(-5, 5);

    this.yInc = random(-5, 5);

  }

​

  bounceCheck() {

    if (this.x < 0 || this.x > width) {

      this.xInc = -this.xInc;

    }

​

    if (this.y < 0 || this.y > height) {

      this.yInc = -this.yInc;

    }

  }

​

  step() {

    this.x += this.xInc;

    this.y += this.yInc;

​

    this.bounceCheck();

  }

​

  draw() {

    stroke(this.color.r, this.color.g, this.color.b);

    fill(this.color.r, this.color.g, this.color.b, 127);

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

    this.step();

  }

}

//

function setup() {

  createCanvas(windowWidth, windowHeight);

​

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

    circles.push(new CircleStruct);

  }

}

​

function draw() {

  count++;

  background(51);

  strokeWeight(2);

​

  circles.forEach(circ => {

    circ.draw();

  });

​

  fill(255);

  textSize(32);

  textAlign(CENTER);

  let textY = (height/2) + (sin(count/10) * 150);

  text('c l i c k  for  b a l l o o n s', width/2, textY);

}

​

// Util functions;

function randomColor() {

  return {

    r: random(255),

    g: random(255),

    b: random(255)

  }

}

// When the user clicks the mouse

function mousePressed() {

  circles.push(new CircleStruct(mouseX, mouseY));

  return false;

}

​

// When the user clicks the mouse

function touchStarted() {

  circles.push(new CircleStruct(mouseX, mouseY));

  return false;

}

​