Author: Chenyi Li

Instruction:

1. mountainMode: Move mouse right and left to see the change of day and night. The sine wave represents the mountain. Moving mouse to the left, you can see the moon and the star. Moving mouse to the right, you can see the sun.

2. starMode: A ring of light spreads like stars.

3. geoMode: The clock is running! You are running out of time. The number of circles around your mouse is increasing within 60 seconds, which represents the chaos degree.

*/

​

​

let mode = 0;

let r = 100;

let a = 0;

let spd = 10;

let count = 1;

let dr = 0;

let waterX = 0;

let waterY = 280;

function setup() {

  createCanvas(800, 800);

  // mountainMode();

​

}

​

​

​

function draw() {

  background(0);

  if (mode%3 == 0) {

    mountainMode();

  } else if (mode%3 ==1) {

    starMode();

  } else{

    geoMode();

}

}

​

​

function mouseClicked() {

  mode +=1;

​

}

​

function mountainMode() {

    angleMode(RADIANS);

  noStroke();

​

  fill('red')

  let rScale = map(mouseX,0,width,0,500);

  ellipse(mouseX,mouseY, rScale);

  fill('blue');

  let mScale = 300-rScale;

  let mX = mouseX-rScale*0.1;

  let mY = mouseY-rScale*0.01;

  if (mScale <0) {

    mScale =0;

  }

  ellipse(mX,mY,mScale);

  fill('yellow');

  ellipse(mX-100,mY+100,mScale*0.4);

  // push();

  beginShape();

  noFill();

  stroke(255);

//   vertex(0, height);

​

//   for (let x = 0; x < width; x++) {

//         let v = (noise((frameCount + x) * 0.005) * width) / 2 + width / 2;

//         vertex(x, v);

//   }

​

//   vertex(width, height);

  let a = 0.0;

  let inc = TWO_PI / 25.0;

  for (let j = 0; j < height*2; j+=200){

     for (let i = 0; i < width; i++) {

      line((i * 4+frameCount)%width, j, (i * 4+frameCount)%width, j + sin(a) * 100.0);

      a = a + inc;

    }

  }

​

  endShape();

  // pop();

​

}

​

​

​

function starMode() {

   angleMode(RADIANS);

  stroke(random(255),random(255),random(255))

  // a = a+1;

  translate(width/2,height/2);

  for (let a = 0; a < 7; a+=0.1) {

    push()

      translate((frameCount*5)%(width)*cos(a),(frameCount*5)%(width)*sin(a))

      line(0,0,r*cos(a),r*sin(a));

    pop()

    }

}

​

function geoMode() {

    //setting the time

  drop();

​

   angleMode(DEGREES);

  let hr = hour();

  let mn = minute();

  let sc = second();

  translate(width/2,height/4)

  // stroke(255);

  // ellipse(0,0,200);

  strokeWeight(2);

  stroke(color(255, 255, 255));

  noFill();

  let secondAngle = map(sc, 0, 60, 0, 360);

  arc(0, 0, 300, 300, 0, secondAngle);

  //minute angel rotation 

  stroke('yellow');

  let minuteAngle = map(mn, 0, 60, 0, 360);

  arc(0, 0, 280, 280, 0, minuteAngle);

  //hour angel rotation 

  stroke('blue');

  let hourAngle = map(hr % 12, 0, 12, 0, 360);

  arc(0, 0, 260, 260, 0, hourAngle);

  //inside second line movement 

  push();

  rotate(secondAngle);

  stroke('white');

  line(0, 0, 100, 0);

  pop();

  //inside minute line movement 

  push();

  rotate(minuteAngle);

  stroke('yellow');

  line(0, 0, 80, 0);

  pop();

  //inside hour line movement 

  push();

  rotate(hourAngle);

  stroke('blue');

  line(0, 0, 60, 0);

  pop();

  //center point 

  stroke(300);

  point(0, 0);

​

​

  console.log(dr)

​

​

}

​

​

function drop() {

    let sc = second();

  for (let i =0; i < sc; i++){

    ellipse(mouseX+random(-5*sc,5*sc),mouseY+random(-5*sc,5*sc),20)

  }

}