How to render tree leaves on a second pass, so they overlay branches? about lindenmayer

[dkmooers]

lineLength = randomInt(10, 100);
lineWidth = lineLength / randomInt(6, 10);

var branchingAngle = randomInt(10,20);
var stumpiness = randomInt(0, 4);
var branchThinningRate = randomInt(35, 85) * 0.01;
var frothiness = randomInt(0, 10);
var maxCurliness = 0; // 0.5 for CRAZY curly trees
var curliness = Math.random() * maxCurliness;
var chanceToMakeSpindlyAssTree = Math.random() * 0.4;
var chanceToBearFruit = 0;
var maxLeafSize = randomInt(5,15);

var r = randomInt(60, 80);
var g = randomInt(0, 20) - 10;
var b = randomInt(0, 20) - 10;
ctx.strokeStyle = 'rgb(' + [r, r-g, r-g-b].join(',') + ')';

var tree = new LSystem({
    productions: {
        'X': () => Math.random() < 0.7 ? 'FFF-[[X]+X]+F[+FX]-X' : 'FF-[X+]+FF[-FX]-XF', // was 0.7
        'F': () => {
            let r = Math.random();
            if (r < chanceToMakeSpindlyAssTree)
                return 'F-+F+++---';
            if (r < 0.8 - curliness) return 'F' // was 0.8, F, but try F-F+ with curliness 0.5 for crazy twisty vines
            if (r < 0.97 - curliness) return 'FF' // was 0.97, FF
            if (r < 1.0) return 'FF+' // was 1.0, FF+

        }
    },
    finals: {
        'F': () => {
            ctx.lineWidth += (Math.random() - 0.5) * 0.01;
            ctx.beginPath()
            ctx.moveTo(0, 0)
            ctx.lineTo(0, lineLength / (tree.iterations + 1))
            ctx.stroke()

            //======= DRAW LEAVES ========/
            if (ctx.lineWidth < lineWidth * 0.2) {

                var previousAlpha = ctx.globalAlpha;
                ctx.globalAlpha = 0.9;
                var rb = randomInt(50, 150);
                var g = randomInt(20, 50);
                ctx.fillStyle = 'rgb(' + [rb, rb + g, rb].join(',') + ')';

                var leafSize = (Math.random() / 2 + 0.5) * maxLeafSize;
                ctx.fillRect(0,0,leafSize * (Math.random() / 2 + 0.5),leafSize / 2);

                leafSize = (Math.random() / 2 + 0.5) * maxLeafSize;
                ctx.fillRect(-leafSize,leafSize,leafSize * (Math.random() / 2 + 0.5),leafSize / 2);
                ctx.globalAlpha = previousAlpha;
            }
            //======= END DRAWING LEAVES ========/

            ctx.translate(0, (lineLength / (tree.iterations + 1)) - stumpiness) // stumpiness was 1.5
        },
        '+': () => { ctx.rotate((Math.PI / 180) * (branchingAngle + randomInt(0, 10))) }, // was 22.5
        '-': () => { ctx.rotate((Math.PI / 180) * (-branchingAngle - randomInt(0, 10))) }, // was 22.5
        '[': () => {
            ctx.save();
            ctx.lineWidth *= branchThinningRate; // was 0.65
            // Make strokes lighter in branches
            // to simulate depth
            ctx.globalAlpha *= Math.random() * (1.0 - 0.6) + 0.6;
            lineLength -= (frothiness); // was 10
        },
        ']': () => {
            ctx.restore();
            ctx.lineWidth*=0.9;
            lineLength += (frothiness); // was 10
        }
    }
});
return tree;

[dkmooers]

I'm drawing leaves in the DRAW LEAVES section, when branches get to a certain thinness.

Ideally, though, I'd be able to render the tree twice - once with just branches, once with just leaves. Not sure how to do that though, any advice would be appreciated!

[dkmooers]

Here's a better screenshot of the problem:

https://www.dropbox.com/s/p1o0m14k4bbryt0/Screenshot%202016-06-18%2001.33.00.png?dl=0

[nylki]

Hey @dkmooers, thanks for trying the library!

I have thought about your problem and came up with the following: demo (code). Please note, I modified some attributes like color and width.

Some explanation to that solution:
To render leaves after branches, I used an offpage canvas context to render the leaves to, instead of the regular ctx.
Then, after tree.final() has eventually finished, the offpage canvas is drawn on top of the regular canvas with ctx.drawImage(leavesCanvas, 0, 0).

Before drawing leaves into the second invisible canvas, I copy the transformation matrix of the regular ctx into the leavesCtx via leavesCtx.currentTransform = ctx.currentTransform; to have all the translates and rotations correct.

Unfortunately, .currentTransform is not supported in all browsers yet, so I used a polyfill to be able to copy the matrices.

I am sure there are other solutions to that problem, but the one above seemed the most elegant to me with your existing code base. Happy coding! :)

[dkmooers]

Ah, that's an elegant solution! I was attempting to render two separate passes, keeping the random seed intact between each pass... a mess, and not very performant. Layer compositing makes a lot more sense! Looks like currentTransform doesn't work in my Chrome/OSX, so I'm grateful for the polyfill link as well.

Thanks so much for doing this, it works perfectly!