マウスの動きに合わせて、赤い軌跡が描かれるようにしてみましょう。

まずはこちらの動画をご覧ください。

今回のレッスンではこれを作っていきます。
といっても、とても簡単です。

コード全体を次のように変更してください。

let W = 800;
let H = 800;

function setup() {
  createCanvas(W, H);
  noStroke();
}

function draw() {
  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 25, 25);
}

たったこれだけでOKです！
ゲームを起動して、動きを確認してみてください。
マウスの動きに合わせて、赤い軌跡が描かれましたか？

それではコードを解説しています。
ただ、少し難しいかも知れないので、よくわからないと思ったら気にせず先に進んでしまっても構いません。
プログラミングは、色々とコードを書いていくうちに、だんだん理解が深まっていくものだからです。
あまり気負わずに取り組んでいきましょう！

noStroke();

まずこちらのコードは、枠線を表示させないという意味になるのですが、あまり重要な部分ではないので、ここではいったん「そんなものか」と思って先に進んでもらっても大丈夫です。

function draw() {
  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 25, 25);
}

この部分が重要です。
この部分で、マウスの動きに合わせて赤い軌跡を描画する処理を行っています。

まず draw 関数について説明します。
（関数について詳しく知りたい方は次の入門コースをご覧ください： 関数とは - 入門コース ）

draw 関数はライブラリに予め用意されている関数で、ゲーム起動中、1秒間に何十回も繰り返し実行され続けています。

draw 関数の内部には次のような処理を記述しています。

fill(255, 0, 0);
ellipse(mouseX, mouseY, 25, 25);

まず、

fill(255, 0, 0);

という部分で、色を赤色に設定しています。
（色の指定方法について詳しく知りたい方は次の入門コースをご覧ください： 色を変えよう - 入門コース）

次に、

ellipse(mouseX, mouseY, 25, 25);

という部分で、マウスがある位置に円を描画しています。
円を描画するには ellipse を使います。

ellipse(X座標, Y座標, 横幅, 縦幅);

のように指定します。
mouseX と mouseY は、ライブラリに予め用意されているマウスのX座標とY座標を保持している変数です。
これで、マウスがある位置にサイズ25×25の円が描画されます。

以上が draw 関数の内部に記述されているので、
1秒間に何十回も、マウスがある位置に赤い円が描画され続けます。

そして結果として、マウスの動きに合わせて赤い軌跡が描かれることになります。

いかがでしょうか。
もしかしたら少し難しくて分かりにくかったかも知れません。
もしよく分からなかった場合は、気にせず次に進んでしまって構いません。
プログラミングは、色々とコードを書いていくうちに、だんだん理解が深まっていくものだからです。
以下にコード全文を載せていますので、そのままコピーしてオンラインエディタに貼り付けて、次に進みましょう！