Kangyu Zhu 2256893

Concept sketch:

Note: Create a spider web and the process of the spider forming the web to represent time

Experimental sketches:

Experimental sketch 1:

let m, s;
let webSize;
let webLayers;
 
function setup() {
 createCanvas(800, 800);
 angleMode(DEGREES);
 webSize = 340;
}
function draw() {
 background(0);
 translate(width / 2, height / 2);
 stroke(255);
 strokeWeight(8);
 push();
 for (let i = 0; i < 6; i++) {
   rotate(360 / 12);
   line(0, -400, 0, 400);
 }
 pop();
 m = minute();
 s = second();
 stroke(255);
 webLayers = floor(m / 12);
 for (let i = 0; i < webLayers; i++) {
   let radius = map(i, 0, 5, webSize * 0.2, webSize);
   for (let j = 0; j < 12; j++) {
     let ang = map(j, 0, 12, 0, 360);
     let x1 = cos(ang - 90) * radius;
     let y1 = sin(ang - 90) * radius;
     let x2 = cos(ang - 90 + 30) * radius;
     let y2 = sin(ang - 90 + 30) * radius;
     line(x1, y1, x2, y2);
   }
 }
 for (let i = 0; i < m % 12; i++) {
   let radius = map(webLayers, 0, 5, webSize * 0.2, webSize);
   let ang = map(i, 0, 12, 0, 360);
   let x1 = cos(ang - 90) * radius;
   let y1 = sin(ang - 90) * radius;
   let x2 = cos(ang - 90 + 30) * radius;
   let y2 = sin(ang - 90 + 30) * radius;
   line(x1, y1, x2, y2);
 }
}

Note: Draw lines using a for loop to obtain the basic framework of a spider web

Experiment Sketch 2:

let m, s;
let webSize;
let webLayers;
 
function setup() {
 createCanvas(800, 800);
 angleMode(DEGREES);
 webSize = 400;
}
 
function draw() {
 background(0);
 translate(width / 2, height / 2);
 stroke(255);
 strokeWeight(8);
 push();
 for (let i = 0; i < 6; i++) {
   rotate(360 / 12);
   line(0, -400, 0, 400);
 }
 pop();
 
 m = minute();
 s = second();
 stroke(255);
 
 webLayers = floor(m / 12);
 for (let i = 0; i < webLayers; i++) {
   let radius = map(i, 0, 5, webSize * 0.2, webSize);
   for (let j = 0; j < 12; j++) {
     let ang = map(j, 0, 12, 0, 360);
     let x1 = cos(ang - 90) * radius;
     let y1 = sin(ang - 90) * radius;
     let x2 = cos(ang - 90 + 30) * radius;
     let y2 = sin(ang - 90 + 30) * radius;
     line(x1, y1, x2, y2);
   }
 }
 for (let i = 0; i < m % 12; i++) {
   let radius = map(webLayers, 0, 5, webSize * 0.2, webSize);
   let ang = map(i, 0, 12, 0, 360);
   let x1 = cos(ang - 90) * radius;
   let y1 = sin(ang - 90) * radius;
   let x2 = cos(ang - 90 + 30) * radius;
   let y2 = sin(ang - 90 + 30) * radius;
   line(x1, y1, x2, y2);
 }
 secWeb();
}
function secWeb() {
 let angStart = map(m % 12, 0, 12, 0, 360);
 let radius = map(webLayers, 0, 5, webSize * 0.2, webSize);
 let ang = map(s, 0, 60, 0, 360 / 12);
 let x1 = cos(angStart - 90) * radius;
 let y1 = sin(angStart - 90) * radius;
 let x2 = cos(angStart - 90 + ang) * radius;
 let y2 = sin(angStart - 90 + ang) * radius;
 line(x1, y1, x2, y2);
 spider(radius, angStart - 90 + ang);
}
 
function spider(rad, ang) {
 push();
 rotate(ang);
 translate(rad, 0);
 stroke(253, 212, 131);
 fill(253, 212, 131);
 stroke(137, 107, 92);
 strokeWeight(7);
 
 for (let i = 0; i < 4; i++) {
   let legY = map(i, 0, 3, -30, 30);
   push();
   rotate(sin(frameCount * 2 + i * 90) * 10);
   line(0, 0, 30, legY);
   pop();
   push();
   rotate(-sin(frameCount * 2 + i * 90) * 10);
   line(0, 0, -30, legY);
   pop();
 }
 ellipse(0, 0, 32, 32);
 rotate(sin(frameCount*2)*10)
 ellipse(0, 16, 20);
 noStroke()
 fill(255)
 ellipse(-5, 28, 9);
 ellipse(5, 28, 9);
 pop();
}

