Bergen's Grid Illusion - wonky order of execution

Processing Coding Questions
1

hi All, I’m doing something wrong here - the grey “axles” should be behind the white ellipses, not the other way around as they are here - I’ve spent a couple of hours moving around code, but just can’t fix it - duhh!

float MinRadius = 380;
float MaxRadius = 860;
int NumConcentricRings = 10;

void setup(){
  size(900,900);
  noLoop();
}

void draw(){
  background(0);
  rectMode(CENTER);
  
  translate(width/2, height/2);
  
  float rStep = 60;
  
  for( float r = MinRadius; r <= MaxRadius; r +=rStep){
    
    noFill();
    stroke(123);
    strokeWeight(NumConcentricRings *0.2);
    ellipse (0, 0, r, r);  // concen rings

    NumConcentricRings +=1;

  for (float a = 0; a < 360; a+=15){
   
    pushMatrix();
    rotate(radians(a));
    strokeWeight(4);
    stroke(127);
    line (MinRadius *0.5, 0, MaxRadius *0.5, 0); // axles
  
    fill(255);
    noStroke();
    ellipse(r *0.5, 0, NumConcentricRings *1.3, NumConcentricRings *1.3); //white circles
    popMatrix();
    }
  } 
  }
2

It seems you are drawing the axles in the for loops so its overriding the data from the previous loop, i moved the axle drawings out of the loops by commenting them out and put them in their own for loop before the main loops, hope that helps

float MinRadius = 380;
float MaxRadius = 860;
int NumConcentricRings = 10;

void setup() {
  size(900, 900);
  noLoop();
}

void draw() {
  background(0);
  rectMode(CENTER);

  translate(width/2, height/2);

  float rStep = 60;

  //ADDED THE AXLES HERE INSTEAD
  for (float a = 0; a < 360; a+=15) {
    pushMatrix();
    rotate(radians(a));
    strokeWeight(4);
    stroke(127);
    line (MinRadius *0.5, 0, MaxRadius *0.5, 0); // axles
    popMatrix();
  }

  for ( float r = MinRadius; r <= MaxRadius; r +=rStep) {

    noFill();
    stroke(123);
    strokeWeight(NumConcentricRings *0.2);
    ellipse (0, 0, r, r);  // concen rings

    NumConcentricRings +=1;

    for (float a = 0; a < 360; a+=15) {

      pushMatrix();
      rotate(radians(a));
      //strokeWeight(4);
      //stroke(127);
      //line (MinRadius *0.5, 0, MaxRadius *0.5, 0); // axles

      fill(255);
      noStroke();
      ellipse(r *0.5, 0, NumConcentricRings *1.3, NumConcentricRings *1.3); //white circles
      popMatrix();
    }
  }
}
1 Like
3

Thanks Mikey83 - that’s it! Lovely, many thanks. I learned something there, cheers.

BergensGrid
BergensGrid900×900 78.6 KB

2 Likes