Month: October 2020

The Flower Clock

My idea is to represent time through the growth of an Equinox Flower. This kind of flower is associated with final goodbyes, and legend has it that these flowers grow wherever people part ways for good. In old Buddhist writings, the Equinox Flower is said to guide the dead through samsara, the cycle of rebirth.

The size of the pedals is associated with the unit of time they represent. For example, the inner circle of pedals change their size according to seconds went by.

var x;
var y;
//r represent how far each pedal is from the center
var r=80;
var l=r/2*3;
var angle=0;
var size;
function setup() {
    createCanvas(400, 600);
    angleMode(DEGREES);

    
}

function draw() {
	background(0,19,30);
    var s=second();
    var m=minute();
    var h=hour();
    
    //draw the stem first;
    stem();
    //move the center of the flower to the center;
	translate(width/2,height/2-50);
	push();
		

	//the size of this set of Equinox pedal represents the hour
		if(!h%24==0){
			r=120;
			size=map(hour(),0,60,2,3.5);
			for(var i=0;i<=5;i++){
			  angle+=60;
			  Equinox(r*cos(angle),r*sin(angle),l,size,132);
		    }
		}
		
    //the size of this set of Equinox pedal represents the second
		if(!s%60==0){
			r=60;
			size=map(second(),1,60,0.2,1.5);
			for(var i=0;i<=5;i++){
			  angle+=60;
			  Equinox(r*cos(angle),r*sin(angle),l,size,236);
			
		    }
		}
	//the size of this set of Equinox pedal represents the mintue
		if(!m%60==0){
			r=80;
			size=map(minute(),0,60,1.5,2.0);
			for(var i=0;i<=5;i++){
			angle+=60;
			Equinox(r*cos(angle),r*sin(angle),l,size,181);
		}
		
		pop();
	}


 }
    
function stem(){
	
    push();
    fill(88,122,72,60);
    translate(width/2,250);
    noStroke();
    //this for loop draws the growing calyx at the center
    for (var r = 0; r < 10; r++) {
        if (frameCount <= 180) {
         ellipse(0, 6 + frameCount / 20, 6 + frameCount / 40, 12 + frameCount / 20);
        }
        if (frameCount > 180) {
        frameCount=0;
        }
         rotate(360 / 5);
    }
    pop();
    //main stem
	stroke(88,122,72,120);
	strokeWeight(5);
	line(width/2-20,600,width/2,250);
		
		
	
}
//x and y represent the location; l is the distance to the center; s is the size; c is the color
function Equinox(x,y,l,s,c){
	var w=105;
	var h=50;
	var start=135;
	var end=225;
	push();
//locate each unit's position
	translate(x,y);
	scale(size);
//c is the shade of red each layer has
	stroke(c,50,50);
	strokeWeight(0.5);
	noFill();
//move each unit further from the center
	translate(-l,-105/2);
	rotate(-90);
	for(var i=0;i<7;i++){
      arc(0,l, w,h,start,end);
      w=w*Math.pow( 1.001, 10 );
      h+=8;
      start-=5;
      end+=5;

	}

	
	pop();

	}
	

I took inspiration from cuckoo clocks to make an abstract clock based on a face. The clock gets increasingly fatigued as its tongue inches out with every minute– its cheeks flush and the background also becomes redder with every hour. Saliva drip documents seconds.

function setup() {
  createCanvas(480, 480);
  // time
    var minShift= 2 * minute();
}

function draw(){
  
  //background
  var top = color(200, 219, 162); // pale green
  var bottom = color(124 +3*hour(), 124-hour(), 232- 3*hour()); // purple, turns redder with hours
  setGradient(top, bottom); // background gradient
    //offwhite wall
    noStroke();
    fill(240, 244, 237); //offwhite
    rect(368, 0, 124, height);
  clock();
  
}

function setGradient(color1, color2) { //background gradient
    for(var a = 0; a <= height; a++) {
      var amount = map(a, 0, height, 0, 1);
      var back = lerpColor(color1, color2, amount);
      stroke(back);
      line(0, a, width, a);
    }
}

function clock(){
  //base face
  fill(67, 40, 144);
  rect(0, 58, 265, 330, 0, 110, 0, 0);
  //face side panel
  fill(234, 249, 48); //neon yellow
  rect(-161, 58, 265, 330, 0, 110, 0, 0);
  //pendulum
  fill(208, 216, 91); //darker yellow
  rect(120, 388, 5, 92);
  rect(145, 388, 5, 92);
  //mouth opening
  rect (181, 300, 75, 50, 24, 0, 0, 0);
  //teeth
  fill(240, 244, 237);
  rect (228, 300, 13, 10);
  rect (243, 300, 13, 10);
  //eyes
  eyes();
  //blush
  blush();
  //nose
  fill(170, 192, 255); //lavender
  rect(177, 163, 24, 120);
  triangle(201, 164, 201, 284, 256, 284);
  fill (234, 249, 48); //neon yellow
  triangle(177, 164, 177, 284, 232, 284);
  //lines
  stroke(234, 249, 48);
  strokeWeight(0.75);
  line (83, 163, 248, 163);
  line (177, 141, 177, 379);
  //tongue
  tongue();
  
}

