<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js'></script>

/*

  Johan Karlsson (DonKarlssonSan)

  https://en.wikipedia.org/wiki/Lissajous_knot

*/

var A, B,

    nx, px,

    ny, py,

    nz, pz,

    t,

    r;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB);

  angleMode(RADIANS);

  noStroke();

  blendMode(LIGHTEST);

​

  setABr();

  // Constants from the Wikipedia article above

  nx = 3;

  ny = 2;

  nz = 5;

  px = 1.5;

  py = 0.2;

  pz = 0;

  t = 0;

}

​

function draw() {

  clear();

  t = 0;

  do {

    var x0 = A * cos(nx*t + px);

    var y0 = B * cos(ny*t + py);

    var z0 = cos(nz*t + pz);

    var hue = t/PI*180 % 360;

    var saturation = map(z0, -1, 1, 5, 90);

    var alpha = map(z0, -1, 1, 0.2, 1);

    fill(hue, 90, saturation, alpha);

    var x1 = x0 + windowWidth / 2;

    var y1 = y0 + windowHeight / 2;

    ellipse(x1, y1, r + r/5 * z0);

    t += 0.004;

    px += 0.00003;

    py += 0.00003;

    pz += 0.00003;

  } while(t < TWO_PI);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  setABr();

}

​

function setABr() {

  A = windowWidth/2.5;

  B = windowHeight/2.5;

  r = min(A, B)/5;

}

html, body {

  margin: 0;

  position: relative;

}

​

canvas {

  display: block;

  background: #001;

  background-color: #001;

}