ロード オブ ニュートンのゆりかご001

どうも、期末で忙しい日々が続き間があいてしまいました。気ままにクリエイト続けます。色々な資料を見ていると、「物理法則をコーディングで実現すること」が楽しそうなので、やってみようと思います。

その過程を記録・発信することを通じて、初心者が上達していく様子を伝えられればなと思います。

ニュートンのゆりかごって？

これです！誰もが1度は見たことがあるのではないでしょうか？これをp5jsを用いて表現していきたいと考えています。

全く無計画です。出来上がっていく過程を、この記事を通して伝えて行けたらなと思います。

やってみる

はい。やってみます！物理法則を公式として計算して描画させるのも王道だとは思いますが、そうではなく

見えているままをコードで表現する

のアプローチでいこうと思います。今の所これです。全然ダメですw

コードは次の通りです

var ballSize = 30;
    function setup() {
    createCanvas(500, 500);
    noFill();
}

function draw() {
    background(0);

    //横糸
    stroke(255);
    strokeWeight(1);
    line(0, 100, 500, 100);

    //縦糸
    line(width/2, 100,width/2, height/2-ballSize/2);
    
    //ボール
    ellipse(width/2+sin(frameCount/30)*100, height/2, ballSize, ballSize);
}

コードの解説

frameCountは便利です。1フレームごとに1ずつ増えてくれる変数です。デフォルトでは1秒間に60ずつ増えます。つまり、sin(frameCount/30)は、1フレームごとに

sin(1/30),sin(2/30),sin(3/30),sin(4/30),  ... , sin(30/30), ... , sisin(60/30),n(61/30),....

と変化します。

sin(60/30)=sin(2)≒0.909なので、

sin(60/30)*100≒0.909*100=90.9

1秒で、90くらい右に移動するアニメーションになります。三角関数なので、やがてマイナス方向にも動くようになります。

NextSteps

もちろん、このままだと全然ダメです。次の目標は、振り子っぽい動きです。色々派生して学びが深まりそうです。

では！