function setup() {

  createCanvas(400, 400);

  countSlider = createSlider(0, 40, 5, 1);

  countSlider.input(() => redraw());

  countSlider.style('width', '400px');

  textAlign(CENTER, CENTER);

  fill(0);

  textSize(16);

  noLoop();

  redraw();

}

let count = 1;

function draw() {

  count = countSlider.value();

  strokeWeight(2);

  background(255);

  noStroke();

  text(`FPS: ${round(frameRate())}`, width - 75, 15)

  let p;

  noFill();

  beginShape();

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

    stroke(0);

    let total = 0;

    for (let j = 0; j < count; j++) {

      let value = (4 * sin((2 * j + 1) * map(i, 0, width, -PI, PI))) / ((2 * j + 1) * PI);

      if (value > 0) {

        stroke(255,0,0);

      } else {

        stroke(0);

      }

      point(i, value * 100 + height / 2);

      total += value;

    }

​

    stroke(0, 0, 255);

    vertex(i, total * 100 + height / 2);

​

  }

  endShape();

}

​