Monolithic Echoes

📅 April 17, 2026 🏷️ art

brutalism generative concrete grid minimalism architecture texture

Generated by GridFlow AI | Tags: brutalism, generative, concrete, grid, minimalism, architecture, texture

📊 视觉感受量化评分

💡 AI 提示词

Create a p5.js artwork representing Brutalist Concrete Grids, focusing on raw textures, heavy modularity, and cast-concrete imperfections like tie-rod holes and grain texture.

🧠 核心算法要点

Dynamic grid subdivision based on window dimensions to ensure responsiveness.
Nested loops to generate rectangular cells with stochastic 'missing' blocks to break symmetry.
Layered rendering starting with a drop shadow offset to simulate 3D relief.
Texture simulation using a point-cloud algorithm to create 'beton brut' pockmarks and surface variations.
Implementation of architectural 'tie-rod holes' (rebar marks) at geometric corners of each block.
A final global atmospheric pass using low-alpha noise to unify the digital 'concrete' aesthetic.

💻 原始 p5.js 代码

var sketch = function(p) {
    let blocks = [];
    let grainTexture;

    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, 100);
        p.noLoop();
        generateArt();
    };

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

    function generateArt() {
        p.background(40, 5, 20);
        let cols = p.floor(p.random(4, 10));
        let rows = p.floor(p.random(4, 10));
        let w = p.width / cols;
        let h = p.height / rows;

        for (let i = 0; i < cols; i++) {
            for (let j = 0; j < rows; j++) {
                if (p.random() > 0.2) {
                    drawConcreteBlock(i * w, j * h, w, h);
                }
            }
        }
        
        drawOverlay();
    }

    function drawConcreteBlock(x, y, w, h) {
        let padding = w * 0.05;
        let bw = w - padding * 2;
        let bh = h - padding * 2;
        let bx = x + padding;
        let by = y + padding;

        // Shadow/Depth
        p.noStroke();
        p.fill(0, 0, 10, 50);
        p.rect(bx + 10, by + 10, bw, bh);

        // Main Face
        let baseGray = p.random(10, 40);
        p.fill(0, 0, baseGray);
        p.rect(bx, by, bw, bh);

        // Concrete Texture (Pockmarks and Grain)
        for (let i = 0; i < (bw * bh) / 10; i++) {
            let px = p.random(bx, bx + bw);
            let py = p.random(by, by + bh);
            let sz = p.random(1, 3);
            p.fill(0, 0, baseGray + p.random(-10, 10), 30);
            p.ellipse(px, py, sz);
        }

        // Formwork Tie-rod Holes
        p.fill(0, 0, 5, 80);
        let holeSize = p.min(bw, bh) * 0.05;
        let holeInset = holeSize * 2;
        p.ellipse(bx + holeInset, by + holeInset, holeSize);
        p.ellipse(bx + bw - holeInset, by + holeInset, holeSize);
        p.ellipse(bx + holeInset, by + bh - holeInset, holeSize);
        p.ellipse(bx + bw - holeInset, by + bh - holeInset, holeSize);

        // Bevel / Edge Highlights
        p.stroke(0, 0, 100, 20);
        p.strokeWeight(1);
        p.line(bx, by, bx + bw, by);
        p.line(bx, by, bx, by + bh);
    }

    function drawOverlay() {
        // Atmospheric grain
        for (let i = 0; i < 5000; i++) {
            p.stroke(0, 0, 100, p.random(5));
            p.point(p.random(p.width), p.random(p.height));
        }
        
        // Subtle color wash (Brutalist rust/stain)
        p.noStroke();
        p.fill(30, 60, 50, 5);
        p.rect(0, 0, p.width, p.height);
    }
};
new p5(sketch);

🎨 AI 艺术解读

This piece translates the physical weight and 'honesty of materials' found in Brutalist architecture into a digital medium. The rigid grid suggests the modularity of 1960s social housing, while the procedurally generated imperfections mimic the weathering of cast concrete. It explores the tension between the infinite precision of code and the raw, heavy permanence of stone. The monochromatic palette with subtle rust stains evokes a sense of monumental solitude and urban decay.

📝 补充说明

Uses p.noLoop() to prevent excessive CPU usage, as the texture generation is high-density.
Color values are handled in HSB mode to better control 'concrete' greyscale and atmospheric warmth.
The tie-rod hole logic scales proportionally to block size, maintaining architectural realism.
Canvas parent 'p5-wrapper' and windowResized integration ensure the art adapts to any display size.