Category: Project-06-Abstract-Clock

Project 6

My clock is made up of a few planets that orbit each other. One representing the hours, another the minutes, and the last representing seconds.

sketchDownload

//dvargas David vargas
var starX=[] //x position of stars
var starY=[]//y position of stars
var starB=[]//brightness value of stars
var hourV = {x:0,y:0,diam:50,c:'orange'} //array w/values for orange (hours) circle
var minuteV = {x:0,y:0,diam:30,c:'lightgreen'}//array w/ values for green (minutes) circle
var secondV = {x:0,y:0,diam:10,c:'lightblue'} //array w/ values for blue (seconds) circle
var orbitV ={hX:300,hY:300,mX:0,mY:0,sX:0,sY:0,hD:180,mD:150,sD:75} //array w/ values for 'orbit rings'
var noiseOffset=0 //perlin noise offset



function setup() {
    createCanvas(600, 600);
    background(255);
    for (var i=0;i<80;i++){ //creates random stars
        starX[i]=random(0,width)
        starY[i]=random(0,height)
    }

}

function draw() {
  background(0);
  var theTime=currentTime() //the time represented by a value between 0 & 12

  for(var i=0;

Project 6 Abstract Clock

This is my abstract clock: The candles’ fire represents the passing of each second, the height of the candle represents the hour of the day and the sheets of paper represent the minutes remaining in the hour.

sketch
//Michael Li
//Section C 

function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background (220)

    
}
    //write object for candle dimensions
    var candle = {xPos: 130, yPos: 120, w: 50,  h: 280}
    //establish variables for the timer
    var timerS;
    var timerM; 
    var timerH;
    //Pen x position
    var penX = 370;
    //pen movement indedx
    var moveP = 0.3;

function draw() {
    background(62, 35, 16); //dark brown
    timerM = minute(); //assign minute function for variable
    //pages
    fill(76, 135, 74); //green book cover
    rect(190, 420, 230, 20); //draw bottom cover
    //alternate the page color between white and grey for distinction
    //use for loop to draw number of pages depending on the minute
    for (var i = 0; i<=60-timerM; i++){
        noStroke();
        if (i%2==0){
            fill(255);
        } else {
            fill(200);
        }
        //draw pages
        rect(190, 420-(3*i), 230, 3);

    }
    //draw pen function
    drawPen(penX, 235+3*timerM);
    //pen moves left and right
    penX +=moveP;
        //constrain pen in a range
        if (penX>= 380 || penX <= 350){
            moveP = -moveP;
        } 
    //draw the panel with the hour carvings
    drawBackPanel(80, 100);

    //draw the table
    fill(154, 121, 102);
    rect(0, height*9/10, width, height*9/10);

    //draw hour carvings behind the candle
    //for loop to draw the larger lines
    for (var i = 0; i <=12; i++){
        strokeWeight(3);
        stroke(161, 158, 75);
        line(100, 350.4-(9.6*2*i), 215, 350.4-(9.6*2*i));
    //drawing the shorter lines
    } for (var i = 0; i <=12; i++){
        strokeWeight(2);
        stroke(161, 158, 75);
        line(120, 360-(9.6*2*i), 195, 360-(9.6*2*i));
    }
    //drawing the body of the candle
    drawCandleB(candle.xPos, candle.yPos, candle.w, candle.h);
    //drawing the base of the candle
    drawBase(candle.xPos-10, 360);

    //assign hour to variable timerH
    timerH = hour();
    //map the hour to fit the candle length
    var hourMap = map(timerH/2, 0, 12, 240, 10);
    //candle length changes depending on the hour
    candle.yPos = 120 + 240 - hourMap;
    candle.h = hourMap + 30;

}
//function for drawing the candle's body
function drawCandleB (x, y, w, h){
    //establish remapped value for hour
    var hourMap = map(timerH/2, 0, 12, 240, 30);

    fill(250, 244, 192); //light yellow
    noStroke()
    rect(x, y, w, h); //candle  body
    //function for drawing the fire
    drawCandleFire(x, y, w, h);
    //function for drawing the wax dripping
    drawCanldeT(x, y, w);
    //function for drawing the halo of light
    drawLight(x, y, w, h, hourMap);

}
//function for drawing the wax
function drawCanldeT (x, y, w){
    //set lineweight
    strokeWeight(8);
    stroke(220, 213, 142); //darker yellow

    line(x+2, y, x+w-2, y);//horizontal line
    //two drips
    line(x+w*3/5, y, x+w*3/5, y+w/2); 
    line(x+w*4/5, y, x+w*4/5, y+w*3/4);
}
//function for drawing the fire
function drawCandleFire (x, y, w, h){
    //establish variable for the tip of the fire
    //fire positions
    var fTipy; 
    var fTipx;
    //variable for seconds for fire flicker
    timerS = second();
    //fire flickers each second
    if (timerS %2 == 0){
        fTipy = y-w*4/5;
        fTipx = x+w/2;
   
    } else {
        fTipy = y-w*4/5;
        fTipx = x+w/2 - 10;
    }
    noStroke();
    //draws the fire
        fill(246, 74, 22); //red
        ellipse(x+w/2, y-w/5, w/4, w/3);
        triangle(fTipx, fTipy, x+w*5/8, y-w/5, x+3*w/8, y-w/5);
    
}
//halo of light
function drawLight (x, y, w, h, hour){

    timerS = second();//establish the second variable
    //halo grows and shrinks each second
    if (timerS %2 == 0){
        hourMap = hour+10;
    } else {
        hourMap = hour-5;
    }

    noStroke();
    fill(249, 246, 152, 20);//yellow with light transparency
    ellipse(x+w/2, y-w*2/5, hourMap*2, hourMap*2); //draws light

}
//function drawing the back panel
function drawBackPanel (x, y){
    
    strokeWeight(9);
    stroke(225, 176, 104); // light brown
    //outer framing
    line(x, y, x, y+350);
    line(x+155, y, x+155, y+350);
    arc(x+77, y, x+75, y+55, PI, 0);

    //inner board
    noStroke();
    fill(186, 167, 135);

    ellipse(x+77, y, x+75, y+55);
    rect(x, y, x+75, y+250);
}
//candle base
function drawBase (x, y){
    fill(100); //grey
    //top and bottom qadralateral
    quad(x, y, x+70, y, x+60, y+20, x+10, y+20);
    quad(x+10, 420, x+60, y+60, x+70, y+73, x, y+73);
    //middle rectangle
    fill(150);
    rect(x+10, y+20, 50, 40);
}
//pen
function drawPen (x, y){
    push();
        translate(x, y); //move to the right
        rotate(radians(315)); //rotate for pen mvement
        noStroke();
        fill(200); //grey
        //draws pen
        rect(0, 0, 100, 5);
        fill(255); //white
        triangle(0, 0, 0, 5, -5, 2.5);
    pop();
}

Project 06 – Abstract Clock

I created a boba clock which is milk tea with boba from noon to midnight and juice with lychee jelly from midnight to noon. The number of Jelly/Boba inside the cup, including one inside the straw, represents the hour. Juice/milk shrinks per second, and the full amount disappears per minute. Lastly, a Jelly/Boba stuck inside the straw moves upward per minute and got out from the straw each hour. 

sketchDownload
//Alicia Kim
//Section B

var x = [];
var y = [];
var angle = [];


function setup() {
    createCanvas(300, 400);
    for (var i=0; i<(hour()%12-1); i+=1) {
        x[i] = random (120,190);
        y[i] = random (200,340);
        angle[i] = random(360);
    }

    for(var j=0; j<height; j+=1){
        stroke(lerpColor(color(255,232,239) ,color(255,253,208),j/height));
        line(0,j,width,j);
    }
}

function draw() {
    var s = second();
    var min = minute();
    stroke(0);    

//juice with lychee jelly from midnight to noon
//& milk tea with boba from noon to midniht
    push();
    if (hour()>12){
        drawMilk(s);
    }
    else if (hour()<=12){
        drawJuice(s);
    }
    pop();
    
    push ();
    drawCup();
    pop();

    push();
    drawStraw();
    pop();

    push();
    if (hour()>12){
        drawBoba();
        strawBoba(min);
    }
    else if (hour()<=12){
        drawJelly();
        strawJelly(min);
    }
    pop();

}

// juice inside the cup shrinks per sec
function drawJuice(s){
    fill(255,203,164); //orange
    quad(70,75,230,75,215,350,85,350); //juice

    //cover
    fill(255);
    quad(70,75,230,75,230-(15/60)*s,75+s*(275/60),70+(15/60)*s,75+s*(275/60));

    stroke(255,178,120); //dark orange 
    fill(255,203,164);
    ellipse (width/2, 75+(275/60)*s, 160-(0.5)*s, 60);
}

function drawCup(){
// bigger circle
    fill(224,255,255); //light cyan
    ellipse (width/2, 75 , 160, 60);
// smaller circle
    push();
    if (hour()<=12){
        fill(255,203,164);
    }
    else if (hour()>12){
        fill(247,231,200);
    }
    ellipse (width/2, 350, 130, 50);
    pop();

//connecting lines
    line (70, 75, 85, 350);
    line (230, 75, 215, 350);
}

function drawStraw(){
// straw body
    push();
    fill(0,191,255,50); //sky blue
    rect(140,30,20,300);
    pop();
// straw holes 
    ellipse(width/2,30,20,10);
    ellipse(width/2,330,20,10);
    fill(224,255,255); //light cyan
    arc (width/2, 75 , 160, 60, 0, PI, OPEN);
}

// number of jelly inside the cup represents the hour
function drawJelly(){ 
    for (var i=0; i<(hour()%12-1); i++) {
        push();
        translate(x[i],y[i]);
        rotate(radians(angle[i]));
        noStroke();
        fill(249,246,231,150); //lychee 
        rect (0,0,10,30); //lychee jelly
        pop();  
    }
}

// jelly inside the straw moves up per minute
function strawJelly(m){
        noStroke();
        fill(255,255,142);
        rect (width/2-5,300-(225/60)*m,10,30);
}

// milk inside the cup shrinks per sec
function drawMilk(s){
    stroke(236,220,194); //dark milk color
    fill(247,231,200); //milk color
    quad(70,75,230,75,215,350,85,350); //juice

    
    //cover
    fill(255);
    quad(70,75,230,75,230-(15/60)*s,75+s*(275/60),70+(15/60)*s,75+s*(275/60));

 
    fill(247,231,200); //milk color
    ellipse (width/2, 75+(275/60)*s, 160-(0.5)*s, 60);
}

// number of boba inside the cup & straw represents the hour
function drawBoba(){
    for (var i=0; i<(hour()%12-1); i++) {
        push();
        stroke(70, 51, 51,100); //darker brown
        fill(88,59,57,150); //dark brown 
        ellipse (x[i],y[i],20,20); //boba
        pop();
    }
}

// boba inside the straw moves up per minute
function strawBoba(m){
    noStroke();
    fill(88,59,57);
    ellipse (width/2,300-(225/60)*m,20,20);
}

Project 06: Abstract Clock

I created a lighthouse clock. The ocean level represents the hour of the day with low tide as hour 0 or midnight and when the water level reaches the top of the canvas, or floods the island, it is 11:00. The lighthouse’s beam rotates each minute and the lighthouse beam flashes each second.

sketch
//amyhu
//amhyhu@adrew.cmu.edu
//section d 

var h;  //hour
var m;  //minute
var s;  //second
var theta = 6; //angle to increase by each minute
var r = 500;    //radius of light beam

function setup() {
    createCanvas(450,450);
    background(220);
}

function draw() {
    background("lightblue");

    let h = hour();
    let m = minute();
    let s = second();

    //water level is hour 
    fill("blue");
    h = map(h,0,24,0,height);
    rect(0, height-h, width, height);


    //lighthouse object
    drawLighthouse();

    //island object
    drawIsland();

    //light beam speed is what minute it is
    push();
    translate(125,135);
    var x = r*cos(radians(theta*m));
    var y = r*sin(radians(theta*m));

    //light beam flashing every second
    if(s % 2 == 0){
        stroke("yellow");
        strokeWeight(18);
        line(0,0,x,y);   
    }else{
        stroke("white");
        strokeWeight(18);
        line(0,0,x,y);
    }
    pop();
}

function drawIsland(){
    fill("lightyellow");
    //noStroke();
    ellipse(0,height,500);
}

function drawLighthouse(){
    //rectMode(CENTER);
    //stroke(1);
    fill("white");
    rect(110,120,30,50);    //top white bit
    fill("red");
    rect(100,150,50,200);   //red
    fill("white");
    rect(100,170,50,20);    //white stripe
    fill("yellow");
    circle(125,135,20);      //light circle
}

Pacman Clock

For this assignment, I thought it would be cool to build off last week’s wallpaper and make my Pacman a dynamic clock. It is supposed to be read left to right, then down. So the two horizontal Pacmans are the hour and minute (top and bottom) and the vertical Pacman is the seconds.

clock_asu

// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):  

function setup() {
  createCanvas(450,590);
}

function dotGrid() {
  var PADDING = 20;
  var ROWS =19;
  var COLUMNS =13;
  var CELL_COLOR = 'Blue'


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*34);
      var top = PADDING+(row*34.3);
      fill(random(255),random(255),random(255))
      circle(left,top,10);
    }
  }
}

