Draw Order Issue - For Loop and ellipses

Processing Coding Questions
1

In the code below I’d like the ellipses to draw on top of the code being run in the for loops, but for some reason they keep drawing before, and I’m not sure how to fix it. Thanks for taking a look.

//color variables
color skyBlue = color(0, 100, 255);
color sunsetRed = color(255, 50, 50);
color red = color(240, 22, 76);
color purple = color(107, 26, 201);
color jeans = color(22, 81, 240);
color chucks = color(15, 15, 15);


void setup() {
  size(800, 800, P3D);
}

void draw() {

  background(30);
    
  //lines top to bottom
  for (float i = 175; i < 625; i++) {
    float colorFactor = map(i, 175, 625, 0, 1);
    color lineColor = lerpColor(red, chucks, colorFactor); 
    stroke(lineColor);
    line(100, i, 400, i);
  }

  //lines top to bottom
  for (float j = 175; j < 625; j++) {
    float colorFactor = map(j, 175, 625, 0, 1);
    color lineColor = lerpColor(purple, jeans, colorFactor); 
    stroke(lineColor);
    line(400, j, 700, j);
  }
   
  noStroke();
  
  fill(0);
  ellipse(250,400,250,250);
  
  fill(255);
  ellipse(550,400,250,250);
  
  noLoop();
}
2

Change the renderer from P3D to P2D - they are both use OpenGL so the quality will be the same.

In P3D strokes (e.g. lines, shape borders) are drawn after any fills. This is an optimisation because line drawing in OpenGL is more GPU intensive than filling shapes.

Alternatively you can switch off the optimized stroke

void setup() {
  size(800, 800, P3D);
  hint(DISABLE_OPTIMIZED_STROKE);
}
2 Likes
3

Yes thanks quark!! High Five!