情報学基礎実習 「p5.js」(2024)
https://gyazo.com/616a72d15d2143b72922e62af01f55c7
授業の目的
コーディングによる画像/映像表現を学ぶ
参考
次年度以降に学習する、ArduinoやProcessingの敷居を下げる
はじめに
p5.js Web Editorのアカウントを作る
右上の「Sign up」をクリックしてアカウントを作成
User Nameは任意
p5.js web editorで共有したコードは、インターネット上に公開される
第三者に個人が特定されたくない場合は、匿名性の高い名前にすること
メールアドレスも任意
教材
p5.js 基礎編
p5.js 発展編
映像教材
p5.js reference (関数一覧)
課題
インタラクティブなモーショングラフィックスを作成する
サンプル
ルール
コードは50行以内
キャンバスサイズは 400 x 400 のみ
乱数を1つ以上使用する
インタラクションは、マウスのカーソル移動、マウスの左クリックのみ (両方でも、片方だけでもいい)
授業資料の内容を超越しても構わない
参照したWEBや文献等がある場合は、必ずコード中にコメントすること
安易なコピペではなく、理解したうえで書き直すこと
悪質な場合は0点をつける
作品の意図など、伝えたいことがあれば、コード中にコメントしてもよい
コメントは50行制限に含めない
提出された課題は公開する
2020年度のまとめサイト
2024年度のまとめ
ヒント
まずは授業資料のコードを改造するところから始めると楽
乱数、インタラクションは、必ず入れましょう
既視感のある小綺麗なデザインよりも、自分なりの創意工夫を高く評価します
自分が面白いと思うもの、かっこいいと思うものを、遊びながら作りましょう
締め切り
授業翌週金曜の23時59分まで
課題の提出方法
1. p5.js web editorで、コードのURLを入手する
まずFile -> Saveを選択し、コードを保存する
ファイル名は任意
次にFile -> Shareを選択してコードを共有し、FullscreenのURLを入手する
https://gyazo.com/477b6d1f7710bb55b34b7fdd3e1c0790 https://gyazo.com/306625c82be0ebafd744c00ab710c82b
2. 以下のFormから、作品を提出する
10月25日(金) 15時00分〜11月1日(金) 23時59分まで
名前、学籍番号、前項で入手した作品のURL(Fullscreen)、作品のコードを入力し、送信する
留意事項
p5.js web editorの性質上...
提出されたコードは第三者からも閲覧可能になる
課題提出後もコードの更新はできる
成績が確定するまで、提出したコードをp5.js web editorから削除してはいけない
2025年4月1日以降は自由