クリエイティブコーディング（p5.js）入門（高尾俊介）第3回
以下の講義を進めていきます。
【2020後期】プログラミングB – Takawo Shunsuke | 高尾俊介
今回は第3回目。
授業の狙い
プログラミングは現代社会のさまざまな場で使われています．「プログラミング」は便利で役に立つアプリを作るためだけのものではありません．風景を観て絵を描いたり，印象的な出来事を詩で詠うことと同じように，表現のための道具としてプログラミングを捉える「クリエイティブコーディング」と呼ばれる分野は近年新しい表現の手法として注目されています．これはプログラミングを専門家（プログラマ）だけのものではなく，私たちのような創造的生活者へとひらくものです．
この授業ではJavaScriptで動作するクリエイティブコーディング環境p5.jsでウェブ上で動作するインタラクティブなコンテンツ制作の基礎を学びます．
以下は講義の内容と実施事項。
第3回の講義のリンクはこちら。
■基本描画で色々描いてみる
以下のものを使いながら、いろいろ描画する。
- point()
- line()
- rect()
- ellipse()
- quad()
- triangle()
- arc()
■よくあるエラー
以下のものがよくあるエラー。
- ;←セミコロンを忘れやすい．
- または;セミコロンではなく: ←（コロン）を使ってしまっている場合がある．- , ←(カンマ)ではなく ． ←（ピリオド）を使ってしまっている．
- ｛ と ｝ ，（と）が対になっていない。
｛ ｝が多重になるときは要注意。
■今回の課題
以下が、今回の課題。
＜課題＞
今日覚えた図形描画の命令をつかって自由にプログラミングしてみよう．
ロボットをコードで描いてみよう- 使用する命令
- `ellipse(x,y,w,h)`
- `rect(x,y,w,h)`
- `line((x1,y1,x2,y2);`
- 着色は自由．
あっさりめの色使いにしてみた。
動かしてみると、こんな感じ。
＃絵を動かすためのコード
draw関数のbackgroundのあとに追記。
translate(width/2+sin(frameCount/33)*100,height/2);
scale(tan(frameCount/100%(PI/2)));
translate(-width/2,-height/2);
以上です。引き続きやっていきます。
