​​Day1-2: 基本図形の描画，色の基本
​​京都造形芸術大学
​​オープンレクチャー「クリエイティブコーディング：2020」
​​2020年3月16日（月）〜18日（水）
​​
​​高尾俊介（甲南女子大学 メディア表現学科講師）
​​
​​
​​

​​p5.jsのアカウント作成

​​
​​登録画面へ移動
​​
 
User-uploaded image: 1p5_js_Web_Editor___First_monkey.png
​​Log in or Sign upをクリックする
​​
​​アカウントを登録する
​​
 
User-uploaded image: p5_js_Web_Editor___Signup.png
​​ユーザ名（おまかせ），メールアドレス，パスワード（忘れないように！）を入力してサインアップ（登録）する．ログイン出来なくてもコーディングはできますが，保存が出来ないので注意．
​​
​​ログイン後画面
​​
 
User-uploaded image: 3_2018-10-01_12_31_52.png
​​
  • ​​アカウント登録によってファイルの保存や読み込み，また画像や音声などのアップロードができるようになる．
​​
​​

​​p5.jsの座標について

​​
​​
 
User-uploaded image: +1web.png
​​
​​

​​p5.js の処理の流れ

​​
​​
 
User-uploaded image: +2web.png
​​
​​

​​p5.jsのチートシートと基本図形の描画

​​
​​
 
Dropbox file iconp5cheatsheet-JA
​​
User-uploaded image: image.png
​​
​​

​​塗りつぶし，RGBでの色指定

​​
​​
 
User-uploaded image: image.png
​​
User-uploaded image: image.png
​​
​​

​​作例

​​

​​ファイル名

​​URL

​​001_p5.js Web Editorの初期設定
​​https://editor.p5js.org/takawo2020/sketches/Ulw58xEs
​​002_コメントとプリント
​​https://editor.p5js.org/takawo2020/sketches/gzCrJROS
​​003_点を打つ
​​https://editor.p5js.org/takawo2020/sketches/w5dkfBA7
​​004_線を引く
​​https://editor.p5js.org/takawo2020/sketches/XI17krUl
​​005_背景の色を変える
​​https://editor.p5js.org/takawo2020/sketches/v-REXQ_O
​​006_線の色を変える
​​https://editor.p5js.org/takawo2020/sketches/K5tJnpz5
​​007_円を描く
​​https://editor.p5js.org/takawo2020/sketches/4m-0-8xk
​​008_塗りと線の色を変える
​​https://editor.p5js.org/takawo2020/sketches/je6YTuPk
​​009_四角形を描く
​​https://editor.p5js.org/takawo2020/sketches/q0dlDjLB
​​010_三角形を描く
​​https://editor.p5js.org/takawo2020/sketches/eF4mjFNK
​​011_四辺形を描く
​​https://editor.p5js.org/takawo2020/sketches/eejA22iO