sketch
function setup() {
createCanvas(480, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(0, 150, 250); //sky blue
var s = second();
var m = minute();
var h = hour();
var d = day();
noStroke();
//water
fill(0, 0, 230); //water blue
rect(0, 180, 480, 220);
//waves
for (var a = 0; a <= width; a = a+1) {
for (var b = 200; b <= 450; b = b+50) {
stroke(0, 0, 150);
strokeWeight(1);
point(a, b - 15 * sin(radians(a)));
}
}
fish(200, 250);
fish(400, 300);
fish(60, 275);
//sand
noStroke();
fill(170, 100, 20) //darker brown, shows up as water receeds
rect(0, 380-h*2, 480, 400);
fill(185, 122, 40); //lighter brown with dots in the sand
rect(0, 380, 480, 120);
for (var sx = 20; sx <= width; sx = sx+40) {
for (var sy = 400; sy <= height; sy = sy + 40) {
stroke(223, 182, 112); //lightest brown
strokeWeight(3);
point(sx, sy);
}
}
for (sx = 40; sx <= width; sx = sx + 40){
for (sy = 420; sy <= height; sy = sy + 40){
point(sx, sy);
}
}
crab(s*8, 440);
sun(m*8, 70);
cloud(400, 50);
cloud(50, 75);
boat(d*13, 170);
}
function crab(x, y) {
push();
translate(x, y);
noStroke();
fill(230, 0, 0);
ellipse(0, 0, 30, 20);
fill(255);
ellipse(-8, -9, 5, 5);
ellipse(8, -9, 5, 5);
fill(0);
ellipse(-8, -9, 3, 3);
ellipse(8, -9, 3, 3);
stroke(230, 0, 0);
strokeWeight(4);
line(-10, 5, -25, 20);
line(10, 5, 25, 20);
line(-15, 0, -25, 5);
line(15, 0, 25, 5);
pop();
}
function fish(x, y) {
push();
translate(x, y);
noStroke();
fill(225, 0, 225); //light purple
ellipse(0, 0, 30, 15);
triangle(15, 0, 25, -10, 25, 10);
fill(255);
circle(-8, 0, 5);
fill(0);
circle(-8, 0, 3);
pop();
}
function sun(x, y) {
push();
translate(x, y);
noStroke();
fill(255, 255, 0);
circle(0, 0, 45);
stroke(255, 150, 0);
strokeWeight(7);
line(30, 0, 50, 0);
line(-30, 0, -50, 0);
line(0, 30, 0, 50);
line(0, -30, 0, -50);
rotate(radians(45));
line(30, 0, 50, 0);
line(-30, 0, -50, 0);
line(0, 30, 0, 50);
line(0, -30, 0, -50);
pop();
}
function boat(x, y) {
push();
translate(x, y);
noStroke();
fill(185, 122, 40); //main sand brown
arc(0, 0, 60, 60, 0, PI, CHORD);
rect(-5, -50, 5, 50);
fill(255);
triangle(0, -50, 0, -10, 30, -10);
triangle(-5, -50, -5, -10, -30, -10);
pop();
}
function cloud(x, y) {
push();
translate(x, y);
noStroke();
fill(240);
circle(0, 0, 45);
circle(25, 10, 25);
ellipse(0, 20, 75, 20);
pop();
}
I made this based on a beach scene. The crab moves across the sand with the seconds, the sun moves across the sky with the minutes, the water recedes with the hours, exposing the darker brown (wet) sand below it. The boat moves based on the day.