MD-Blog_Web Creative

皆さん、こんにちは。NAKです。

はじめに

コロナの影響は引き続きありますが、緊急事態宣言が解除されました。
様々な企業が再開となりました。健康第一ではありますが、新しい出会いや経験ができることは喜ばしいことです。

学生の方は、新学期が始まったという方も多いのではないでしょうか？

例えば、こちらの公式。

※V(速度)、V0（初速度）、加速度(a)、経過時間（t）、S（距離）

筆者にとっては、とても懐かしい公式です。
高校1年生以上の方は、見覚えがある方もいるでしょう。

これは物理Ⅰで登場する、「等加速度直線運動」の公式です。
直線を一定の加速度で進む物体について、速度と距離を表した式です。

例えば、自動車を思い浮かべて下さい。

上段の式は、一定の加速度で進む物体は、時間が増すごとに速度が速くなります。

下段の式は、距離 = 速度 × 時間　から、上段の式を分解すると、算出することができます。

高校生ならできる！ Canvasでアニメーションを作ってみよう

等加速度直接運動は、そのまま直線で加速度が一定に増す現象ですが、その中でもシンプルなもので、自由落下運動があります。

これは、初期速度は0の状態で、加速度は重力（g）の力で、地面に落下する現象です。

先ほどの数式で、初速度V0は０。aは重力（g）とすれば、解くことができます。

さて、今回は高校で学べる数式で、アニメーションを作ってみましょう。
（※今回はHTMLとcanvasがわかる想定で進行します。）

canvasのエリアをクリックすると、ボールが落下します。これは、先ほどの数式から描くことができます。
では、もっとリッチな動きにさせてみましょう！

※サイトを読み込んだ直後に実行するので、再生する場合は右下の「Rerun」ボタンを押してください。
※必ずcanvasの中央から、拡大するとは限りません。レスポンシブなど対応する場合は、改良してからご使用ください。

物体が左右に移動しながら自由落下運動をしています。地面に停止後、徐々に背景を表示するアニメーションです。
サイトのオープニングや個性的な演出をしたいときに、使えそうですね。

日常の「なぜ？」を意識してみましょう

アニメーションを作成するときは、Webの知識も必要ですが、何より「考える力」が大切です。
数式の羅列は難しく感じることもありますが、どのような現象が起こっているか考えると、容易に理解することができます。

ぜひ、皆さんも学校で学んだことをWebで表現してみてはいかがでしょうか。