​

// https://github.com/two-ticks/p5.teach.js

// https://discourse.processing.org/t/animating-maths-in-p5-js/31583

​

let amp = 6;

let timePeriod = 3;

let freq = 1 / timePeriod;

let k = 0;

​

function setup() {

  canvas = createCanvas(400, 400);

  //scene = new Scene();

  background(0);

  drawGraph();

  writeEquation();

}

​

function draw() {

  if (k < 55) {

    k += 0.025; //in the loop it will be converted into integer

    equation.update(

      `y(t)=\\frac{1}{2}-\\frac{1}{\\pi}\\ \\sum_{k=1}^{\\textcolor{blue}{${floor(

        k

      )}}}\\frac{(-1)^{{\\textcolor{blue}{k}}}\\sin\\left(2\\pi \\cdot {\\textcolor{blue}{k}} \\cdot f  \\cdot t\\right)}{\\textcolor{blue}{k}}`

    );

  }

​

  let defs = equation.writeElement.elt.getElementsByTagName("defs");

​

  defs[0].innerHTML += `<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">

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

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

    </linearGradient>`;

​

  grp.update((t) => amp * fourierSaw(t));

}

​

function fourierSaw(t) {

  function sigmaSinK(k, t) {

    let acc = 0; //accumulator

    for (i = 1; i <= floor(k); i++) {

      acc += (Math.pow(-1, i) * Math.sin(2 * Math.PI * i * freq * t)) / i;

    }

    return acc;

  }

  return 1 / 2 - (1 / PI) * sigmaSinK(k, t);

}

​

function drawGraph() {

  grp = create2DGraph((t) => amp * fourierSaw(t));

​

  grp.size(390, 390);

  config = {

    minX: -10,

    maxX: 10,

    //yAxis: "false",

    //xAxis : "false",

​

    axisColor: "rgba(135,206,235, 0.5)",

    stepX: 1,

    graphColor: "url(#grad1)",

    graphStrokeWidth: 2,

    tickX: "false",

    tickY: "false",

    smallGridColor: "skyBlue",

    gridColor: "rgba(135,206,235, 0.25)",

    originX: 0,

    originY: -3,

    //pathElements : 1000

  };

  grp.configure(config);

  grp.axis();

​

  grp.plot();

  grp.position(5, 5);

​

  let defs = grp.graphObject.getElementsByTagName("defs");

  //console.log(defs[0].innerHTML)

  defs[0].innerHTML += `<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>`;

}

​

function writeEquation() {

  equation = createTeX(

    `y(t)=\\frac{1}{2}-\\frac{1}{\\pi}\\ \\sum_{k=1}^{\\textcolor{blue}{${0}}}\\frac{(-1)^{{\\textcolor{blue}{${0}}}}\\sin\\left(2\\pi \\cdot {\\textcolor{blue}{${0}}} \\cdot f  \\cdot t\\right)}{\\textcolor{blue}{${0}}}`

  );

  equation.stroke("url(#grad2)");

  equation.fill("url(#grad2)");

  equation.position(20, 15);

  equation.size(19);

  equation.add();

​

  genequation = createTeX(

    `y(t)=\\frac{1}{2}-\\frac{1}{\\pi}\\ \\sum_{k=1}^{{\\infty}}\\frac{(-1)^{{{k}}}\\sin\\left(2\\pi \\cdot {{k}} \\cdot f  \\cdot t\\right)}{{k}}`

  );

  genequation.stroke(color(255, 204, 0));

  genequation.fill(color(255, 204, 0));

  genequation.position(20, 305);

  genequation.size(20);

  genequation.play("createFill", 0, 6);

}

​