​

// Adapted from:

// Fourier Series

// Daniel Shiffman

// https://thecodingtrain.com/CodingChallenges/125-fourier-series.html

// https://youtu.be/Mm2eYfj0SgA

// https://editor.p5js.org/codingtrain/sketches/SJ02W1OgV

​

let time = 0;

let wave = [];

​

let slider;

let sliderRadii = [];

​

let pointCircleX = [];

let pointCircleY = [];

​

let circles = [];

​

let n = 30;//Number of term on the series

​

​

function setup() {

  createCanvas(900, 550);

​

  colorMode(HSB, 1, 1, 1);

​

  for (var i = 0; i < n; i++) {

    sliderRadii[i] = createSlider(0, 1, 1 / (i + 1), 0.00001);

  }

}

​

function draw() {

  background(0);

​

  displayGrid();

​

  translate(3 * width / 12, height / 2);

  scale(100);

​

  stroke(255);

  strokeWeight(0.025);

  noFill();

  // For reference

  //ellipse(0, 0,  2*0.05);

  //ellipse(1, 0,  2*0.05);

  //ellipse(0, -1, 2* 0.05);

​

  //P1

  pointCircleX[0] = sliderRadii[0].value() * cos(time);

  pointCircleY[0] = sliderRadii[0].value() * sin(time);

​

  //P2-Pn

  for (let i = 1; i < n; i++) {

    pointCircleX[i] = sliderRadii[i].value() * cos(i * time) + pointCircleX[i - 1];

    pointCircleY[i] = sliderRadii[i].value() * sin(i * time) + pointCircleY[i - 1];

  }

​

  //C1

  stroke(1, 1, 1);

  circles[0] = ellipse(0, 0, 2 * sliderRadii[0].value());

​

  //C2-Cn

  for (let j = 1; j < n; j++) {

    stroke(j / n, 1, 1);

    circles[j] = ellipse(pointCircleX[j - 1], -pointCircleY[j - 1], 2 * sliderRadii[j].value());

  }

​

  wave.unshift(pointCircleY[n - 1]);

​

  stroke(1, 0, 1);

  strokeWeight(0.02);

  line(pointCircleX[n - 1], -pointCircleY[n - 1], 4, -wave[0]);

  beginShape();

  noFill();

  for (let i = 0; i < wave.length; i++) {

    vertex(i / 400 + 4, -wave[i]);

  }

  endShape();

​

  strokeWeight(0.015);

  stroke(0, 1, 1);

  line(0, 0, pointCircleX[1], -pointCircleY[1]);

  for (let k = 0; k < n; k++) {

    stroke((k + 1) / n, 1, 1);

    line(pointCircleX[k], -pointCircleY[k], pointCircleX[k + 1], -pointCircleY[k + 1]);

  }

​

  time += 0.01;

​

  if (time > 2 * TWO_PI) {

    path = [];

    time = 0;

  }

​

  if (wave.length > 1100) {

    wave.pop();

  }

​

  //console.log(wave.length);

}

​

function displayGrid() {

  stroke(250);

  strokeWeight(1);

  line(0, height / 2, width, height / 2); //x-axis

  line(3 * width / 12, 0, 3 * width / 12, height); //y-axis

​

}

​