Sawtooth Lissajous Curve

About Project:

This sketch demonstrates how complex geometric patterns can emerge from simple mathematical principles. The idea is to use a sawtooth wave instead of a traditional sine wave in a Lissajous curve and adjust frequencies to explore the potential for creating transitional shapes. This showcases how basic mathematical functions can generate unexpected geometries through straightforward logic.

Lissajous Curve:

A Lissajous curve is formed by intersecting two perpendicular oscillations, typically using sine or cosine functions. This type of curve can produce a variety of intricate patterns depending on the frequencies and phase shifts of the oscillations.

$x(t) = A \sin(at + \delta)$

$y(t) = B \sin(bt)$

Sawtooth Wave:

A sawtooth wave is a non-sinusoidal waveform characterized by a linear rise and a sharp drop. It can be defined mathematically as:

$x(t) = A \left(2 \left(\frac{t}{T} - \left\lfloor \frac{t}{T} + \frac{1}{2} \right\rfloor \right)\right)$

where A is the amplitude, T is the period, t is time.

Sawtooth Waves with Lissajous Curves:

To generate a Lissajous curve using the sawtooth wave, we use the following function to calculate coordinates and plot the pattern. The drawSawtoothWave function, written in Processing, calculates the coordinates of the curve based on the sawtooth wave formula and plots the points to create the preferred pattern.

/**
 * Draws a sawtooth Lissajous curve.
 * 
 * @param amplitudeX The amplitude for the x-axis.
 * @param amplitudeY The amplitude for the y-axis.
 * @param time The time progression for the animation.
 * @param frequencyX The frequency for the x-axis.
 * @param frequencyY The frequency for the y-axis.
 */
void drawSawtoothWave(float amplitudeX, float amplitudeY, float time, float frequencyX, float frequencyY) {
  stroke(20, 220);
  strokeWeight(2.0);
  noFill();

  beginShape();
  for (float t = 0; t <= TWO_PI; t += 0.001) {
    // Calculate x and y coordinates using sawtooth wave formula
    float x = amplitudeX * (2 * ((t * frequencyX / TWO_PI + time) % 1.0) - 1);
    float y = amplitudeY * (2 * ((t * frequencyY / TWO_PI + time) % 1.0) - 1);
    vertex(x, y);
  }
  endShape(CLOSE);
}

Function Parameters:

amplitudeX and amplitudeY: The maximum displacement values for the x and y axes.
time: A time variable that progresses to animate the curve.
frequencyX and frequencyY: The frequencies of the oscillations along the x and y axes.

Wave Calculation:

The function uses the sawtooth wave formula to compute the x and y coordinates:

$x(t) = A \left(2 \left(\frac{t \cdot frequencyX}{2\pi} + time\right) \mod 1.0 - 1\right)$

$y(t) = A \left(2 \left(\frac{t \cdot frequencyY}{2\pi} + time\right) \mod 1.0 - 1\right)$

t iterate from 0 to 2π ensuring a full cycle.

Rendering:

beginShape() and endShape(CLOSE): These functions define the start and end of the shape being drawn.
vertex(x, y): This function plots each point of the curve based on the calculated coordinates.

This experiment shows how the transition between different frequencies can morph geometric patterns. By interpolating the changes in frequencies and scale factors, the method transitions smoothly from one state to another, highlighting the complexity that emerges from simple mathematical adjustments.

Frequency and Scale Control:
The method allows real-time control of the wave frequencies and scale factors through mouse interactions. The mouse X position controls both the frequency along the X-axis and the scale factor, while the mouse Y position controls the frequency along the Y-axis.
High Precision Calculation:
By using a small increment in the loop that draws the wave, the method achieves high precision, resulting in smooth and continuous curves.
Phase Continuity:
Ensuring phase continuity prevents abrupt jumps and maintains the smoothness of the curve as it evolves over time.
Easing for Smooth Transitions:
The method employs easing techniques to interpolate changes in scale factor and frequency smoothly, enhancing the visual experience.

By using basic wave functions and providing intuitive control mechanisms through mouse interactions, this sketch portrays how layering simple concepts can create complex geometric designs.

Saranont Limpananont
2024.06.026

*These sketches were made using Processing, visual art, and interactive media programming language.

< BACK TO BLOG

Image courtesy of Saranont Limpananont

About Project:

Sawtooth Waves with Lissajous Curves:

Function Parameters:

Sawtooth Waves with Lissajous Curves: Sample Usage

Image courtesy of Saranont Limpananont

Image courtesy of Saranont Limpananont

About Project:

Sawtooth Waves with Lissajous Curves:

Function Parameters:

Sawtooth Waves with Lissajous Curves: Sample Usage

Image courtesy of Saranont Limpananont

Related posts: