Sophie Chen – Project 06 – Abstract Clock

sketch

var yoff = 0.0 ; 


function setup() {
    createCanvas(600, 600);
    
}

function draw() {
	background(255, 250, 200);
    // Current time
    var H = hour();
    var M = minute();
    var S = second();

    // Map time to dimensions
    var mappedH = map(H, 0, 23, 0, height); // sun is at the bottom of the canvas at midnight, and moves up as each hour passes and is at the top of the canvas by noon.
    var mappedM = map(M, 0, 59, height - 245, 0 - 265); // minutes wave starts at the bottom of the canvas and ends at the top
    var mappedS = map(S, 0, 59, height - 265, 0 - 360); // seconds wave starts at the bottom of the canvas and ends at the top 
    
    // Sun
    fill(255, 215, 0);
    noStroke();
    ellipse(width / 2, mappedH, 200, 200);
    
    // Minutes
    fill(50, 170, 250, 90);
    beginShape(); 
    var xoff = 0;

    for (var x = 0; x <= width; x += 10) {
    // Noise
    var y = map(noise(xoff, yoff), 0, 1, 200, 300) + mappedM; // the level of the wave increases horizontally each minute
    // Set vertex
    vertex(x, y); 
    // Increase x dimension for noise
    xoff += 0.04;
  }
    // Increase y dimension for noise
    yoff += 0.005;
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
    
    // Seconds
    fill(50, 190, 150, 90);
    beginShape(); 
    var xoff = 0;     
    
    for (var x = 0; x <= width; x += 10) {
    
    // Noise
    var y = map(noise(xoff, yoff), 0, 1, 200, 400) + mappedS; // the level of the wave increases horizontally each second
    // Set vertex
    vertex(x, y); 
    // Increase x dimension for noise

    xoff += 0.04;

  }
    // Increase y dimension for noise
    yoff += 0.005;
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

For this project I wanted to create something more environmental and fluid in contrast to the constant and rigid nature of time passing. My concept was to have the sun move up or down according to the hour and two different layers of landscape/waves, one indicating seconds and one indicating minutes. I thought perlin noise would be perfect for this, and although it took me a while to understand how to manipulate the variables, I think it came together nicely in the end.