let y = [];

let z = [];

let pts = 500;

let r = 600;

let circleX; // Define as a global variable

let circleY; // Define as a global variable

let targetX = 286;

let mouseClick = 0;

​

function setup() {

  createCanvas(400, 400);

  background(255);

  circleX = 1; // Initialize the global variable without `let`

  circleY = height / 2; // Initialize the global variable without `let`

}

​

function draw() {

  background(245, 230, 200, 20);

​

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

    // first

    stroke(190, 110, 0, 120);

    let angle = (i / pts) * 360;

    x[i] = r * cos(angle) * cos(angle);

    y[i] = r * sin(angle) + 120;

    line(x[i], y[i], y[i] * 3 + y[i], x[i]);

​

    // second

    stroke(120, 90, 160, 90);

    let angle2 = (i / pts) * 360;

    z[i] = sin(angle) * cos(angle);

    line(z[i] * 555, z[i] * width, z[i] * 20, x[i]);

  }

​

  ellipse(circleX, circleY, 50, 50); // Draw the ellipse after the loop

  circleX++;

  circleX = lerp(circleX, targetX, 0.05); //

​

  if (mouseIsPressed) {

    fill(255, 120, 120);

  } else fill("white");

}

​