I’ve incorporated loops, local variables, and more booleans into my animation of Cityscapes. Specifically, I used a while loop and local variables in the draw() block to build rows of yellow windows in the tall brown building, and I used boolean statements to trigger a change from one state to the other, e.g. “go from night time to day time”, and “turn out the lights in the windows”. I had a more difficult time trying to use a for or while loop for the snowflakes, so I will investigate that later this week.

I also animated a spotlight on top of a building — that was fun. I used variables to control the speed, and parameters for where the spotlight beam should start and stop.

Cityscape at night with spotlight and lit building windows

Bright sunrise and orange sky, with growing and shrinking sun

Read more about the background for this project in my previous blog post.

Here’s a look at my code:

/* Cityscapes
 by Suzanne Kirkpatrick
 October 2010
 */

float bgRed = 150;
float bgGreen = 150;
float bgBlue = 0;
boolean getDark = false;

int moonWidth = 70;
int moonHeight = 70;
int moonX = 700;
int moonY = 50;
float moon2Width = 70;
float moon2Height = 70;
float moonTransparency = 255;
boolean moonTransparent = false;

int bgRedWindow = 255;
int bgGreenWindow = 255;
int bgBlueWindow = 0;
boolean windowsGetDark = true;

//----------------------------------------------------------------------------

void setup() {
  size(800,470);
  smooth();
}

