Skip to content

Lissajous Figures

Run the Lissajous MicroSim

Edit the MicroSim with the p5.js Editor

Prompt

Create a p5.js animation of Lissajous figures.
Make one slider control the x-axis and one
slider control the y-axis.
Draw the figure on an aliceblue background.

ChatGPT o1-mini Response

Sure! Below is a p5.js sketch that animates Lissajous figures with two sliders controlling the frequencies of the x-axis and y-axis respectively.

Lissajous Figures Overview

Lissajous figures are complex harmonic motion patterns formed by combining two perpendicular oscillations. They are defined by the parametric equations:

\[ \begin{cases} x(t) = A \sin(a t + \delta) \\\\ y(t) = B \sin(b t) \end{cases} \]

where:

  • A, B: Amplitudes in the x and y directions.
  • a, b: Frequencies in the x and y directions.
  • δ: Phase shift between the two oscillations.

In this sketch:

  • Slider 1 controls the frequency a of the x-axis.
  • Slider 2 controls the frequency b of the y-axis.

Setting Up the Environment

To run this sketch:

  1. Visit the p5.js online editor.
  2. Create a new sketch.
  3. Replace the existing code with the code provided below.
  4. Click the play button to see the animation.

p5.js Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
let sliderXFreq, sliderYFreq;
let xFreq = 3;
let yFreq = 2;
let phase = 0;
let phaseSpeed = 0.02;

function setup() {
  createCanvas(600, 600);
  background('aliceblue');

  // Create sliders
  createP('X-axis Frequency (a):');
  sliderXFreq = createSlider(1, 10, xFreq, 1);
  sliderXFreq.style('width', '580px');

  createP('Y-axis Frequency (b):');
  sliderYFreq = createSlider(1, 10, yFreq, 1);
  sliderYFreq.style('width', '580px');

  // Set drawing parameters
  strokeWeight(2);
  noFill();
}

function draw() {
  background(255);

  // Update frequencies from sliders
  xFreq = sliderXFreq.value();
  yFreq = sliderYFreq.value();

  // Parameters for Lissajous
  let A = width / 3;
  let B = height / 3;
  let delta = phase;

  translate(width / 2, height / 2);

  stroke(0, 100, 200);

  beginShape();
  for (let t = 0; t < TWO_PI * 2; t += 0.01) {
    let x = A * sin(xFreq * t + delta);
    let y = B * sin(yFreq * t);
    vertex(x, y);
  }
  endShape();

  // Increment phase for animation
  phase += phaseSpeed;
}

Explanation of the Code

  1. Variables Declaration:

  2. sliderXFreq and sliderYFreq: Slider elements controlling the frequencies.

  3. xFreq and yFreq: Current frequencies for x and y axes.
  4. phase: Phase shift to animate the figure.

  5. phaseSpeed: Speed at which the phase shifts over time.

  6. setup() Function:

  7. Initializes the canvas.

  8. Creates two sliders for controlling the x and y frequencies, each ranging from 1 to 10 with an initial value.

  9. Sets the stroke weight and disables fill for drawing the Lissajous figure.

  10. draw() Function:

  11. Clears the background each frame to redraw the figure.

  12. Retrieves the current values from the sliders to update xFreq and yFreq.
  13. Defines amplitudes A and B based on canvas size.
  14. Translates the origin to the center of the canvas.
  15. Begins a new shape and iterates through values of t to plot the Lissajous figure using the parametric equations.
  16. Increments the phase to animate the figure over time.

Customization

  • Amplitude Adjustment: You can add sliders to control the amplitudes A and B if desired.
  • Phase Control: Introduce another slider to adjust the phase shift delta manually.
  • Colors and Styles: Modify stroke() and strokeWeight() to change the appearance of the figure.
  • Resolution: Adjust the increment in the for loop (t += 0.01) for smoother or faster rendering.

Live Demo

For a live demo, you can copy the above code into the p5.js online editor and see the animation in action. Adjust the sliders to explore different Lissajous patterns!