​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(0);

  for(let i = 0; i < blobe.length; i++){

    blobe[i].move();

    blobe[i].bounce();

    blobe[i].display();

  }

}

​

function mouseClicked(){

  let diameter = random(20, 100);

  let position = createVector(mouseX, mouseY);

  let velocity = createVector(random(-2, 2), random(-2, 2));

  let blobeColor = color(random(255), random(255), random(255), 127);

  blobe.push(new Blobe(diameter, position, velocity, blobeColor));

}

​

​

class Blobe {

  constructor(diameter, position, velocity, blobeColor){

    this.diameter = diameter;

    this.position = position;

    this.velocity = velocity;

    this.blobeColor = blobeColor;

    this.speed = random(0.1, 0.3);

  }

  move(){

    this.position.add(this.velocity);

  }

  bounce(){

    if (this.position.x < this.diameter / 2 || this.position.x > width - this.diameter / 2){

      this.velocity.x *= -1;

    }

   if (this.position.y < this.diameter / 2 || this.position.y > height - this.diameter / 2){

      this.velocity.y *= -1;

    }

  }

  display(){

    noStroke();

    fill(this.blobeColor);

    let currentDiameter = sin(frameCount * this.speed) * (this.diameter / 4) + this.diameter;

    circle(this.position.x, this.position.y, currentDiameter);

    fill(255);

    circle(this.position.x, this.position.y, this.diameter / 6.0);  

  }

}

​

​

​

​

​

​

​