let MAGENTA50 = '#dc267f';

let GOLD20 = '#ffb000';

​

function setup() {

  createCanvas(400, 400);

  createControls()

  addDuration(10000);

  //frameRate(2);

  scene = new Scene();

  background(20);

  drawGraph();

}

​

let g = 0;

function draw() {

  g = 0.01*clock();

  grp.update(

    (t) =>

      Math.cos(g + PI*t) -

      Math.pow(t, 2) / 6 +

      Math.pow(t, 4) / 24 +

      Math.pow(t, 6) / 720

  );

  equation.update(`\\cos(\\pi x + \\textcolor{green}{${g.toFixed(2)}}) - \\frac{x^2}{3!} + \\frac{x^4}{4!} + \\frac{x^6}{5!}`)

}

​

function drawGraph() {

  grp = create2DGraph(

    (t) =>

      Math.cos(t) -

      Math.pow(t, 2) / 6 +

      Math.pow(t, 4) / 24 +

      Math.pow(t, 6) / 720

  );

  grp.size(380, 380);

  //grp.stroke(GOLD20);

  config = {

    graphColor : GOLD20,

    xAxis :'false',

    yAxis : 'false',

    tickX : 'false',

    tickY : 'true',

    tickColor: "yellow",

    smallGridColor: ULTRAMARINE40,

    gridColor: MAGENTA50,

    originX: 0,

    originY: -4,

  };

  grp.configure(config);

  grp.axis();

  grp.plot();

  grp.position(10, 10);

​

  equation = createTeX(

    `\\cos(x + 0) - \\frac{x^2}{3!} + \\frac{x^4}{4!} + \\frac{x^6}{5!}`

  );

  equation.stroke('white')

  equation.fill('white')

  equation.position(45, 165);

  equation.size(20);

  equation.add();

  //grp.play();

}

​