This animation depicts a sun and a moon rotating in a circle, depending on the location of the user’s mouse. The background the sun passes through changes through sunrise, blue sky, and sunset colors as the sun moves from left to right.
Dynamic DrawingDownload
function setup()
{
createCanvas(600, 450);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
var x = 30;
function draw()
{
strokeWeight(0);
background(0);
translate (300, 225);
if (mouseX < 120)
{
fill (255, mouseX*2, 0);
}
if (mouseX>= 120 & mouseX < 220)
{
fill (255, 255, mouseX-40);
} if (mouseX>= 220 & mouseX < 300)
{
fill (50+(300-mouseX)*2.5, 155+(300-mouseX)*1.2, 255 - (300-mouseX));
} if (mouseX >= 300 & mouseX < 380)
{
fill (50+(mouseX-300)*2.5, 155+(mouseX-300)*1.2, 255-(mouseX-300));
} if (mouseX >= 380 & mouseX < 480)
{
fill (255, 175+(480-mouseX), (480-mouseX)*1.4);
}
if (mouseX >= 480)
{
fill(255, 700-mouseX*1.1, 0)
}
rect (-300, -225, 600, 225);
fill (mouseX/25, mouseX/25, 100);
rect (-300, 0, 600, 225);
push(0);
fill(235);
if (mouseIsPressed)
{
fill (90);
x -= 5;
}
translate (-300, -225);
ellipse (x, 45, 40, 40);
ellipse (x+25, 30, 50, 50);
ellipse(x+35, 60, 35, 35);
ellipse (x+20, 50, 40, 40);
ellipse (x+500, 150, 40, 40);
ellipse (x+475, 160, 50, 50);
ellipse(x+525, 170, 35, 35);
ellipse (x+500, 180, 40, 40);
ellipse (x + 300, 60, 40, 40);
ellipse (x + 270, 70, 30, 30);
ellipse (x + 285, 90, 50, 50);
ellipse (x + 320, 90, 40, 40);
ellipse (x+50, 100, 40, 40);
ellipse (x+80, 130, 50, 50);
ellipse(x+30, 132, 35, 35);
ellipse (x+58, 135, 50, 50);
pop();
push();
rotate (radians (135+mouseX/3.55));
fill (255, 255, 0);
ellipse (90, 90, 50, 50);
translate (90, 90); for (var i = 0; i <= 8; i++)
{
rotate (radians (40));
fill (255);
strokeWeight(0);
ellipse (mouseX/5 + 5, mouseY/5 + 5, 15, 15);
ellipse (mouseX/5 - 8, mouseY/5-10, 15, 15);
ellipse (mouseX/5, mouseY/5, 20, 20);
}
pop();
push();
rotate (radians(315+mouseX/3.55));
fill (255, 255, 200);
ellipse (90, 90, 50, 50);
translate (90, 90);
for (var j = 0; j < 5; j++)
{
rotate (radians(random (50, 80)));
fill (255, 255, 204);
rectMode (CENTER);
rect (mouseX/9, mouseX/8, 5, 20);
rect (mouseX/9, mouseX/8, 20, 5);
push();
translate (mouseX/9, mouseX/8);
for (var h = 0; h <= 7; h++)
{
fill (255 - mouseX/7, 255 - mouseY/3, 255 - mouseX/5);
rotate (radians (mouseY));
ellipse (10+mouseX/20, mouseY/50, 8, 8);
}
pop();
}
x += .5;
pop();
}