【プログラミング】矩形波のフーリエ級数展開を可視化してみた - 夫婦で副業～収入源を増やし人生を豊かにする生き方

みなさんこんにちは！

先日、ご紹介したディズニーテクノロジア魔法学校で学んだProcessing(プロセッシング)がおもしろかったので、他のプログラムを作ってみました！やっぱり魔法にしか思えない❗

今回作成したのは、矩形波のフーリエ級数展開を可視化するプログラムです。

www.youtube.com

ほとんどは、The Coding Trainさんの動画を見てまねしましたが・・・。プログラムはまねしてなんぼ精神で今後も参考にさせていただきます！

Processingは初心者がプログラミングを学習するのに適しているので、これから勉強しようと思っている人にはオススメです！

今回は、Web上でプログラムを作成し、描写もしてしまう方法をお伝えします！

矩形波とフーリエ級数展開

さくっと説明。詳細はWikiでご確認下さい＾＾

矩形波とは、ある二つの値を規則的かつ瞬間的に変化する波のことで、

それを、フーリエ級数展開すると下記のようになります。証明は割愛

f:id:side-line:20190109222805p:plain

Webサイトはこちら

p5.jsのエディターです！

p5.js Web Editor

コードはこちら

エディターの左側にコピペするだけでOKです。

let time =0;

let wave=[];

let slider;
let slider2;

function setup(){
createCanvas(1000,400);
slider = createSlider(1,100,1);
slider2= createSlider(0.1,10,1);
}

function draw(){
background(0);
translate(200,200);

let x = 0;
let y=0;

for (let i = 0; i<slider.value();i++){
let prevx= x;
let prevy=y;
let n=i*2+1;

text(slider.value(), -100, 0);

let radius =50*(4/(n*PI));

stroke(255,100);
noFill();
ellipse(prevx,prevy,radius *2);

x += radius * cos(n*time);
y += radius *sin(n*time);

ellipse(x,y,0);
fill(255);
stroke(255);
line(prevx,prevy,x,y);
stroke(255-2*slider.value(), 1*slider.value(), 2*slider.value());
point (x,y)

}

wave.unshift(y);
translate(200,0);

beginShape();
noFill();
for (let i=0; i<wave.length;i++){
vertex(i,wave[i]);
line(x-200,y,0,wave[0]);
}
endShape();

time += 0.01*slider2.value();

}

slider = createSlider(1,100,1);
slider2= createSlider(0.1,10,1);

この辺の数字を適当に変えて楽しむこともできます！

みなさんも、Processing(プロセッシング)でプログラミングを始めてみませんか？