Arrangement of depth of objects

Processing Coding Questions
1

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

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;

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


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

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

1 Like
3

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:

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?

4

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.

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 …

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

Cheers
— mnse

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

1 Like