Fractured Strata

📅 April 17, 2026 🏷️ art

glitch-art topography generative-landscapes perlin-noise cyberpunk-aesthetic procedural

Generated by GridFlow AI | Tags: glitch-art, topography, generative-landscapes, perlin-noise, cyberpunk-aesthetic, procedural

📊 视觉感受量化评分

💡 AI 提示词

Create a generative topography map using p5.js with a glitch aesthetic. Use horizontal scanlines that displace vertically based on Perlin noise. Add intermittent data corruption effects where lines break or jitter horizontally. Use a dark background with neon HSB colors mapped to the elevation.

🧠 核心算法要点

Iterate through a vertical grid to create horizontal 'strata' lines across the canvas.
Calculate height displacement for each vertex using a 3D Perlin noise field (x, y, and time).
Map height values to a specific HSB color range (cyan to magenta) to simulate thermal or digital topographic sensors.
Implement a line-level glitch probability that introduces horizontal translation offsets to entire rows.
Introduce vertex-level jitter using a high-frequency random function to simulate 'data noise'.
Animate the noise field using a z-offset increment to create a flowing, liquid-terrain effect.

💻 原始 p5.js 代码

var sketch = function(p) {
    let rows, cols;
    let scl = 0.015;
    let zOffset = 0;
    let glitchChance = 0.05;

    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, 100);
        p.noFill();
        p.strokeWeight(1.5);
    };

    p.draw = function() {
        p.background(240, 40, 5, 15);
        
        let stepX = p.width / 40;
        let stepY = p.height / 60;
        
        for (let y = 0; y < p.height; y += stepY) {
            p.beginShape();
            
            // Random horizontal glitch offset for the entire line
            let lineGlitch = p.random() < 0.02 ? p.random(-50, 50) : 0;
            
            for (let x = 0; x <= p.width; x += stepX) {
                // Calculate noise for topography
                let noiseVal = p.noise(x * scl, y * scl, zOffset);
                
                // Core elevation logic
                let h = p.map(noiseVal, 0, 1, -stepY * 12, stepY * 12);
                
                // Color based on height and noise
                let hue = p.map(noiseVal, 0.2, 0.8, 180, 320);
                let bright = p.map(noiseVal, 0, 1, 40, 100);
                
                // Apply Micro-Glitches
                let xPos = x + lineGlitch;
                let yPos = y + h;
                
                if (p.random() < 0.005) {
                    p.stroke(0, 100, 100);
                    p.vertex(xPos + p.random(-100, 100), yPos);
                }

                p.stroke(hue, 80, bright, 80);
                
                // Vertex displacement for "digital erosion"
                if (p.random() < glitchChance && p.frameCount % 10 == 0) {
                    p.vertex(xPos + p.random(-20, 20), yPos + p.random(-20, 20));
                } else {
                    p.vertex(xPos, yPos);
                }
            }
            p.endShape();
        }

        zOffset += 0.005;
        
        // Occasional screen-wide scanline glitch
        if (p.frameCount % 60 === 0 && p.random() < 0.3) {
            p.stroke(0, 0, 100, 20);
            p.line(0, p.random(p.height), p.width, p.random(p.height));
        }
    };

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

🎨 AI 艺术解读

Fractured Strata explores the intersection between natural geological formations and digital instability. It visualizes a world where the earth is no longer perceived through touch, but through a corrupted data stream. The neon contours represent the 'heat' of information, while the glitches signify the degradation of our digital archives. This piece suggests that even our most fundamental grounding—the land itself—is subject to the volatility of the medium through which we view it.

📝 补充说明

Performance is maintained by using dynamic step sizes based on width and height rather than fixed pixel increments.
The HSB color mode is used with a low alpha value to create a ghosting/trailing effect as lines overlap.
The glitchChance variable is modulated by frameCount to prevent visual exhaustion and create a rhythmic 'pulse'.
Stroke weight is kept consistent to ensure the topographic lines feel like thin wires or laser scans.