This is the direct link. Will not work on a phone.
Click the bubbles to change their colour
Code:
let bubbles = []; function setup() { createCanvas(400, 400); for(let i = 0; i < 10; i++){ x = random(width) y = random(height) z = random(50, 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].shows() bubbles[i].moves() } //bubbles.moves() //bubbles.shows() } function mousePressed(){ for(let i = 0; i < bubbles.length; i++){ bubbles[i].clicked(mouseX, mouseY) } } class Bubble { constructor(x, y, z){ this.x = x; this.y = y; this.z = z; this.col = 0; } clicked(x, y){ let d = dist(this.x, this.y, x, y) if(d < this.z){ console.log("clickedddd") this.col = random(255) } } moves(){ //let speed = 1; this.x = this.x + random(-5, 5); this.y = this.y + random(-5, 5); /*if(this.x > width){ }*/ } shows(){ fill(255, 0, 0, 100) fill(this.col) noStroke() ellipse(this.x, this.y, this.z) } } /*function mouseDragged(){ for(let i = 0; i < 100; i++){ x = random(width) y = random(height) z = 50; let b = new Bubble(x, y, z, z) bubbles.push(b) } }*/