Project 6 Abstract Clock

It was alot of fun making this peice. It was really hard to figure out where to start, but when I decided to split the hour, minute, and second into different parts, I was able to better figure out what to do.

sketch

var lengt = 10;
var hr;
var min;
var sec;


function setup() {
    createCanvas(480, 480, WEBGL);
    hr = hour();
    min = minute();
    sec = second();
    text("p5.js vers 0.9.0 test.", 10, 15);
    ellipse(240,240,480);
}


// drawing a plant that grows and dies at 24 hours but then grows from the stump again

function draw() {
  background(220);
  sec = second();
  min = minute();
  sec = second();
  thePlant(hr);
  theSky(min,hr);
  theLeaves(sec);
}

function theLeaves(second){ //the leaves or flower changes based on the second
  fill("purple");
  cone(10+second,65,16,3);
}

function thePlant (hr){ //each hour adds length to the plant
  fill("brown");
  translate(0,100);
  cylinder(60, 100, 16, 16);
  
  //the actual plant
  translate(0,-70);
  fill("green");
  cylinder(20, lengt*hr, 16, 16);
}

function theSky (min,hr){ //changes based on the 12 hr system
  if (hr <= 12){
    fill(0,0,0.3472*(min + (60*hr)));
    }else{
      fill(0,0,255 - 0.3472*(min + (60*hr)));
    }
  rect(-480,-480,960,960);
}

Leave a Reply