Based on Lissajous Curve from Code as a Creative Medium

https://github.com/CodeAsCreativeMedium/exercises/blob/main/09_curves/06_lissajous/lissajous_js/lissajous_js.js

​

p. 164: "Lissajous curves are parametric functions of the form:

​

x = cos(a*t);

y = sin(b*t);

​

where a and b are typically small whole numbers."

*/

​

let x1, y1;

​

let t = 1;

let a = 3; //helps to determine the speed of the path

let b = 2; //helps to determine the speed of the path

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  console.log(windowWidth);

  stroke(255);

  strokeWeight(8);

}

​

function draw() {

  background(0, 5);

​

  let xAmplitude = width * 0.375; //controls how far

  let yAmplitude = height * 0.375;

  let xShift = width / 2; //controls how much of the width of the screen the design covers

  let yShift = height / 2; //controls how much of the height of the screen the design covers

​

  //controls the x and y path of the line, instead of a random path is follows a long recurring pattern

  //using both cos and sin allows the longer pattern, where as using only cos or sin, there is one pattern that repeats constantly

  x = xAmplitude * cos(a * t / 10) + xShift;

  y = yAmplitude * sin(b * t / 10) + yShift;

​

  point(x, y); //created the points across the screen

​

  t += 0.1; //determines how "fast" the line moves and how afar apart the points are

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  background(0);

}

​