let w = 200;

let cols;

let rows;

​

let curve0x = [];

let curve0y = [];

let xindex = 0;

let yindex = 0;

​

let ChooseColumn;

let ChooseRow;

​

function setup() {

  createCanvas(800, 800);

  cols = width / w - 1;

  rows = height / w - 1;

  ChooseColumn = 2;

  ChooseRow = 0;

}

​

function draw() {

  background(0);

  noFill();

  LissajousC(angle);

  angle -= 0.01;

  showCurves();

}

​

​

function showCurves() {

  stroke(255);

  strokeWeight(4);

  noFill();

  beginShape();

  console.log(curve0x.length);

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

      curveVertex(curve0x[i], curve0y[i]);

    }

    endShape();

  if (curve0x.length > 700) {

    noLoop();

  }

}

​

​

function LissajousC(a) {

  noFill();

  let d = w - 10;

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

    stroke(255);

    strokeWeight(2);

    let cx = w + i * w + w / 2;

    let cy = w / 2;

    ellipse(cx, cy, d, d);

    let r = d / 2;

    let x = r * cos(a * (i + 1));

    let y = r * sin(a * (i + 1));

​

    strokeWeight(2);

    stroke(255, 80);

    line(cx + x, 0, cx + x, height);

​

    strokeWeight(8);

    stroke(255);

    point(cx + x, cy + y);

​

    if (i == ChooseColumn) {

      curve0x[xindex] = cx + x;

      xindex++;

    }

  }

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

    stroke(255);

    strokeWeight(2);

    let cx = w / 2;

    let cy = w + i * w + w / 2;

    ellipse(cx, cy, d, d);

    let r = d / 2;

    let x = r * cos(a * (i + 1));

    let y = r * sin(a * (i + 1));

​

    strokeWeight(2);

    stroke(255, 80);

    line(0, cy + y, width, cy + y);

​

    strokeWeight(8);

    stroke(255);

    point(cx + x, cy + y);

​

    if (i == ChooseRow) {

      curve0y[yindex] = cy + y;

      yindex++;

    }

  }

}