nick34992
4/19/2016 - 3:50 PM

Blue Bubble Click Drag. Using p5.js library.

Blue Bubble Click Drag. Using p5.js library.

// based on Shiffman's original version
var bl = [];

function setup(){
  createCanvas(1152, 648);
}

function mouseDragged(){
  bl.push(new Ball(mouseX, mouseY));
}

function draw(){
  background(0);
  for (var i = 0; i < bl.length; i++){
    bl[i].move();
    bl[i].display();
  }
  if (bl.length > 500){
    bl.splice(0, 1);
  }
  textSize(20);
  fill(50);
  text('Click and Drag Across Canvas', 20, 40);
  frameRate(10);
}

function Ball(x, y){
  this.x = x;
  this.y = y;
  this.display = function(){
    stroke(0, 0, 170);
    strokeWeight(2);
    fill(0, 0, 255, 100);
    ellipse(this.x, this.y, 50, 50);
  }

  this.move=function(){
    this.x = this.x + random(-10, 10);
    this.y = this.y + random(-10, 10);
  }
}