# How to set these object in the back?

**URL:** https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133
**Category:** Coding Questions
**Created:** [December 1, 2018, 1:52am UTC](https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133 "2018-12-01T01:52:18Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![ant](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@ant](https://discourse.processing.org/u/ant)
#### Post date: [December 1, 2018, 1:52am UTC](https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133/1 "2018-12-01T01:52:18Z")

</div>

Having trouble getting the stars to be behind the building and the windows to be behind the water and the bridge.

```auto
float time = 0;
float[] a = new float[2000];
wall[]walls; 
void setup(){
  size(1000,700);
  for (int i = 0; i < a.length; i++) { 
    a[i] = random(0, 1700);
    //walls setup
walls=new wall[14];//creates an array(list) for the walls array starts at 0
walls[0]=new wall(470,300,20,20);
walls[1]=new wall(510,300,20,20);
walls[2]=new wall(470,340,20,20);
walls[3]=new wall(510,340,20,20);
walls[4]=new wall(470,380,20,20);
walls[5]=new wall(510,380,20,20);
walls[6]=new wall(470,420,20,20);
walls[7]=new wall(510,420,20,20);
walls[8]=new wall(470,460,20,20);
walls[9]=new wall(510,460,20,20);
walls[10]=new wall(470,500,20,20);
walls[11]=new wall(510,500,20,20);
walls[12]=new wall(470,540,20,20);
walls[13]=new wall(510,540,20,20);
}
}

void draw(){
background(43,47,119);
float x=0;
noStroke();
for (int i = 0; i < a.length; i++) {  
    a[i] += 0;
    float y = i * 0.4;
    
    fill(255,255,255);
    ellipse(a[i], y, 2, 2);
}
stroke(0);
while (x<width){
    line(x,520+50*noise(x/100,time),x,height);
    x=x+1;
  }
  time=time+0.01;
  

noStroke();
//empire state building
fill(0,80);
rect(450,280,100,350);
rect(465,220,70,60);
rect(479,200,40,20);
rect(496,170,5,30);

//far right building
fill(0,80);
rect(850,320,300,300);

//second one from the right
fill(0,80);
rect(750,280,100,350);

//far left building
fill(0,80);
rect(0,280,100,350);

//second from the left building
fill(0,80);
rect(100,350,100,300);

moon();
car();

stroke(0);
for (int i=0;i<1000;i=i+10){
  line(i,440,i,480);
}
  
//bridge
fill(0);
rect(0,440,1000,10);
rect(0,480,1000,20);

 for (int i = 0; i < walls.length; i++){
      walls[i].draw();
    }

}

void car(){
  fill(47,79,79);
  rect(30,460,30,20);
}

void moon(){
  fill(254,252,215);
  noStroke();
  ellipse(900, 100, 150, 150);
  noStroke();
  fill(43,47,119);
  ellipse(880, 90,125,125);
}

//creats a class for the walls of the maze
class wall {
float x;
float y;
float w;
float h;
wall(float x1,float y1, float w1, float h1) {
x = x1;
y = y1;
w = w1;
h = h1;
}

//draws the walls
void draw() {
  noStroke();
  fill(255,255,224);
  rect(x, y, w, h);
}
}

```

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [December 1, 2018, 3:51am UTC](https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133/2 "2018-12-01T03:51:53Z")

</div>

i see regarding your question 2 things:

- -a- the sequence of drawing the objects
- -b- the color thing  
a fill(0,80); is black with opacity  
well this makes the stars shine through even if drawn first…, a

```auto
  fill(0,0,80);

```

instead is a total different thing,it is the color you want ( RGB 255,255,255 ) no opacity

//\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_  
but you should anyhow  
cleanup,  
it is a mix of modular code and just drawing unnamed objects,

> **example**
>
> ```auto
> // https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133
> 
> float time = 0; // for wave animation
> float[] a = new float[2000]; // star posx array
> 
> void setup() {
> size(1000, 700);
> make_walls();
> make_stars();
> }
> 
> void draw() {
> background(43, 47, 119);
> noStroke();
> moon(); // moon first to see stars on the cutout
> draw_stars();
> building();
> draw_all_walls(); // you mean lit windows
> car();
> bridge(); 
> draw_wave(); // last to fill over building....
> }
> 
> void car() {
> fill(47, 79, 79);
> rect(30, 460, 30, 20);
> }
> 
> void moon() {
> fill(254, 252, 215);
> noStroke();
> ellipse(900, 100, 150, 150);
> noStroke();
> fill(43, 47, 119);
> ellipse(880, 90, 125, 125);
> }
> 
> void building() {
> noStroke();
> //empire state building
> fill(0,0,80); //fill(0, 80); // if black with opacity see stars!
> rect(450, 280, 100, 350);
> rect(465, 220, 70, 60);
> rect(479, 200, 40, 20);
> rect(496, 170, 5, 30);
> 
> //far right building
> fill(0,0,80); //fill(0, 80);
> rect(850, 320, 300, 300);
> 
> //second one from the right
> fill(0,0,80); //fill(0, 80);
> rect(750, 280, 100, 350);
> 
> //far left building
> fill(0,0,80); //fill(0, 80);
> rect(0, 280, 100, 350);
> 
> //second from the left building
> fill(0,0,80); //fill(0, 80);
> rect(100, 350, 100, 300);  
> }
> 
> void bridge() {
> //bridge
> stroke(0);
> for (int i=0; i<1000; i=i+10) {
> line(i, 440, i, 480);
> }
> fill(0);
> rect(0, 440, 1000, 10);
> rect(0, 480, 1000, 20); 
> }
> // ________________________________________________________________
> //creats a class for the walls of the maze
> class wall {
> float x,y,w,h;
> wall(float x, float y, float w, float h) {
> this.x = x;
> this.y = y;
> this.w = w;
> this.h = h;
> }
> 
> //draws the walls
> void draw() {
> noStroke();
> fill(255, 255, 224);
> rect(x, y, w, h);
> }
> }
> 
> wall[] walls;
> 
> void make_walls() {
> //walls setup
> walls=new wall[14];//creates an array(list) for the walls array starts at 0
> walls[0]=new wall(470, 300, 20, 20);
> walls[1]=new wall(510, 300, 20, 20);
> walls[2]=new wall(470, 340, 20, 20);
> walls[3]=new wall(510, 340, 20, 20);
> walls[4]=new wall(470, 380, 20, 20);
> walls[5]=new wall(510, 380, 20, 20);
> walls[6]=new wall(470, 420, 20, 20);
> walls[7]=new wall(510, 420, 20, 20);
> walls[8]=new wall(470, 460, 20, 20);
> walls[9]=new wall(510, 460, 20, 20);
> walls[10]=new wall(470, 500, 20, 20);
> walls[11]=new wall(510, 500, 20, 20);
> walls[12]=new wall(470, 540, 20, 20);
> walls[13]=new wall(510, 540, 20, 20);
> }
> void draw_all_walls() {
> for (int i = 0; i < walls.length; i++) walls[i].draw();
> }
> 
> void make_stars() {
> for (int i = 0; i < a.length; i++) { 
> a[i] = random(0, 1700);
> }
> }
> 
> void draw_stars() {
> for (int i = 0; i < a.length; i++) {  
> a[i] += 0;
> float y = i * 0.4;
> 
> fill(255, 255, 255);
> ellipse(a[i], y, 2, 2);
> }
> }
> 
> void draw_wave() {
> float x=0;
> stroke(0);
> while (x<width) {
> line(x, 520+50*noise(x/100, time), x, height);
> x=x+1;
> }
> time=time+0.01;
> }
> 
> ```

but possibly i misunderstood the animated wave thing, what is it? should it be in front?

//\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_  
the class wall for mace,  
actually the lit window of the building,  
is lets say not needed, could be you just exercise “class” or  
possibly there is a future purpose ( like property lit /nolit …)  
and in that case i want to mention that there is a naming convention:

> class Wall

> Wall wall;

> Wall walls;

if you want make a grid of them there are some interesting tricks you might want to study,  
also a very different way to iterate / for loop / them

```auto
// ________________________________________________________________
class Wall { //creats a class for the walls of the maze
  float x, y, w, h;
  Wall(float x, float y, float w, float h) {
    this.x = x; 
    this.y = y;
    this.w = w;
    this.h = h;
  }
  void draw() { //draws the walls
    noStroke();
    fill(200, 200, 0);
    rect(x, y, w, h);
  }
}

final int cwalls = 14, grid = 2;
final int w = 20, posx = 450+w, dposx=2*w, posy = 280+w, dposy=2*w;
Wall[] walls=new Wall[cwalls]; //creates an array(list) for the walls array starts at 0

void make_walls() { //walls setup
  for ( int i =0; i<cwalls; i++) walls[i]=new Wall(posx+dposx*(i%grid), posy+dposy*floor(i/grid), w, w);
}

void draw_all_walls() {
  for ( Wall wall : walls ) wall.draw();
}

// ________________________________________________________________

```

---

<div class="post-metadata">

### Author: ![ant](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@ant](https://discourse.processing.org/u/ant)
#### Post date: [December 1, 2018, 2:07pm UTC](https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133/3 "2018-12-01T14:07:32Z")

</div>

I cleaned up some of the code, but I had the fill set to `fill(0,80)` so that the moving water under the bridge was in front of them. If I change it to `fill(0,0,80)` the stars are now behind the building but the water is also behind them too. Also, I’m trying to get the windows behind the bridge but I’m unsure how to do this also.

```auto
float time = 0;
float[] a = new float[2000];
wall[]walls; 
void setup(){
  size(1000,700);
  for (int i = 0; i < a.length; i++) { 
    a[i] = random(0, 1700);
//windows setup
walls=new wall[14];//creates an array(list) for the walls array starts at 0
walls[0]=new wall(470,300,20,20);
walls[1]=new wall(510,300,20,20);
walls[2]=new wall(470,340,20,20);
walls[3]=new wall(510,340,20,20);
walls[4]=new wall(470,380,20,20);
walls[5]=new wall(510,380,20,20);
walls[6]=new wall(470,420,20,20);
walls[7]=new wall(510,420,20,20);
walls[8]=new wall(470,460,20,20);
walls[9]=new wall(510,460,20,20);
walls[10]=new wall(470,500,20,20);
walls[11]=new wall(510,500,20,20);
walls[12]=new wall(470,540,20,20);
walls[13]=new wall(510,540,20,20);
}
}

void draw(){
background(43,47,119);
float x=0;
noStroke();

//stars in the background
for (int i = 0; i < a.length; i++) {  
    a[i] += 0;
    float y = i * 0.4;
    
    fill(255,255,255);
    ellipse(a[i], y, 2, 2);
}
stroke(0);

//moving water
while (x<width){
    line(x,520+50*noise(x/100,time),x,height);
    x=x+1;
  }
  time=time+0.01;
  

noStroke();
//empire state building
fill(0,0,80);
rect(450,280,100,350);
rect(465,220,70,60);
rect(479,200,40,20);
rect(496,170,5,30);

//far right building
fill(0,0,80);
rect(850,320,300,300);

//second one from the right
fill(0,0,80);
rect(750,280,100,350);

//far left building
fill(0,0,80);
rect(0,280,100,350);

//second from the left building
fill(0,0,80);
rect(100,350,100,300);

//user defined functions
moon();
car();

//bridge lines
stroke(0);
for (int i=0;i<1000;i=i+10){
  line(i,440,i,480);
}
  
//bridge
fill(0);
rect(0,440,1000,10);
rect(0,480,1000,20);

//windows
for (int i = 0; i < walls.length; i++){
  walls[i].draw();
}
}

//user defined function for the car
void car(){
  fill(47,79,79);
  rect(30,460,30,20);
}

//user defined function for the moon
void moon(){
  fill(254,252,215);
  noStroke();
  ellipse(900, 100, 150, 150);
  noStroke();
  fill(43,47,119);
  ellipse(880, 90,125,125);
}

//creats a class for the windows of the building
class wall {
float x;
float y;
float w;
float h;
wall(float x1,float y1, float w1, float h1) {
x = x1;
y = y1;
w = w1;
h = h1;
}

//draws the windows
void draw() {
  noStroke();
  fill(255,255,224);
  rect(x, y, w, h);
}
}

```

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [December 1, 2018, 4:14pm UTC](https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133/4 "2018-12-01T16:14:21Z")

</div>

sorry that my code could not help you at all,  
still moon cutout has no star,  
but good, the stars are behind the buildings now,  
the town is inside water  
while my version somehow behind water,  
i told you i see a problem with the “wave”

 ![snap-014](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/930b12a05f4a1c5247b6f7f882b58767287fc711.png)

---

<div class="post-metadata">

### Author: ![ant](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@ant](https://discourse.processing.org/u/ant)
#### Post date: [December 1, 2018, 4:18pm UTC](https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133/5 "2018-12-01T16:18:13Z")

</div>

The one on the left is how I want it, not the way I made it on the right. I’m sorry Im just not understanding how to do the one on the left.

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [December 1, 2018, 4:20pm UTC](https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133/6 "2018-12-01T16:20:12Z")

</div>

ok, again  
it is all about the sequence you draw the objects.  
but the waterfront ( or view point ) looks bad  
how about the viewer is just above water level,  
but the water level is below a building ( water front / key )  
hm, but then the bridge not makes too much sense???

```auto
// https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133
// v02

float time = 0; // for wave animation
float[] a = new float[2000]; // star posx array

void setup() {
  size(1000, 700);
  make_walls();
  make_stars();
}

void draw() {
  background(43, 47, 119);
  noStroke();
  moon(); // moon first to see stars on the cutout
  draw_stars();
  building();
  draw_all_walls(); // you mean lit windows
  car();
  bridge(); 
  draw_wave(); // last to fill over building....
}

void car() {
  fill(47, 79, 79);
  rect(30, 460, 30, 20);
}

void moon() {
  fill(254, 252, 215);
  noStroke();
  ellipse(900, 100, 150, 150);
  noStroke();
  fill(43, 47, 119);
  ellipse(880, 90, 125, 125);
}

void building() {
  noStroke();
  fill(0, 0, 80); //fill(0, 80); // if black with opacity see stars!
  rect(450, 280, 100, 350); //empire state building
  rect(465, 220, 70, 60);
  rect(479, 200, 40, 20);
  rect(496, 170, 5, 30); 
  rect(850, 320, 300, 300); //far right building 
  rect(750, 280, 100, 350); //second one from the right
  rect(0, 280, 100, 350); //far left building
  rect(100, 350, 100, 300); //second from the left building
}

void bridge() {
  //bridge
  stroke(0);
  for (int i=0; i<1000; i=i+10) {
    line(i, 440, i, 480);
  }
  fill(0);
  rect(0, 440, 1000, 10);
  rect(0, 480, 1000, 20);
}
// ________________________________________________________________
class Wall { //creats a class for the walls of the maze
  float x, y, w, h;
  Wall(float x, float y, float w, float h) {
    this.x = x; 
    this.y = y;
    this.w = w;
    this.h = h;
  }
  void draw() { //draws the walls
    noStroke();
    fill(200, 200, 0);
    rect(x, y, w, h);
  }
}

final int cwalls = 14, grid = 2;
final int w = 20, posx = 450+w, dposx=2*w, posy = 280+w, dposy=2*w;
Wall[] walls=new Wall[cwalls]; //creates an array(list) for the walls array starts at 0

void make_walls() { //walls setup
  for ( int i =0; i<cwalls; i++) walls[i]=new Wall(posx+dposx*(i%grid), posy+dposy*floor(i/grid), w, w);
}

void draw_all_walls() {
  for ( Wall wall : walls ) wall.draw();
}

// ________________________________________________________________
void make_stars() {
  for (int i = 0; i < a.length; i++) a[i] = random(0, 1700);
}

void draw_stars() {
  fill(255, 255, 255);
  for (int i = 0; i < a.length; i++) ellipse(a[i], i * 0.4, 2, 2);
}

void draw_wave() {
  float x=0;
  stroke(0);
  while (x<width) {
    line(x, 520+50*noise(x/100, time), x, height);
    x=x+1;
  }
  time=time+0.01;
}

```

---

<div class="post-metadata">

### Author: ![ant](https://avatars.discourse-cdn.com/v4/letter/a/85e7bf/32.png) [@ant](https://discourse.processing.org/u/ant)
#### Post date: [December 1, 2018, 4:43pm UTC](https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133/7 "2018-12-01T16:43:55Z")

</div>

Took me a bit and I read it over and understand now and sorry about the confusion with the walls class that was meant to be windows it was originally for the buildings. You did mention doing something with the windows and I was thinking about making them go on and off (yellow to black). I was wondering if you have any suggestions to go about that.

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [December 1, 2018, 4:48pm UTC](https://discourse.processing.org/t/how-to-set-these-object-in-the-back/6133/8 "2018-12-01T16:48:52Z")

</div>

good idea, so work on the  
class Wall  
and give it a boolean property lit ( for remember )  
and a function  
void toggle\_lit() { lit = !lit; }  
so you can set it by some timed / random function in draw