Why is this stem drawing on top of the petals (line, fill question)

edhebert

Hi-

Please have a look at this sketch. http://codepen.io/edhebert/pen/GraYLZ?editors=0010

I'm drawing the stem (line) prior to the petals (which are drawn with a rotation). Yet the line appears atop the petals (but beneath the yellow flower center, which is drawn at the end of sketch.)

Note the noLoop() call that's commented out in setup(). If I uncomment that, the sketch draws as expected, with the stem behind the petals.

Here's the code, for those who don't feel like looking at the codepen:

    var petal_angle = 0;

    function setup() {
        createCanvas(windowWidth, windowHeight);
        background(0);
        // noLoop();
    }

    function draw() {

        //make center of canvas the 0, 0 origin
        translate(width / 2, height / 2);

        var petal_color = color(128, 212, 255);

        //define one petal as an object
        var petal = {
            x: 120,
            y: 0,
            petal_width: 150,
            petal_height: 75
        }

        //draw stem
        stroke(0,128,0);
        strokeWeight(20);
        line(0, 0, 0, height / 2 - 50);

        fill(petal_color);
        noStroke();

        push();
        for (petal_angle; petal_angle < 360; petal_angle += 45) {
            rotate(radians(petal_angle));
            ellipse(petal.x, petal.y, petal.petal_width, petal.petal_height);
        }
        pop();

        //draw center of flower on top of petals
        fill(255, 255, 0);
        ellipse(0, 0, 130, 130);

    }

GoToLoop

Most likely the problem is you've made iterator petal_angle a global var.
And you don't reset it back to 0 before each for ( ; ; ) {} loop! #-o

Also you should move background(0); to the top of draw()! L-)

Anyways, I did some tweaks to your sketch. Visit the link below for it: :bz
http://Bl.ocks.org/GoSubRoutine/367742ecc1a78c303dc100cefc3e20cd http://CodePen.io/GoSubRoutine/pen/BpevPE/right?editors=001

/**
 * Daisy Flower (v2.0.3)
 * by EdHebert (2017-Feb-18)
 * mod GoToLoop
 *
 * forum.Processing.org/two/discussion/20864/
 * why-is-this-stem-drawing-on-top-of-the-petals-line-fill-question#Item_1
 *
 * CodePen.io/GoSubRoutine/pen/BpevPE/right?editors=001
 * CodePen.io/edhebert/pen/GraYLZ/right?editors=001
 *
 * Bl.ocks.org/GoSubRoutine/367742ecc1a78c303dc100cefc3e20cd
 */

"use strict";

const Petal = Object.freeze({ X: 120, Y: 0, W: 150, H: 75, A: .25*Math.PI }),
      BUD_DIAM = 130, STEM_OFFSET = 15, STEM_BOLD = 20;

let Color, cx, cy;

function setup() {
  createCanvas(400, 650);
  noLoop();

  strokeWeight(STEM_BOLD).strokeCap(PROJECT);
  ellipseMode(CENTER).blendMode(REPLACE);

  Color = Object.freeze({
    BG: Object.freeze(color(0)),
    STEM: Object.freeze(color('green')),
    PETAL: Object.freeze(color('#8DF')),
    BUD: Object.freeze(color('yellow'))
  });

  cx = width>>1, cy = height>>1;
} 

function draw() {
  background(Color.BG).translate(cx, cy);

  stroke(Color.STEM).line(0, 0, 0, cy - STEM_OFFSET);

  fill(Color.PETAL).noStroke().push();
  for (let a = 0; a < TAU; a += Petal.A)
    rotate(Petal.A).ellipse(Petal.X, Petal.Y, Petal.W, Petal.H);
  pop();

  fill(Color.BUD).ellipse(0, 0, BUD_DIAM);
}

edhebert

Thanks, Goto...the obvious answer was the global for petal angle in the for loop, which I embarrassingly didn't notice.

Interesting code rework as well. Why did you choose to bitshift width and height instead of just dividing by two? Elegance? Speed?

GoToLoop

Umm... I find it interesting. Although it can also be slightly faster. ;))
Another extra bonus is that a division can result a fractional value, while bitshifting is always whole.