html,body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
let windowW = window.innerWidth;
let windowH = window.innerHeight;
let lisa;
let gui;
let guiControls;

guiControls = new function() {
    this.phi = 0;
    this.frequencyX = 1;
    this.frequencyY = 1;
}

function setup() {
    createCanvas(windowW, windowH);

    let minSide = min(windowW, windowH);
    lisa = new Lissajous(floor(minSide / 3), 0, 3, 2);

    // setting GUI
    gui = new dat.GUI();
    guiControls.phi = lisa.phi;
    guiControls.frequencyX = lisa.frequencyX;
    guiControls.frequencyY = lisa.frequencyY;
    gui.add(guiControls, 'phi', 0, 360).step(1).onChange(() => {
        lisa.phi = guiControls.phi;
    });
    gui.add(guiControls, 'frequencyX', 1, 20).step(1).onChange(() => {
        lisa.frequencyX = guiControls.frequencyX;
    });
    gui.add(guiControls, 'frequencyY', 1, 20).step(1).onChange(() => {
        lisa.frequencyY = guiControls.frequencyY;
    });
}

function draw() {
    background(0);
    push();
    translate(width / 2, height / 2);
    lisa.show();
    pop();
}






class Lissajous {

    constructor(r, phi, fx, fy) {
        this.radius = r || 200;
        this._phi = phi || 0;
        this._frequencyX = fx || 1;
        this._frequencyY = fy || 1;
        this.pointNum = 360 * 3;
    }

    get phi() {
        return this._phi;
    }

    get frequencyX() {
        return this._frequencyX;
    }

    get frequencyY() {
        return this._frequencyY;
    }

    set phi(value) {
        this._phi = value;
    }

    set frequencyX(value) {
        this._frequencyX = value;
    }

    set frequencyY(value) {
        this._frequencyY = value;
    }

    show() {
        stroke(255, 255, 255);
        strokeWeight(2);
        noFill();
        beginShape();
        for (let i = 0; i < this.pointNum; i++) {
            let angle = map(i, 0, this.pointNum, 0, TWO_PI);
            let x = cos(angle * this.frequencyX + radians(this.phi)) * this.radius;
            let y = sin(angle * this.frequencyY) * this.radius;
            vertex(x, y);
        }
        endShape();
    }

}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.3/dat.gui.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js