Home▸Mathematics▸3D Lissajous Curves — Harmonic Knots

➿ 3D Lissajous Curves — Harmonic Knots

Explore 3D Lissajous curves — three perpendicular oscillators woven into harmonic knots. Tune frequencies a:b:c and phases, drag to rotate the point cloud, and watch coprime ratios close into woven lattice figures, with 2D oscilloscope XY mode as the special case.

Mathematics3DEasy60 FPS

About this simulation

This simulation traces a 3D Lissajous curve — three independent sinusoidal oscillators along x, y and z, each with its own integer frequency (a, b, c) and phase offset (δx, δy, δz), combined into a single space curve x = A·sin(a·t + δx), y = A·sin(b·t + δy), z = A·sin(c·t + δz). Because the frequencies are whole numbers, the curve always closes after one period of t, weaving itself into a knot or lattice whose shape depends only on the ratio a : b : c and the phase offsets. The resulting point cloud is rotated in 3D and rendered with a simple perspective camera, with distance-based shading giving a sense of depth. Setting c = 0 collapses the curve onto a flat plane, reproducing the classic 2D oscilloscope Lissajous figure.

🔬 What it shows

A closed 3D curve generated by three perpendicular harmonic oscillators with frequency ratio a : b : c and phase offsets δx, δy, δz. Small coprime integer ratios (like 3:2:1 or 5:4:3) produce tidy woven knots and lattices, while a shared factor simplifies the ratio and c = 0 flattens the curve into a 2D oscilloscope XY pattern.

🎮 How to use

Drag the canvas (mouse or touch) to orbit the camera around the curve, or leave Auto-rotate on to spin it automatically. Use the a, b, c frequency sliders and the δx/δy/δz phase sliders to reshape the knot, jump straight to a shape with the Trefoil, Lattice, Weave, Figure-8, XY 2:1 or Circle presets, switch between Line and Points rendering, pick a color scheme, and adjust the sample count to trade smoothness for performance.

💡 Did you know?

This is exactly the same mathematics behind an analogue oscilloscope's XY mode and the antique harmonograph drawing machine — two pens (or beams) driven by pendulums or signals at slightly different frequencies trace the same family of curves. Adding a third oscillator on the z-axis simply lifts the flat 2D Lissajous figure into a woven 3D knot.

Frequently asked questions

What is a Lissajous curve?

A Lissajous curve (or figure) is the path traced by a point whose coordinates each oscillate sinusoidally at their own frequency and phase. With two oscillators you get a flat 2D curve, like the pattern on an oscilloscope screen; adding a third oscillator on a perpendicular axis produces a 3D space curve, as shown in this simulation.

Why do the curves in this simulation always close?

The frequencies a, b and c in this simulation are restricted to whole numbers by the sliders, and any curve with integer frequency ratios repeats itself exactly after one period of the parameter t from 0 to 2π. If the frequencies were irrational multiples of each other the curve would never exactly repeat and would eventually fill the available space densely instead of closing into a knot.

What do the frequency ratio and phase actually control?

The ratio a : b : c sets how many oscillations each axis completes per cycle, which determines the curve's topology — for example 1:1:1 gives a simple circle-like loop while 5:4:3 weaves a much more intricate lattice. The phase offsets δx, δy, δz shift each oscillator in time relative to the others, rotating and tilting the loops without changing how many times the curve crosses itself.

What happens when the z-frequency is set to 0?

Setting c = 0 removes the third oscillator entirely, so every point has z = 0 and the curve collapses onto a flat plane. This reproduces the classic 2D Lissajous figure seen on an analogue oscilloscope when two out-of-phase sine waves drive its horizontal and vertical plates, which is why the simulation includes an "XY 2:1" preset built exactly this way.

How is the 3D curve turned into a 2D image on screen?

Each point is first rotated around the vertical and horizontal axes using the current view angles, then projected with a simple perspective camera: points further from the viewer are scaled down and drawn dimmer, while nearer points are drawn brighter and larger. Dragging the canvas changes the rotation angles directly, which is what lets you orbit around the curve to see its 3D structure from any side.

⚙ Under the hood

Three perpendicular oscillators woven into a 3D Lissajous curve. Tune frequencies a:b:c and phases, drag to rotate the depth-shaded cloud, and watch small coprime ratios close into harmonic knots.

Lissajousparametric3D projectionoscillatorCanvas 2D

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install