Simple Water Simulation

100%

Simple Water Simulation

✓ Published0🌍 Public

Last edited Dec 9, 2023

Created on Sep 29, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

79% match

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

74% match

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

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

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

69% match

Loading thumbnail…

rotating pendulum

A single black dot orbits an invisible elliptical path around the center of the screen, with two black lines drawn from the top and bottom edges to the dot’s current position. The animation updates every 100 milliseconds using a setInterval loop, incrementing a time variable that drives the dot’s coordinates via trigonometric functions. Built with React and D3.js, the visualization uses D3 selections and `.join()` to create and update SVG `circle` and `line` elements, with the ellipse drawn as an empty SVG `ellipse` shape.

Ggyan9427

66% match

Loading thumbnail…

Fork of Double Harmonic

A double pendulum animation built with D3.js v6 renders a black tracing line and white ball in SVG. The code uses `select`, `range`, and `setInterval` to update circle and line positions at each tick, computing the pendulum’s path from cosine and sine functions with a fixed psi ratio. The full-screen SVG shows two connected rods and the swinging tip, with ball radius and arm lengths as constants.

Wwgloss

65% match

Loading thumbnail…

Fork of Double Harmonic

This example shows a double pendulum animation, drawing a small ball as the endpoint of two connected, rotating line segments. The code uses d3.js v6 with a time-driven `setInterval` loop to update the pendulum's position based on a constant time step and a phase-shift ratio (`psi`). It renders the scene as SVG, creating the arm lines, a moving ball, and a large hollow circle marker at the endpoint. The visualization demonstrates the harmonic motion of the two-segment system.

Ggiulius540

65% match