This is a test page for checking out p5.js animation. This is the 5th javascript export version of processing programming language. Here, the fourier series summation of a square wave is tested.
The square wave defined here \(f(t)\) is a periodic function defined between the period \(0 < t < 2\pi\). It’s definition is
\[ f(t) = \begin{cases} 60 & 0 < t < \pi\\ -60 & \pi < t < 2\pi \end{cases} \]
The Fourier series representation of this is given by
\[ \begin{align*} f(t) &= 60 \times \frac{4}{\pi} \sum_{n=1}^{\infty} \frac{\sin(2\pi(2k - 1)ft)}{2k - 1}\\ &= 60 \times \frac{4}{\pi} \left( \sin(\omega t) + \frac{1}{3} \sin(3\omega t) + \frac{1}{5} \sin(5\omega t) + \dots \right) \hspace{1 cm} \text{where } \omega = 2\pi f\\ \end{align*} \]
In an earlier method, I extracted the canvas elements, the javascript code and directly pasted them here. In the earlier method, the p5.js files were necessary.
In the latest method, I am writing the code in the online p5.js editor and embedding the file iframe in the webpage. Also, to make the embedding fit nicely, I added the width, height, and border attributes to the iframe. In this method, I don’t need the p5.js files linked here as they are run separately.
// Some variables
let time = 0;
let wave = [];
let border = [];
var p5slider;
function setup() {
var canvas = createCanvas(1280, 400);
// Slider variables
p5slider = createSlider(0, 100, 10);
p5slider.position(250, 25);
p5slider.style('width', '200px');
}
function draw() {
background(245);
translate(200, 200);
// Lines to extract the slider value to the program
var val = p5slider.value();
const n1 = val;
// Text info
stroke(50,50,50);
strokeWeight(1);
fill(50);
text('Fourier Series Representation of a Square Wave', -100, -180);
text('number of terms = '+n1, -100, -160);
text('Move the slider above to adjust the number of terms in the fourier series.', -100, -140);
let x = 0;
let y = 0;
for (let i = 0; i < n1; i++){
prev_x = x;
prev_y = y;
let n = 2 * i + 1;
let radius = 60 * (4 /(n * PI));
x += radius * cos(n * time);
y += radius * sin(n * time);
stroke(60,79,118);
strokeWeight(1);
noFill();
ellipse(prev_x, prev_y, radius*2);
fill(255);
stroke(171,159,157);
strokeWeight(2);
line(prev_x, prev_y, x, y);
}
wave.unshift(y);
border.unshift(x);
beginShape();
strokeWeight(0.5);
stroke(0,0,128);
noFill();
for (let i = 0; i < border.length; i++){
vertex(border[i], wave[i]);
}
endShape();
fill(255, 255, 255);
stroke(0,0,0);
translate(200, 0);
line(x-200, y, 0, wave[0]);
stroke(128,0,0);
strokeWeight(2);
beginShape();
noFill();
for (let i = 0; i < wave.length; i++){
vertex(i, wave[i]);
}
endShape();
time += 0.05;
if (wave.length > 600){
wave.pop();
border.pop();
}
}It works like a charm! The embedding method used sorts out the slider issue quite well! Even the locus of the last point was brought out quite well due to a slight tweak to the code.
Special thanks to Daniel Shiffman for his phenomenal enthusiasm in getting me interested in p5.js. This code is a slightly tweaked version of the same code Daniel used to teach the tutorial in his YouTube Channel - The Coding Train and in his website - The Coding Train