function blueBaracades() {

  var PADDING = 40;
  var ROWS = 4;
  var COLUMNS = 3;
  var CELL_SIZE = 140;
  var CELL_COLOR = 'Blue'


  fill(0);
  stroke('Blue')
  strokeWeight(3);


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*CELL_SIZE);
      var top = PADDING+(row*CELL_SIZE);
      var size = CELL_SIZE - 50;
      rect(left,top,size,size);
    }
  }
}

function pacmanH(h){
  
  fill('yellow');
  noStroke();

    push()                                                //hour
    translate(10,height/3.2);
    rotate(radians(310));
    arc(h*10,h*10,35,35,radians(80),radians(35)/2);        // increments by *10 pixels to the right
    pop();
}

function pacmanM(m){

  fill('yellow');
  noStroke();

    push();                                              // minute
    translate(width,height/1.33);
    rotate(radians(140));
    arc(m*4,m*4,35,35,radians(80),radians(20)/2);        // increments by *4 pixels to the left
    pop();
}

function pacmanS(s){

  fill('yellow');
  noStroke();

    push();                                                // second 
    translate(2*width/3-7,height/26);
    rotate(radians(45));
    arc(s*6,s*6,35,35,radians(80),radians(20)/2);           // increments by *6 pixels down
    pop();

}



