0. ワークショップはじめるよ
1. はじめに
はじめまして．高尾俊介（たかおしゅんすけ）といいます．この講座では「きれい」や「面白い」をプログラミングで作る，クリエイティブコーディングという分野を，実際にプログラムを実行したり，操作をしながら体験します．特に今回は「マウスを使ってプログラミングで絵を描いてみる」ということを，みなさんと一緒にやっていきます．
プログラミング，なんだか難しそうな感じがしますか？ここで苦手だなって思った人も，心配しないでください．実際にマウスで動かしながら，プログラムの解説を読んでもらって，気軽に少し書き換えたりしましょう．そうやって，絵筆や画用紙に描くのではないやり方で絵を描いてみましょう．ほんの少し書き換えるだけで面白い絵ができるはずです．それでは，さっそく始めていきましょう．
今回のテーマは「波」です．寄せては返す，あの波．茅ヶ崎は自然が豊かで，海がとても綺麗なところですよね．だから，海から見える景色や，みんなが知っている「えぼし岩」をプログラムで表現できたらきっと素敵です．だから作るものはそういうものを目指していきたいと思います．コードを書きながら海を思い出したり，窓の外を眺めたりしてもらうと良いです．夏の海の感じだったり，今の冬の海の感じも表現できるかもしれないですね．
2. 最初のプログラムと動かし方の説明
まずはプログラムの動かし方を説明します．最初のプログラムがこの下にあります．「▷ PLAY」ボタンを押してみて，表示された右側の四角の中でマウスをクリックしたり、ドラッグしてみてください（もしくは、四角の中でマウスをクリックしたり、マウスのボタンを押したまま動かしてみてください）．
「▷ PLAY」ボタンと「□ STOP」ボタンを押すと，プログラムの絵が見えたり消えたりします．このプログラムではマウスをクリックした位置に円が出てきますね．最初に出ていた画面のアルファベットで書かれているものがプログラム（＝コード）です．プログラムの内容によって，「▷ PLAY」ボタンを押したときの結果が変わります．
操作が終わったら「□ STOP」ボタンを押して最初のプログラム画面に戻ってきてください．「▷ PLAY」ボタンと「□ STOP」ボタンを行き来しながらプログラムを書き換えて行くのが，p5.jsでのプログラミングの基本です．//で書かれた部分はプログラムの中のメモのようなものでその箇所の説明を書いています．
では，少しだけコードを書き換えてみましょう．14行目のcircle(mouseX, mouseY, random(100));の100の部分を25に，circle(mouseX, mouseY, random(25));となるように書き換えて実行してみてください．どうなるでしょうか．正しく書けると円が小さくなります．書き換えてエラーが出たり動かないときは，「Revert」ボタンを押すともとに戻るので，改めて書き換えてみましょう．
circleという命令は，円を描く中心のX座標，Y座標と大きさを指定すると円が描けます．今はマウスのXY座標（mouseXとmouseY）に大きさが0〜25pxの円を描くという命令になりました．画面に対する円の大きさが変わると，印象も変わりましたね．
プログラムは一つ一つを全て理解する必要はありません．今回は用意されたプログラムを少し書き換えていきます．数値を変えたりして，結果がどんなふうに変化するかを楽しみましょう．
3. 波ってどんな形？マウスで描いてみよう
下の書き換えたプログラムを実行して，結果の画面で，波のイメージをマウスで描いてみましょう．マウスをドラッグして，あなたの考える波のイメージを線で表現してみてください．皆さんの印象を描くことが大事なので，すごく丁寧に描こうとしなくても良いですし，なんとなくのイメージからはじめてOKです．
描けたら次のステップに進みましょう．
4. 「sin（サイン）」について
私達が浜辺で眺める波は打ち寄せたり引いたりしますよね．先程，ゆらゆら揺れている水面の感じを描いた人もいるんじゃないでしょうか．では，行き来するような波をずっと動くプログラムとしてどうつくればよいでしょうか．「三角関数」という便利な考え方があり，今回はその中でもsin（サイン）をつかって波を描きます．三角関数については高校の数学で学びますが，詳しく知らなくても大丈夫なので，使う命令から逆引きで性質を理解しましょう．
sinのもっとも大事な性質は，sinに何か数値を教えてあげると，-1〜1の間の値を返してくれます．なんだか難しそうですね．大丈夫です．今回覚える必要があるのは，以下の3つの性質です．
sinに値を教えると，どんな値を教えても，必ず-1から1の間の値が返ってくるsinに1，2，3，….のように連続して少しずつ変化する値を教えてあげると，返ってくる値も連動して少しの変化になるsin同士は，何回掛け算しても結果の範囲は-1〜1の値になる
試しにsinをつかったプログラムを実際に動かしてみましょう．
15行目のlet x = width / 2 + sin(frameCount * 1) * 100;の部分をみてください．sin()の中にframeCountが入っているのが分かりますね．frameCountは実行されるたびに数値が1ずつ増えます．画面中央に数値を表示しているのがそれです．どんどん増えます．この行では，増えていく数値をframeCountをsinに教えてあげる＝sin(frameCount * 1)ことをしています．試しにframeCount * 1の1を3や5など他の数字に変えて．「▷ PLAY」ボタンを押してみてください．動きのスピードが変わりますね．ただ「円が動く範囲」は変わってないですよね．それがsinにどんな大きな／小さな数値を教えてあげても-1から1の範囲に収まるということです．この行ではsinが教えてくれる-1から1までの間で変化する値に100を掛け算して，円を-100から100の範囲で変化させています．
5. 寄せては返す波を「sin（サイン）」を使って描く
次のプログラムではsinを使って計算した高さを，連続する線としてつなげて波を表現してみます．細かい命令は読み飛ばして大丈夫です．プログラムの数値を変更したり，「▷ PLAY」ボタンを押して画面上でマウスを動かしてみてどう変化するか，遊んでみましょう．
今回画面上のマウスの位置を取得して，波の細かさ（横方向）と波の大きさ（縦方向）を変化させてみます．マウスを動かして，自分の好きな波の感じを探してみてください．プログラムではfreqとvelという変数（数値などを保存できる箱のようなもの）にマウスの位置を取得して波の大きさや穏やかさを計算しています．
6.波を重ねてみよう！
実際の海では，波がいくつも重なって動いています．波の重なりを画面上で表現するには，これまで描いた1つの波を，縦にずらしながら描くと上手くいきそうです．プログラミングには命令を繰り返して実行する便利な機能があります．実は波を描くのにも使っているfor文というものがそれです．for文を使って縦方向に基準位置をずらすことで，波を複数描いてみます．
xStepは横方向の1ステップで移動する量です．width/100は100分割してるイメージです．数字を小さくすると粗くなります．yStepは波の画面上に現れる波の数が関係しています．5を10にすると波の数も10に増えます．xStepやyStepの分割数（100や5の部分）の数値を0以外の数字に書き換えて実行してみて，どのようになるか確認してみてください．0だとフリーズするので注意してください．
7.更にアレンジしてみよう
波の形ができてきたので，色や影をつけたり，アレンジしてより茅ヶ崎の海らしくしてみましょう．
最後に，せっかくなので3行命令を付け足しましょう．32行目の部分を開業して，以下3行の命令を書き足してください．コピーアンドペーストしてもOKです．
noCursor();textSize(100);text("?",mouseX,mouseY);
noCursorはカーソルを実行画面上で非表示にします．残りの2行は絵文字を表示するプログラムです．
文字の大きさを変更したり，以下の絵文字から，皆さんの思う茅ヶ崎の風景に重ねて置き換えてみるのも良いかもしれません．?の部分をコピーアンドペーストで書き換えてみてください．
? ? ? ? ? ? ? ? ⛵️僕はふわふわとさせたかったので，以下のように書き加えました．?している感じが作れて気に入っています．
text("?", mouseX, mouseY+sin(frameCount) * 50);8. 最後に
クリエイティブコーディングの体験はいかがだったでしょうか．楽しんでもらえたら良いのですが，理解が難しい部分もあったかもしれませんね．全部を理解しなくても，今回のように少し書き換えるだけで，「自分だけの」プログラムに変わっていくのがクリエイティブコーディングの楽しいところです．そこに正解や間違いはありません．作ったものを誰かに見せたり，それを更に書き換えてもらったりして，変化することを楽しんでもらえたら嬉しいです．