Gist aad210d07e4d4699b07d41be7364a0a2

100%

Gist aad210d07e4d4699b07d41be7364a0a2

✓ Published0🌍 Public

Last edited Oct 18, 2019

Created on Oct 18, 2019

This example explores a particle-generation idea using the HTML5 Canvas API and the `random.noise2D` function from the `noisejs` library. It shows a system that seeds a set of particles and then propagates their positions by passing starting coordinates through 2D Perlin noise to obtain an angle value. The next location for each particle is calculated using basic trigonometry, `Math.cos` and `Math.sin`, based on that noise-derived angle. The visualization then draws line segments between consecutive points with canvas `moveTo` and `lineTo` methods, creating organic, flow-like paths.

AI-generated description

Similar vizzes

Loading thumbnail…

Connected Particles III

This example renders 200 particles as small circles on an HTML5 Canvas, with each particle moving via a random walk that includes velocity damping. Lines connect pairs of particles whenever their distance is less than 60 pixels, with line opacity varying based on proximity, turning fully opaque below 40 pixels. The simulation uses a custom timer based on `requestAnimationFrame`, and the drawing relies on Canvas methods like `beginPath`, `arc`, `moveTo`, and `lineTo`. Both particle positions and connection lines are updated each frame, creating a dynamic web of interactions.

Mmbostock

76% match

Loading thumbnail…

Connected Particles

This example shows 100 blue particles drifting vertically across a canvas, with lines connecting any pair whose distance falls below a threshold; the lines fade out as particles approach a maximum separation, creating a dynamic web that shifts as particles move. Using the d3-timer module for animation, the code updates particle positions on each tick, draws connections with varying opacity based on squared distances, and renders the particles as circles via the Canvas 2D API. The underlying data is procedurally generated random coordinates, with particles wrapping around the top and bottom edges.

AAjayyy

73% match

Loading thumbnail…

Connected Particles

One hundred particles drift vertically at constant speeds across a canvas, with lines connecting nearby particles whose opacity fades as distance increases. The visualization uses d3-timer’s timer for animation and the Canvas 2D API for drawing arcs and strokes. Each particle’s horizontal position resets randomly when it exits vertically, while line visibility depends on squared distance thresholds. The code relies on `d3.timer` and direct canvas context methods like `clearRect`, `arc`, and `lineTo`.

Mmbostock

72% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

70% match

Loading thumbnail…

Connected Particles II

A field of 100 small particles drifts vertically on a dark canvas, with translucent gray circles drawn between any pair that comes within 100 pixels of each other. As particles move, their connecting arcs fade in and out based on proximity, creating a shifting network of temporary links. The animation runs via a custom d3-timer loop, using Canvas arc and fill operations per frame. Each particle’s horizontal position is fixed, while vertical velocity varies randomly, causing them to wrap around the edges.

Mmbostock

70% match

Loading thumbnail…

Maths functions, mostly from Processing.js

This example demonstrates a collection of mathematical visualization techniques implemented in JavaScript, primarily relying on custom pseudo-random number generation and Perlin noise algorithms. The code implements Marsaglia's random number generator and a full Perlin noise implementation with 1D, 2D, and 3D variants, which can be used to create organic, procedural textures and patterns. The visualization likely renders these noise functions as visual output, showcasing how deterministic noise algorithms can produce complex, natural-looking variations. The code is based on Processing.js conventions, with a Math2 class providing random and noise functions similar to those found in the Processing API, allowing for generative art and data-driven graphics.

MMAKIO135

70% match

Loading thumbnail…

Random Fun Stuff

A canvas animation draws a continuously evolving radial burst of lines from the center of the screen. Using the HTML5 Canvas API's `getContext('2d')`, the code repeatedly strokes line segments from the center to coordinates computed from sine and cosine functions of the current time and angle. Each frame, a semi-transparent white rectangle gradually fades previous strokes, creating a fading trail effect. The animation runs via `requestAnimationFrame`, recalculating angles and positions with the `Date.now()` timestamp to produce a dynamic, rotating pattern.

CCurran Kelleher

69% match

Loading thumbnail…

Test 2

This visualization shows a physics-based particle simulation where colored nodes move and collide within a bounded rectangular space. The code uses d3.forceSimulation with collision and forceX/forceY forces to drive the motion, rendering the particles on an HTML5 canvas via Canvas 2D context paths. Each node is assigned a random color and velocity, and the simulation updates continuously using requestAnimationFrame, drawing circles with varying radii as the forces stabilize the layout.

LLeonardonline

68% match