void draw() {

  //Set background to pea green color
  background(bgRed,bgGreen,bgBlue);
  smooth();
  brownskyline();
  yellowWindows();
  blueskyline();
  spotlight();
  moon();
  snowflakes();

//----------------------------------------------------------------------------

void brownskyline() {
  //Brown skyline
  strokeWeight(3);
  stroke(80,49,19);
  // The base of water tower in brown color
  line(170,230,150,270);
  line(170,230,170,270);
  line(170,230,190,270);
  noStroke();
  fill(80,49,19);  // Brown color for first skyline
  rect(0,200,50,300);
  rect(30,190,8,10);
  rect(50,220,15,280);
  rect(65,228,30,275);
  rect(95,170,35,330);
  rect(130,270,80,230);
  rect(150,220,40,30); //This is the middle of my Brooklyn water tower
  triangle(170,200,150,220,190,220); //This is the top of my Brooklyn water tower
  rect(210,250,30,250);
  rect(240,240,20,260);
  rect(260,190,70,310);
  ellipse(295,190,50,50); // Dome of building
  rect(330,220,40,2580);
  rect(370,210,60,290);
  rect(410,195,8,30);
  rect(430,245,20,255);
  rect(450,255,30,245);
  rect(480,130,80,370); // Very tall building
  fill(80,49,19);
  rectMode(CENTER);
  rect(520,130,60,10); // Top of very tall building
  rect(520,120,40,10); // Tip-top of very tall building
  rectMode(CORNER);
  rect(560,230,50,290);
  rect(610,180,20,320);
  rect(625,175,5,5);
  rect(630,230,30,290);
  rect(660,210,40,290);
  rect(700,200,60,300);
  rect(718,195,25,5);
  rect(760,150,40,350); // End of brown skyline
}


void yellowWindows() {
  // Rows of yellow windows in tall building
  int x = 493;

  fill(bgRedWindow,bgGreenWindow,bgBlueWindow);
  while(x <= 545) {
    rect(x,150,5,10);
    x = x + 10;  // row 1
  }

  int x2 = 493;

  fill(bgRedWindow,bgGreenWindow,bgBlueWindow);
  while(x2 <= 545) {
    rect(x2,170,5,10);
    x2 = x2 + 10;  // row 2
  }

  int x3 = 493;

  fill(bgRedWindow,bgGreenWindow,bgBlueWindow);
  while(x3 <= 545) {
    rect(x3,190,5,10);
    x3 = x3 + 10;  // row 3
  }

  int x4 = 493;

  fill(bgRedWindow,bgGreenWindow,bgBlueWindow);
  while(x4 <= 545) {
    rect(x4,210,5,10);
    x4 = x4 + 10;  // row 4
  }

  int x5 = 493;

  fill(bgRedWindow,bgGreenWindow,bgBlueWindow);
  while(x5  100) {
    moon2Width = moon2Width * -1;
  }
  if(moon2Height > 100) {
    moon2Height = moon2Height * -1;
  }
}

//spotlight local variables
float spotlightBeamC = 712;
float spotlightBeamD = 100;
float spotlightBeamE = 722;
float spotlightBeamF = 145;

float spotlightBeamCspeed = 12;
float spotlightBeamDspeed = 5;
float spotlightBeamEspeed = 12;
float spotlightBeamFspeed = 5;

void spotlight() {
  // When it is night time, make the spot light move
  if(getDark == false) {

    noStroke();
    fill(255,255,255,80);
    triangle(200,305,spotlightBeamC,spotlightBeamD,spotlightBeamE,spotlightBeamF); // spotlight beam

    spotlightBeamC = spotlightBeamC - spotlightBeamCspeed;
    spotlightBeamD = spotlightBeamD - spotlightBeamDspeed;
    spotlightBeamE = spotlightBeamE - spotlightBeamEspeed;
    spotlightBeamF = spotlightBeamF - spotlightBeamFspeed;

    if((spotlightBeamC < 250) || (spotlightBeamD < 2) || (spotlightBeamE < 260) || (spotlightBeamF  750) || (spotlightBeamD > 140) || (spotlightBeamE > 760) || (spotlightBeamF > 185)) {
      spotlightBeamCspeed = spotlightBeamCspeed * -1;
      spotlightBeamDspeed = spotlightBeamDspeed * -1;
      spotlightBeamEspeed = spotlightBeamEspeed * -1;
      spotlightBeamFspeed = spotlightBeamFspeed * -1;
    }
  }
}

//snowflake local variables
float snowflakeX = 400;
float snowflakeY = 0;
float sWidth = random(2,5);
float snowflake1X = random(0,800);
float snowflake1Y = 0;
float snowflake2X = random(0,800);
float snowflake2Y = 0;
float snowflake3X = random(0,800);
float snowflake3Y = 20;
float snowflake4X = random(0,800);
float snowflake4Y = 0;
float snowflake5X = random(0,800);
float snowflake5Y = 30;
float snowflake6X = random(0,800);
float snowflake6Y = 50;
float snowflake7X = 350;
float snowflake7Y = 50;
float snowflake8X = 700;
float snowflake8Y = 20;
float snowflake9X = random(650,800);
float snowflake9Y = 10;
float snowflake10X = random(650,800);
float snowflake10Y = 0;
float snowflake11X = random(0,300);
float snowflake11Y = 0;
float snowflake12X = random(200,600);
float snowflake12Y = 50;
float snowflake13X = random(0,200);
float snowflake13Y = 0;
float snowflake14X = random(650,800);
float snowflake14Y = 0;
float snowflake15X = random(400,700);
float snowflake15Y = 5;

void snowflakes() {
  // Random snowflakes falling at night
  fill(255);

  ellipse(snowflakeX,snowflakeY,sWidth,sWidth);
  snowflakeY = snowflakeY + random(0,3);
  snowflakeX = snowflakeX + random(-1,2);

  ellipse(snowflake1X,snowflake1Y,4,4);
  snowflake1Y = snowflake1Y + random(2,5);
  snowflake1X = snowflake1X + random(-1,1);

  ellipse(snowflake2X,snowflake2Y,3,3);
  snowflake2Y = snowflake2Y + random(2,5);
  snowflake2X = snowflake2X + random(-1,3);

  ellipse(snowflake3X,snowflake3Y,sWidth,sWidth);
  snowflake3Y = snowflake3Y + random(2,5);
  snowflake3X = snowflake3X + random(-1,2);

  ellipse(snowflake4X,snowflake4Y,sWidth,sWidth);
  snowflake4Y = snowflake4Y + random(2,5);
  snowflake4X = snowflake4X + random(-1,1);

  ellipse(snowflake5X,snowflake5Y,sWidth,sWidth);
  snowflake5Y = snowflake5Y + random(2,4);
  snowflake5X = snowflake5X + random(-1,1);

  ellipse(snowflake6X,snowflake6Y,sWidth,sWidth);
  snowflake6Y = snowflake6Y + random(2,10);
  snowflake6X = snowflake6X + random(-1,3);

  ellipse(snowflake7X,snowflake7Y,sWidth,sWidth);
  snowflake7Y = snowflake7Y + random(3,5);
  snowflake7X = snowflake7X + random(-1,1);

  ellipse(snowflake8X,snowflake8Y,sWidth,sWidth);
  snowflake8Y = snowflake8Y + random(2,5);
  snowflake8X = snowflake8X + random(-3,1);

  ellipse(snowflake9X,snowflake9Y,sWidth,sWidth);
  snowflake9Y = snowflake9Y + random(3,7);
  snowflake9X = snowflake9X + random(-2,2);

  ellipse(snowflake10X,snowflake10Y,sWidth,sWidth);
  snowflake10Y = snowflake10Y + random(2,5);
  snowflake10X = snowflake10X + random(-1,1);

  ellipse(snowflake11X,snowflake11Y,sWidth,sWidth);
  snowflake11Y = snowflake11Y + random(2,5);
  snowflake11X = snowflake11X + random(-1,1);

  ellipse(snowflake12X,snowflake12Y,sWidth,sWidth);
  snowflake12Y = snowflake12Y + random(2,7);
  snowflake12X = snowflake12X + random(-3,3);

  ellipse(snowflake13X,snowflake13Y,sWidth,sWidth);
  snowflake13Y = snowflake13Y + random(2,5);
  snowflake13X = snowflake13X + random(-1,1);

  ellipse(snowflake14X,snowflake14Y,sWidth,sWidth);
  snowflake14Y = snowflake14Y + random(2,5);
  snowflake14X = snowflake14X + random(-1,1);

  ellipse(snowflake15X,snowflake15Y,sWidth,sWidth);
  snowflake15Y = snowflake15Y + random(2,10);
  snowflake15X = snowflake15X + random(-1,1);
}

  //Make the sky turn to night time
  if(getDark == false) {
    //Make time lapse effect
    delay(200);
    bgRed = bgRed-10;
    bgGreen = bgGreen-10;
    bgBlue = bgBlue;
  }

  //Make the sky turn to day time
  if(getDark == true) {
    //Make time lapse effect
    delay(90);
    bgRed = bgRed+20;
    bgGreen = random(105,115);
    bgBlue = random(10,15);
  }

  //Make the yellow windows get dark
  if(windowsGetDark == true) {
    bgRedWindow = bgRedWindow - 10;
    bgGreenWindow = bgGreenWindow - 10;
    bgBlueWindow = bgBlueWindow + 1;
    if(bgRedWindow < 80) {
      bgRedWindow = 80;
      bgGreenWindow = 49;
      bgBlueWindow = 19;
    }
  }

  //Make the cover moon become transparent, and sun grow / shrink
  if(moonTransparent == true) {
    moontransparency ();
    sunpulse();
  }
}

void keyPressed() {
  //Make the sky get dark and get light
  if (getDark == false) {
    getDark = true;
  }
  else if(getDark == true) {
    getDark = false;
  }

  // Make the windows get dark
  if(windowsGetDark == false) {
    windowsGetDark = true;
  }
  else if(windowsGetDark == true) {
    windowsGetDark = false;
  }

  //Make the moon become a sun
  if(moonTransparent == false) {
    moonTransparent = true;
  }
}

//END

No Responses to “Dynamic Cityscapes, part deux”  

  1. No Comments

Leave a Reply