![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
Here is my abstract clock. It’s a beach with tides: high tide is at noon and low tide is at midnight. The grass rustles in the breeze, and the beach is strewn with starfish and shells. It’s dark from 8 pm to 5am. Sunrise is from 6am to 7am, and sunset is from 7pm to 8pm.
sketch
//Sam Rauch, section B, srauch@andrew.cmu.edu, project 06: abstract clock
//this code creates a beach with a tide. High tide is at noon, and low tide is at midnight.
//the grass rustles in the sea breeze. it gets darker from 7pm 8 pm and lighter from 6 to 7am.
var grasslength = []; //length of blades of grass
var sandspotX = []; //x position of specks in sand
var sandspotY = []; //y position of specks in sand
var waveY; //height of the tide
var waveShift; //amount the water's edge fluctuates by
var daytime; //the time of day in minutes
var darkness; //amount of darkness it is
function setup() {
createCanvas(400, 400);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
//initializing x position of specks in sand
for (var i = 0; i < 50; i++){
sandspotX[i] = random(0, width);
}
//initializing y position of specks in sand
for (var i = 0; i < 50; i++){
sandspotY[i] = random(200, 400);
}
frameRate(5);
//creating y position of tide. High tide is at noon, low tide is at midnight
daytime = hour()*60 + minute(); //time of day, in minutes
if (daytime < 690) { //if before noon
waveY = map(daytime, 0, 690, 400, 200); //before noon, wave gets higher with time
} else { //if after noon
waveY = map(daytime, 690, 1380, 200, 400); //after noon, wave gets lower with time
}
//making it get lighter and darker at sunrise and sunset
if (daytime >= 300 & daytime < 360) { //if from 5 to 6 am, it gets lighter
darkness = map(daytime, 300, 360, 120, 0);
} else if (daytime >= 1140 & daytime < 1200) { //from 7 to 8 pm, it gets darker
darkness = map(daytime, 1140, 1200, 0, 120);
} else if (daytime >= 360 & daytime < 1140) { //in the middle of the day, it's not dark
darkness = 0;
} else { //in the middle of the night, it's dark
darkness = 120;
}
}
function draw() {
noStroke();
background(155, 207, 207);
//row of grass bunches
for (var i = 0; i <2; i++){
for(var j = 0; j<=width; j += 20) {
grass(j, 220);
}
}
//sand
fill(196, 178, 122);
rect(0, 200, width, 200);
//little specks in sand
strokeWeight(3);
stroke(146, 128, 72)
for (var i = 0; i<50; i++){
point(sandspotX[i], sandspotY[i]);
}
noStroke();
//assorted shells and starfish
starfish(250, 250, color(120, 130, 120), 10);
starfish(50, 340, color(50, 74, 64), 50);
starfish(180, 370, color(120, 79, 97), 5);
shell(140, 260, color(60, 50, 70), color(100, 80, 107), 60);
shell(300, 300, color(80, 50, 50), color(120, 80, 97), -5);
//waves
waveShift = randomGaussian(1, 2);
fill(30, 100, 155, 240);
rect(0, waveY+waveShift, width, 300);
fill(30, 100, 155, 100);
rect(0, waveY-(random(1,3))+waveShift, width, 300);
//rectangle that makes darkness and lightness of environment using alpha channel
blendMode(MULTIPLY);
fill(35, 50, 70, darkness);
rect(0,0,width,height);
blendMode(BLEND);
}
//makes starfish
function starfish(x,y, color, spin){
push();
translate(x,y);
rotate(radians(spin));
strokeWeight(4);
stroke(color);
for (var i = 0; i<5; i++){ //draw five arms from 0,0, rotating after each one
line(0,0,0,-10);
rotate(radians(72));
}
noStroke();
pop();
}
//makes seashells
function shell(x,y, color1, color2, spin) {
push();
translate(x,y);
rotate(radians(spin));
strokeWeight(1);
stroke(color1);
fill(color2);
var radius = 7; //radius of seashell, ie distance from circles to center
var size = 12; //size of circles themselves
var angle = radians(0); //theta of circle location
for (var i = 0; i<20; i++) { //draw circles that get smaller as they get closer to the center
ellipse ( cos(angle)*radius, sin(angle)*radius, size);
angle-=radians(24);
size -= i/20; //decrease size of circles
radius -= i/30; //decrease radius of seashell
}
noStroke();
pop();
}
//makes a bunch of grass
function grass(x,y){
push();
translate(x,y);
stroke(65, 100, 52);
strokeWeight(2);
rotate(radians(-40));
for (var i = 0; i < 20; i++){ //creating each blade of grass in a bunch
for (var j = 0; j < 20; j++){ //creating random lengths for each blade of grass
grasslength[j] = random(35, 40);
}
line(0,0,0, -1*grasslength[i]);
rotate(radians(4));
}
pop();
}