function draw(){
  background('Black');
  dotGrid();
  blueBaracades();

var s = second();
var h = hour();
var m = minute();

  pacmanH(h);
  pacmanM(m);
  pacmanS(s);


}

Mug Clock

I was inspired by the coffee mugs that change based on the temperature of the liquid inside. However instead of temperature this mug changes based on time. The color depends on the hour of the day, the height depends on the minute and the steam depends on the second.

sketch
//Nakshatra Menon
//Section C

var cupHeight; 

function setup() {
    createCanvas(480, 480);
    background(246, 242, 240);
}



function draw() {
    push();
    colorMode(HSB);
    background(180, hour()*2, 42);         
    pop()
    fill(44, 28, 7);
    noStroke();
    rect(0, 300, width, 200);             
    cup(240, 300);
}


function cup(x,y){ // draws cup
    cupHeight = -minute();                           // makes the cup taller with the min  
    push();
    translate(x,y)                                   // center of the liquid becomes the origin 
    // cup handle
    strokeWeight(10);
    stroke(170);
    noFill(); 
    ellipse(70, cupHeight+40, 48-cupHeight, 44);

    // saucer
    strokeWeight(1);
    noStroke();
    c();                               // color 
    ellipse(0, 75, 120, 20);
    fill(0, 0, 0, 50);                // shadow 
    ellipse(0, 75, 100, 15); 
 
    // body of cup 
    strokeWeight(1); 
    noStroke();
    c();                               // color 
    beginShape();
        curveVertex(-76, cupHeight);
        curveVertex(-76, cupHeight);
        curveVertex(-62, 27);
        curveVertex(-38, 60);
        curveVertex(0, 75);
        curveVertex(38, 60);
        curveVertex(62, 27);
        curveVertex(76, cupHeight);
        curveVertex(76, cupHeight);
    endShape();

    // liquid
    strokeWeight(5);
    stroke(170);
    fill(110, 69, 17);
    ellipse(0, cupHeight, 150, 20);
    pop();

    // steam 
    push();
    translate(x, y-45)                      
    steam();
    pop();
}
    
