ハマログ

株式会社イーツー・インフォの社員ブログ

夏休みの宿題(JSで放物線をシミュレーションする)

はじめに
少し前に買った、「8月号増刊『60分でわかる 微分と積分』 (Newton 増刊) 」をパラパラ見ていたところ、最初の方に放物線の説明がありました。

これ
これによると放物線を表す式は以下のとおりです。
y = -1 / 400 * (x * x) + x
よくわからなかったので可視化して試してみました。
まずは横移動のみ
<div id="shot" style="background-color:#2ab9cc;width:10px;height:10px;margin-top:400px;"></div>

<script type="text/javascript">
    $(function () {
        let x = 0;
        let y = 400;
        setInterval(function () {
            x = x + 1;
            // y = y + 1;
            console.log(x);
            console.log(y);

            $('#shot').offset({
                top: y,
                left: x
            });
        }, 10);
    });
</script>
続いて書いてあった数式からyを算出してみます。
<div id="shot" style="background-color:#2ab9cc;width:10px;height:10px;margin-top:400px;"></div>

<script type="text/javascript">
    $(function () {
        let x = 0;
        let y = 400;
        let timer = setInterval(function () {
            x = x + 1;
            y = (-1 / 400) * (x * x) + x;

            console.log(y);

            $('#shot').offset({
                top: 400 - y,
                left: x
            });

            if (y <= 0) {
                stop();
            }
        }, 10);

        function stop() {
            clearInterval(timer)
        }
    });
</script>
うまくいったので、いらすとやの素材を適用してみました
<div id="shot" style="margin-top:400px;width:50px;height:50px;">
    <img src="bakudan.png" id="bakudan" style="width:50px;height:50px;">
    <img src="bakuhatsu.png" id="bakuhatsu" style="display:none;width:100px;height:100px;">
</div>

<script type="text/javascript">
    $(function () {
        let x = 0;
        let y = 400;
        let timer = setInterval(function () {
            x = x + 1;
            y = (-1 / 400) * (x * x) + x

            $('#shot').offset({
                top: 400 - y,
                left: x
            });

            if (y <= 0) {
                clearInterval(timer);
                $('#bakudan').hide();
                $('#bakuhatsu').show();
            }
        }, 1);
    });
</script>
次は微分がんばります!
JavaScriptjs座標放物線

kaneko tomo   kaneko tomo   2019年8月15日


関連記事

景観の構造

【KITSU】です。 横浜のオフィスから見るみなとみらいの風景はいつもすばらしい…

PHPのcurlを卒業して、Guzzleを使う。の巻

PHPでHTTP通信するときに、PHP組み込みのcURL(Client URL …

Xperia arc(SO-01C)にAndroid 4.4.4 KitKat(CM11)の導入

スマホアプリ開発用テスト機Xperia  SO-01C 2台がありましたので、そ…


← 前の投稿

次の投稿 →