To be honest, more interesting looking at night after like 7pm.

sketch

//Name: Colleen Duong
//Email: cduong@andrew.cmu.edu
//Section: D
//Final Project

//empty array to store clouds
var clouds = [];

//variables for images
var liloandstitch;
var tangled;
var liloandstitchsurfboard;
var bighero6;

function setup() {
  createCanvas(1000 * 0.5, 500 * 0.5); //scales drawing for wordpress

  liloandstitch = loadImage("https://i.imgur.com/Q8WphXR.png");
  tangled = loadImage("https://i.imgur.com/IPR7Psj.png");
  liloandstitchsurfboard = loadImage("https://i.imgur.com/MovIC2B.png");
  bighero6 = loadImage("https://i.imgur.com/zhYJmIx.png");
}

function draw() {
  scale(0.5); //scales drawing for wordpress
  background(202, 230, 205);
  var H = hour();
  var M = minute();
  var S = second();

  //Sky Color
    //Changes sky color throughout the day according to the hour
  if(H > 0 & H < 13){ //1am to 12pm
		var skyR = H * (180/12); //red
		var skyG = H * (270/12); //green
		var skyB = H * (290/12); //blue
	}else if(H > 13 & H < 23){  //1pm to 11pm
    var skyR = 180 - (H - 12) * (180/12);
    var skyG = 270 - (H - 12) * (270/12);
    var skyB = 290 - (H - 12) * (290/12);
	}else{ //12am
    var skyR = 0;
    var skyG = 0;
    var skyB = 0;
  }


  fill(skyR, skyG, skyB); //Sky changes color according to the if/else statements above
  rect(530, 0, 500, 300);

  drawstars();

  secondstartotheright();

  updateAndDisplayClouds();
  addNewCloudsWithSomeRandomProbability();

  fill(202, 230, 205);  //Green
  rect(0, 0, 520, height);  //Hiro's Wallpaper

  sanfranstokyo();

  HirosRoom();

  clock();

  baymaxhead();

  tangledportrait();

  liloandstitchportrait();

  bighero6portrait();

  chair();
}

function updateAndDisplayClouds(){
  for(var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
  }
}

function removeCloudsThatHaveSlippedOutOfView(){
  var cloudsToKeep = [];
  for(var i = 0; i < clouds.length; i++){
    if(clouds[i].x + clouds[i].breadth > 0){
      cloudsToKeep.push(clouds[i]);
    }
  }
  clouds = cloudstoKeep;
}

function addNewCloudsWithSomeRandomProbability(){
  //Spawn a new cloud to the right edge of the canvas
  var newCloudLikelihood = 0.01;
  if(random(0,1) < newCloudLikelihood){
    clouds.push(makeCloud(width));
  }
}

function cloudMove(){
  this.x += this.speed;
}

function cloudDisplay(){
  var cloudHeight = this.altitude * 20;

  push();
  translate(this.x, 50);

  var H = hour();

  //Changes Cloud Colors According to Time
  if(H > 0 & H < 13){ //1am to 12pm
    var skyR = H * (140/12); //red
    var skyG = H * (230/12); //green
    var skyB = H * (250/12); //blue
  }else if(H > 13 & H < 23){ //1pm to 11pm
    var skyR = 140 - (H - 12) * (140/12);
    var skyG = 230 - (H - 12) * (230/12);
    var skyB = 250 - (H - 12) * (250/12);
  }else{  //12am
    var skyR = 20;
    var skyG = 20;
    var skyB = 20;
  }

  fill(skyR, skyG, skyB);
  //Variables randomize the position and sized
  ellipse(0, cloudHeight, this.breadth, cloudHeight-10);
  ellipse(0, cloudHeight-210, this.breadth*0.6, cloudHeight-20);
  ellipse(0, cloudHeight-200, this.breadth, cloudHeight-10);
  ellipse(0, cloudHeight-100, this.breadth, cloudHeight-20);
  pop();
}

function makeCloud(birthLocationX){
  var clouds = {x: birthLocationX,
                breadth: 60,
                speed: -0.2,
                altitude: round(random(-1, 1)),
                move: cloudMove,
                display: cloudDisplay}
  return clouds;
}

