How to set these object in the back?

Processing Coding Questions
1

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

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);
}
}
1 Like
2

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
  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 
// 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

//________________________________________________________________
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();
}

//________________________________________________________________
1 Like
3

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.

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);
}
}
4

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
snap-014.png1258Ă—735 46.2 KB

1 Like
5

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.

6

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???

// 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;
}
1 Like
7

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.

8

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