# Arrangement of depth of objects

**URL:** <https://discourse.processing.org/t/arrangement-of-depth-of-objects/39129>\
**Category:** Coding Questions\
**Created:** [October 7, 2022, 9:06am UTC](https://discourse.processing.org/t/arrangement-of-depth-of-objects/39129 "2022-10-07T09:06:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ties2901](https://avatars.discourse-cdn.com/v4/letter/t/bcef8e/32.png) [@Ties2901](https://discourse.processing.org/u/Ties2901)\
**Post date:** [October 7, 2022, 9:06am UTC](https://discourse.processing.org/t/arrangement-of-depth-of-objects/39129/1 "2022-10-07T09:06:07Z")

</div>

(This is a question related to a University Assignment!)  
I am creating a Dandelion in processing for a Creative Programming Challenge. 🙂

Hi all, I have just started with processing and am experiencing some problems with the way objects are placed on top of each other, and in which ‘layers’ they appear. (if I compare it with adobe Photoshop layers for example).

I have created a circle ring around a object because i did not manage to make this object circular, it is still square. I have now cheated a bit, and placed a ring with a certain strokeweight over this to hide the square shape and make it look like a circle. After this, i want to add some Seeds, but after the counter i created reaches its max, the seeds keep dissapearing behind the Ring I created earlier.

I checked the order of functions that are being called, and placed the Seed function at the end of the draw, but it does not place the Seed objects on the top ‘layer’. anyone who how to fix this?

Thanks!

Here is my code;

```auto
ArrayList<Dotcore>dotcores;
int corewidth = 150;
int coreheight = 150;
int Xcore = 500;
int Ycore = 500;
int dotcounter = 20;
float seedsangle = 0.0;
int seedscounter = 100;
int counter = 0;
ArrayList<Seed>seeds;

void setup () {
  background(255);
  size(1000, 1000);
  dotcores = new ArrayList<Dotcore>();
  seeds = new ArrayList<Seed>();
}

void draw () {
  // CORE DANDELION
  fill(#EDF0D7);
  ellipse(Xcore, Ycore, corewidth, coreheight);

  // DOTS IN THE CORE
  newDot();
  for (Dotcore DT : dotcores) {
    if (DT.edges()) {
      DT.growing = false;
    }
    DT.show();
    DT.grow();
  }

  // RING DANDELION
  boolean ring = false;
  if (counter < seedscounter) {
    ring = true;
  } else {
    ring = false;  
  }

  if (ring == true) {
    stroke(56);
    noFill();
    strokeWeight(200);
    ellipse(Xcore, Ycore, 90, 90);
  }
  
  if (ring == false) {
    stroke(255);
    noFill();
    strokeWeight(200);
    ellipse(Xcore, Ycore, 90, 90);
  }
  
  // STEM AND SEEDS
  stem(500, 500);
  counter = counter +1;
  if (counter < seedscounter) {
    seeds(500, 500, 65);
  }

}

void newDot() {
  pushMatrix();
  translate(width/2, height/2);
  float x = random(Xcore-corewidth/2, Xcore+coreheight/2);
  float y = random (Ycore- coreheight/2, Ycore+coreheight/2 );
  popMatrix();

  boolean valid = true;
  for (Dotcore DT : dotcores) {
    float d = dist(x, y, DT.x, DT.y);
    if (d<DT.r) {
      valid = false;
      break;
    }
  }
  if (valid) {
    dotcores.add(new Dotcore(x, y));
  }
}

void stem(int x, int y) {
  pushMatrix();
  translate(x, y);
  strokeWeight(20);
  stroke(#C4C94F);
  line(0, 0+60, 0, height);
  popMatrix();
}

void seeds(int x, int y, int radius) {
  seedsangle += random (-5, 5);
  x += (cos(seedsangle)*radius);
  y += (sin(seedsangle)*radius);
  translate (x, y);
  rotate(seedsangle);
  fill(#B4A47A);
  stroke(#98885F);
  strokeWeight(1);
  ellipse(0, 0, 20, 5);
}

void newSeed() {
}

```

this is the second tab

```auto

class Dotcore {

  float x;
  float y;
  float r;

  boolean growing = true;

  Dotcore(float x_, float y_) {
    x = x_;
    y = y_;
    r = 7;
  }

  void grow() {
    if (growing) {
      r = r +1;
    }
    
  }
  
  boolean edges() {
    return (x + r > Xcore + corewidth/2 || x - r < Xcore - corewidth/2 || y + r > Ycore + coreheight/2 || y - r < Ycore - coreheight/2 || r > 7 );
  }

  void show() {
    stroke(#9CA25F);
    strokeWeight(1);
    fill(#E3E8B0);
   ellipse(x, y, r*2, r*2);
  }
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [October 7, 2022, 10:08am UTC](https://discourse.processing.org/t/arrangement-of-depth-of-objects/39129/2 "2022-10-07T10:08:09Z")

</div>

Hi @Ties2901,

code is not running as Seed class is missing …

Easiest way would be to introduce a z-order and draw from far to near …

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![Ties2901](https://avatars.discourse-cdn.com/v4/letter/t/bcef8e/32.png) [@Ties2901](https://discourse.processing.org/u/Ties2901)\
**Post date:** [October 7, 2022, 10:48am UTC](https://discourse.processing.org/t/arrangement-of-depth-of-objects/39129/3 "2022-10-07T10:48:17Z")

</div>

Hi mnse, yeah I just saw that I still left a void newSeed, but when i just copy the ‘seed part’ of the code in a new sketch it works:

```auto
float seedsangle = 0.0;
int seedscounter = 100;
int counter = 0;

void setup (){
  size (500,500);
  
}

void draw (){
  counter = counter +1;
    if (counter < seedscounter) {
    seeds(250, 250, 65);
    }
}

void seeds(int x, int y, int radius) {
  seedsangle += random (-5, 5);
  x += (cos(seedsangle)*radius);
  y += (sin(seedsangle)*radius);
  translate (x, y);
  rotate(seedsangle);
  fill(#B4A47A);
  stroke(#98885F);
  strokeWeight(1);
  ellipse(0, 0, 20, 5);
}  

```

so I am not sure why I would need to create a class for this. Could you be able to ellaborate a bit more on the introduction of a Z- order? what is this?

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [October 7, 2022, 1:00pm UTC](https://discourse.processing.org/t/arrangement-of-depth-of-objects/39129/4 "2022-10-07T13:00:45Z")

</div>

Hi @Ties2901,

Sorry! Misunderstood your initial issue …  
First you could draw the circle first and the the seeds with your approach to draw over and over again on each draw.

```auto
void draw () {
  if (counter == 0) {
    fill(255);
    circle(250, 250, floor(width*0.8));
  }
  if (counter < seedscounter) {
    seeds(250, 250, floor(width*0.4));
  }
  counter = counter +1;  
}

```

but I would recomment that you first create all the seeds and than in draw clear the background and draw the circle and then the seeds…

Also instead of drawing random seeds you can look for something called the fibonacci spiral (sunflower).  
It would then get a bit more flower thing…

Here is a quick hack of it …

```auto
float goldenratio = (1.+sqrt(5)) / 2.0;
int seedscounter = 2200;

void setup () {
  size (500, 500);  
}

void draw () {
  background(0);
  noFill();
  stroke(#DAA520);
  circle(width/2,height/2,480);
  fill(#8B4513);
  stroke(#DAA520);
  for (int i = 0; i < seedscounter; i++) {
    pushMatrix();
    float r = pow(i, goldenratio) / (seedscounter / 2.);
    float angle = TWO_PI * goldenratio * i;
    float x = r * cos(angle);
    float y = r * sin(angle);
    translate(width/2+x,height/2+y);
    circle(0,0,i / (seedscounter / 18.));
    popMatrix();
  } 
}

```

![dummy](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/0/b02c59aec04faa345f514d69833985af0decdc8e.jpeg)

Cheers  
— mnse

EDIT: Here is some more info about with example …  
[https://www.mathsisfun.com/numbers/nature-golden-ratio-fibonacci.html](https://www.mathsisfun.com/numbers/nature-golden-ratio-fibonacci.html)