function HirosRoom(){
  noStroke();

  //WALLPAPER BOTTOM TRIM
  fill(255);
  rect(0, 440, 1000, 60);
  //WALLPAPER BOTTOM TRIM

  //TRIANGULAR WALL
  fill(97, 69, 62);   //Darkest Brown
  triangle(0, 0, 200, 0, 0, 200);
  //TRIANGULAR WALL

  //GROUND
  fill(97, 69, 62); //Darkest Brown
  rect(0, 485, 1000, 15);
  //GROUND

  //DESK
  fill(209, 178, 169);  //Dark Brown
  rect(150, 300, 300, 40);
  rect(330, 300, 150, 185);

  push();
  stroke(191, 157, 148);  //Darker than Dark Brown
  strokeWeight(2);
  rect(340, 345, 130, 50);  //Drawers
  rect(340, 415, 130, 50);  //Drawers
  pop();

  fill(235, 208, 201);  //Light Brown
  rect(0, 300, 150, 185);
  //DESK

  //DESK ACCESSORIES
  fill(97, 69, 62);   //Darkest Brown
  rect(435, 235, 10, 30); //Pencil
  rect(450, 245, 8, 30); //Pencil
  fill(234, 112, 108);  //Light Red
  rect(430, 255, 30, 45); //Cup
  fill(97, 69, 62);   //Darkest Brown
  rect(320, 270, 120, 30);
  fill(68); //Super Dark Grey
  rect(145, 275, 80, 20);  //Computer
  fill(81, 80, 80); //Dark Grey
  rect(80, 145, 200, 130);  //Computer
  rect(115, 290, 140, 10);  //Computer
  fill(119); //Light Grey
  rect(90, 155, 180, 105);  //Computer
  fill(234, 112, 108); //Light Red
  rect(85, 265, 30, 30); //Post it
  //DESK ACCESSORIES

  //SHELF
  push();
  fill(187, 155, 148);  //Darker than Dark Brown
  rect(300, 40, 10, 90);
  rect(450, 40, 10, 90);

  fill(209, 178, 169);  //Dark Brown
  rect(280, 100, 200, 20);
  rect(280, 50, 200, 20);

  textSize(20);
  textStyle(BOLD);
  textFont("Verdana");
  fill(209, 178, 169);  //Dark Brown
  text("CLICK THE", 325, 50);
  text("PHOTOS", 335, 100);
  pop();
  //SHELF

  //WALL PICTURES
  //WALL PICTURES

  //WINDOW FRAME
  fill(240);
  rect(705, 0, 20, 300);  //Window Frame
  rect(525, 0, 20, 300);  //Window Frame
  rect(520, 280, width, 20);  //Window Frame
  push();
  noStroke();
  rect(706, 0, 19, 300);  //Window Frame
  rect(525, 0, 20, 300);  //Window Frame
  pop();

  fill(86); //Light grey
  rect(530, 0, 180, 10);   //Window Shutters (Left)
  rect(530, 15, 180, 10);   //Window Shutters (Left)
  rect(530, 30, 180, 10);   //Window Shutters (Left)
  rect(530, 45, 180, 10);   //Window Shutters (Left)
  rect(720, 0, width, 10);   //Window Shutters (Right)
  rect(720, 15, width, 10);   //Window Shutters (Right)
  rect(720, 30, width, 10);   //Window Shutters (Right)
  rect(550, 0, 5, 50); //Shutter Connector
  rect(695, 0, 5, 50); //Shutter Connector
  rect(730, 0, 5, 35); //Shutter Connector

  fill(200);
  rect(510, 300, width, 100); //Bed Frame
  fill(255);
  rect(510, 0, 30, 400);  //Bed Frame
  fill(220);
  rect(510, 300, width, 20);  //Bed Frame Back
  fill(255);
  rect(510, 300, 80, 20); //Bed Frame
  push();
  noStroke();
  rect(511, 0, 29, 400);  //Bed Frame

  pop();
  //WINDOW FRAME

  //BED
  fill(148, 160, 205); //Periwinkle
  rect(500, 335, 600, 150, 20);
  //BED
}