Note: Add a small spider to the web position which corresponds to the current time position

Experiment sketch 3:

let m, s, h, d;
let webSize;
let webLayers;
let dayCol1, dayCol2, nightCol1, nightCol2;
function setup() {
 createCanvas(800, 800);
 angleMode(DEGREES);
 webSize = 400;
 dayCol1 = color(247, 183, 105);
 dayCol2 = color(247, 119, 107);
 nightCol1 = color(58, 106, 226);
 nightCol2 = color(98, 61, 140);
}
 
function draw() {
 background(0);
 m = minute();
 s = second();
 h = hour();
 d = day();
 drawSky();
 translate(width / 2, height / 2);
 stroke(200);
 strokeWeight(8);
 push();
 for (let i = 0; i < 6; i++) {
   rotate(360 / 12);
   line(0, -400, 0, 400);
 }
 pop();
 
 webLayers = floor(m / 12);
 for (let i = 0; i < webLayers; i++) {
   let radius = map(i, 0, 5, webSize * 0.2, webSize);
   for (let j = 0; j < 12; j++) {
     let ang = map(j, 0, 12, 0, 360);
     let x1 = cos(ang - 90) * radius;
     let y1 = sin(ang - 90) * radius;
     let x2 = cos(ang - 90 + 30) * radius;
     let y2 = sin(ang - 90 + 30) * radius;
     line(x1, y1, x2, y2);
   }
 }
 for (let i = 0; i < m % 12; i++) {
   let radius = map(webLayers, 0, 5, webSize * 0.2, webSize);
   let ang = map(i, 0, 12, 0, 360);
   let x1 = cos(ang - 90) * radius;
   let y1 = sin(ang - 90) * radius;
   let x2 = cos(ang - 90 + 30) * radius;
   let y2 = sin(ang - 90 + 30) * radius;
   line(x1, y1, x2, y2);
 }
 secWeb();
}
function secWeb() {
 let angStart = map(m % 12, 0, 12, 0, 360);
 let radius = map(webLayers, 0, 5, webSize * 0.2, webSize);
 let ang = map(s, 0, 60, 0, 360 / 12);
 let x1 = cos(angStart - 90) * radius;
 let y1 = sin(angStart - 90) * radius;
 let x2 = cos(angStart - 90 + ang) * radius;
 let y2 = sin(angStart - 90 + ang) * radius;
 line(x1, y1, x2, y2);
 spider(radius, angStart - 90 + ang);
}
function drawSky() {
 push();
 let amt = 0;
 if (h > 12) {
   amt = map(h, 12, 24, 0, 1);
 } else {
   amt = map(h, 0, 12, 1, 0);
 }
 let col1, col2;
 col1 = lerpColor(dayCol1, nightCol1, amt);
 col2 = lerpColor(dayCol2, nightCol2, amt);
 for (let y = 0; y <= height; y += 2) {
   strokeWeight(2);
   let c = lerpColor(col1, col2, map(y, 0, height, 0, 1));
   stroke(c);
 
   line(0, y, width, y);
 }
 pop();
}
function spider(rad, ang) {
 push();
 rotate(ang);
 translate(rad, 0);
 stroke(253, 212, 131);
 fill(253, 212, 131);
 stroke(137, 107, 92);
 strokeWeight(6);
 
 for (let i = 0; i < 4; i++) {
   let legAngle = map(i, 0, 3, -30, 30);
   push();
   rotate(legAngle + sin(frameCount * 2 + i * 90) * 10);
   line(0, 0, 30, 0);
   pop();
   push();
   rotate(legAngle - sin(frameCount * 2 + i * 90) * 10);
   line(0, 0, -30, 0);
   pop();
 }
 ellipse(0, 0, 32, 32);
 rotate(sin(frameCount * 2) * 10);
 ellipse(0, 16, 20);
 noStroke();
 fill(255);
 ellipse(-5, 28, 9);
 ellipse(5, 28, 9);
 pop();
}

Note: Add a gradient color sky to the background, where the color of the sky changes over time

Experiment Sketch 4: