p5.js Dynamic Image

 

when you click:

let lightOn = true;

function setup() {

createCanvas(1280, 720);

noStroke();

}

function draw() {

background(23, 20, 40);

fill(80);

rect(950, 350, 25, 200);

fill(120);

rect(930, 300, 70, 50);

fill(101, 67, 33);

ellipse(600, 420, 280, 340);

ellipse(600, 200, 220, 200);

ellipse(450, 320, 120, 100);

ellipse(750, 320, 120, 100);

ellipse(450, 560, 130, 100);

ellipse(750, 560, 130, 100);

fill(160, 110, 60);

ellipse(600, 440, 180, 200);

fill(101, 67, 33);

ellipse(530, 90, 80, 80);

ellipse(670, 90, 80, 80);

fill(160, 110, 60);

ellipse(530, 90, 40, 40);

ellipse(670, 90, 40, 40);

fill(255);

ellipse(560, 180, 30, 25);

ellipse(640, 180, 30, 25);

fill(255, 0, 0);

ellipse(560, 180, 15, 15);

ellipse(640, 180, 15, 15);

fill(0);

ellipse(600, 220, 30, 22);

stroke(0);

strokeWeight(3);

line(580, 245, 590, 260);

line(590, 260, 610, 260);

line(610, 260, 620, 245);

noStroke();

if (lightOn) {

fill(255, 230, 120, 150);

triangle(960, 350, 860, 720, 1060, 720);

fill(255, 255, 200, 200);

ellipse(960, 300, 120, 120);

} else {

fill(0, 180);

rect(0, 0, width, height);

}

}

function mousePressed() {

lightOn = !lightOn;

}