function c(){ // changes the color based on the hour 
    // rounds up the number
    var f = ceil(hour()/2)                            
    var f2 = ceil(hour()/3)
    var f3 = ceil((hour()-12)/2)
    var f4 = ceil((hour()-12)/3) 

    // color changes based on hour 
    if(hour()>= 0 & hour()<= 4){                   // color goes from red to green
        fill((255-63*hour()),63*hour(), 0)
    }

    if (hour() > 4 && hour() <= 8){                 // color goes from green to blue
        fill(0,(255-63*f),43*f)
    }

    if(hour()> 8 && hour()<= 12){                   // color goes from blue to red
        fill(43*f2, 0, (255-43*f2))
    }

    if(hour()> 12 && hour()<= 16){                // color goes from red to green
        fill((255-43*(hour()-12)),43*(hour()-12), 0)
    }

    if (hour() > 16 && hour() < 20){             // color goes from green to blue
        fill(0,(255-43*(f3)),43*(f3))
    }

    if(hour()>= 20 && hour()<= 24){             // color goes from blue to red
        fill(43*(f4), 0, (255-43*(f4)))
    }   
}


function steam(){ // steam changes based on second 
    if (second()<=30){                           // when sec less/equal than 30
        fill(255, 255, 255, 120-2*second());    // the opacity changes depending on the second 
        beginShape()                            // shape 1 
            curveVertex(0, -12);
            curveVertex(0, -12);
            curveVertex(-16+second(), -34);
            curveVertex(-53+second(), -57);
            curveVertex(-52+second(), -107);
            curveVertex(21+second(), -119);
            curveVertex(10+second(), -158);
            curveVertex(47, -171);
            curveVertex(54-second(), -108);
            curveVertex(18-second(), -80);
            curveVertex(42-second(), -43);
            curveVertex(13-second(), -24);
            curveVertex(0, -12);
            curveVertex(0, -12);
        endShape();
    }
    if (second()>30){                           // when sec greater than 30
        fill(255, 255, 255, 120-2*second());   // opacity changes based on second 
        beginShape()                           // shape 2 
            curveVertex(0, -12);
            curveVertex(0, -12);
            curveVertex(-16-second(), -34);
            curveVertex(-53-second(), -57);
            curveVertex(-52-second(), -107);
            curveVertex(21-second(), -119);
            curveVertex(10-second(), -158);
            curveVertex(47, -171);
            curveVertex(54+second(), -108);
            curveVertex(18+second(), -80);
            curveVertex(42+second(), -43);
            curveVertex(13+second(), -24);
            curveVertex(0, -12);
            curveVertex(0, -12);
        endShape();
    }
}