function sanfranstokyo(){
  var H = hour();
  var S = second();

  //SANFRANSTOKYO
  //Bridge
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(201, 70, 72); //Red
  }else{
    fill(137, 44, 49); //Darker Red
  }
  rect(690, 260, 200, 10);  //Horizontal
  rect(720, 190, 10, 200);
  rect(830, 190, 10, 200);

  push();
  noFill();
  if(H > 3 & H < 19){//4am to 7pm lighter color
    stroke(201, 70, 72); //Red
  }else{
    stroke(137, 44, 49); //Darker Red
  }

  strokeWeight(2);
  curve(710, -300, 729, 192, 831, 192, 800, -300);
  curve(700, -300, 618, 192, 720, 192, 800, -300);
  curve(850, -300, 839, 192, 933, 192, 710, -300);
  line(680, 250, 680, 260); //Left
  line(690, 241, 690, 260); //Left
  line(700, 229, 700, 260); //Left
  line(740, 222, 740, 260); //Mid
  line(750, 236, 750, 260); //Mid
  line(760, 246, 760, 260); //Mid
  line(770, 252, 770, 260); //Mid
  line(780, 254, 780, 260); //Mid
  line(790, 254, 790, 260); //Mid
  line(800, 250, 800, 260); //Mid
  line(810, 242, 810, 260); //Mid
  line(820, 228, 820, 260); //Mid
  line(850, 223, 850, 260); //Right
  line(860, 236, 860, 260); //Right
  line(870, 246, 870, 260); //Right
  line(880, 252, 880, 260); //Right
  pop();

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(219, 93, 100); //Light Red
  }else{
    fill(165, 61, 72); //Darker Light Red
  }
  rect(720, 190, 14, 10);
  rect(720, 215, 14, 10);
  rect(720, 240, 14, 10);
  rect(826, 190, 18, 10);
  rect(826, 215, 18, 10);
  rect(826, 240, 18, 10);
  //Bridge

  //Building 3 (Left)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(200);
  }else{
    fill(150);
  }
  rect(655, 210, 30, 30); //Roof Box

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(230);
  }else{
    fill(180);
  }
  rect(620, 240, 70, 80); //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(50);
  }else{
    fill(255, 242, 6);
    if(S % 3){
      fill(249, 214, 38);  //Blinking Effect
    }//Light
  }
  rect(650, 250, 35, 10); //Ribbon Window
  rect(650, 265, 25, 10); //Ribbon Window
  //Building 3 (Left)

  //Building 2 (Right)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(254, 252, 238); //Pale Yellow
  }else{
    fill(216, 213, 195); //Darker Pale Yellow
  }
  rect(880, 250, 70, 40); //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(79, 106, 112); //Teal
  }else{
    fill(50, 70, 73); //Darker Teal
  }
  triangle(860, 250, 880, 230, 900, 250); //Roof
  rect(880, 230, 70, 20); //Roof
  fill(0);
  rect(880, 210, 70, 20); //Roof

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(79, 106, 112); //Teal
  }else{
    fill(50, 70, 73); //Darker Teal
  }
  triangle(860, 210, 920, 160, 900, 210); //Roof
  triangle(870, 210, 920, 140, 950, 210); //Roof
  rect(880, 200, 70, 10); //Roof
  rect(915, 140, 70, 10); //Roof
  //Building 2 (Right)

  //Building 2 (Left)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(254, 252, 238); //Pale Yellow
  }else{
    fill(216, 213, 195); //Darker Pale Yellow
  }
  rect(580, 220, 70, 80); //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(102, 72, 55); //Dark Brown
  }else{
    fill(73, 50, 39); //Darker Dark Brown
  }
  rect(580, 150, 70, 80); //Roof Box

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(144, 117, 108); //Light Brown Roof
  }else{
    fill(104, 81, 75); //Darker Light Brown Roof
  }
  rect(530, 220, 150, 10); //Roof

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(102, 72, 55); //Dark Brown
  }else{
    fill(73, 50, 39); //Darker Dark Brown
  }
  rect(580, 150, 70, 80); //Roof Box
  rect(530, 230, 120, 5); //Brace
  rect(530, 255, 120, 5); //Brace
  rect(600, 230, 5, 30); //Brace
  //building 2(Left)

  //Building 1 (Right)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255);
  }else{
    fill(200);
  }
  rect(930, 200, 100, 80);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(233);
  }else{
    fill(180);
  }
  rect(925, 200, 100, 2);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255);
  }else{
    fill(200);
  }
  rect(925, 170, 100, 30);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(144, 117, 108);  //Brown
  }else{
    fill(107, 86, 81);  //Darker Brown
  }
  rect(925, 150, 100, 20);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(233);
  }else{
    fill(180);
  }
  rect(925, 150, 100, 2);  //Base
  rect(950, 110, 100, 20);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255);
  }else{
    fill(200);
  }
  triangle(925, 150, 910, 130, 950, 130);
  rect(925, 130, 100, 20);  //Base

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(85, 96, 85);
  }else{
    fill(251, 237, 36); //Light
    if(S % 6){
      fill(249, 214, 38);  //Blinking Effect
    }
  }
  rect(935, 207, 30, 40);  //Window
  rect(970, 207, 30, 40);  //Window
  rect(935, 252, 30, 40);  //Window
  rect(970, 252, 30, 40);  //Window

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(233);
  }else{
    fill(180);
  }
  rect(943, 208, 2, 38);  //Window (T.Left)
  rect(955, 208, 2, 38);  //Window (T.Left)
  rect(936, 220, 28, 2);  //Window (T.Left)
  rect(936, 235, 28, 2);  //Window (T.Left)
  rect(978, 208, 2, 38);  //Window (T.Right)
  rect(990, 208, 2, 38);  //Window (T.Right)
  rect(971, 220, 28, 2);  //Window (T.Right)
  rect(971, 235, 28, 2);  //Window (T.Right)
  rect(943, 253, 2, 38);  //Window (B.Left)
  rect(955, 253, 2, 38);  //Window (B.Left)
  rect(936, 265, 28, 2);  //Window (B.Left)
  rect(936, 265, 28, 2);  //Window (B.Left)
  rect(978, 253, 2, 38);  //Window (B.Right)
  rect(990, 253, 2, 38);  //Window (B.Right)
  rect(971, 265, 28, 2);  //Window (B.Right)
  rect(971, 265, 28, 2);  //Window (B.Right)
  //Building 1 (Right)

  //Building 1 (Left)
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255, 239, 205); //Pale Yellow
  }else{
    fill(234, 215, 181); //Darker Pale Yellow
  }
  rect(540, 100, 50, 200);
  rect(590, 120, 20, 5); //Sign
  rect(590, 200, 20, 5); //Sign

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(234, 112, 108); //Pale Red
  }else{
    fill(206, 91, 91); //Darker Pale Red
  }
  rect(600, 115, 50, 100); //Sign

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(255, 239, 205); //Pale Yellow
  }else{
    fill(234, 215, 181); //Darker Pale Yellow
  }
  rect(605, 120, 40, 90); //Sign

  push();
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(85, 52, 148); //Bright-ish Dark Blue
  }else{
    fill(255); //Brighter Bright-ish Dark Blue
    if(S % 2){  //Light Blinking Effect
      fill(117, 91, 178);
    }
  }
  textSize(25);
  textStyle(BOLD)
  text("ホ", 613, 150);
  text("テ", 613, 180);
  text("ル", 613, 210);  //Hotel
  pop();

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(80); //Dark Grey
  }else{
    fill(40); //Darker Grey
  }
  rect(590, 210, 20, 5); //Sign
  rect(590, 245, 20, 5); //Sign

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(119); //Light grey
  }else{
    fill(70); //Darker Light Grey
  }
  rect(610, 200, 60, 60); //Sign

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(80); //Dark Grey
  }else{
    fill(40); //Darker Grey
  }
  rect(610, 200, 25, 60); //Sign

  push();
  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(80);
  }else{
    fill(150);
    if(S % 2){  //Light Blinking Effect
      fill(255);
    }
  }
  textSize(8);
  textStyle(BOLD);
  text("ミ", 655, 213);
  text("ッ", 655, 226);
  text("キ", 655, 239);
  text("|", 659, 252);
  text("マ", 640, 213);
  text("ウ", 640, 226);
  text("ス", 640, 239);  //Mickey Mouse!
  pop();

  if(H > 3 & H < 19){//4am to 7pm lighter color
    fill(247, 223, 181);  //Dark Pale Yellow
  }else{
    fill(221, 194, 151); //Darker Dark Pale Yellow
  }
  rect(540, 100, 55, 10);
  rect(540, 160, 55, 10);
  rect(540, 220, 55, 10);

  if(H > 3 & H < 19){//4am to 7pm lighter color
  fill(234, 206, 150); //Dark Pale Yellow Shadow
  }else{
    fill(209, 180, 130); //Darker Dark Pale Yellow Shadow
  }
  rect(540, 110, 50, 2);
  rect(540, 170, 50, 2);
  rect(540, 230, 50, 2);
  //Building 1 (Left)
  //SANFRANSTOKYO
}

