# Random SkyLine lab

**URL:** <https://discourse.processing.org/t/random-skyline-lab/29766>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 30, 2021, 11:56pm UTC](https://discourse.processing.org/t/random-skyline-lab/29766 "2021-04-30T23:56:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Syntax64](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@Syntax64](https://discourse.processing.org/u/Syntax64)\
**Post date:** [April 30, 2021, 11:56pm UTC](https://discourse.processing.org/t/random-skyline-lab/29766/1 "2021-04-30T23:56:02Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2b42a58f60267dc7f1394869f05eaf77fa90165c.png) How it should look.

````auto
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()
}```
````

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 1, 2021, 8:43am UTC](https://discourse.processing.org/t/random-skyline-lab/29766/2 "2021-05-01T08:43:18Z")

</div>

Hi! Welcome to the forum!

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

```auto
    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!

---

<div class="post-metadata">

**Author:** ![Syntax64](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@Syntax64](https://discourse.processing.org/u/Syntax64)\
**Post date:** [May 1, 2021, 12:19pm UTC](https://discourse.processing.org/t/random-skyline-lab/29766/3 "2021-05-01T12:19:05Z")

</div>

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

````auto
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();
}```
````

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 1, 2021, 2:19pm UTC](https://discourse.processing.org/t/random-skyline-lab/29766/4 "2021-05-01T14:19:35Z")

</div>

Hello,

Some hints:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d845eab028562498d62736db57942802ef0b4dc6.png)

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/](https://processing.org/)_

`:)`

---

<div class="post-metadata">

**Author:** ![Syntax64](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@Syntax64](https://discourse.processing.org/u/Syntax64)\
**Post date:** [May 1, 2021, 5:50pm UTC](https://discourse.processing.org/t/random-skyline-lab/29766/5 "2021-05-01T17:50:55Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 1, 2021, 8:59pm UTC](https://discourse.processing.org/t/random-skyline-lab/29766/6 "2021-05-01T20:59:46Z")

</div>

> [@Syntax64](#):
>
> I have gotten to here and am still kinda stuck.

“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.

`:)`