egg time(r)

hours = yolks in the pan. minutes = rotation of pan. month = eggs in carton. this one hurt my brain the most so far!

sketch 

// jaden luscher
// jluscher@andrew.cmu.edu
// section a
// project-06: abstract clock
// EGG CLOCK
// the egg clock counts hours as eggs cracked in the pan,
// months as eggs in the carton, and minutes as the rotation of the pan.

// INITIATING VARIABLES
var xYolk = 0;    // first yolk starts north-facing
var yYolk = 40;   // distance between yolk and center of pan
var hr;
var mo;

function setup() {
  createCanvas(400, 300);
  noStroke();
  angleMode(DEGREES);
  frameRate(10);
}

function draw() {
  background(240);
  translate(150, 150);  // center of pan

  hr = hour() % 12; // convert 24 hour clock to 12
  mo = month();

  stovetop();

  // EGG WHITE
  fill(255);
  ellipse(0, 0, randomGaussian(110,1));

  // EGG YOLK
  push();
  for (var i = 0; i <= hr; i++) {
    eggYolk(xYolk, yYolk);
    rotate(360 / hr);
  }
  pop();

  // EGG CARTON
  eggcarton();
  monthcounter();
}

function stovetop() {
  // SHADOWS
  push();
  fill(220);
  rect(90, 90, -15, -240);
  rect(-90, 90, -15, -240);
  rect(90, 90, -240, -15);
  // GRATES
  noFill();
  strokeWeight(4);
  stroke(120);
  line(-150, 90, 90, 90);
  line(-150, 0, 90, 0);
  line(-150, -90, 90, -90);
  line(90, 90, 90, -150);
  line(0, 90, 0, -150);
  line(-90, 90, -90, -150);
  pop();
  // PAN
  push();
  fill(150);    // grey for pan
  rotate(minute()*6);
  minutecounter();
  ellipse(0, 0, 140);   // pan outer circle
  fill(120);
  ellipse(0, 0, 130);    // pan inner circle
  pop();
}

