This is my dynamic drawing of a cityscape with the fore, mid, and background each moving at a different pace as the mouse moves from left to right. The sun also rises and sets and the moon rises while the background changes color. The buildings also reverse in color as the background changes color
sketch
function setup() {
createCanvas(600, 450);
rectMode(CENTER);
}
var diam = 50var opacity = 255var timer = 0
function draw() {
opacity = map(constrain(mouseX, 0, width), 0, width, 0, 255)
background(192, 215, 218)
background(4, 27, 46, opacity);
fill(255, 255, 0);
var mapX = map(constrain(mouseX, 0, width), 0, width, 0, width*2);
var mapX2 = map(constrain(mouseX, 0, width), 0, width, 200, width*2-200);
var mapX3 = map(constrain(mouseX, 0, width), 0, width, 400, width*2-400);
var mapSunSizeX = map(constrain(mouseX, 0, width), 0, width, 0, 40);
var mapSunSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 100);
var mapSun = map(constrain(mouseX, 0, width), 0, width, 180, 310);
var mapMoon = map(constrain(mouseX, 0, width), width/2, width, 180, 270);
var bSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 40);
var bSizeY2 = map(constrain(mouseY, 0, height), 0, height, 0, 20);
var bSizeY3 = map(constrain(mouseY, 0, height), 0, height, 0, 10);
fill(0)
push()
diam = 30 - mapSunSizeX + mapSunSizeY
strokeWeight(0);
translate(mapSun+diam/4, height*1);
rotate(radians(mapSun));
fill(247, 240, 25); ellipse(width/2, height/2, diam, diam);
fill(243, 88, 22, constrain(map(opacity, 0, 125, 0, 80), 0, 80)) ellipse(width/2, height/2, diam*2, diam*2);
fill(243, 88, 22, opacity); ellipse(width/2, height/2, diam, diam);
pop()
push()
noStroke();
translate(mapMoon+diam/4, height*1);
rotate(radians(mapMoon));
fill(255); ellipse(width/2, height/2, diam, diam);
fill(151, 202, 240)
ellipse(width/2+diam/3, height/2+diam/3, diam, diam);
fill(4, 27, 46, opacity)
ellipse(width/2+diam/3, height/2+diam/3, diam, diam);
pop()
push()
translate(mapSun+diam/4, height*1);
fill(255, 120);
strokeWeight(0);
ellipse (0, 0-height*9/10, 200, 50);
ellipse (30, 0-height*8.5/10, 200, 50);
pop()
push()
timer += 1 if (timer%40 ==0){ if (opacity >= 120){
for (var i = 0; i <= 300; i++){
fill(255);
ellipse(random(0-width*3/5, width*2.7-width*3/5),
random(0-height, height*2), random(3, 8), random(3, 8));
}
}
}
pop()
push()
opacity = map(constrain(mouseX, 0, width), 0, width, 30, 200);
fill(opacity);
translate(mapX, 0);
strokeWeight(0);
rectMode(CORNER);
rect(0-width*1.9, height*7/8+ bSizeY, width*3, height/5);
var bSize = map(constrain(mouseX, 0, width), 0, width, 20, 50);
rect(0-width*2, height*3/5 + bSizeY, 60, height);
rect(0-width*1.95, height*2/5 + bSizeY, 75, height);
rect(0-width*1.75, height*2.5/5 + bSizeY, 40, height);
rect(0-width*1.7, height*1.5/5 + bSizeY, 60, height);
rect(0-width*1.6, height*1.8/5 + bSizeY, 40, height);
rect(0-width*1.5, height*2/5 + bSizeY, 40, height);
rect(0-width*1.4, height*1.5/5 + bSizeY, 80, height);
rect(0-width*1.35, height*2/5 + bSizeY, 50, height);
rect(0-width*1.35, height*2/5 + bSizeY, 50, height);
rect(0-width*1.25, height*3/5 + bSizeY, 50, height);
rect(0-width*1.2, height*2/5 + bSizeY, 50, height);
rect(0-width*1.1, height*1/5 + bSizeY, 50, height);
rect(0-width*1.05, height*3/5 + bSizeY, 70, height);
rect(0-width*1.03, height*2/5 + bSizeY, 40, height);
rect(0-width*0.8, height*1/5 + bSizeY, 50, height);
rect(0-width*0.85, height*2.3/5 + bSizeY, 70, height);
rect(0-width*0.7, height*2/5 + bSizeY, 40, height);
rect(0-width*0.8, height*1/5 + bSizeY, 50, height);
rect(0-width*0.85, height*2.3/5 + bSizeY, 70, height);
rect(0-width*0.7, height*2/5 + bSizeY, 40, height);
rect(0-width*0.6, height*1.5/5 + bSizeY, 50, height);
rect(0-width*0.55, height*2.7/5 + bSizeY, 70, height);
rect(0-width*0.44, height*1.5/5 + bSizeY, 50, height);
rect(0-width*0.3, height*3/5 + bSizeY, 50, height);
rect(0-width*0.22, height*2.5/5 + bSizeY, 50, height);
rect(0-width*0.1, height*2.8/5 + bSizeY, 50, height);
rect(0+width*0.02, height*2.3/5 + bSizeY, 70, height);
rect(0+width*0.1, height*1.8/5 + bSizeY, 60, height);
rect(0+width*0.15, height*3.2/5 + bSizeY, 60, height);
pop();
push()
opacity = map(constrain(mouseX, 0, width), 0, width, 60, 150);
fill(opacity)
translate(mapX2, 0)
strokeWeight(0);
rectMode(CORNER)
rect(0-width*1.9, height*11/12 + bSizeY2, width*2.8, height/5)
rect(0-width*1.7, height*1.8/5 + bSizeY2, 100, height)
rect(0-width*1.5, height*3/5 + bSizeY2, 80, height)
rect(0-width*1.4, height*3.2/5 + bSizeY2, 40, height)
rect(0-width*1.3, height*3/5 + bSizeY2, 80, height)
rect(0-width*1.25, height*2.2/5 + bSizeY2, 60, height)
rect(0-width*1.12, height*2.2/5 + bSizeY2, 80, height)
rect(0-width*1.05, height*3.2/5 + bSizeY2, 60, height)
rect(0-width*0.8, height*2.2/5 + bSizeY2, 80, height)
rect(0-width*0.75, height*3.2/5 + bSizeY2, 60, height)
rect(0-width*0.6, height*3.2/5 + bSizeY2, 80, height)
rect(0-width*0.5, height*2.2/5 + bSizeY2, 60, height)
rect(0-width*0.2, height*3.3/5 + bSizeY2, 80, height)
rect(0-width*0.1, height*4.2/5 + bSizeY2, 60, height)
pop()
push();
opacity = map(constrain(mouseX, 0, width), 0, width, 90, 100);
fill(opacity)
translate(mapX3, 0)
strokeWeight(0);
rectMode(CORNER);
rect(0-width*1.35, height*17/18 + bSizeY3, width*2.8, height/5)
rect(0-width*1.35, height*3.2/5 + bSizeY3, 100, height)
rect(0-width*1.1, height*2.8/5 + bSizeY3, 100, height)
rect(0-width*1.0, height*4/5 + bSizeY3, 80, height)
rect(0-width*0.9, height*4.2/5 + bSizeY3, 40, height)
rect(0-width*0.85, height*4/5 + bSizeY3, 80, height)
rect(0-width*0.8, height*3.2/5 + bSizeY3, 60, height)
rect(0-width*0.6, height*2.9/5 + bSizeY3, 50, height)
rect(0-width*0.55, height*3.8/5 + bSizeY3, 60, height)
pop();
}