function drawstars(){
  var H = hour();

  //Draws Stars in the sky after 7pm
    if(H > 3 & H < 19){
    }else{
      fill(255);
      rect(600, 100, 5, 1);
      rect(602, 98, 1, 5);
      rect(700, 150, 5, 1);
      rect(702, 148, 1, 5);
      rect(800, 80, 5, 1);
      rect(802, 78, 1, 5);
      rect(750, 40, 5, 1);
      rect(752, 38, 1, 5);
      rect(888, 120, 5, 1);
      rect(890, 118, 1, 5);
      rect(940, 80, 5, 1);
      rect(942, 78, 1, 5);
      rect(620, 80, 5, 1);
      rect(622, 78, 1, 5);
      rect(760, 140, 5, 1);
      rect(762, 138, 1, 5);
    }
}


function secondstartotheright(){  //Peter Pan Easter Egg
  var H = hour();

  if(H > 2 & H < 23){  //Star only appears at 11pm
  }else{
    fill(175, 223, 249);
    rect(950, 70, 10, 1);
    rect(955, 66, 1, 10);
  }
}

function clock(){

  var H = hour();
  var M = minute();
  var S = second();

  //WALL-E's Eve
  fill(250);  //Arms
  ellipse(559, 240, 10, 22);
  ellipse(580, 240, 10, 22);
  fill(255); //Body
  ellipse(570, 220, 27, 27);
  ellipse(570, 240, 22, 50);
  fill(0);  //Face
  ellipse(570, 220, 20, 15);
  if(H == 8 & M == 30 && S%2){  //If it is 8:30 am the alarm starts (her eyes blink green) for Hiro to wake up and go to class
    fill(62, 173, 50); //Green Eyes
  }else{
    fill(80, 159, 214); //Blue Eyes
  }
  ellipse(566, 220, 5, 8);
  ellipse(574, 220, 5, 8);
  //WALL-E's Eve

  //The clock
  fill(50);
  rect(550, 260, 70, 40, 10);
  rect(560, 257, 10, 5, 5);
  rect(572, 257, 10, 5, 5);
  fill(0);
  rect(565, 265, 50, 30, 5);
  //The clock

  if(S % 4){  //Blink Blink
    fill(198, 0, 0);

    if (H > 12 || H == 0) { //Converts it to twelve hour clock
      H = abs(H - 12)}
    if(M < 10){
      text(H + " : 0" + M, 575, 285); //If the time is before 10 minutes it still shows two digits "01, 02, etc"
    }
    text(H + " : " + M, 575, 285) //Shows time on the clock
  }else{
    fill(0);
  }
}

function chair(){
  //CHAIR
  fill(50); //Close To Black
  rect(200, 250, 140, 120, 10);
  rect(260, 370, 20, 20);
  rect(200, 380, 140, 20);
  rect(265, 390, 10, 40);
  rect(260, 420, 20, 40);
  rect(210, 460, 120, 15);
  ellipse(215, 480, 20);
  ellipse(325, 480, 20);
  ellipse(270, 480, 20);
  //CHAIR
}

function baymaxhead(){
  fill(255);  //Baymax's Head
  ellipse(50, 280, 50, 40);
  ellipse(43, 282, 40, 35);
  ellipse(57, 282, 40, 35);

  fill(0);  //Baymax's Eyes
  ellipse(40, 280, 10, 10);
  ellipse(60, 280, 10, 10);
  rect(40, 278, 20, 2);

  fill(122, 81, 53); //Brown
  rect(10, 290, 80, 10);  //Plate-like thing
}

function tangledportrait(){
  fill(163, 107, 160); //Purple
  rect(300, 170, 60, 25);
  fill(45, 47, 85); //Dark Blue
  rect(300, 195, 60, 20);
  fill(248, 172, 147); //Peach

  image(tangled, 313, 175, tangled.width/8, tangled.height/8);

  if(mouseIsPressed & mouseX >= 300 * 0.5 && mouseX <= 360 * 0.5 && mouseY >= 170 * 0.5 && mouseY <= 215 * 0.5){ //When you click on the photo (scaled) an image will pop on the computer screen
    fill(163, 107, 160); //Purple
    rect(90, 155, 180, 70);

    //Clouds
    for(var i = 0; i < 5; i++){
      fill(111, 90, 155);
      ellipse(118 + 300 * i/12, 225, 50, 30);
    }
    //Clouds

    //Castle
    fill(34, 35, 59); //Dark Blue

    rect(160, 200, 60, 40);
    rect(150, 215, 80, 40);
    rect(180, 175, 10, 60);
    rect(190, 190, 15, 60);
    rect(170, 190, 5, 60);
    //Castle

    fill(45, 47, 85); //Dark Blue
    rect(90, 225, 180, 35);
    for(var i = 0; i < 5; i++){ //The Lanterns
      var x = 5;
      var y = 10;
      fill(248, 172, 147); //Peach
      rect((110) + i/7 * 240, 170 + i, x, y);
      rect((170) + i/10 * 150, 195 - i/2, x/1.3, y/1.3);
      rect((170) + i/4 * 30, 210 + i/2, x/2, y/2);
      fill(254, 218, 181); //Light Yellow
      rect((110) + i/7 * 240, 178 + i, x, y/4);
      rect((170) + i/10 * 150, 201 - i/2, x/1.3, y/6);
      rect((170) + i/4 * 30, 214 + i/2, x/2, y/9);
    }

    //Boat
    fill(248, 228, 196);  //Yellow (Rapunzel's Hair)
    rect(200, 237, 2, 5);
    rect(205, 237, 2, 5);
    fill(99, 48, 46); //Brown
    rect(200, 240, 20, 5);
    triangle(200, 240, 195, 240, 200, 245);
    triangle(220, 240, 225, 240, 220, 245);
    //Boat
  }

}

