points

100%

✓ Published0🌍 Public

Last edited May 26, 2017

Created on May 8, 2017

One hundred thousand points render as colored particles in WebGL, smoothly morphing between different distributions—random walks, phyllotaxis spirals, sine waves, and grids—at regular intervals. The animation uses regl to draw points and interpolate between buffer states in the vertex shader, with a viridis colormap applied per point. A control panel lets viewers adjust point radius and the total number of points.

AI-generated description

From rreusser

const draw = regl({
  vert: `
    precision mediump float;
    attribute vec2 xy; 
    varying vec2 uv; 
    void main () {
      uv = 0.5 * xy + 0.5;
      gl_Position = vec4(xy, 0, 1); 
    }   
  `,  
  frag: `
    precision mediump float;
    varying vec2 uv; 
    void main () {
      gl_FragColor = vec4(uv, 0, 1);
    } 
  `,
  attributes: {
    xy: [[-4, -4], [0, 4], [4, -4]]
  },
  depth: {enable: false},
  count: 3
});

WTFPL Licensed

Similar vizzes

Loading thumbnail…

regl-ladder-2

A cluster of 100,000 colored points animates across the screen, moving in a repeating wave pattern with a sinusoidal x-shift and vertical bobbing. The visualization demonstrates a performance optimization in regl, a WebGL library: passing all point attributes (position, color, speed) as a single packed array per frame outperforms passing separate attribute arrays, enabling 60 fps versus the slower alternative. Using regl’s shader system and GPU buffers, the code animates points via a cubic easing function, with colors alternating between blue and orange based on parity. The data is generated procedurally, with random x, y, and speed values for each point.

11wheel

79% match

Loading thumbnail…

regl-circles

Twenty thousand colored circles fall from the top of the viewport, then settle into horizontal bands based on each circle's speed and size. Two quantized scales map circle index to a target row, and a WebGL shader renders each point with a soft-edged stroke and rounded fill. The animation cycles continuously via a REGL frame loop, with position and color computed per frame in the vertex and fragment shaders using D3 scales and lodash for data shuffling.

11wheel

75% match

Loading thumbnail…

regl-hot-server

A dense cluster of 100,000 points animates through looping random walks, with colors transitioning along the viridis colormap. The visualization cycles between five precomputed datasets, interpolating point positions in a WebGL vertex shader. Built with regl and React, it demonstrates a hot-reloading workflow where editing `script.js` updates the page without a full reload, using hot-server and watchify to stream changes directly to the browser.

11wheel

75% match

Loading thumbnail…

regl-hurricane

Animated WebGL visualization of 10,000 line segments that continuously morph between different geometric patterns—a circle, then two distinct random point distributions. The code uses the regl framework with custom GLSL vertex and fragment shaders to interpolate between precomputed buffer states, cycling through three datasets in a loop. Line color shifts from blue to red based on each segment's position index, while d3 generates the underlying point data and easing functions control the smooth transitions.

11wheel

74% match

Loading thumbnail…

blend-alpha

A WebGL animation renders 100,000 points as white and magenta dots with partial transparency, blending between two spatial distributions. The points cycle between uniform random placement and a non-linear transformation of that data, with an easing function controlling the interpolation. Using regl’s blending API, the code explores how alpha compositing behaves under high-density overlay, demonstrating the visual darkening and lightening effects that occur with increasing point overlap.

11wheel

74% match

Loading thumbnail…

100,000 dots

This visualization displays 100,000 randomly positioned dots, each with a unique color, opacity, and size, rendered as a single dense field. The dots are generated with D3's `scaleSequential` and `interpolateWarm` for the color palette, `randomExponential` for radius distribution, and uniform random functions for coordinates and opacities. The scene is drawn using the Regl library on a WebGL canvas, with a custom fragment shader applying antialiasing and per-dot blending for a smooth, overlapping presentation.

NNita

74% match

Loading thumbnail…

threejs-stars

A field of red points randomly positioned in a 3D space within Three.js shifts its camera perspective and refreshes the particle positions every frame. The WebGL renderer displays 60 new points per update, each snapped to a 20-unit grid, while the camera orbits and rotates based on time. The animation uses Three.js’s `PerspectiveCamera`, `Points` geometry, and `PointsMaterial` to create a continually changing star-like scatter plot.

11wheel

73% match

Loading thumbnail…

three.js points

A cluster of red points, arranged as a sphere, rotates slowly in three-dimensional space against a gray background. The example demonstrates the basic use of Three.js with a WebGL renderer, constructing a sphere geometry with specified width and height segments. A directional light illuminates the points material, and the animation updates the rotation of the points object over time using `requestAnimationFrame`.

Ssabrinamochi

73% match