Process


    The code for the week 9 homepage:

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
    The code for the week 9 homepage:
    (the co-ordinates line)

    let anchorX, anchorY;
    let startTime;
    
    function setup() {
      createCanvas(windowWidth, windowHeight);
      anchorX = width - 200;
      anchorY = height - 200;
      startTime = millis();
    }
    
    function draw() {
      background(210, 200, 190); 
      const green = color(0, 100, 0);
    
      fill(green);
      noStroke();
      ellipse(anchorX, anchorY, 20, 20);
      ellipse(mouseX, mouseY, 10, 10);
    
      stroke(green);
      strokeWeight(1.5);
      line(anchorX, anchorY, mouseX, mouseY);
    
      let coords = `(${mouseX}, ${mouseY})`;
      let angleRad = atan2(mouseY - anchorY, mouseX - anchorX);
      let angleDeg = degrees(angleRad).toFixed(1);
      let elapsed = ((millis() - startTime) / 1000).toFixed(1);
      let info = `${coords} | ${angleDeg}° | ${elapsed}s`;
    
      let displayAngle = angleRad;
      if (cos(angleRad) < 0) displayAngle += PI;
    
      let offsetX = -15 * sin(angleRad);
      let offsetY = 15 * cos(angleRad);
    
      push();
      translate(mouseX + offsetX, mouseY + offsetY);
      rotate(displayAngle);
      fill(green);
      noStroke();
      textAlign(LEFT, CENTER);
      textSize(14);
      text(info, 10, 0);
      pop();
    }

This week I focused on even more collage style, with many overlapping elements. I wanted to take the collage to it's limits while still being readable, although it may be more challenging to navigate. But I think this is what makes it more interactive in a way, like solving a visual puzzle with your eyes.