function liloandstitchportrait() {
  fill(253, 244, 172); //Yellow
  rect(380, 160, 60, 35);
  fill(117, 178, 225); //Blue
  rect(380, 191, 60, 10);
  fill(93, 158, 198); //Blue
  rect(380, 193, 60, 10);
  fill(82, 143, 181); //Blue
  rect(380, 195, 60, 10);

  push();
  beginShape();
  fill(251, 178, 81); //Orange
  curveVertex(400, 200);
  curveVertex(380, 205);
  curveVertex(405, 190);
  curveVertex(440, 205);
  curveVertex(490, 240);
  endShape();
  pop();
  image(liloandstitchsurfboard, 415, 163, liloandstitchsurfboard.width/7, liloandstitchsurfboard.height/9);
  fill(251, 178, 81); //Orange
  rect(415, 198, 10, 5);


  if(mouseIsPressed & mouseX >= 380 * 0.5 && mouseX <= 440 * 0.5 && mouseY >= 160 * 0.5 && mouseY <= 205 * 0.5){ //When you click on the photo (scaled) an image will pop on the computer screen
    fill(253, 244, 172); //Yellow
    rect(90, 155, 180, 80)

    //Ocean
    fill(117, 178, 225); //Blue
    rect(90, 240, 180, 20);
    fill(93, 158, 198); //Blue
    rect(90, 235, 180, 5);
    fill(82, 143, 181); //Blue
    rect(90, 230, 180, 5);
    //Ocean

    //Sand
    push();
    beginShape();
    fill(251, 178, 81); //Orange
    curveVertex(100, 200);
    curveVertex(90, 260);
    curveVertex(170, 220);
    curveVertex(270, 260);
    curveVertex(300, 230);
    endShape();
    pop();
    //Sand

    image(liloandstitch, 145, 192, liloandstitch.width/5, liloandstitch.height/5);
  }
}

function bighero6portrait(){
  fill(208, 35, 39); //Red
  rect(370, 220, 50, 50);
  fill(255);
  rect(375, 225, 40, 15);
  rect(375, 245, 40, 5);
  rect(375, 255, 40, 15);

  if(mouseIsPressed & mouseX >= 370 * 0.5 && mouseX <= 420 * 0.5 && mouseY >= 220 * 0.5 && mouseY <= 270 * 0.5){ //When you click on the photo (scaled) an image will pop on the computer screen
    fill(208, 35, 39); //Red
    rect(90, 155, 180, 105);
    image(bighero6, 105, 172, bighero6.width/1.5, bighero6.height/1.5)
  }
}

I really wanted to code Sanfranstokyo but I realized there weren’t enough reference pictures that I could find so I referenced a picture of Sanfranstokyo and made it an outside window view from Hiro’s bedroom. I drew out Hiro’s bedroom on illustrator first before coding it (which was actually really fun to do even though it was tedious). Some things that I tried to implement into my code include:
1. Clouds that move through the sky and change color, with the sky, according to the time of day. You can tell what the time of the day is by looking at Hiro’s clock near his bed.
2. Eve from WALL-E (on top of the clock)’s eyes actually change color when it is 8:30am as if to indicate that it’s time for Hiro to wake up and go to school
3. After 7pm stars start to appear in the sky because it’s night time
4. After 7pm the buildings also start to get darker to match with the darkening sky. The windows light up and they also flash every couple seconds (differing per building) and the signs in japanese flash as if to attract people to come in

I also decided to add some easter eggs in the code. Spoilers of the easter eggs below Read w/ caution
1. When it’s 11pm you can see a “Second star to the right” that’s blue and larger than the other stars: Peter Pan
2. Two drawings on the wall are from two disney movies that I also really love

Night Time + Second Star to the Right

It’s getting darker, Evening Time

Morning!

Reference photos and drawing of Hiro’s room

Zipped file of actual sized canvas with working clouds

cduong_SectionD_FinalProject

For my final project, I wanted to create a landscape that looped in an entertaining and visually appealing way that told a story and maybe implemented some human interaction.

Project: The Seed
By: Johnny Kelly
Link: http://www.johnnykel.ly/projects/theseed
This project is a two-minute animation that shows nature’s life cycle using an apple seed.

Project: Basecamp
By: Leander Herzog
Link: https://leanderherzog.ch/basecamp/
This project is an ongoing loop of pyramids that are constantly changing colors with the background.

I really like how the first project, The Seed, tries to tell a story visually and it is easy for the user to follow what is happening. In a way I wish the video followed through with using the same, single apple seed rather than just changing the fruit that was being used as the scene moves forward. Basecamp, on the other hand, does not tell a story like The Seed did but it does have a visually soothing aspect to it that just makes the user want to look at it forever. I really like the simplicity of it, but I really wish there was more going on in the animation, like maybe incorporating aspects that would make it really seem like it’s a basecamp because without the title “Basecamp” it could potentially just look like random pyramids that were scattered on a canvas.

I would like to incorporate the ideas of storytelling from The Seed and the simplicity and visually appealing aspects of Basecamp into my final project.

As a really big Disney fan I really wanted to create my final project based on my favorite movie: Big Hero 6. I wanted to create an animation of SanfranTokyo because I’m just really in love with the city and would love to draw it using p5js. I’m not sure what view I would want to draw of it yet (first-perspective view in the city or an aerial view from the sky overlooking the city) but I definitely want to include the iconic golden gate bridge in it. Below are some of the pictures I’ve been looking up for references. I plan on drawing the city view I want on illustrator first before actually coding it. What I specifically want to do with this city is to make it interactive in some sort of way (unsure specifically how) and have it change appearances depending on the time of day and incorporate several animation aspects like having the characters or just random people walking around the town to make it seem really lively like the city actually is.

