三角関数を理解する！動く目のアニメーションを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)

- 演出でおろどかせる

今回作るのはアニメーション演出です。
2つの目がマウスをじーっと見てくるインタラクティブなアニメーションにしてみました。チープなゲームシステムでも演出で新しさや面白さを伝えられる良い題材かなと思っています。
また、技術的には、角度を調べる逆三角関数（アークタンジェント）を使用しています。角度を調べるときに非常に使える関数ですのでぜひ覚えておきましょう。

デモアプリでは視線がヒントの宝探し風にしてみました。

デモアプリはこちらから。https://openprocessing.org/sketch/1608212

- クミタテ式プログラミングドリルとは？

クミタテ式は英語のp5JavaScriptのコードを、日本語で書かれた図解（通称、図解くん）を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習する、テキスト教材型のプログラミング教材です。

- 動画を見ながら学習する

テキスト教材の補助として動画を作成しています。クミタテ式が初めての方は動画と一緒に学習すると良いでしょう。
動画とこのテキスト教材は期間限定で無料公開しています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。

- 開発環境

OpenProcessingを使ったp5js、Processingを環境を前提としています。

---

■[ここからスタート！]画面のサイズを決める

画面サイズを600x400の固定サイズにしましょう。

---

■背景を黄色で塗りつぶし続ける

drawの中で背景を黄色で塗りつぶし続けましょう。drawの中で毎回背景を塗りつぶすことでアニメーションが実現できます。

---

■2つの目を描く

固定の(200, 200)の位置座標、(400, 200)の位置座標に目を描きます。

---

■目の中に黒目を描く

目の中に黒目を描きましょう。

---

■寄り目にする

では黒目の座標を動かして寄り目にしてみましょう。

---

■マウスの方向に視線を送る

逆三角関数アークタンジェント（atan2）を使ってマウスへの角度を調べ、
調べた角度からcosやsinといった三角関数で黒目を動かしていきます。

- ヒント -
三角関数cosやsinと聞くと難しい印象を持ちますが、やっていることは結局、-1から1の、正規化された方向値を作っているの過ぎません。
角度が分かれば、cosやsinが使える、そう思っておいて良いでしょう。
そして今回は角度を調べるために、逆三角関数アークタンジェントを使ったということです。

---

ここから先は図解くんはありません。
自分で頭を整理して課題に取り組んでみてください。

■課題1. 三角関数の理解を整理する

sinとcosの違いは波で覚えた方が覚えやすいです。

sin波は0、1、0、-1、0という波になります。
例えば、sin(radians(180))とすれば、戻り値は0になります。

一方cos波は、1、0、-1、0、1という波になります。
例えば、cos(radians(180))とすれば、戻り値は-1になります。

なお、Processingにおいては、画面下が数値が高くなるので、この波は逆転する点に注意してください。

■オリジナルゲームに仕上げよう

デモゲームでは、隠れているものを目線を頼りに探す、宝探し風なゲームに落とし込んでみました。
目線をうまく使って、ゲーム性のある作品を模索してみましょう。

（有料）完成コード