diff --git a/leaves_layers.js b/leaves_layers.js new file mode 100644 index 0000000..7540f3e --- /dev/null +++ b/leaves_layers.js @@ -0,0 +1,85 @@ +let x1 = 30, y1 = 0, x4 = 480, y4 = 0; +let x2, y2, x3, y3; + +let bgLayer, leafLayer, clickLayer; + +function setup() { + createCanvas(1024, 800); + angleMode(RADIANS); + + // off-screen buffers + bgLayer = createGraphics(width, height); + leafLayer = createGraphics(width, height); + clickLayer= createGraphics(width, height); + + // paint the gradient ONCE to bgLayer + const c1 = color(50); + const c2 = color(212, 91, 70); + for (let y = 0; y < height; y++) { + const n = map(y, 0, height, 0, 1); + const newc = lerpColor(c1, c2, n); + bgLayer.stroke(newc); + bgLayer.line(0, y, width, y); + } +} + +function draw() { + // clear the animated layer each frame (transparent) + leafLayer.clear(); + + // draw animated leaves into leafLayer + leaf(leafLayer); // uses defaults (0,0,0,1) + leaf(leafLayer, 200, 200, PI/4, 1); + leaf(leafLayer, 500, 400, PI/4, -1); + leaf(leafLayer, 100, 700); // uses defaults + + // composite the layers to the main canvas + image(bgLayer, 0, 0); + image(clickLayer,0, 0); + image(leafLayer, 0, 0); +} + +// draw a leaf into a specified buffer (pg) +function leaf(pg, leafX=0, leafY=0, leafRotation=0, scaleFactor=1) { + pg.push(); + pg.translate(leafX, leafY); + pg.rotate(leafRotation); + pg.scale(scaleFactor, 1); + + x2 = 100 * sin(frameCount * 0.5) + 1; + y2 = 100 * sin(frameCount * 0.005) + 10; + x3 = 180 * sin(frameCount * 0.005) + 10; + y3 = 150 * sin(frameCount * 0.005) + 10; + + pg.noStroke(); + pg.fill(160, 82, 45); + + pg.beginShape(); + pg.curveVertex(x1, y1); + pg.curveVertex(x1, y1); + pg.curveVertex(x2, y2); + pg.curveVertex(x3, y3); + pg.curveVertex(x4, y4); + pg.curveVertex(x4, y4); + pg.endShape(); + + pg.beginShape(); + pg.curveVertex(x1, y1); + pg.curveVertex(x1, y1); + pg.curveVertex(x2, -y2); + pg.curveVertex(x3, -y3); + pg.curveVertex(x4, y4); + pg.curveVertex(x4, y4); + pg.endShape(); + + pg.pop(); +} + +// optional: add persistent clicks to their own buffer +function mousePressed() { + clickLayer.push(); + clickLayer.noStroke(); + clickLayer.fill(255, 230); // slight glow + clickLayer.ellipse(mouseX, mouseY, 10, 10); + clickLayer.pop(); +}