This iteration is based on the example "SDF ONION" given in the lecture,
and explores the use of Signed Distance Field to create an animated waterwave function. The printed 3d object is a "selected chunk" of the Full model.
Key Script 1:Constants for Wave Control
const waveLength = 356;
const contrast = 10;
const waveSpeed = 0.05;
const waveHeight = 64;
const waveFrequency = 1;
- waveLength: Controls the distance between wave peaks.
- contrast: Adjusts the sharpness of the wave lines in the rendering.
- waveSpeed: Controls how fast the wave moves across the canvas.
- waveHeight: Controls how tall the waves appear.
- waveFrequency: To influence how many oscillations happens.
Key Script 2:Water Wave Simulation Function
function waterWave(x, y, time) {
let waveX = Math.sin(TAU * (x / waveLength - time * waveSpeed)) * waveHeight;
let waveY = Math.cos(TAU * (y / waveLength - time * waveSpeed)) * waveHeight;
return waveX + waveY;
};
- Simulates 2D interference patterns from sine and cosine waves to mimics natural, flowing water patterns across both x and y directions.
- TAU = 2 * Math.PI creates a full circle in radians.
- x / waveLength: Controls how stretched or compressed the wave is horizontally.
- time * waveSpeed: Animates the wave, so it moves like it's flowing. Increasing time shifts the wave sideways.
- Math.sin(...): Generates a smooth sine wave.
- waveHeight: Scales how tall the wave is.
- waveY = Math.cos(...) operates in a vertical (y) direction, and using cosine instead of sine to vary the phase.
Key Script 3:Main Drawing Loop
loadPixels();
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
...
const waveDisplacement = waterWave(x, y, time);
const sdfSphere = sdSphere(pos, sphere.center, sphere.radius);
const sdf = sdfSphere - waveDisplacement;
const waveEffect = Math.sin(TAU * sdf / waveLength) * contrast + 1;
const gray = 255 * Math.sign(Math.max(0, sdf)) * 0.5 * waveEffect;
...
}
}
updatePixels();
- Simulates 2D interference patterns from sine and cosine waves to mimics natural, flowing water patterns across both x and y directions.
- waterWave(x, y, time): How much the wave displaces at this pixel.
- sdSphere(...): Calculates the SDF value for a 3D sphere at this pixel.
- sdf = sdfSphere - waveDisplacement: Combines the sphere’s surface with the wave.
- Math.sin(TAU * sdf / waveLength) * contrast + 1: Applies a wave-like visual pattern on the SDF.
- gray = ...: Converts that into a grayscale color to render visually.
