let B = 4;

let a = 5;

let b = 4;

let d = Math.PI / 4;

​

function setup() {

  createCanvas(400, 400);

  background(0);

  scene = new Scene();

  reel();

  createControls();

  addDuration(12000);

}

​

function draw() {

  d = 0.00075 * clock(); //clock outputs the current time of progress bar or can say timeline

  //b += 0.0001

  curve1.update(

    (t) => A * Math.sin(a * t + d),

    (t) => B * Math.cos(b * t)

  );

}

​

function reel() {

  curve1 = create2DParametricGraph(

    (t) => A * Math.sin(a * t + d),

    (t) => B * Math.cos(b * t)

  );

​

  curve1.stroke('url(#grad1)');

  curve1.position(50, 50);

  curve1.plot();

  // let defs = curve1.graphObject.getElementsByTagName('defs');

  // //console.log(curve1.graphObject)

  curve1.graphObject.innerHTML += `<defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

      <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1" />

      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />

    </linearGradient></defs>`;

}

​