Water Simulation

100%

Water Simulation

✓ Published0🌍 Public

Last edited Dec 9, 2023

Created on Dec 9, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Water Simulation

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.

Nnandugali

85% 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

83% 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

77% 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

75% 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

73% match

Loading thumbnail…

JS and HTML

This example demonstrates how to build a custom visualization by combining JavaScript and HTML with D3.js. It shows a dynamic scene driven by a force-directed simulation, where nodes move and interact in real time. The code uses `d3.forceSimulation` to compute physical forces and update node positions, while `d3.select` and `d3.create` manage the SVG container and elements. The rendering is performed entirely through JavaScript DOM manipulation, with the `index.html` file providing a minimal body that loads D3 from a CDN and attaches the `bundle.js` script. The visualization’s appearance changes dynamically, emphasizing the interplay between code, layout, and interactive graphics.

GGautier DAVID

70% match

Loading thumbnail…

Untitled

This example demonstrates a React-based interactive visualization that renders a dynamic particle system using HTML5 Canvas. The code leverages D3’s force simulation (`d3.forceSimulation`) to compute physics-based movement for multiple circular nodes, which are drawn each animation frame via the Canvas API. Each node’s position is updated continuously based on velocity and collision forces, creating a fluid, organic motion effect. The visualization is built with pure JavaScript and styled minimally through CSS, showcasing how React integrates with D3 and Canvas for real-time graphics without external charting libraries.

Bbusrabozkus

68% match

Loading thumbnail…

D3 Selection Exploration

This example demonstrates dynamic SVG circle generation and animation using D3 v7. An array of circles, generated from a sine-based function, continuously updates position and radius to create a flowing wave effect. The code uses D3's `select`, `selectAll`, `data`, and `join` methods to bind new data and manage enter/update/exit cycles. An interval-driven animation loop calls `vizData` at 60 frames per second, with data created by `makeData` using D3's `range` utility. The visualization runs in an HTML page with no external data sources.

Aa0x0

67% match