function eggYolk(xYolk, yYolk) {
  fill(255, 180, 0);
  ellipse(xYolk + noise(-1, 1), yYolk + noise(-1, 1), random (18, 20));
}

// PAN HANDLE ROTATES 360 DEGREES BY THE HOUR
function minutecounter() {
  push();
  fill(220, 20, 20);
  rect(-8, -80, 16, -50);
  ellipse(0, -130, 16);
  pop();
  rect(-6, 0, 12, -80);
}

function eggcarton() {
  push();
  fill(240, 230, 210);  // light grey
  rect(145, -95, 70, 190);
  fill(220, 220, 210);  // darker grey
  rect(215, -95, 35, 190);
  translate(165, -75);
  var x = 0;
  var y = 0;

  // EMPTY EGG CARTON (GREY DOTS)
  for (var j = 0; j < 2; j++) {
    for (var i = 0; i < 6; i++) {
      ellipse(x, y, 28);
      y += 30;
    }
    y = 0;
    x += 30;
  }
  pop();
}

function monthcounter() {
  push();
  translate(165, -75);
  fill(255);
  var x = 0;
  var y = 0;
  // EGGS FOR JANUARY TO JUNE
  for (var j = 0; j < constrain(mo, 0, 6); j++) {
    ellipse(x, y, 22);
    y += 30;
  }
  // EGGS FOR MONTHS JULY TO DECEMBER
  y = 0;
  x += 30;
  for (var j = 6; j < mo; j++) {
    ellipse(x, y, 22);
    y += 30;
  }
  pop();
}

Project 06- Abstract Clock

Graham Murtha

Section A

For this project, I wanted to document time with an apple tree/ deciduous tree. As the minute passes, the leaves change color from green to red, and at the end of each minute wilt off and blow away. As the hour passes, the ground that the tree is on grows more and more red as the leaves/apples fall to the ground. As the day passes, the background color (sky) gets darker and darker, until the last hour of the day, where it goes totally black. There is also a person under the tree trying to collect the falling foliage/apples.

sketch
// Graham Murtha
//Section A
//gmurtha@andrew.cmu.edu
//Project 06 Abstract Clock


// IF YOU STICK AROUND FOR A BIT THE LEAVES WILL WILT AND BLOW AWAY!!

var y = 0
function setup() {
    createCanvas(420, 480);
    background(200,200,255);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES);
}