Textile Piece Being Made

Link:

Soft Sound – Textiles as electroacoustic transducers

Project: Soft Sound
Creator: EJTECT (Esteban de la Torre and Judit Eszter Karpati)

Project “Soft Sound” combines textiles with sound and explore the possibilities of creating multi-sensory experiences. They do this by trying to create textiles as an audio emitting surface. They created soft speakers and embedded it into fabrics in order to emanate sonic vibrations, which could not only be heard but could also be felt due to the pulsating sound.

What I admire about this project is that they are trying to allow people to not only hear sound but to also feel like, just like someone who lost their hearing would experience. This interests me like one of my previous looking outwards about a sensory experience for the blind. I’m really fascinated with technology that try to enhance your experience with someone by allowing you to understand what its like for someone who lost one of their vital senses.

The textiles were laser cut with flat copper and silver coils and then connected to an amplifier to enhance the signal, which ultimately allows the textile to move rapidly back and forth, causing sound waves to emit from the piece of tech.
The creator was trying to design something that could possibly be used as a contemporary interior structure design in the future by going from a small scale to a bigger scale in the future.

Video of how it works

sketch

//Name: Colleen Duong
//Email: cduong@andrew.cmu.edu
//Section: d
//Assignment-10-b

//  cows = loadImage("https://i.imgur.com/cqxAWPM.jpg");


var cows;
var t1;
var t2;
var t3;
var t4;
var t5;
var t6;

function preload() {
  cows = loadImage("https://i.imgur.com/cqxAWPM.jpg");  //Cow Image Preload
}

function setup() {
  createCanvas(480, 480); //Change
  background(0);
  cows.loadPixels();
  frameRate(2000);
  t1 = makeTurtle(width/2, height/2); //Starts from the center of the canvas
  t2 = makeTurtle(width/2, height/2);
  t3 = makeTurtle(width/2, height/2);
  t4 = makeTurtle(width/2, height/2);
  t5 = makeTurtle(width/2, height/2);
  t6 = makeTurtle(width/2, height/2);
}

function draw() {
    var color1 = cows.get(t1.x, t1.y);  //Get colors of the picture
    var color2 = cows.get(t2.x, t2.y);
    var color3 = cows.get(t3.x, t3.y);
    var color4 = cows.get(t4.x, t4.y);
    var color5 = cows.get(t5.x, t5.y);
    var color6 = cows.get(t6.x, t6.y);
    t1.setColor(color1);  //Sets color for each line
    t2.setColor(color2);
    t3.setColor(color3);
    t4.setColor(color4);
    t5.setColor(color5);
    t6.setColor(color6);
    t1.setWeight(3);
    t2.setWeight(3);
    t3.setWeight(3);
    t4.setWeight(3);
    t5.setWeight(3);
    t6.setWeight(3);

//Turtles move towards the mouse
    t1.forward(10);
    t2.forward(10);
    t3.forward(10);
    t4.forward(10);
    t5.forward(10);
    t6.forward(10);

//Target is mouse location
    var targetX = mouseX;
    var targetY = mouseY;

//
  t1.turnToward(targetX, targetY, 2); //Mouse controls line
  t2.turnToward(targetX, targetY, 4);
  t3.turnToward(targetX, targetY, 6);
  t4.turnToward(random(width), random(height), 8);  //Lines are drawn randomly
  t5.turnToward(random(width), random(height), 10);
  t6.turnToward(random(width), random(height), 12);
//creates circles when drawing over
}



//TURTLE CODE
function turtleLeft(d) {
    this.angle -= d;}
function turtleRight(d) {
    this.angle += d;}
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);}
function turtleBack(p) {
    this.forward(-p);}
function turtlePenDown() {
    this.penIsDown = true;}
function turtlePenUp() {
    this.penIsDown = false;}
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;}
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));}
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;}
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }}
function turtleSetColor(c) {
    this.color = c;}
function turtleSetWeight(w) {
    this.weight = w;}
function turtleFace(angle) {
    this.angle = angle;}
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;}

I really enjoyed the concept of the portrait project that we did last so I wanted to do another version of it using turtles instead for this week’s assignment. I also wanted users to somewhat be able to control where the lines go.

Final product-ish

Project: Notes On Blindness
Designer: Beatrice Latrigue
Link: http://epure.it/notes-on-blindness

This project, Notes On Blindness, by Beatrice Latrigue is a project that uses “new forms of storytelling, gameplay mechanics and VR to explore a blind man’s cognitive and emotional experience of blindness.” It was made after John Hull lost his sight back in 1983. He created an audio diary to record what he was experiencing in a new world without sight and based on these recordings this project was designed to create an animated, interactive documentary to explore the world of the blind and better understand what it feels like to be blind.

As someone who has extremely awful eyesight this project really resonated with me because I have a strong fear of going blind one day and to know that they created something that I am so afraid of into something that looks so beautiful really touched my heart. The video was actually so so so beautiful and I would really love to be able to experience the actual VR one day.

Beatrice Latrigue is a visual artist in Paris. Her education includes: Incubator, Interactive Design, and Spatial Design. Her main works include invisible relationships within images, space, and time and she creates immersive experience and physical interactive installations.

sketch

var skyColor;
var skyColor1;
var skyColor2;
var skyFadeValue = 0;
var skyFadeSpeed = 0.05;

var umbrellas = [];

var beachgoers = [];

