Water Simulation

100%

Water Simulation

✓ Published0🌍 Public

Last edited Dec 9, 2023

Created on Dec 9, 2023

This WebGL visualization demonstrates a simulated water surface using Three.js. The code constructs a 10x10 plane geometry, applies a blue wireframe material, and animates its vertices by altering their z-coordinates with a sine function based on time. Each vertex moves independently to create rippling wave-like motion, with the mesh redrawn every frame. The interactive camera, positioned at z=50, provides a perspective view of the undulating terrain, showcasing real-time procedural animation driven by a simple mathematical model.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Water Simulation

This example shows an interactive water surface simulation rendered with WebGL on an HTML canvas. The visualization uses D3’s `select` to manage the container and a custom `viz` module that updates the scene on each render. The code initializes the WebGL context and draws a dynamic, undulating water effect, with state managed through a `setState` function to trigger re-renders. It relies on canvas-based WebGL rendering for fluid-like motion, with no external data source beyond the visual simulation itself.

Nnandugali

85% match

Loading thumbnail…

Untitled

A real-time water surface simulation renders an animated 3D plane in WebGL. Three.js constructs the scene, geometry, and shader material, while GLSL vertex and fragment shaders compute wave displacement based on time, amplitude, and speed uniforms. The animation loop increments the time uniform each frame, continuously deforming the grid to mimic rippling water. The code imports from Three.js and gl-matrix for matrix and vector math, with the rendering handled by the WebGLRenderer.

Nnandugali

82% match

Loading thumbnail…

Simple Water Simulation

This example shows a simple water simulation rendered as a full-screen, animated canvas. A static, blue gradient fill is applied based on the texture coordinate’s y-position, creating a uniform water-like surface. The piece uses the WebGL API directly via JavaScript, compiling custom vertex and fragment shaders to control geometry and color. It draws a single quad as a triangle strip and continuously re-renders it via `requestAnimationFrame`, though the color does not change over time.

Nnandugali

80% match

Loading thumbnail…

Simple Water Simulation

A simple WebGL pendulum swings in blue against a white canvas, anchored at a fixed point and connected by a line to a circular bob. The simulation runs continuously, rotating the bob and wire around the anchor using a shader-based rotation matrix. Users can click buttons to increase or decrease the angular velocity, speeding up or slowing down the swing. Rendered with the WebGL API, the example draws points, a triangle fan for the bob, and lines via raw vertex buffers and custom shaders.

Nnandugali

74% match

Loading thumbnail…

Wave Simulation

An interactive wave simulation animates a one-dimensional fluid surface using the Canvas 2D API. The animation runs via `requestAnimationFrame`, rendering a filled water silhouette defined by a grid of 150 cells whose heights evolve through neighbor-based velocity updates, dampening, and mass conservation correction. Clicking or dragging the mouse pulls the water surface directly toward the cursor. The underlying physics model uses simple spring-like forces between adjacent cells, with pull strength and dampening factors controlling the motion.

CCurran Kelleher

72% match

Loading thumbnail…

Terrain Generator (Beta)

This interactive 3D terrain visualization renders a mountainous landscape from CSV data using Three.js and a custom WebGL shader. The terrain generator constructs a heightmap from the data, applies textured materials based on elevation, and renders the result with orbit controls for rotation and zooming. The scene includes a semi-transparent water plane and uses D3 for data fetching.

CCurran Kelleher

65% match

Loading thumbnail…

Terrain Generator (Beta)

A 3D terrain visualization generates a textured landscape from elevation data, with a color-mapped surface that transitions between ocean, sand, grass, rock, and snow textures based on height. The scene includes a semi-transparent blue water plane and a checkerboard ground, with interactive orbiting and zooming controls. Three.js renders the WebGL scene, while D3 loads the CSV elevation data, and custom GLSL shaders displace vertices and blend textures procedurally.

Mmeperezcuello

65% match

Loading thumbnail…

D3 JS BUBLES

This visualization displays a set of fifteen animated bubbles moving vertically in a sinusoidal wave pattern, with their radii oscillating as they travel across the screen. The circles are rendered as SVG elements using D3 v7, with the data generated procedurally through a sine function that updates each frame. A `setInterval` timer drives the animation at approximately 60 frames per second, recalculating each bubble's `cx`, `cy`, and `r` attributes continuously. The example demonstrates basic D3 data joins and transitions without interaction.

TTehran Mammadov

65% match