Random SkyLine lab

Processing Coding Questions
1

I’m Struggling to figure out a small detail in my project. How do I make windows that randomly are either yellow or black and are set in a grid according to the building? then How it should look.

int[] buildingHeights = new int[12];
int[] starXValues = new int[200];
int[] starYValues = new int[200];

void setup(){
 size(600,450);
 background(0);
}
void draw(){}
void drawAll(){
  fill(255);
  stroke(255);
  drawSky();
  drawBuildings();
}
void drawSky(){
  stroke(255);
  strokeWeight(1);
  ellipse(500,-20,150,150);
  for(int i = 0; i<starXValues.length; i++)
  point(starXValues[i],starYValues[i]);
}
void drawBuildings(){
  stroke(0);
  for(int i = 0; i<buildingHeights.length;i++){
    drawBuilding(i*50,height-buildingHeights[i]*50);
  }
}
void drawBuilding(int x, int y){
  fill(100);
  rect(x,height,50,-y);
  for(int i = 1; i < 7; i++){
    for(int j = 1; j < y/height; j++){
       int lights = (int)random(2);
       if(lights==1)
       fill(#ECFF27);
       else
       fill(0);
    }
  }
}
void randomize(){
  for (int n = 0; n < starXValues.length; n++ ) 
    starXValues[n] = (int)random(width);  
  for (int n = 0; n < starYValues.length; n++ ) 
    starYValues[n] = (int)random(width);   
  for (int n = 0; n < buildingHeights.length; n++ ) 
    buildingHeights[n] = (int)random(8); 
    
}
void mousePressed(){
  background(0);
  randomize();
  drawAll()
}```
2

Hi! Welcome to the forum!

I think the problem is that in drawBuilding the loops are actually not run. Here

    for(int j = 1; j < y/height; j++){

in fact y is always smaller than height, so this is skipped - I guess you know how to fix it! The other thing is, in this loop, you don’t have rect so you only set the color with fill and end up not drawing.

Once you fix these points - I recommend you to spend a bit of time refactoring the code to use push, pop and translate. The concept may be confusing at first, by using these functions your code will be a lot more cleaner. Good luck!

3

That’s an oversight, thanks for the mention, but I still can’t figure out how to get the windows to work like the example. I deleted the rectangle function after the fills since it didn’t work. This is where i have it at this point

int[] buildingHeights = new int[12];
int[] starXValues = new int[200];
int[] starYValues = new int[200];

void setup(){
 size(600,450);
 background(0);
}
void draw(){}
void drawAll(){
  fill(255);
  stroke(255);
  drawSky();
  drawBuildings();
}
void drawSky(){
  stroke(255);
  strokeWeight(1);
  ellipse(500,-20,150,150);
  for(int i = 0; i<starXValues.length; i++)
  point(starXValues[i],starYValues[i]);
}
void drawBuildings(){
  stroke(0);
  for(int i = 0; i<buildingHeights.length;i++){
    drawBuilding(i*50,height-buildingHeights[i]*50);
  }
}
void drawBuilding(int x, int y){
  fill(100);
  rect(x,height,50,-y);
  for(int i = 1; i < 7; i++){
    for(int j = 1; j < height/y; j++){
       int lights = (int)random(2);
       if(lights==1)
       fill(#ECFF27);
       else
       fill(255);
       rect(x*i,y*i,5,10);
    }
  }
}
void randomize(){
  for (int n = 0; n < starXValues.length; n++ ) 
    starXValues[n] = (int)random(width);  
  for (int n = 0; n < starYValues.length; n++ ) 
    starYValues[n] = (int)random(width);   
  for (int n = 0; n < buildingHeights.length; n++ ) 
    buildingHeights[n] = (int)random(8); 
    
}
void mousePressed(){
  background(0);
  randomize();
  drawAll();
}```
4

Hello,

Some hints:

void drawBuilding(int x1, int y1)
  {
  fill(100);
  rect(x1, height, 50, -y1); //You know where this is!
  
  // Visualize building co-ordinates
  push();
  strokeWeight(3);
  stroke(255);
  point(x1, height -y1);
  point(x1+50, height -y1);
  pop();
  
  //Draw a grid of points x, y inside each building
  //https://processing.org/reference/for.html
  //Start with points() and then replace those with a rect()
 // You can then translate() or increment x for each building.
  }

image

Reference:
//https://processing.org/reference/for.html
This is an example only! It does a column (y) at a time
I prefer to change i, j to x and y when plotting and do a row at a time.

There are other ways to do this; that exploration is for you.

There are resources (tutorials, references, examples and more) here:
https://processing.org/

:)

1 Like
5

Thanks Big Time, but I have gotten to here and am still kinda stuck.

void drawBuilding(int x, int y){
  fill(100);
  rect(x,height,50,-y);
  for(int i = 0; i < x/10; i++){
    for(int j = 0; j < y/45; j++){       
       push(); 
       noStroke();
       int lights = (int)random(2);
       if(lights==1){
       fill(#ECFF27);}
       else{
       fill(255);}
       rect(x*i, height -y*j,5,10);       
       pop();
}

What do I do from here? I’m quite new to this still.

6

“Here” may not be where you want to be.

Draw one rectangle and a grid of points (or a small rectangle) inside the one building rectangle.

Then add the lights.

If you can do that it will be easy to “repeat” in a for() loop.

:)