047-769-7545
こんにちは。デジタルステーション習志野のスタッフ小澤です。
今回は、Scratch（スクラッチ）を使って、スプライトが波のようにふわふわ動くアニメーションを作ってみましょう。
ちょっと数学のお話になりますが、「sin（サイン）関数」というものを使います。
「sinってなんだか難しそう…」と思うかもしれませんが、Scratchで実際に動かしてみることで、感覚的に理解できるようになります。
「数学ってこんなふうに使えるんだ！」という新しい発見があるはずです！
sin（サイン）ってなんだろう？
● 円の中の動きから生まれた「sin関数」
sin（サイン）は、ある角度に対して、どのくらい上にあるか（高さ）を教えてくれる数学のしくみです。
たとえば、コンパスで丸を描くように、円のまわりを点がくるくると動いていると想像してみてください。
その点の場所によって、「上のほうにいるのか」「下のほうにいるのか」「ちょうど真ん中なのか」が変わっていきますよね。
この「どれくらい上にあるか」を数字で表すのが、sin（サイン）という関数です。
観覧車でたとえてみましょう
イメージしやすいように、観覧車で考えてみましょう。
ゴンドラがゆっくり回っていくと、だんだん高くなっていき、やがて一番上に来て、そこからまた下がっていきます。
このときの「高さの変化」は、次のようになります。
-
スタートしてすぐ：高さ0（地面の高さ）
-
少し登ったところ：高さ0.5
-
一番上まで来たとき：高さ1（いちばん高い）
-
さらに進んで下がっていくと：高さは0に戻り、やがてマイナスに
-
一番下に来たとき：高さ-1（いちばん低い）
このように、sinの値は、なめらかに上がって、ゆっくり下がり、また上がるという動きをくり返します。
角度を少しずつ増やしていくと、sinの値は次のように変化していきます。
| 角度（°） | sinの値（高さ） |
|---|---|
| 0° | 0 |
| 90° | 1 |
| 180° | 0 |
| 270° | -1 |
| 360° | 0 |
このように、0→1→0→-1→0と、なめらかに上下する形になります。
● グラフにすると「波」のかたち
この数字の変化をグラフにすると、下のような波の形になります。
このグラフをよく見ると、
山と谷がなめらかにつながっているのがわかります。
この形が、波や振動などの動きにとてもよく似ているのです。
● y座標に使えば「ふわふわ」動きができる！
この波の形（sinの値）を、Scratchのスプライトのy座標（上下の位置）として使うと、
-
上にふわっ
-
下にすいっ
-
また上にふわっ
という、自然でなめらかな“ふわふわアニメーション”が作れるようになります。
このとき、x座標を右に動かしながら、y座標にsin関数の値を使えば、まるでスプライトが波の上を進んでいるような動きになるんです。
🛠 プログラムを作ってみよう
● 用意するもの
-
お好きなスプライト（クラゲ、ボール、何でもOK）
-
「角度」という名前の変数
● スクリプト例
● ポイント解説
-
角度を少しずつ増やすと、sinの値がなめらかに変化します -
sinを y座標に使うと、上下にふわふわ動きます
-
*20を変えると、波の高さ（上下のふり幅）も変えられます
応用：波を「見える化」してみよう
Scratchの「ペン」拡張機能を使えば、スプライトが通ったところに線を残すことができます。
これを使えば、sin関数の波を実際に描いてみることもできます。
これで、スプライトが進むと同時に、sinのグラフそのものが画面に描かれます。
「グラフってこうやってできてるんだ！」と、目で見てわかる体験になります。
応用アイデアいろいろ
-
波の高さを変えて、ゆるやかな波や激しい波を作る
-
2つのスプライトで、sinとcosの波を同時に描く
-
音楽に合わせて、波の動きを演出する
-
sinを使ってジャンプの「空中の軌道」にリアルさを加える
まとめ
プログラミングの中には、実はこんなふうに数学が隠れていることも多いのです。
「sinっておもしろいな」「もっといろんな動きを作ってみたいな」と思ったら、他の関数や応用技にもぜひチャレンジしてみてください！
デジタルステーション習志野では、スクラッチによく似た操作でプログラミングができる「プロクラ」という教材を使用してプログラミングを楽しく学ぶことができます。
子どもたちが“楽しく・深く・自分らしく”学べる環境づくりを大切にしています。
皆さんもぜひ一緒にプログラミングを学んでみませんか？
▼無料体験のお申し込みはこちら▼
デジタルステーション習志野
〒274-0063 船橋市習志野台4-1-7 習志野駅前郵便局2F
-
- 駅から徒歩一分
-
- 入り口はこちら
-
- 駐輪場