In this interactive sketch, it’s all about the simple yet striking choice between day and night. Users can choose to experience the world in two contrasting ways: if you pick night, you’ll watch the skyline fill with stars and a cool, calm atmosphere. If you pick day, you’ll see the sun rise and the colors warm up, bringing a totally different energy. The project uses color and animation to highlight the beauty in both choices and to show how a simple change in time of day transforms the scene.

Sketch:

https://youtu.be/LISSc_h2M5s

Code:

let stars = []; //creates array for stars
let numOfStars = 50;
let starRadius = 3;
let buildHeight = 10;
let sunrise = false;
let y=400;

function setup() {
  createCanvas(600, 400);
  sunY = height; // sun starts below canvas

  for (let i = 0; i < numOfStars; i++) {
    //generates the stars
    let star = {
      x: random(width / 2, width), //elements of the stars
      y: random(height),
      radius: starRadius,
      alphaX: random(255),
      fadeDirection: random([-1, 1]),
      fadeSpeed: random(10),
    };
    stars.push(star); //puts the object star into the array stars
  }
}

//draws nightside
function drawStars() {
  for (let star of stars) {
    star.alphaX += star.fadeSpeed * star.fadeDirection; //fading out the stars in different directions and speeds

    if (star.alphaX <= 0) {
      //if the star reaches 0 alpha (completely invisible), brighten it to make it visible
      star.fadeDirection = 1;
      star.alphaX = 0; //resets alpha

      star.x = random(width / 2, width); //puts it randomly anywhere on the right side of the canvas
      star.y = random(height);
    }

    if (star.alphaX >= 255) {
      //if the star is at max brightness, dim it
      star.fadeDirection = -1;
      star.alphaX = 255; //reset alpha
    }

    // draw star
    push();
    fill(255, 255, 255, star.alphaX);
    noStroke();
    ellipse(star.x, star.y, 3, 3);
    pop();
  }

  //daytime block
  fill(137, 207, 240);
  rect(0, 0, 300, 400);
  fill(255);
  textSize(40);
  textAlign(CENTER, CENTER);
  text("Day", width / 4, height / 2);
  //moon
  noStroke();
  fill(250, 230, 0);
  circle(525, 70, 70);
  //buildings
  push();
  rectMode(CENTER);
  stroke(255);
  fill(48, 25, 52);
  rect(338, 400, 75, 100);
  rect(400, 400, 75, 250);
  rect(475, 400, 75, 150);
  rect(550, 400, 75, 350);
  rect(600,400,50,400);
  fill(220,255,0)
;  pop();
}

//day time
function drawDay() {
  background(137, 207, 240);
  fill(255, 200, 0);
  ellipse(width / 4, y, 60);
      y -= 1;
  if (y <= 150) {
    y += 1;
  }
  noStroke();
  fill(50, 100, 50);
  triangle(35, height, width / 2 - 50, 200, width / 2 - 20, height);

  //nightime block
  fill(25, 25, 112);
  rect(300, 0, 300, 400);
  fill(255);
  textSize(40);
  textAlign(CENTER, CENTER);
  text("Night", 450, height / 2);
}

//calls each side based on mouse position
function draw() {
  background(25, 25, 112);
  if (mouseX >= width / 2) {
    drawStars(); //calls night side
  } else {
    drawDay();
  }
}