​

function setup() {

  createCanvas(400, 400);

  background(42);

}

​

// In modern JavaScript we can declare a class Bubble

// The class Bubble can create many copies of itself and

// as in this example it can take information from the user to 

// add different properties to each object

class Bob {

  // The constructor function within the class can take information

  // In this case it receives the value r, representing the desired radius

  // It has other two properties x and y

  constructor(r){

    this.x = mouseX;

    this.y = mouseY;

    this.r = r;

  }

  show(){

    circle(this.x, this.y, this.r);

  }

  move(){

    this.x += random(-1,1);

    this.y += random(-1,1);

  }

}

​

function draw() { 

  // A different way of using loops in modern JavaScript

  for(let bob of arr){

    bob.show();

    bob.move();

  }

}

​

function mousePressed() {

  // Each time the user presses the mouse on the canvas

  // a new object Bob is created and it receives a random value between 5 and 30 as its r (radius)

  let bob = new Bob(random(5,30));

  arr.push(bob);

}

​