Skip to main content
100%

Rhodonea Curve

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

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.

AI-generated description

This is some exploration of Rhodonea curves (a.k.a rose curves). Also see what Jason Davies did <a href="https://www.jasondavies.com/rhodonea/" target="_blank">here</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

Rhodonea Silk Ribbon

A generative data-art piece draws layered Rhodonea rose curves as animated silk ribbons, revealing a slowly rotating, warm neon flower. Each of the 100 paths maps polar coordinates (r = sin(k·θ)) with increasing scale and rotation offsets, then fades in sequentially using D3 transitions. The SVG renderer applies `d3.line` with `curveBasisClosed` and a sequential interpolator for color, producing a shimmering, layered effect against a dark background.

Bboukhaliljoe9@gmail.com
72% match
Loading thumbnail…

Lissajous Curve

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.

Aalexmacy
70% match
Loading thumbnail…

Mathematical Flora

Mathematical Flora renders a layered Rhodonea rose curve as a cascading series of animated, warm-colored SVG paths. The visualization shows 100 nested stroke rings, each progressively scaled and rotated to form a silk-ribbon-like flower. Using d3.line with curveBasisClosed and a scaleSequential interpolator, the code generates polar coordinates from the equation r = sin(kθ), then animates opacity through d3 transition delays for a sequential bloom effect.

Bboukhaliljoe9@gmail.com
69% match
Loading thumbnail…

rounded-corner-curve

An interactive line chart demonstrates a technique for drawing smooth paths with rounded corners through data points, contrasting it with a standard linear interpolation. The example generates random data and displays two paths: a default black line and a magenta path with rounded corners. Moving the mouse horizontally adjusts the rounding intensity in real time, revealing how the SVG path `C` (cubic Bézier) commands create the effect. The code uses d3.js for data generation and SVG path construction, with custom logic for path string manipulation.

11wheel
66% 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
66% 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…

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
65% 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
64% match