Month: October 2018

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.

sketch

// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu 
// Project-06-Abstract Clock


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

function draw() {
  //time variables 
  var H = hour();
  var M = minute();
  var S = second();

  //gets darker by the HOUR
  background (233 - (2*H), 237 - (2*H), 255 - (2*H));

  // variables for objects 
  var lemonWidth; //width of lemon
  var lemonHeight; //height of lemon 
  var liquidY = 190; //liquid Y psition
  var liquidH = 210; //liquid height
  var dropX = []; //water drop X
  var dropY = []; //water drop Y



  //static table 
  noStroke();
  fill(140, 94, 3);
  rect(0, 350, 480, 100); //top of table

  noStroke();
  fill(102, 69, 2);
  rect(0, 450, 480, 30); //side of table

  //static beach sand 
  noStroke();
  fill(242, 211, 148); 
  rect(0, 240, 480, 110);

  //beach water
  //water gets darker ever hour 
  noStroke();
  fill(62 - (2*H), 214 - (2*H), 255 - (2*H));
  ellipse(240, 240, 600, 130);
  rect(0, 140, 480, 80);

  //lemon 
  //changes lemon width and height every SECOND 
  //pattern of not squeezed and squeezed
  fill(226, 239, 48);
  if((S%2) > 0) {
    lemonWidth = 70;
    lemonHeight = 70;
  } 
  else {
    lemonWidth = 60;
    lemonHeight = 40;
  }
  ellipse(295, 180, lemonWidth, lemonHeight);

  //drink glass
  noStroke();
  fill(161, 235, 255);
  rect(185, 180, 110, 220);
  ellipse(width/2, 398, 110, 60);

  //drink liquid
  noStroke();
  fill(234, 117, 117);
  ellipse(width/2, 398, 100, 50);
  rect(190, liquidY + (3*M), 100, liquidH - (3*M));
  //allows liquid to decrease every MINUTE
}

I wanted to make an illustration that relaxed the viewers and made them not too anxious about time. The possible settings I was thinking about were beaches, mountains, and waterfalls. I was craving bubble tea this whole week, so I decided to make a drink with a beach view. At the beginning of sketching, I got very excited with my concept. However, overtime, I decided to change the original parts of the abstract clock to something new. At first, I wanted to make water droplets to form on the glass every minute. Instead, I made the liquid level to decrease by every minute. For every hour, I changed the sky color and the ocean water color to become darker. At first, I had a hard time with how the time variables would interact with the shapes and colors. Midway through the process, I started to get the hang of where the time variables can be used in the code. I had a lot of fun with this assignment, because seeing the colors and the liquid height change were very satisfying.