function draw() {

    //background color of sky// CHANGES THROUGHOUT THE DAY- DARKEST AT THE 24TH HOUR
    var h = hour()
    var sky = map(h,0,24,255,0)
    background(50,100,sky);

    // outline
    stroke(200)
    noFill();
    strokeWeight(.5);
    ellipse(width/2,height/2.75, 300);

    // Tree trunk
    noStroke();
    fill(100,60,0)
    rect((width/2)-10,height-100,20,-210)
    triangle(width/2,height-130,(width/2)-20,height-100,(width/2)+20,height-100)


    //GROUND COVER - CHANGES WITH EVERY HOUR- BECOMES MORE RED AS THE HOUR CONTINUES

    var m = minute()
    var g = map(m,0,60,0,255) // red for ground fill
   
    fill(g,255-g,0);
    rect(0,height-100,width,100);


//recentering origin to the middle of the tree circle
   translate(width/2,height/2.75);


//APPLE PICKER
    var s1 = second()
    var p = map(s1,0,60,-100,100) // changing position under the tree
    fill(10)
    rect(p,150,20,40);
    ellipse(p+10,140,20);
    strokeWeight(3);
    stroke(10);
    line(p+2,190,p,210)
    line(p+18,190,p+20,210)
    line(p,150,p-12,170)
    line(p+20,150,p+33,170);
   
    //basket
    strokeWeight(1);
    fill(255,255,140);
    rect(p-15,170,50,20);


// BRANCHES (STATIC)
    stroke(100,60,0);
    strokeWeight(6);
   

    line(0,0,150,0);
    line(100,0,150,-30);
    line(100,0,150,30);

    line(0,0,-150,0);
    line(-100,0,-150,-30);
    line(-100,0,-150,30);

    push(); //top left quad
    rotate(120);
    line(0,0,150,0);
    line(100,0,150,-30);
    line(100,0,150,30);
    pop();

   push(); // top right quad
   rotate(60);
   line(0,0,150,0);
     line(100,0,150,-30);
    line(100,0,150,30);
   pop();

   push(); // bottom right quad
    rotate(-60);
   line(0,0,150,0);
    line(100,0,150,-30);
    line(100,0,150,30);
   pop();

   push(); // bottom left quad
   rotate(240)
   line(0,0,150,0);
    line(100,0,150,-30);
    line(100,0,150,30);
   pop();



//APPLES

    var s = second()
    var rg = map(s,0,60,0,255) // changing color (red-green)
    var x = 150
    var r = .2 // fall rate

    for (var i= 0 ; i < 30 ; i++) {
        //base geometry for apples
        rotate(15); 
        x -= r*sin(15);
        noStroke();
        fill(rg,255-rg,0);
        ellipse(x,y,30,15);
        ellipse(x-50,y,15,10);
        
        // falling geometry for apples (wilting)
        if(s>50 & s<60){
            rotate(15);
            noStroke();
            fill(rg,255-rg,0);
            ellipse(x,y,30,15);
            ellipse(x-50,y,15,10);
            x -= r*sin(15);
            y+=r
          }
    }


}

Project 06 – Abstract Clock

This abstract clock uses the number of vertices in the polygon to determine the hour. The minute is represented by verticle dots and seconds are represented by the rotation of the polygon.

sketch
// Emily Franco
// Section C
// efranco@andrew.cmu.edu
// Project-06
 

//twelve hr clock
var h;
var backColor;

function setup() {
    createCanvas(400, 400);

    //convert hour to 12hr cycle
    if (hour()>12){
        h = hour()-12;
    }else if (hour==0){
        h = 12;
    }else {
        h = hour();
    }

    //set background to white if daytime and black for night time
    if(hour()>=5 & hour()<=19){
        backColor = color(215,218,219);
    }else {
        backColor = color("black");
    }

    background (backColor);
 }


function draw() { 
    //draw minutes
    minuteDots();
    //draw hours and seconds
    polyRotate ();
    
} 