function setup() {
    createCanvas(480, 400);
    frameRate(30);

    //CHANGING SKY COLOR VARIABLES
    skyColor1 = color(211, 232, 252); //Light Blue Color (Morning)
    skyColor2 = color(48, 70, 92); //Dark Blue Color (Night)
    skyColor = skyColor1;

    //INITIALIZE UMBRELLAS
    for (var i = 0; i < 10; i++){
     var rx = random(width);
     umbrellas[i] = makeUmbrella(rx);
 }
}

//CHANGING SKY COLOR CODE
function changingSkyColor() {
	skyFadeVal = ((millis()*skyFadeSpeed)%900)/900;
	if (floor(millis()/900*skyFadeSpeed)%2 == 0) {
		skyColor = lerpColor(skyColor1, skyColor2, skyFadeVal);   //Morning to Night
	}
	else {
		skyColor = lerpColor(skyColor2, skyColor1, skyFadeVal);   //Night to Morning
	}
}
//CHANGING SKY COLOR CODE

//UPDATE AND DISPLAY CODE
function updateAndDisplayUmbrellas(){
    // Update the building's positions, and display them.
    for (var i = 0; i < umbrellas.length; i++){
        umbrellas[i].move();
        umbrellas[i].display();
    }
}

//UPDATE AND DISPLAY CODE

//REMOVE OUT OF VIEW
function removeUmbrellasThatHaveSlippedOutOfView(){
  var umbrellasToKeep = [];
  for (var i = 0; i < umbrellas.length; i++){
      if (umbrellas[i].x + umbrellas[i].breadth > 0) {
          umbrellasToKeep.push(umbrellas[i]);
      }
  }
  umbrellas = umbrellasToKeep; // remember the surviving buildings
}
//REMOVE OUT OF VIEW

//ADD RANDOM NEW THINGS
function addNewUmbrellasWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newUmbrellaLikelihood = 0.007;
    if (random(0,1) < newUmbrellaLikelihood) {
        umbrellas.push(makeUmbrella(width));
    }
}
//ADD RANDOM NEW THINGS

//UPDATE POSITION TO BUILDING EVERY FRAME
function umbrellaMove() {
    this.x += this.speed;
}
//UPDATE POSITION TO BUILDING EVERY FRAME

// DRAW THINGS
function umbrellaDisplay() {
    var floorHeight = 3;
    var bHeight = this.nFloors * floorHeight;
    fill(0);
    stroke(0);

    //Umbrellas Row 2
    push();
    translate(this.x, height - 160);  //Location of Umbrella
    rect(0, -bHeight, this.breadth, bHeight); //Umbrella Stick
    stroke(255);
    fill(43, 71, 99)
    arc(1, -bHeight, 30, 20, PI, 0, PI);  //Umbrella Top
    pop();

    //Beachgoers
    push();
    noStroke();
    translate(this.x * 2, height - 130);  //Location of People
    ellipse(0, -bHeight, this.breadth, bHeight / 2); //Body
    ellipse(0, -bHeight - 8, 5, 5); //Head
    pop();

    //Umbrellas Row 1
    push();
    translate(this.x * 1.5, height - 100);  //Location of Umbrella
    rect(0, -bHeight, this.breadth, bHeight); //Umbrella Stick
    stroke(255);
    fill(43, 71, 99)
    arc(1, -bHeight, 30, 20, PI, 0, PI);  //Umbrella Top
    pop();
}
// DRAW THINGS

//MAKE THINGS
function makeUmbrella(birthLocationX) {
    var umb = {x: birthLocationX,
                breadth: 2,
                speed: -1.6,
                nFloors: round(random(2, 10)),
                move: umbrellaMove,
                display: umbrellaDisplay}
    return umb;
}
//MAKE THINGS


//MOUNTAINS
function drawMountain(){
  noStroke();
  var mountainDetail = 0.01;
  var mountainSpeed = 0.0001;

//MOUNTAINS (Back)
  fill(204, 216, 133); //dark Green color
  beginShape();
    for (x = 0; x < width; x++) {
      var t = (x * mountainDetail) + (millis() * mountainSpeed);
      var y = map(noise(t), 1, 0, 10, 50);
      vertex(x, y);
      vertex(0,height);
      vertex(width,height);
    }
  endShape();
//MOUNTAINS (Back)

//MOUNTAINS (Front)
  fill(234, 230, 161); //Green color
  beginShape();
    for (x = 0; x < width; x++) {
      var t = (x * mountainDetail) + (millis() * mountainSpeed);
      var y = map(noise(t), 0, 1, 30, 150);
      vertex(x, y);
      vertex(0,height);
      vertex(width,height);
    }
  endShape();
}
//MOUNTAINS (Front)
//MOUNTAINS

//GROUND (Sand)
function displaysand(){   //try to make it wavy ish
    noStroke(0);
    fill(251, 249, 231);  //Sandy Tan Color
    rect(0, height-180, width, height);
}
//GROUND (Sand)

//WAVES
function drawWaterWaves(){
  noStroke();

  fill(157, 204, 190);
  rect(0, height-80, width, height);
}
//WAVES


function draw() {
    background(skyColor);

    //CHANGING SKY COLOR
    changingSkyColor();

    //MOUNTAINS
    drawMountain();

    //FLOOR
    displaysand();

    //WATER
    drawWaterWaves();

    //UMBRELLAS
    updateAndDisplayUmbrellas();
    removeUmbrellasThatHaveSlippedOutOfView();
    addNewUmbrellasWithSomeRandomProbability();

}

I’ve been feeling homesick lately and I know I won’t be able to go back home til possibly next summer so I wanted to make something that reminded me of home, hence, the beach!! And there’s always a lot of tourists at the beach, especially the one I live close to, and it’s always really hot and sunny, hence the umbrellas, so voila!!

