​

//Flame's flckering, melting wax of the candle, rains when the sky becomes slightly darker and starts in the middle of the day till night, sun moving away to make space for moonlight to drop on candle, clouds growing bigger as the day becomes darker - mouse press or key press to change the  colour of the candle and to view the beautiful shining twinkling stars, Clouds coming and changing colours from left to right. right to left. https://glitch.com/~cc-lab-shivanjali 

​

let colorVal1;

let colorVal2;

let colorVal3;

let extraCanvas;

​

function setup() {

  createCanvas(600, 600);

  colorVal1 = 255;

  colorVal2 = 255;

  colorVal3 = 125;

  extraCanvas = createGraphics(400, 400);

  extraCanvas.clear();

}

​

function draw() {

  // background(220);

​

  let h = hour();

  let m = minute();

  let s = second();

  let d = day();

  let mo = month();

  let y = year();

  let mm = millis();

​

  //CANDLE 

  let currHeight = 5 * (60 - s); //height of the candle

​

  //Changing the sky to the blues reflecting- the passage of time by 

  //1- background

  if (currHeight <= 300 && currHeight > 280) {

​

    background(130, 225, 255); //blue light

  }

  // 2 - background

  else if (currHeight <= 280 && currHeight > 260) {

    background(130, 225, 255); //blue light

    //background(93, 167,234); 

​

  }

  // 3- bacground

  else if (currHeight <= 260 && currHeight > 240) {

​

    background(64, 121, 204);

​

    // 4 - background 

  } else if (currHeight <= 240 && currHeight > 220) {

​

    background(45, 93, 182);

    console.log(`Mouse Press to see the Stars at night - ${h}:${m}:${s}`); //time & mouse press

    // 5 - background

  } else if (currHeight <= 220 && currHeight > 200) {

​

    background(7, 52, 197);

  }

  //6 - background 

  else if (currHeight <= 200 && currHeight > 180) {

​

    background(4, 7, 198);

    console.log(`Mouse Press to see the Stars in a few seconds - ${h}:${m}:${s}`); //time & mouse press

    //7 - background

  } else if (currHeight <= 180 && currHeight > 160) {

    background(3, 0, 225);

    // text('TIME',10,548);

​

​

    //8 - background

  } else if (currHeight <= 160 && currHeight > 140) {

​

    background(14, 59, 237);

    console.log(`Mouse Press to see the Stars & the time now is - ${h}:${m}:${s}`); //time & mouse press

​

    //9 - background 

  } else if (currHeight <= 140 && currHeight > 120) {

​

    background(24, 52, 237);

​

​

    //10 - background 

  } else if (currHeight <= 120 && currHeight > 100) {

​

    background(22, 69, 200);

    console.log(`Mouse Press to see the Stars & the time now is - ${h}:${m}:${s}`); //time & mouse press

​

    //11 - background

  } else if (currHeight <= 100 && currHeight > 80) {

​

    background(28, 64, 140);

​

​

    //12 - background 

  } else if (currHeight <= 80 && currHeight > 60) {

​

    background(8, 3, 54);

    console.log(`Mouse Press to see the Stars & the time now is - ${h}:${m}:${s}`); //time & mouse press

​

    // 13 - background 

  } else if (currHeight <= 60 && currHeight > 40) {

​

    background(4, 13, 69);

​

​

    //14 background

  } else if (currHeight <= 40 && currHeight > 20) {

​

    background(3, 25, 51);

​

​

    //15- background

  } else if (currHeight <= 20 && currHeight > 0) {

    background(0);

​

  } else

​

​

    fill(0);

  //bottom left - corner text

  textSize(10);

  //text(h + ':' + m + ':' + s, 120, 192)

  text('DD/MM/YY', 10, 580);

  textSize(12);

  text(`${d}:${mo}:${y}`, 10, 590); //date,year.month

  text('TIME', 10, 548);

  text(`${h}:${m}:${s}`, 10, 560); //time

​

  //CONSOLE - height of candle, sun's x axis, seconds 

  console.log(`second is:${s},Current Candle Height:${currHeight},Sun's x axis :${600-currHeight}`);

​

  //MELTING WAX OF CANDLE 

  let meltedwax = 5 * (20 - s);

  let meltingwax = 3 * (10 / s);

  noStroke();

  fill(colorVal1, 70, colorVal3);

  ellipse(300, 600, 12, 6 - meltedwax / 9.6);

  ellipse(330, 600, 14, 5 - meltedwax / 8);

​

  //console.log(`sec is ${s},${meltedwax},${meltedwax}`);

​

  //FLAME -  is becoming shorter, with the passage of time 

  if (s <= 55) {

​

    noStroke();

    fill(255, random(220, 250), random(0, 96));

    ellipse(315, -15 + 600 - currHeight, 5, 15);

​

    noStroke();

    fill(244, random(137, 200), random(0, 70));

    ellipse(315, 600 - currHeight, 5, 26);

    if (s < 42) {

      noStroke();

      fill(255, random(220, 250), random(0, 96));

      ellipse(315, -15 + 600 - currHeight, 12, 25);

​

      noStroke();

      fill(244, random(137, 200), random(0, 70));

      ellipse(315, 600 - currHeight, 5, 22);

​

    }

    if (s < 32) {

​

      noStroke();

      fill(255, random(220, 250), random(0, 96));

      ellipse(315, -15 + 600 - currHeight, 20, 50);

​

      //Flame-shadow-Orange

      noStroke();

      fill(244, random(137, 200), random(0, 70));

      ellipse(315, 600 - currHeight, 10, 30);

    }

    //flame - shorter

    if (s < 22) {

      noStroke();

      fill(255, random(220, 250), random(0, 96));

      ellipse(315, -15 + 600 - currHeight, 20, 80);

​

      noStroke();

      fill(244, random(137, 200), random(0, 70));

      ellipse(315, 600 - currHeight, 10, 60);

    }

  }

​

  //Candle - mousepress or keypress to change color of the candle

  push();

  noStroke();

  fill(colorVal1, 70, colorVal3);

  rect(300, 600, 30, -currHeight)

  pop();

​

  //CLOUDS - growing bigger as per time, comes more with passage of time, changes it's color as the sky becomes darker.

​

  //clouds come over the time cloud 1

  if (s > 45) {

    fill(90); // grey at night

    ellipse(40, 90, 99, -12 - s - 5);

    ellipse(80, 80, 90, -12 - s - 9);

    ellipse(100, 90, 100, -6 - s - 10);

    ellipse(150, 90, 100, -8 - s - 12);

​

  } else if (s > 31) {

    fill(7, 30, 52); // dakr blue  in the evening

    ellipse(40, 90, 99, -12 - s - 5);

    ellipse(80, 80, 90, -12 - s - 9);

    ellipse(100, 90, 100, -6 - s - 10);

    ellipse(150, 90, 100, -8 - s - 12);

​

  } else if (s > 18) {

    fill(42, 91, 182); // sky-medium-blue in the noon

    ellipse(40, 90, 99, -12 - s - 5);

    ellipse(80, 80, 90, -12 - s - 9);

    ellipse(100, 90, 100, -6 - s - 10);

    ellipse(150, 90, 100, -8 - s - 12);

​

  } else if (s > 2) {

    fill(92, 164, 232) //light blue in morning

    ellipse(40, 90, 99, -12 - s - 5);

    ellipse(80, 80, 90, -12 - s - 9);

    ellipse(100, 90, 100, -6 - s - 10);

    ellipse(150, 90, 100, -8 - s - 12);

  }

​

  //cloud- 2, increasing the size of cloud by every second

  if (s > 44) {

    fill(90); // grey at night

    ellipse(280, 40, 90, -9 - s - 13);

    ellipse(320, 40, 110, -7 - s - 9);

    ellipse(220, 40, 120, -8 - s - 8);

​

  } else if (s > 32) {

    fill(7, 30, 52); // dakr blue  in the evening

    ellipse(280, 40, 90, -9 - s - 13);

    ellipse(320, 40, 110, -7 - s - 9);

    ellipse(220, 40, 120, -8 - s - 8);

​

  } else if (s > 17) {

    fill(42, 91, 182); // sky-medium-blue in the noon

    ellipse(280, 40, 90, -9 - s - 13);

    ellipse(320, 40, 110, -7 - s - 9);

    ellipse(220, 40, 120, -8 - s - 8);

​

  } else if (s > 4) {

    fill(92, 164, 232) //light blue in morning

    ellipse(280, 40, 90, -9 - s - 13);

    ellipse(320, 40, 110, -7 - s - 9);

    ellipse(220, 40, 120, -8 - s - 8);

​

  }

​

  //cloud- 3,increasing the size of cloud by every second

  if (s > 43) {

    fill(90); // grey at night

    ellipse(420, 110, 80, -14 - s - 8);

    ellipse(400, 100, 100, -14 - s - 10);

    ellipse(450, 95, 80, -15 - s - 8);

    ellipse(460, 105, 100, -10 - s - 8);

​

  } else if (s > 33) {

    fill(7, 30, 52); // dakr blue  in the evening

    ellipse(420, 110, 80, -14 - s - 8);

    ellipse(400, 100, 100, -14 - s - 10);

    ellipse(450, 95, 80, -15 - s - 8);

    ellipse(460, 105, 100, -10 - s - 8);

​

  } else if (s > 16) {

    fill(42, 91, 182); // sky-medium-blue in the noon

    ellipse(420, 110, 80, -14 - s - 8);

    ellipse(400, 100, 100, -14 - s - 10);

    ellipse(450, 95, 80, -15 - s - 8);

    ellipse(460, 105, 100, -10 - s - 8);

​

  } else if (s > 6) {

    fill(92, 164, 232) //light blue in morning

    ellipse(420, 110, 80, -14 - s - 8);

    ellipse(400, 100, 100, -14 - s - 10);

    ellipse(450, 95, 80, -15 - s - 8);

    ellipse(460, 105, 100, -10 - s - 8);

  }

​

  //cloud- 4, increasing the size of cloud by every second

  if (s > 42) {

    fill(90); // grey at night

    ellipse(500, 30, 120, -14 - s - 10);

    ellipse(550, 28, 100, -15 - s - 8);

    ellipse(530, 45, 100, -10 - s - 8);

​

  } else if (s > 34) {

    fill(7, 30, 52); // dakr blue  in the evening

    ellipse(500, 30, 120, -14 - s - 10);

    ellipse(550, 28, 100, -15 - s - 8);

    ellipse(530, 45, 100, -10 - s - 8);

​

  } else if (s > 15) {

    fill(42, 91, 182); // sky-medium-blue in the noon

    ellipse(500, 30, 120, -14 - s - 10);

    ellipse(550, 28, 100, -15 - s - 8);

    ellipse(530, 45, 100, -10 - s - 8);

​

  } else if (s > 8) {

    fill(92, 164, 232) //light blue in morning

    ellipse(500, 30, 120, -14 - s - 10);

    ellipse(550, 28, 100, -15 - s - 8);

    ellipse(530, 45, 100, -10 - s - 8);

  }

​

  //RAIN - by millisecond

  push();

  let rectX = 0;

  rectX = rectX + pow(mm, 20) % 600; //exponential-20 power of milliseconds of canvas size 600 to increase the spead by modulator

  // if (rectX >= width) {

  //   // If you go off screen.

  //   rectX = 0;

  // }

  fill(91, 161, 223); /// rain drop fill

  // rect(rectX, 0, 1, 20);

  // rect(rectX+random(1,20), 40, 1, 60);

  // rect(rectX+random(1,100), 100, 1, 120);

  // rect(rectX+random(1,200), 200, 1, 220);

  // rect(rectX+random(1,300), 400, 1, 420);

  if (s > 20) //rains on 20 seconds 

  {

    let dropHeight = 5;

    let gap = 20;

    let startY = 0; // y axis of rect/rain

    for (i = 1; i <= 25; i++) // 20+ 5 = i goes max 25 multiple  rain drops 

    {

      rect(rectX + randomGaussian(200, 400), startY, 1, startY + dropHeight); // random gaussian - unequal pattern of rain

      startY = startY + dropHeight + gap;

      // console.log(`${i}, ${startY}`) 

      //console.log(`${20%6}, ${mm}`) - milliseconds increasing

    }

  }

​

  // BELOW IS ANOTHER WAY I EXPLORED TO MAKE THE SUN MOVE FROM LEFT TO RIGHT, I LIKED THIS VERY MUCH SO FOR MY OWN REFERENCE AM KEEPING THE CODE HERE, THANK YOU!

  //  circle(mouseX,190,1*s);

  // }

​

  //for sunlight, go left to right to see the night dark

  // push();

  // var xlo = 60;

  // var xhi = 480;

  // var x = xlo - xhi;

  // var l = 10;

  // var sun = map(mouseX + 2, 0, width, xlo, xhi);

  // // ellipse(sun, 50,sun,30);

  // // scale(sun);

  // // circle(sun, 70 + 20*(480-sun)/48, 50 + 20*(480-sun)/480);

  // blendMode(HARD_LIGHT);

  // var sunlight = map(sun, xlo, xhi, 0, 1);

  // var col1 = color("orange");

  // var col2 = color("white,yellow");

  // var sunfill = lerpColor(col1, col2, sunlight);

  // fill(sunfill);

  // strokeWeight(5);

  // // var movesun = circle(sun, 70 + 20*(480-sun)/48, 50 + 20*(480-sun)/480);

  // pop();

  // let s = second();

  // var col1 = color("orange");

​

​

  //SUN TO MOON - shrinking size with the time, along with color

  push();

  let circleX = 70 + 7 * s; // radius + 7x60 seconds

  var col1 = color(245, 131, 17); //min color range

  var col2 = color(248, 247, 238); //max color range 

  var sunlight = map(circleX, 70, 490, 0, 1);

  var sunfill = lerpColor(col1, col2, sunlight);

  //sun-fill colors from range col1 and col2 and colours it to the sun.

  fill(sunfill);

  strokeWeight(5);

  circle(circleX, 70, 50 + 50 * (60 - s) / 60); // circle x = x axis which is moving to the right along with passing seconds, Y axis remains constant, radius of the circle changes by the passing seconds. 

  // 50 (radius) + 50 radius multiplied by (60 - seconds (60sec) result = 50

  pop();

​

​

  //STARS

  /*MousePress - to see the twinkling stars, responds in 30 seconds,as the night sky approaches.😍 I have learned this new function of 'graphic-twinkling effect' from youtube video - & reference to the video - https://youtu.be/TaluaAD9MKA  */

  push();

  image(extraCanvas, 0, 0);

  let Star1 = random(width);

  let Star2 = random(height);

  if (mouseIsPressed && currHeight <= 160) {

    extraCanvas.fill(0); //created extra canvas to show stars twinkling 

    fill(231, 231, 231); //stars colors

    ellipse(Star1, Star2, 5, 10); //star shape

  }

  pop();

​

} //closing draw function here

​

function mousePressed() {

  //mouse press to change the color of the candle  

  //mouse press to view the twinkling stars

  colorVal1 = random(0, 255);

  colorVal3 = random(0, 255);

  colorVal2 = random(0, 255);

}

​

function keyPressed() {

  //press any key to change the color of the candle

  colorVal1 = random(200, 120);

  colorVal3 = random(50, 205);

  colorVal2 = random(100, 255);

}

//THE END