function eyes(){
  //whites
  push();
  fill(240, 244, 237);
  stroke(255, 73, 165);
  strokeWeight(3);
  strokeCap (SQUARE);
  arc(134, 228, 80, 80, PI, TWO_PI, OPEN);
  arc(230, 215, 61, 61, PI, TWO_PI, OPEN);
  //pupils
  fill(255, 73, 165); //pink
  ellipse(153, 213, 22);
  ellipse( 240, 203, 19);
  pop();
}

function blush(){
  fill(255, 73, 165 - 2*hour()); //pink becomes more red with hours
  ellipse(247, 247, 48+ hour());// blush increases with hours
  ellipse(111, 277, 74 + hour());
}

function tongue(){
  fill(255, 73, 165); //pink
  noStroke();
  var minShift= 2*minute();
  rect (181, 334, 154 + minShift, 16, 0, 15, 0, 0); //tongue length increases with minutes
  bird();
  
  // saliva drips by seconds and follows tongue
  fill(170, 192, 255); //lavender
  ellipse(307+ minShift, 376+ second(), 18); 
  triangle(300 + minShift, 370+ second(), 314+ minShift, 370+ second(), 307 + minShift, 360+ second());
  fill(170, 206, 255); //lighter lavender
  ellipse(287+ minShift, 364+ 2*second(), 26); 
  triangle(277 + minShift, 356+ 2*second(), 297+ minShift, 356+ 2*second(), 287 + minShift, 340+ 2*second());
}

function bird(){
  var minShift = 2* minute();
  //feet
  fill(208, 216, 91); //darker yellow
  rect(296 + minShift, 331, 15, 4, 0, 3, 0, 0);
  //legs
  stroke(208, 216, 91); //darker yellow
  strokeWeight(2);
  line(297 + minShift, 306, 297 + minShift, 334);
  line(301 + minShift, 306, 301 + minShift, 334);
  
  //body
  fill(255, 73, 165); //pink
  noStroke();
  ellipse(297 + minShift, 293, 42);
  triangle(280 + minShift, 280, 267+ minShift, 314, 297+ minShift, 314);
  push();
  fill(170, 192, 255); //lavender
  arc(298 + minShift, 293, 42, 42, -QUARTER_PI, HALF_PI, OPEN); //belly
  pop()
  //wing
  fill(240, 244, 237);
  arc(275 +minShift, 295, 43, 43, -QUARTER_PI, HALF_PI, OPEN);
  //head
    //beak
    fill(208, 216, 91); //darker yellow
    triangle (320 + minShift, 260, 320 + minShift, 271, 339 + minShift, 266);
    //head
    fill(255, 73, 165);
    ellipse(313 + minShift, 266, 23);
    //eye
    fill(234, 249, 48); //neon yellow
    ellipse(316 + minShift, 265, 6);

}

sketch

var c; //color
var hourcolor; //color of the hour flower
var mincolor; //color of the minute flower
var seccolor; //color of the second flower
var wintercolor = '#ffffff'; //color of the winter ground
var springcolor = '#c6ed4c'; //color of the spring ground
var summercolor = '#29d359'; //color of the summer ground
var fallcolor = '#f26f16'; //color fo the fall ground

function setup() {
    createCanvas(480, 480);
    hourcolor = color(255,72,72,200); //red
    mincolor = color(255,46,131,200); //pink
    seccolor = color(123,52,214,200); //purple

}

function draw() {
  background('#5e99ef'); //blue sky
  push();
  flower(110,320-10*hour(),hourcolor); //hour flower 
  pop();
  push();
  flower(230,320-4*minute(),mincolor); //minute flower
  pop();
  push();
  flower(350,320-4*second(),seccolor); //second flower
  pop();
  
  noStroke();
  if (month() > 2 & month() <= 5) { //when it is spring--March, April, May 
    fill(springcolor);
    rect(0,width-70,width,70);
  } else if (month() > 5 & month() <= 8  ) { //when it is summer--June, July, August
    fill(summercolor);
    rect(0,width-70,width,70);
  } else if (month() > 8 & month() <= 11) { //when it is fall--September, October, November
    fill(fallcolor);
    rect(0,width-70,width,70);
  } else { //when it is winter--December, January, February
    fill(wintercolor);
    rect(0,width-70,width,70);
  }
}

function flower(x,y,c) { //flower structure
  translate(x,y);
  noStroke();
  fill('#86e55a'); //green
  rect(-2,0,5,500); //flower stem
  ellipse(-10,100,20,10); //stem leaf
  ellipse(10,150,20,10); //stem leaf
  ellipse(-10,200,20,10); //stem leaf
  ellipse(10,250,20,10); //stem leaf
  fill(c);
  for (var i = 0; i < 5; i ++) { //flower petals
    ellipse(0, 0, 20, 70);
    rotate(PI/5);
  }
  fill('#ffd961'); //yellow
  ellipse(0,0,30,30); //flower middle circle
}