​

class Bubble{

  constructor(_x,_y) {

    this.pos = createVector(_x,_y);

    this.history = [];

  }

  move() {

    let v = createVector(random(-15,15),random(-15,15));

    // add variation to original position

    this.pos.add(v);

    this.history.push(createVector(this.pos.x,this.pos.y));

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

      this.history[i].x += random(-2,2);

      this.history[i].y += random(-2,2);

    }

    if(this.history.length >50){

      this.history.splice(0,1);

    }

  }

  display(){

​

  fill(100);  

    ellipse(this.pos.x,this.pos.y, 15);

  }

  showTrail(){

    noFill();

    beginShape();

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

      vertex(this.history[i].x,this.history[i].y); 

    }

    endShape();

  }

}

​

let b1;

function setup() {

  createCanvas(800, 800);

  b1 = new Bubble(width/2,height/2);

}

​

function draw() {

  background(220);

  b1.move();

  b1.display();

  b1.showTrail();

}