### Image courtesy of Saranont Limpananont

#### Complexity from Simplicity:

This sketch demonstrates how complex geometric patterns can emerge from simple mathematical principles. By using a sawtooth wave instead of a traditional sine wave in a Lissajous curve and adjusting frequencies, we explore the potential for creating transitional shapes. The algorithm 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.

**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:

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:

`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.

#### Sawtooth Waves with Lissajous Curves: Sample Usage

This example applies the `drawSawtoothWave`

function in Processing to create dynamic geometric patterns based on user interactions, using P5.js.

**How to use: Change Frequency and Scale**

- Desktop Users — Move your mouse across the canvas to adjust frequency and scale. Use the mouse wheel to fine-tune the scale.
- Mobile Users — Touch and drag on the canvas to adjust the frequency and scale.

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.