Skip to main content
100%

Harmonograph

✓ Published0🌍 Public
Aalexmacy
Last edited Jun 29, 2017
Created on Jun 29, 2017

A harmonograph draws a continuously evolving parametric curve on a Canvas element, with four adjustable oscillators controlling the x and y coordinates. Each oscillator has sliders for frequency, damping, amplitude, and phase rate, plus a phase-reset button. The animation loop uses `requestAnimationFrame` to redraw the curve each frame, applying damped sine functions that fade over time. The code uses the Canvas 2D API's `getContext`, `moveTo`, `lineTo`, and `stroke` methods to render the intricate, slowly shifting patterns.

AI-generated description

This is some exploration of harmonographs and part of a series explorations in visualizing parametric equations. Also check out <a href='http://bl.ocks.org/veltman/'>Noah Veltman</a>'s block: <a href='http://bl.ocks.org/veltman/72108247a8f8304ce0ccd7a50f49a9ca'>Harmonographics</a>

mit Licensed

Similar vizzes

Loading thumbnail…

harmonic test

An animated double pendulum traces two connected line segments from a fixed center point, with a white ball at the endpoint whose radius oscillates with time. The tip alternates between white and black fills each time step, creating a strobe effect. Using D3 v6 selections, `range`, and `join`, the code updates SVG `line` and `circle` elements every 2 seconds, incrementing a time variable to drive cosine and sine positions for both arm segments.

DdvirRez
74% match
Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. The code maps a 30×30 grid of points through sine and cosine functions using time-based parameters, causing the positions and sizes of the circles to shift continuously. Each frame applies a semi-transparent black overlay before redrawing, creating fading trails that enhance the motion effect. The rendering uses the Canvas 2D API’s `arc()` and `fillRect()` methods, with colors computed from sine waves tied to the grid position and animation time. The visualization is inspired by a mathematical patterns tutorial and runs as an infinite loop via `requestAnimationFrame`.

PPeter S
72% match
Loading thumbnail…

Canvas Animation

This canvas animation draws a rotating, flower-like pattern of curved lines radiating from a central point, with small solid circles placed at each outer endpoint. The design morphs continuously as the entire shape rotates and dashed lines shift in a repeating loop. Built with raw JavaScript and the Canvas API, the code uses a quadratic curve for each spoke, along with rotation transforms, dashed strokes, and a semi-transparent overlay to create the illusion of motion. The animation is driven by `requestAnimationFrame`, updating the line dash offset and rotation angle over time.

11Cr18Ni9
71% match
Loading thumbnail…

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
71% match
Loading thumbnail…

Double Harmonic

Two concentric pendulum arms trace a slowly evolving path. A large circle rotates around the center, and a smaller circle rotates around it, creating a complex harmonic motion. The visualization uses SVG elements, including circles and lines, and is updated at a fixed interval. The code employs D3’s `select`, `range`, and data join methods to render the animation, based on the `d3` library version 6.

Wwgloss
70% match
Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated canvas piece generates a shifting grid of glowing colored circles that ripple outward in a spiral formation, creating a dynamic, screensaver-like visual effect. The pattern continuously redraws over a semi-transparent black background, leaving faint trails as the positions and radii of the circles evolve over time. Rendering uses the Canvas 2D API with `getContext('2d')` and `requestAnimationFrame` for smooth animation. Each circle’s color, size, and location are computed from sine and cosine functions of grid coordinates and a steadily incrementing time variable, producing a complex, mathematically driven display.

AAndre J Denais
70% match
Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization displays a grid of circles that ripple outward in concentric, rotating patterns resembling a living mathematical kaleidoscope. The code, written by hotdoujiang, generates each circle’s position and radius using trigonometric functions of a continuously incrementing `time` variable, while colors shift through an RGB spectrum based on grid coordinates. The rendering uses the raw Canvas 2D API with `fillRect` to create a fading trail effect and `arc` calls to draw individual circles. The pattern adapts to the window size, recalculating dimensions and offsets as the browser resizes.

Hhotdoujiang
70% match
Loading thumbnail…

Mathematical Graphic Patterns

This example creates an animated, abstract visualization of mathematical graphic patterns. A grid of 900 points is repositioned and resized over time, with each point’s radius and color changing continuously, producing a shimmering, organic composition on a canvas. The animation is built using the Canvas API, with a recursive `requestAnimationFrame` loop driving the updates. The code defines a custom `rgb()` helper and uses trigonometric functions to compute positions and radii, while a faint black overlay creates a fading trail effect. The visualization adapts to the browser window’s dimensions by resizing the canvas dynamically.

CCurran Kelleher
70% match