Skip to main content
100%

Gist 3007043b5c5144394c6b7cd6cf794a33

✓ Published0🌍 Public
Aaman-tiwari
Last edited Oct 30, 2017
Created on Oct 30, 2017

The visualization generates a grid of 3D boxes arranged in a 10-by-10 layout, rendered with the Processing language’s `box` primitive. Each box is drawn repeatedly, with its position offset by `i * 2` and `j * 2`, and rotates over time based on the current time value. The fill and stroke colors are set to magenta with alpha and stroke thickness that fluctuate with the absolute sine of time, creating a pulsing effect. The rendering uses `scale`, `background`, `move`, `rotate`, and `strokeSize` commands to animate the entire pillar-like structure.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel
72% 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
70% match
Loading thumbnail…

Gist 8232daa7d3b24a25b9f7566ff1da4522

This WebGL visualization uses p5.js to render a dynamic 3D scene composed of primitive shapes, including planes, boxes, spheres, cylinders, cones, ellipsoids, and toruses. The code applies normalMaterial to map normal vectors to RGB colors, with ambient and directional lighting enhancing the depth of each geometry. Through camera positioning and rotation transformations, the shapes appear to float and spin in space. The example demonstrates p5.js’s WEBGL renderer capabilities for creating three-dimensional compositions from basic geometric primitives, highlighting the library’s built-in shape functions and material systems.

Aabonello
68% match
Loading thumbnail…

Fork of 3D Cube of Spheres

An animated 3D cube of 64 colored boxes rotates in a black scene. Each box’s color is derived from its grid position using an HSL hue calculation. Built with Three.js, the visualization uses a `PerspectiveCamera`, `OrbitControls` for interactive zoom and rotation, and WebGL rendering. A directional light and ambient light provide depth. The entire group rotates continuously via an animation loop.

220bavatharani@gmail.com
67% match
Loading thumbnail…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel
67% match
Loading thumbnail…

first_work

A glowing 3D cube of colored boxes demonstrates a grid of 64 animated elements, each shaded by its position. The visualization rotates continuously while users can interactively explore the scene through orbiting, panning, and zooming. Built with Three.js, it uses `WebGLRenderer` for rendering, `OrbitControls` for camera interaction, and `MeshPhongMaterial` with HSL color assignment. A directional and ambient light illuminate the structure, which rotates incrementally each frame through an animation loop. The cube is generated programmatically from `config.js` dimensions, with camera constraints limiting distance.

224cs049@kpriet.ac.in
67% 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
67% match
Loading thumbnail…

Mathematical Graphic Patterns

A grid of 30 by 30 small circles continuously shifts and morphs in an animated screensaver-like display. Each circle’s position and size are driven by sine and cosine functions of its grid coordinates and a continually advancing time value, producing swirling, geometric motion. The code uses Canvas drawing APIs such as `getContext('2d')`, `beginPath`, `arc`, and `fill` to render the circles, with colors computed via a custom `rgb` function based on grid position and time. The animation runs through `requestAnimationFrame`, and the canvas resizes to match the window dimensions.

DDhruval Patel
67% match