leaves layers

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();
+}