Gist 0f0c45136069ee6e7366afef684f3373

100%

Gist 0f0c45136069ee6e7366afef684f3373

✓ Published0🌍 Public

Last edited Sep 22, 2018

Created on Jun 26, 2018

This animation cycles through the digits of pi, displaying each digit one at a time in a console. The digits are sourced from a remote JSON file containing the mathematical constant. The code uses the `fetch` API to retrieve the data, `console.clear()` and `console.log()` for output, and a `setInterval` timer to control the pace of the digit display.

AI-generated description

Similar vizzes

Loading thumbnail…

The Walk of PI

The Walk of PI visualizes the first 2216 digits of pi in base 8 as a continuous path on an SVG canvas. It shows the digits as a walk where each digit (0-7) determines one of eight directional steps from the previous point, creating a dense, meandering line. The visualization uses D3.js (v3) to render the path and circles, with hover interactions revealing individual digits. It includes zoom and pan via D3’s zoom behavior, plus buttons to redraw the animation or reset the view. The data comes from a static string of pi’s octal digits, processed sequentially to build the path.

GGerardoFurtado

70% match

Loading thumbnail…

Gist 0e347a46041a01aa3c4f

This example visualizes the Collatz conjecture by mapping each integer from 0 to 5199 to a small square, where the fill color encodes the number of cycles to reach 1 and the stroke color encodes the maximum value reached during the sequence. The squares are arranged in a grid, and hovering over a square updates a text label to show the exact cycle count and maximum for that number. The visualization uses D3.js (version 3.5.5) to compute the Collatz sequences, bind the data to SVG rectangles, and apply linear color scales with HSL interpolation for the two attributes. The layout positions squares sequentially in rows of fixed width, and the code notes that changing the width parameter alters the grid pattern.

CCBasis

64% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

63% match

Loading thumbnail…

Fork of The joy of coding!

A circle repeatedly spawns at a random horizontal position, with its vertical position set by a sine wave of a random value and its radius selected from a uniform range up to 100 pixels. Each new circle receives a fully random RGB color and a title tooltip reading "It Works." The animation runs every two seconds using `setInterval`, appending SVG `<circle>` elements to a static 960×500 canvas via D3 v6’s selection API, which also adds the tooltip. The code uses only D3’s `select`, `append`, and attribute setters to generate the continuous, colorful output.

NNita

62% match

Loading thumbnail…

bad imitation of snow

Thirty-three grey circles ripple across an SVG canvas, their vertical positions driven by a tangent function that shifts with an incrementing time variable. Each frame updates the circle positions and radii using D3’s data join and selection methods. The animation runs at 60 frames per second via `setInterval`, calling `vizData` to bind and update the circles. The code demonstrates dynamic visual feedback from mathematical functions, with the `makeData` generator producing coordinates and radii from trigonometric expressions.

Jjabowen2020@gmail.com

62% match

Loading thumbnail…

Gist b7e664bfb668a567497d

An interactive audio visualization displays frequency data from a podcast episode as scattered points and a waveform on a black canvas. D3.js drives the animation loop, while the Web Audio API’s `AnalyserNode` captures frequency bins in real time. Two layered canvas contexts render fading frequency bars and a moving line, with colors shifting based on overall audio intensity. Clicking a button starts playback of the Serial podcast audio file, synchronizing the visualization with the sound.

11wheel

61% match

Loading thumbnail…

JS Bin

A spinning 3D cube displays a live digital clock on each face, using Three.js for WebGL rendering. The clock face itself is drawn into a 2D canvas via the Canvas API (`fillText`, `fillRect`), then mapped onto the cube as a `THREE.Texture` updated each frame. The animation loop rotates the mesh while calling `texture.needsUpdate` to refresh the time display, combining a raw canvas with a Three.js `MeshBasicMaterial`. The scene uses a perspective camera and box geometry sized 200 units.

MMAKIO135

61% match

Loading thumbnail…

Gist e0d36dea72b5cd332eef9e4265715ff9

This generative sketch displays a cartoon face rendered through layered procedural drawing commands, with a wall of overlapping code text scrolling horizontally in the background. The sketch uses the Processing.js (p5.js) API to draw shapes like ellipses, arcs, triangles, and rectangles, while the foreground text repeatedly includes the literal substrings “ITPIsAwesomeWeLoveCodingtrain” and “Codingsohard,” suggesting a playful commentary on learning to code. The face alternates between static and animated states, with randomized cheek positions and a frame rate change, all triggered by a variable that switches between two drawing branches. The code also manipulates a global offset variable to create the continuous text slide.

CChelseaChenC

61% match