Voxelized Fluidity

📅 April 17, 2026 🏷️ art

voxels webgl generative 3d-waves perlin-noise abstract-architecture dynamic-lighting

Generated by GridFlow AI | Tags: voxels, webgl, generative, 3d-waves, perlin-noise, abstract-architecture, dynamic-lighting

📊 视觉感受量化评分

💡 AI 提示词

Create a p5.js artwork in WEBGL mode featuring a grid of voxels that animate in height using 3D noise, creating the appearance of liquid waves. Use a vibrant color gradient and interactive camera controls.

🧠 核心算法要点

Initialize a 3D coordinate system using p5.js WEBGL mode and HSB color space.
Generate a grid of voxels on the X-Z plane scaled dynamically based on window dimensions.
Apply Perlin noise combined with a sine wave function to determine the vertical (Y) displacement of each cube.
Calculate height-dependent coloring to map deeper 'troughs' to cooler blues and 'crests' to vibrant purples or cyans.
Implement smooth camera rotation and OrbitControl for user exploration within the 3D space.
Utilize point and directional lighting to provide depth and highlight the geometric edges of the voxels.
Update a time-delta variable on each frame to evolve the noise field and create the wave animation.

💻 原始 p5.js 代码

var sketch = function(p) {
    let step = 25;
    let time = 0;
    let angle = 0;

    p.setup = function() {
        p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL).parent('p5-wrapper');
        p.colorMode(p.HSB, 360, 100, 100, 100);
        p.smooth();
    };

    p.draw = function() {
        p.background(240, 40, 5);
        p.orbitControl();
        
        // Lighting to define voxel edges
        p.ambientLight(60);
        p.pointLight(0, 0, 100, 200, -200, 400);
        p.directionalLight(200, 50, 100, -1, 1, -1);

        p.rotateX(p.PI / 3.5);
        p.rotateZ(angle);

        let cols = p.floor(p.min(p.windowWidth, 1200) / step);
        let rows = p.floor(p.min(p.windowHeight, 800) / step);
        let gridW = cols * step;
        let gridH = rows * step;

        p.translate(-gridW / 2, 0, -gridH / 2);

        for (let x = 0; x < cols; x++) {
            for (let z = 0; z < rows; z++) {
                p.push();
                
                // Calculate height based on 2D Perlin Noise and distance from center
                let nx = x * 0.15;
                let nz = z * 0.15;
                let dist = p.dist(x, z, cols / 2, rows / 2) * 0.1;
                let hNoise = p.noise(nx, nz, time);
                let h = p.map(hNoise, 0, 1, 20, 250) * p.sin(time * 0.5 - dist);
                
                p.translate(x * step, -h / 2, z * step);
                
                // Dynamic Coloring based on height and position
                let hue = p.map(h, -100, 250, 180, 280);
                let sat = p.map(h, -100, 250, 40, 90);
                let bri = p.map(h, -100, 250, 30, 100);
                
                p.fill(hue, sat, bri);
                p.noStroke();
                
                // Draw the voxel
                p.box(step * 0.85, p.abs(h) + 10, step * 0.85);
                p.pop();
            }
        }

        time += 0.02;
        angle += 0.002;
    };

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

🎨 AI 艺术解读

Voxelized Fluidity is a meditation on the digital representation of nature. By taking the concept of a wave—something inherently smooth and continuous—and breaking it down into discrete cuboid units, the piece explores the tension between mathematical precision and organic chaos. The voxels act as 'data points' that together simulate the weight and rhythm of the ocean. It suggests that even the most complex natural systems can be interpreted and re-visualized through a modular, computational lens.

📝 补充说明

The grid density is governed by the 'step' variable; smaller values increase resolution but significantly impact GPU performance.
OrbitControl allows the user to rotate (left click), zoom (scroll), and pan (right click) through the voxel field.
The use of 'p.abs(h) + 10' in the box height ensures that voxels never fully disappear, maintaining a sense of structural integrity.
WEBGL depth testing is handled automatically by p5.js, but the order of translation is critical for the nested loop grid rendering.