# Draw Order Issue - For Loop and ellipses

**URL:** <https://discourse.processing.org/t/draw-order-issue-for-loop-and-ellipses/29258>\
**Category:** Coding Questions\
**Created:** [April 10, 2021, 7:25am UTC](https://discourse.processing.org/t/draw-order-issue-for-loop-and-ellipses/29258 "2021-04-10T07:25:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![akathewb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/akathewb/32/3364_2.png) [@akathewb](https://discourse.processing.org/u/akathewb)\
**Post date:** [April 10, 2021, 7:25am UTC](https://discourse.processing.org/t/draw-order-issue-for-loop-and-ellipses/29258/1 "2021-04-10T07:25:56Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 10, 2021, 7:39am UTC](https://discourse.processing.org/t/draw-order-issue-for-loop-and-ellipses/29258/2 "2021-04-10T07:39:15Z")

</div>

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

```auto
void setup() {
  size(800, 800, P3D);
  hint(DISABLE_OPTIMIZED_STROKE);
}

```

---

<div class="post-metadata">

**Author:** ![akathewb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/akathewb/32/3364_2.png) [@akathewb](https://discourse.processing.org/u/akathewb)\
**Post date:** [April 10, 2021, 7:41am UTC](https://discourse.processing.org/t/draw-order-issue-for-loop-and-ellipses/29258/3 "2021-04-10T07:41:48Z")

</div>

Yes thanks quark!! High Five!