Ryu’s Looking Outward : https://courses.ideate.cmu.edu/15-104/f2017/2017/09/02/rkondrup-looking-outwards-01/

Link: https://hackaday.com/2017/08/08/a-hypnotizing-interactive-art-piece-for-visualizing-color-theory/

The video shows the colors being put in each cylinder and shows how it changes the drawing on the screen.

This project is to better understand the RGB theory and make it more tangible by using physical paint mixing. They used three water-filled containers (one red, green, and blue) to adjust the colors on the screen in a drawing.

I agree with Ryu’s thoughts about the project when he talks about how this is an effective method for communicating the abstract idea of RGB color. They make it very clear what is happening in the painting by adding one color at a time in the cylinders and seeing the colors change gradually on screen. Something that he didn’t mention that I feel is that this gives people a better understanding of how each color, RGB, can affect how a person is feeling when looking at a painting. In the GIF you can see that it starts out as blue and then ends with having red too, which changes a cool feeling to a warm feeling and really allows the viewer to understand how much color can affect how they feel when looking at something.

sketch

//Name: Colleen Duong
//Email: cduong@andrew.cmu.edu
//Section: D
//Project-09

var jathryn;


function preload() {
  jathryn = loadImage("https://i.imgur.com/ALuxxJ8.jpg");
}

function setup() {
  createCanvas(600, 800);
  background(0);
  jathryn.loadPixels();
  imageMode(CENTER);
  frameRate(2000);

}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var color = jathryn.get(ix, iy);
  	var d = random(5, 20);

//Draws the rain-like lines automatically
    push();
    stroke(color);
    strokeWeight(2);
    line(px-random(10), py-random(10), px + d, py + d);
    pop();
    //ellipse(px, py, d, d);

//Draws the ellipses with your mouse
    var mouseColor = jathryn.get(mouseX, mouseY); //changes color depending on where mouse is located based on picture colors
    noStroke();
    fill(mouseColor); //fills the circle colors according to picture color
    var ellipsesize = random(5, 15);  //randomizes the size
    ellipse(mouseX, mouseY, ellipsesize, ellipsesize);  //creates circles when drawing over
}

I wanted to somewhat mimic rain falling on a window so i tried to make it look random (since rain goes crazy in the wind) and then I allowed the viewer to draw randomly sized circles anywhere your mouse goes on the canvas, which was mostly for me because I was getting a little impatient.

What it looks like when I just let the rain fall

What it looks like after I started drawing circles to get the completed image

Meejin Yoon is a Korean-American architect designer that went to Cornell University for a Barch and Harvard Graduate School for Design before before going off to teach at MIT and soon becoming the first female head of the department of architecture there. She created MY STudio to pursue creative works to intersect architecture with art and technology. She is based in several areas such as Boston, Massachusetts and Munich, Germany.

She thinks of herself as someone who wasn’t very inept at technology when she first started teaching at MIT and decided to take a course at MIT, even though she was teaching there, called “How to Make Anything”, which was basically a crash course on micro-controllers and fabrication. Here she created a project that was a defensible dress. This really showed how much she cared about personal space and public space, which are what all of her projects are based on. She has a strong fascination of the invisible line between public and private space.

She works on creating interactive play in public spaces, stating that they “gotta be fun” for the public or they won’t be successful. She also thinks that when creating a truly engaging public space you need to create something unfamiliar, “defamiliarize context so rules of engagement are less clear”. There were three projects that I really enjoyed hearing about: her design entry for the athens olympics, sculpture in roxbury, swing time.

The project for the competition at athens olympics was to really understand how people respond to and move through a public space and created in a public space you don’t know what is going to happen since you cannot predict people’s behaviors, which causes people to want to fool around with something to figure out how it works, which might cause it to break or cause them to just play around with them.

The sculpture reflected the citizen’s engagement with the city through an app that already existed that allowed citizens to engage with the city and tell the city what they might find like potholes, etc. Eventually the city would fix these problems within a specific time. Each part of the sculpture changed depending on the types of reports made and how the city was changing through the lights becoming brighter or dimmer depending on how many people reported a specific type of problem.

Photo of Sculpture in Roxbury

One more project that fascinated me was one where she studied how people interacted with public space to study if they even would interact with it. People seemed to really enjoy it. She wanted to create a project that people could engage with playfully, which was Swing Time. She made it into something more familiar and designed it after a tireswing, which helped adults feel like children again when they interacted with this project and even scaled the tireswing up so that the public really got a sense of being young again.



Three pictures above are of the Swing Time. The second one is of a diagram of the installation to incorporate the main idea of the project.

What I really admire about her projects is that she really cared about how the public reacted from her projects and she also learned from previous projects to better create her next project. She was really thinking about how the public could engage with a space and how to make it really enjoyable for them, which I really love. I also really love how she has integrated different fields of her interests into one specific field because I have the exact same interests: architecture, design, technology, and I wasn’t sure if it was possible to even combine the three. However, after listening to her talk at EyeO it seems that anything is really possible if you put your mind to it.

She gave a lot of examples and background information during her lectures, which was really interesting because it was easy to follow her train of thought and why she did what she did in each of her projects. You could also see a clear connection between her previous project and the next project to see how she has improved gradually each time she creates a new project. She also added some jokes here and there to keep her audience’s focus. I like that about her presentation and I want to learn to incorporate those into my presentations because I understand that lectures could be boring and that you need to engage with the audience in some way to make them want to keep listening and actually hear what you’re saying rather than just zoning out.

Eyeo 2015 – Meejin Yoon from Eyeo Festival // INSTINT on Vimeo.

Links to all of her projects: http://www.howeleryoon.com/
Her Company “MY Studio”‘s site: http://www.mystudio.us/