Fragile Equilibrium

📅 April 17, 2026 🏷️ art

generative shattered mosaic voronoi-logic refraction glass geometry

Generated by GridFlow AI | Tags: generative, shattered, mosaic, voronoi-logic, refraction, glass, geometry

📊 视觉感受量化评分

💡 AI 提示词

Shattered glass mosaic generative art, sharp geometric shards, jewel tones, radial impact distribution, refractive highlights, p5.js instance mode.

🧠 核心算法要点

Defines an impact origin point using a weighted random distribution.
Generates a collection of irregular quadrilateral 'shards' using jittered vertex offsets.
Calculates shard density based on a power-law distribution centered on the impact point.
Applies a custom HSB palette of deep blues and cyans to simulate architectural glass.
Utilizes the HTML5 Canvas shadowBlur property to create a sense of overlapping physical depth.
Renders simulated refractive highlights along shard edges using small vertex offsets and alpha transparency.
Implements a recursive-style layout that ensures shards cover the canvas while maintaining chaotic gaps.

💻 原始 p5.js 代码

var sketch = function(p) {
    let shards = [];
    let impactPoint;
    let palette;

    p.setup = function() {
        let container = document.getElementById('p5-wrapper'); let canvas = p.createCanvas(container.offsetWidth, container.offsetHeight).parent('p5-wrapper');
        p.colorMode(p.HSB, 360, 100, 100, 1);
        p.noLoop();
        initArt();
    };

    function initArt() {
        shards = [];
        impactPoint = p.createVector(p.width * p.random(0.3, 0.7), p.height * p.random(0.3, 0.7));
        palette = [
            p.color(200, 80, 30),  // Deep Blue
            p.color(210, 70, 60),  // Mid Blue
            p.color(190, 90, 80),  // Cyan
            p.color(280, 60, 40),  // Violet
            p.color(200, 20, 95)   // Frost
        ];
        generateShards();
        p.redraw();
    }

    function generateShards() {
        let points = [];
        let numPoints = 150;
        
        // Create points with higher density near the impact
        for (let i = 0; i < numPoints; i++) {
            let angle = p.random(p.TWO_PI);
            let dist = p.pow(p.random(), 1.5) * p.max(p.width, p.height);
            let x = impactPoint.x + p.cos(angle) * dist;
            let y = impactPoint.y + p.sin(angle) * dist;
            points.push(p.createVector(x, y));
        }

        // Add corner points to ensure coverage
        points.push(p.createVector(0, 0));
        points.push(p.createVector(p.width, 0));
        points.push(p.createVector(0, p.height));
        points.push(p.createVector(p.width, p.height));

        // Generate "shards" using a jittered grid subdivision logic for complexity
        for (let i = 0; i < 40; i++) {
            let x1 = p.random(p.width);
            let y1 = p.random(p.height);
            let w = p.random(p.width * 0.1, p.width * 0.3);
            let h = p.random(p.height * 0.1, p.height * 0.3);
            
            shards.push({
                points: [
                    p.createVector(x1, y1),
                    p.createVector(x1 + w + p.random(-20, 20), y1 + p.random(-20, 20)),
                    p.createVector(x1 + w + p.random(-20, 20), y1 + h + p.random(-20, 20)),
                    p.createVector(x1 + p.random(-20, 20), y1 + h + p.random(-20, 20))
                ],
                color: p.random(palette),
                offset: p.random(2, 8)
            });
        }
    }

    p.draw = function() {
        p.background(220, 20, 10);
        
        p.push();
        // Draw background texture
        for(let i = 0; i < 500; i++) {
            p.stroke(0, 0, 100, 0.05);
            p.point(p.random(p.width), p.random(p.height));
        }
        p.pop();

        shards.forEach(shard => {
            drawShard(shard);
        });

        // Draw impact radial lines
        p.stroke(0, 0, 100, 0.2);
        p.noFill();
        for (let i = 0; i < 12; i++) {
            let angle = (p.TWO_PI / 12) * i;
            p.line(impactPoint.x, impactPoint.y, 
                   impactPoint.x + p.cos(angle) * p.width, 
                   impactPoint.y + p.sin(angle) * p.height);
        }
    };

    function drawShard(shard) {
        p.push();
        
        // Shadow/Depth effect
        p.drawingContext.shadowBlur = 15;
        p.drawingContext.shadowColor = 'rgba(0,0,0,0.5)';
        
        // Main Shard Body
        let c = shard.color;
        p.fill(p.hue(c), p.saturation(c), p.brightness(c), 0.7);
        p.stroke(p.hue(c), 10, 100, 0.8);
        p.strokeWeight(1);
        
        p.beginShape();
        shard.points.forEach(pt => p.vertex(pt.x, pt.y));
        p.endShape(p.CLOSE);

        // Refractive Highlight
        p.noStroke();
        p.fill(0, 0, 100, 0.15);
        p.beginShape();
        p.vertex(shard.points[0].x, shard.points[0].y);
        p.vertex(shard.points[1].x, shard.points[1].y);
        p.vertex(shard.points[1].x - shard.offset, shard.points[1].y + shard.offset);
        p.endShape(p.CLOSE);
        
        p.pop();
    }

    p.mousePressed = function() {
        initArt();
    };

    p.windowResized = function() {
        let container = document.getElementById('p5-wrapper'); p.resizeCanvas(container.offsetWidth, container.offsetHeight);
        initArt();
    };
}; 
new p5(sketch);

🎨 AI 艺术解读

Fragile Equilibrium explores the aesthetic beauty found in moments of sudden transformation. By simulating an impact point, the piece captures the split second where structural integrity yields to complex geometry. The deep jewel tones and refractive edges suggest that even in a state of being broken, a subject retains its internal light and assumes a more multifaceted perspective. It is a visual metaphor for resilience and the intricate patterns that emerge from chaos.

📝 补充说明

The use of shadowBlur in the drawingContext significantly enhances the 3D 'layered' look but can be CPU intensive; it is limited to shard drawing only.
The impact point is randomized on every click, allowing the user to 'break' the canvas at different focal points.
Color saturation is intentionally varied to simulate the way light hits glass at different angles.
The radial lines are drawn with low opacity to hint at structural cracks without overwhelming the mosaic polygons.