For this project, I was inspired by the week’s lab. At first, I thought it would be simple to convert the fish code to a clock but this was not the case. I had to play around with the arrays and indexes to make everything work. The number of fish represent the minutes as well as the level of water. The color of the water represents the hour of the day to show the tank getting dirtier until it is finally cleaned. Lastly, the clam opening and closing represents seconds.
sketchDownloadvar x = [];
var y = [];
var dx = [];
var c = [];function setup() {
createCanvas(480, 480);
background(220);
for (var i=0; i<59; i++) {
x[i] = random(50, width-50);
y[i] = 3/4*height-i*((5/12/60)*height)
dx[i] = random(-5, 5);
c[i] = color(random(255), random(255), random(255));
}
}
function draw() {
var s = second();
var h = hour();
var m = minute();
background(220);
stroke(0);
fill(0, 255, 255-(75/23)*h);
rect(10, 1/4*height, width - 20, 3/4*height)
fill(220);
rect(10, 1/4*height, width - 20, 1/3*height-(1/4*height/60)*m);
for (i=0; i<m; i++) {
fish(x[i], y[i], dx[i], c[i]);
x[i] += dx[i];
if(x[i] >= width - 25) {
dx[i] = -dx[i]
} else if(x[i] <= 25) {
dx[i] = -dx[i]
}
}
fill(237, 201, 175);
rect(10, 410, width-20, height-405);
if(s%2 == 1) {
openClam();
} else {
closedClam();
}
}function closedClam() {
fill(199, 176, 255);
arc(385, 400, 70, 30, PI, 0, CHORD)
arc(385, 400, 70, 30, 0, PI, CHORD);
noStroke();
quad(430, 410, 430, 390, 410, 400, 410, 400);
}
function openClam() {
fill(255);
circle(390, 400, 20);
fill(199, 176, 255);
push();
translate(420,400)
rotate(radians(30));
arc(385-420, 400-400, 70, 30, PI, 0, CHORD)
pop();
arc(385, 400, 70, 30, 0, PI, CHORD);
noStroke();
quad(430, 410, 430, 390, 410, 400, 410, 400);
}
function fish(x, y, dx, c){
fill(c);
ellipse(x, y, 20, 10);
if(dx >= 0) {
triangle(x - 10, y, x - 15, y - 5, x - 15, y + 5);
}
else if(dx < 0) {
triangle(x + 10, y, x + 15, y - 5, x + 15, y + 5);
}
}