Emerald Ruin: The Climbing Ivy

📅 April 17, 2026 🏷️ art
L-System GenerativeGrowth Bio-Art Recursive Ivy AlgorithmicBotanical Fractal
Generated by GridFlow AI | Tags: L-System, GenerativeGrowth, Bio-Art, Recursive, Ivy, AlgorithmicBotanical, Fractal

📊 视觉感受量化评分

0
0
0
0

💡 AI 提示词

Create a generative art piece in p5.js using an L-System to simulate the growth of ivy. The artwork should feature organic branching, leaf generation at the tips, and a color palette transitioning from deep woody browns to vibrant emerald greens. Implement responsiveness and a procedural growth mechanism.

🧠 核心算法要点

  • Recursive L-System grammar generation using 'X' and 'F' axiom/rule sets
  • Stochastic variation applied to rotation angles to simulate organic imperfection
  • Time-sliced string rendering to visualize the growth process sequentially
  • Dynamic stroke weighting based on string index to create tapering stems
  • Custom leaf geometry generation using sine-wave vertex displacement
  • Coordinate system transformations (push/pop matrix) for branching architecture

💻 原始 p5.js 代码

var sketch = function(p) {
    let sentence = "X";
    let rules = {
        "X": "F+[[X]-X]-F[-FX]+X",
        "F": "FF"
    };
    let len;
    let angle;
    let iterations = 5;
    let growthProgress = 0;
    let isDrawing = true;

    p.setup = function() {
        let container = document.getElementById('p5-wrapper'); p.createCanvas(container.offsetWidth, container.offsetHeight).parent('p5-wrapper');
        p.colorMode(p.HSB, 360, 100, 100, 1);
        p.initLSystem();
        p.background(160, 20, 5);
    };

    p.initLSystem = function() {
        sentence = "X";
        for (let i = 0; i < iterations; i++) {
            let nextSentence = "";
            for (let j = 0; j < sentence.length; j++) {
                let current = sentence.charAt(j);
                nextSentence += rules[current] || current;
            }
            sentence = nextSentence;
        }
        len = p.height * 0.006;
        angle = p.radians(22.5);
        growthProgress = 0;
    };

    p.draw = function() {
        if (growthProgress < sentence.length) {
            p.background(160, 20, 5, 0.05); // Slight trail effect
            p.translate(p.width / 2, p.height);
            
            let stepSize = 150; // How many characters to process per frame
            let currentBatch = sentence.substring(0, growthProgress);
            
            p.strokeWeight(1);
            p.render(currentBatch);
            
            growthProgress += stepSize;
        } else {
            p.noLoop();
        }
    };

    p.render = function(str) {
        p.push();
        for (let i = 0; i < str.length; i++) {
            let c = str.charAt(i);
            if (c === "F") {
                let weight = p.map(i, 0, sentence.length, 3, 0.5);
                p.stroke(40, 30, 20); // Stem color
                p.strokeWeight(weight);
                p.line(0, 0, 0, -len);
                p.translate(0, -len);
            } else if (c === "+") {
                p.rotate(angle + p.random(-0.05, 0.05));
            } else if (c === "-") {
                p.rotate(-angle + p.random(-0.05, 0.05));
            } else if (c === "[") {
                p.push();
            } else if (c === "]") {
                // Draw a leaf before popping
                p.drawLeaf();
                p.pop();
            }
        }
        p.pop();
    };

    p.drawLeaf = function() {
        let leafHue = p.random(80, 150);
        let leafSat = p.random(40, 80);
        let leafBri = p.random(40, 70);
        p.noStroke();
        p.fill(leafHue, leafSat, leafBri, 0.6);
        
        p.beginShape();
        for (let i = 0; i <= 8; i++) {
            let x = 6 * p.sin(p.map(i, 0, 8, 0, p.PI));
            let y = -i * 1.5;
            p.vertex(x, y);
        }
        p.endShape(p.CLOSE);
    };

    p.mousePressed = function() {
        p.background(160, 20, 5);
        p.initLSystem();
        p.loop();
    };

    p.windowResized = function() {
        let container = document.getElementById('p5-wrapper'); p.resizeCanvas(container.offsetWidth, container.offsetHeight);
        p.background(160, 20, 5);
        p.initLSystem();
        p.loop();
    };
};
new p5(sketch);

🎨 AI 艺术解读

This piece visualizes the mathematical elegance underlying biological growth. By using a formal L-System grammar, the ivy climbs upward in a pattern that feels both structured and wild. It represents the duality of nature: a rigid genetic code that results in unique, chaotic beauty when exposed to environmental randomness. The slow emergence of the leaves onto the canvas invites the viewer to witness a compressed cycle of life and reclamation.

📝 补充说明

  • Uses a custom batch-rendering logic in the draw loop to simulate real-time growth without sacrificing performance.
  • Angle offsets are randomized slightly at every branch to prevent the 'stiff' look common in basic L-systems.
  • The HSB color space allows for more natural variations in leaf greens and woody stem browns.
  • Canvas responsiveness is handled by recalculating the step length 'len' relative to the window height.