//-----HOUR-----
//draw polygon for hour - num of vertices = hour
function polygon(x,y,rad,points){
    noFill();
    strokeWeight(0.5);
    var newX = 0;
    var newY = 0;

    //find angle increments
    var angle = 360/points;

    //if hour is 0 than shape is an ellipse
    if(h==0){
        ellipse(0,0,rad*2,rad);
    }else {
        //if house is more than 1, shape has same num of vertices
        beginShape();
        for(var i=0; i<360; i+=angle){
            newX = x + rad * cos(radians(i));
            newY = y + rad * sin(radians(i));
            vertex (newX, newY);
        }
        endShape(CLOSE);
    }
}


//-----SECOND-----
//draw rotating shape - each shape is a second
function polyRotate (){
    push();
    translate (width/2, height/2);
    var angleIncrement = 6; 

    //map to 180 not 360 since shape has 2 sides
    var secMap = map(second(),0,60,0,360);
    for(var a=0; a<=secMap; a=a+angleIncrement){
        //marking poly - light blue
        //drawing "delay"
        if(a>0){
            push();
            rotate(radians(a-angleIncrement));
            stroke(12,222,245);
            polygon(0,0,100,h);
            pop(); 
        }

        //tracking poly - magenta
        push();
        rotate(radians(a));
        strokeWeight(1);
        stroke(255,13,223);
        polygon(0,0,100,h); 
        pop();
    }
    pop();
    //restart seconds
    if(second()==59){
        background(backColor);
    }
}


//-----MINUTE-----
//draw dot in line for every minute
function minuteDots(){
    push();
    translate (width/2, 0);

    //map minutes to height of minutes bar
    var minuteHeights = map(minute(),0,60,20,height-20);

    //draw dots
    for (var d=20; d<=minuteHeights; d= d +height/60){
        strokeWeight(4);

        //marking poly - yellow
        //drawing "delay"
        if(d>20){
            stroke(237,204,14);
            point(0,d-height/60); 
        }
        
        //tracking poly - magenta
        stroke(255,13,223);
        point(0,d); 
        
    }
    pop();

    //restart minutes
    if(minute()>=60){
        background(backColor);
    }
}

Project 6 – Abstract Clock

I created an ice cream clock. The scoops run on standard time rather than military time so for every hour, a scoop is added. At 12 pm there is no scoop and it resets. For every second, a new sprinkle falls to the bottom and the chocolate ice cream slowly changes to a raspberry color. With every minute, the ice cream puddle at the bottom of the canvas gets larger ( as if its rising).

sketch
// SRISHT BHAVSAR
// SECTION C 15-104
// PROJECT 6

var diam = 30; // scoop diam
var h; //hours 
var m; //min
var s; //second

var c = [];

function setup() {
    createCanvas(200, 20);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    for (var i=0; i < 60; i++)  {
        c[i] = color(random(255), random(255), random(255));
    } 
}

function draw() {
    createCanvas(480, 480);
    background('lightblue'); // light blue

    let h = hour();
    let m = minute();
    let s = second();


    //minutes equals height of puddle
    translate(0,0)
    stroke(210, 180, 140);
    fill('beige');
    rect(0,480,480,-(m));


    push()
    noStroke();
    translate(500,510);
    rotate(radians(180));
    for (var i = 0; i < diam ; i+= diam) {
        for (var j = 0; j < (h-12) * diam ; j+= diam) { // instead of military time, it is 12 hr time
            
            if ( j % 4 == 0) {
                fill(98 + s,52,18+s); // chocolate// changes color by second
            }

            if ( j % 4 == 1) {
                fill('beige'); // vanilla

            }

            if ( j % 4 == 2) {
                fill('lightpink'); // strawberry
            }


            circle(250,j+150,diam); // scoop

        }
    }
    pop();


// ice cream cone w month and date
    push();
    fill(210, 180, 140);
    strokeWeight(5);
    stroke('beige');
    translate(150,320);
    scale(.5);
    triangle(155,100,203,300,245,100); 
    pop();



// ice cream sprinkles are seconds
    push();
    fill(c[i])
    scale(0.8);

    for(var i =0; i < 4; i+= 4){
        for(var j = 0; j < (s*10); j+= 7) {
            ellipse(310, j, 3, 5);
        }
    }
    pop();
    frameRate(1);

}