Cityscapes

• The Goal
• Design Story
• The Visual
• The Code

//CC:Functions

// Through this creation, for my audience, I tried to recreate the experience of a road trip along multiple cities as day turns into night with the movement of the mouse from left to right. I introduced randomness in the form and color of the buildings and the trees to create the perception of driving past a cityscape.

//Setting up the canvas with height of 800 and width of 800
function setup() {
  createCanvas(800, 800);
}
//Defining the function CityHomes with Four parameters to create a template for the buildings which I can use on demand within the rest of the code
function CityHomes(x, y, w, h) {
  rect(x, y, w, h);

  //Setting up a loop for drawing the windows of a building
  for (i = 1; i < 5; i++) {
    rect(x + w / 3, y + (i * h) / 5, 6,10);
    rect(x + (2 * w) / 3, y + (i * h) / 5, 8,10);
  }
}
//Starting the draw function
function draw() {
  //For introducing interactivity with mouse movements, applying the map function to use the x-coordinate of the mouse position as the control for changing the background color. Moving the mouse from left to right changes the background color from white (day) to black(night)

  let bg = map(mouseX, 0, width, 255, 0);
  background(bg);

  //for enhancing the night sky effect, introducing a loop to draw stars if background color is nearly black
  if (bg < 10) {
    for (j = 1; j <= 150; j++) {
      //Drawing the circles for creating stars and setting its x and y coordinates in random with diameter of 6

      fill(255);
      circle(random(0, 800), random(0, 350), 6);
    }
  }
  //stroke used in the entire drawing is black, with strokeweight 3 and 4 frames per second.
  stroke(0);
  strokeWeight(3);
  frameRate(4);

  //setting up Map function to change the color of the Big Circle Sun (yellow) to the Moon (white) with mouse position going from left to right
  push();
  let rcolor = map(mouseX, 0, width, 245, 255);
  let gcolor = map(mouseX, 0, width, 222, 255);
  let bcolor = map(mouseX, 0, width, 15, 255);
  fill(rcolor, gcolor, bcolor);
  circle(400, 175, 250);
  pop();

  //Drawing the baseline where the CityHome buildings are standing
  line(0, 450, 800, 450);

  // setting up a loop to draw the rectangular buildings in each frame
  for (x = 50; x <= 700; x += 35) {
    //setting width of the buildings as 60
    w = 60;
    //setting height of the buildings  with variable "h" in random
    h = random(-50, -300);
    //Coloring the buildings with random colors in RGB
    fill(140, random(50, 140), random(0, 190));

    //Calling the function CityHomes
    CityHomes(x, 450, w, h);

    //if Height of the buildings are within a certain range, a triangle will be drawn on the top of the building, creating some randomness in the form of the buildings
    if (h < -70 && h > -250) {
      triangle(x, 450 + h, x + 30, 420 + h, x + 60, 450 + h);
    }
    
    // Drawing the Treeline and filled it with Green color
    fill(44, 115, 26);
    rect(x + 37, 500, 7, random(40, 70));
    triangle(x + 20, 530, x + 40, 460, x + 60, 530);

    //Drawing the road in Gray color
    fill(97, 96, 92);
    rect(0, 580, 800, 100);
  }
}