Gist dfcea3b47dd624057d397482a0ea6a9e

Gist ce2d0ae16f469275661564df223c4a0c

This example displays a long, alphabetically sorted list of brush names in a scrolling text interface, with a large color swatch and hexadecimal color readout updating in real time. It uses a custom rendering loop with Canvas API drawing operations to generate a procedural color gradient based on mouse position. The code references `requestAnimationFrame` and Canvas `fillRect` to continuously repaint the background, while the list itself is rendered as plain HTML text. No external visualization libraries are used; the interaction is limited to mouse movement affecting the displayed color.

71% match

Gist bbd575c20a64fd4402a75d507da5c31f

This example demonstrates a 3D drawing and camera-control system built around a command-driven API. It shows how a user can manipulate a virtual brush, reposition the camera, and toggle features like symmetry, straightedge, and autoorient through a set of named commands. The visualization uses Three.js-like vector operations for translations and rotations, while commands such as `brush.draw` and `camera.teleport` are executed sequentially. It also includes save/load functionality with user and curated indices, plus export options for the scene. The code defines a protocol for capturing drawing actions, rendering them in 3D space, and managing user interactions.

70% match

Gist c7122eee6247b95dba09

This example generates a continuously evolving abstract animation by drawing Voronoi polygons in alternating black and white. It shows a recursive process where each polygon’s edges are traced with short, sequential line segments that slowly shrink the polygon’s boundary, creating a spiral-like contraction. The animation uses D3’s `d3.geom.voronoi()` with a clip extent to create the polygons from random points, and then employs Canvas 2D API calls like `beginPath`, `lineTo`, and `stroke` to draw each step. A queue (`queue.js`) schedules the drawing of each polygon, and the code alternates stroke colors (`#000` and `#fff`) after each full pass, repeating indefinitely.

11wheel

70% match

D3 Spin Art

This interactive visualization lets users draw freehand lines or dots on a rotating canvas, producing spiral-like patterns whose appearance changes with speed. A vertical slider controls revolutions per minute, a color palette selects stroke colors, and radio buttons toggle between line and circle draw styles. The code uses D3 v4 transitions with a linear easing function to animate the SVG group’s rotation, while drag events append polyline or circle elements to the rotating group.

Aalexmacy

69% match

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. Each frame, the code computes positions and radii using trigonometric functions of time and grid coordinates, creating swirling, morphing shapes with shifting colors. The animation runs continuously via `requestAnimationFrame`, with a semi-transparent black overlay (Canvas `fillRect`) producing trailing motion blur effects. The canvas resizes dynamically to fit the window, and all rendering uses the native Canvas 2D API, including `arc` and `fill` for circle drawing. No external libraries are used; the math-driven design follows the original MIT tutorial’s approach.

CConvert-Jade

Gist 1b1c584b62bbf80f4e95935d9654a5c9

This example demonstrates a virtual-reality drawing tool where users can create and manipulate 3D paths, strokes, and shapes in a spatial environment. The code uses the Tilt Brush API, including functions like `draw.path`, `strokes.select`, and `headset.pastPosition`, to render SVG-derived geometry and apply transformations such as translation, rotation, and scaling. It also supports symmetry modes, camera-path recording, and layer management, with turtle-style drawing commands and Unity Mathf utilities for calculations. The visualization shows how procedural and imported paths can be interactively positioned and edited within a VR scene.

Gist dc420281117ae336a18c1bf3069fc932

This example demonstrates how to create a parametric stroke in Tilt Brush using a tool script. It shows the instantiation of a `CircleCreator` attached to the active canvas, followed by the creation of a new line through the `PointerScript` and the setting of a keeper control point. The code relies on Tilt Brush’s `App.Scene.ActiveCanvas`, `ParametricStrokeCreator`, and `PointerManager.m_Instance` APIs to drive the pointer interaction, defining the stroke’s geometry and capturing it as a persistent element.

Mathematical Graphic Patterns

This animated canvas visualization generates evolving, abstract geometric patterns from mathematical formulas. White dots are drawn programmatically based on sine and cosine functions, with positions and speeds influenced by a continuously incrementing time variable. The rendering uses the HTML5 Canvas API’s `getContext('2d')`, `fillRect` for semi-transparent fading trails, and `arc` to draw each circle, creating a complex, shifting web of points that resembles a modern-day screensaver.

CConvert-Jade