クネクネ動くヘビのような動きを作る！なぞって学ぶプログラミングドリル(Processing / p5js)

なぞって学ぶプログラミングドリルとは？

この教材は小学生〜高校生までのプログラミング初心者向けに作られた、ゲームプログラミング教材です。
この教材にサンプルコードは登場しません。
Scratchのブロックで構成されたアルゴリズム（設計）だけを提示します。
アルゴリズムをなぞって、コードにおきかえていきましょう。
なお、Processingやp5.jsを想定してアルゴリズムを設計しています。

今回作るもの

カーブしながら移動する、ヘビのような独特な動きを作ります。この操作感をどうゲームに活かすかはみなさん次第です。
技術的には三角関数（sin、cos）が登場します。

動画で学習する

この教材の内容をYouTube動画で解説しています。
動画を見ながら学習しても良いですし、復習などにお使いください。

カーブの軸となる中心点を、とりあえず、赤円で表示する

作成していく過程で混乱するので、先にカーブの中心点を補助として赤く表示しておきます。

// 以下はp5jsでのサンプルコードです。
function setup(){
  createCanvas(600, 400);
}
function draw(){
  background(0);
  fill(255, 0, 0);
  ellipse(300, 200, 10, 10);
}

中心点を変数にする

center_xとcenter_yという変数を作りました。
これらはあくまでも補助となる中心点の座標なので注意してください。

プレイヤーとなる円を表示する

中心点から、距離50離れた場所にプレイヤーとなる円を表示します。

三角関数を使ってプレイヤーの座標を決定する

三角関数を使うためには、まずは角度をラジアン値にする必要があります。
角度をラジアン値に変換する方法は自分で調べてみましょう。
ラジアン値をsin、cosに渡して、距離である50をかけてみましょう。
また、例では0度の場合ですが、90度、180度、270度、360度の場合も見てみて動作を確認してみましょう。

回転させる

度数を管理する変数degreeを用意し、degreeをラジアン値に変換します。
degreeを1ずつ加算していけば回転していくことを確認しましょう。

マウスクリックで中心点を移動させる

中心点であるcenter_xとcenter_yを移動させます。
中心点が移動してもプレイヤーの位置は移動させないようにするため、度数degreeを180加算して真逆に移動させています。

課題1. 補助となっていた中心点を非表示にする

そろそろいらないと思うのでコメントアウトしておきましょう。

課題2. マウスクリックで逆回転させる

逆回転させることでクネクネ動くような演出になります。

自由課題. この動きを使ってゲームを考えて作ろう

あとはあなた次第！
特に思いつかなければ次のスーパー課題に挑戦しても可。

スーパー課題. 尻尾を作ってヘビにしよう

冒頭のGIF動画のように、しっぽを作ってヘビのプレイヤーにしてみよう。
難しいのでスーパー課題にしました。ヒントは配列です。
やり方がわからなかったら動画解説を見てみてください。このスーパー課題も解説しています。

今回やったソースコード

OpenProcessingを使って実際に動作と、ソースコードの確認ができます。

クネクネ動くヘビのような動きを作る！なぞって学ぶプログラミングドリル(Processing / p5js) - OpenProcessing