const HEIGHT = 800;

const PHASE_SPEED = 0.005;

const MAX_POINTS = 5000;

const X_FREQ = 01;

const Y_FREQ = 0.015;

const POINT_SIZE = 2;

​

​

let x, y;

let xFreqSlider, yFreqSlider, pointSizeSlider;

let t = 0;

​

function setup() {

  let canvas = createCanvas(800, 800);

  canvas.parent('sketch-holder');

  colorMode(HSB, 255);

  background(0);

​

  // Linking sliders to HTML elements

  xFreqSlider = document.getElementById('x_freq_slider');

  yFreqSlider = document.getElementById('y_freq_slider');

  pointSizeSlider = document.getElementById('point_size_slider');

}

​

function draw() {

  background(0,0,0,1)

  let xFreq = parseFloat(xFreqSlider.value);

  let yFreq = parseFloat(yFreqSlider.value);

  let pointSize = parseInt(pointSizeSlider.value);

​

  document.getElementById('x_freq_value').innerText = xFreq.toFixed(3);

  document.getElementById('y_freq_value').innerText = yFreq.toFixed(3);

  document.getElementById('point_size_value').innerText = pointSize;

​

  strokeWeight(pointSize);

  for (let i = 0; i < 5000; i++) {

    let x = (sin(t * xFreq) + 1) * width / 2;

    let y = (cos(t * yFreq) + 1) * height / 2;

    stroke((x + y) % 255, 255, 255, 100);

    point(x, y);

    t += 0.005;

  }

}

​