Skip to main content
100%

Lissajous Curve

✓ Published0🌍 Public
Aalexmacy
Last edited Jun 9, 2017
Created on May 10, 2017

A Lissajous curve is drawn on a canvas as a continuous, animated line whose shape changes based on two frequency parameters, a and b, adjustable via sliders. A checkbox enables a slow phase rotation, causing the curve to evolve over time. The visualization uses the Canvas 2D API with `requestAnimationFrame` to redraw the curve each frame, calculating points from sine functions of the scaled parameters and an offset. The rendering clears the canvas with `fillRect` and strokes the path with a thin line, showing the parametric relationship between the two frequencies.

AI-generated description
mit Licensed

Similar vizzes

Loading thumbnail…

Lissajous

This example animates Lissajous curves, parametric figures formed by sine waves on perpendicular axes, with interactive text inputs for amplitude, frequency, and phase values. The curve continuously evolves as the phase offset (δ) increments automatically, while the other parameters remain adjustable by the user. The SVG path is redrawn on each frame using a d3.timer, computing points with a custom lissajous function and d3.range over a fixed precision interval. The code relies on d3.v4 selection and attribute methods, with a centered group transform positioning the rendering.

SSleepyHarry
82% match
Loading thumbnail…

Rhodonea Curve

Rhodonea curves, also known as rose curves, are drawn as animated red line tracings on a white canvas. Two sliders control integer parameters *a* and *b*, and the curve morphs smoothly between parameter combinations via a tweening function. The code uses the Canvas 2D API with `beginPath`, `lineTo`, and `stroke` to render 7200 computed points, where each point combines sine and cosine terms scaled by the window size. The animation runs via `requestAnimationFrame`, and sliders update the displayed parameter values.

Aalexmacy
70% match
Loading thumbnail…

Harmonograph

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.

Aalexmacy
69% 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
67% 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
67% 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
65% match
Loading thumbnail…

Catmull–Rom Curves

Three interactive canvases compare Catmull–Rom curve interpolation under uniform, chordal, and centripetal parameterization, using the same seven control points rendered as white polylines. Each canvas overlays a static image of the curve, while a slider adjusts the alpha parameter via the `data-alpha` attribute. The code uses `d3.shape.line` with the `"catmull-rom"` interpolator and a Canvas 2D context to draw the paths. The example is based on Yuksel et al.’s research on parameterization effects, highlighting how each method handles overshoot and intersections differently.

Mmbostock
65% match
Loading thumbnail…

HTML Canvas Wave Line

This example demonstrates a sine wave pattern drawn on an HTML canvas element, showing how mathematical functions can generate visual curves. The wave oscillates vertically across the 800-pixel-wide canvas, centered vertically with an amplitude of 50 pixels and a frequency controlled by dividing the x-coordinate by 50. The visualization uses the Canvas API's `getContext('2d')` method and `lineTo()` function to plot each point incrementally, advancing horizontally by 2 pixels per iteration. A goldenrod border frames the canvas, while the wave itself is rendered with the default black stroke. No external libraries are used; the implementation relies purely on native JavaScript and the HTML5 Canvas API.

JJack Lyons
65% match