Dark bubbles with the lights on

This is the link that will open in a new page. Just move the cursor over the canvas.

let bubbles = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  for(let i = 0; i < 1500; i++){
    x = random(width)
    y = random(height)
    z = 50
    let b = new Bubble(x, y, z)
    bubbles.push(b)
  }
}

function draw() {
  background(220);
  for(let i = 0; i < bubbles.length; i++){
    bubbles[i].moves()
    bubbles[i].shows()
    if(bubbles[i].contains(mouseX, mouseY)){
      bubbles[i].changeColors(255)
    } else {
      bubbles[i].changeColors(0)
    }
  }
  
}

class Bubble {
  constructor(x, y, z){
    this.x = x;
    this.y = y;
    this.z = z;
    this.brightness = 0;
  }
  
  moves(){
    this.x = this.x + random(-2, 2)
    this.y = this.y + random(-2, 2)
  }
  
  shows(){
    fill(this.brightness, 125)
    stroke('white')
    ellipse(this.x, this.y, this.z, this.z)
  }
  
  changeColors(bright){
    this.brightness = bright;
    
  }
  
  contains(xx, yy){
    let a = dist(this.x, this.y, xx, yy)
    if(a < this.z){
      return true;
    } else {
      return false;
    }
  }
}

Leave a Reply