p5.jsでクリエイティブコーディングを体験しよう (全10回)
p5.jsを使ってクリエイティブコーディングの基本的なトピックについて学んでいきます。
このレッスンでは p5.js 0.7.2 を使用しています。
-
#01 完成版で遊んでみよう (02:31)
- 概要
- 完成版の確認
- p5.jsの紹介
-
#02 描画領域の設定をしよう (02:39)
- 実行環境の使い方
- setup()
-
#03 グリッドを作ってみよう (01:51)
- グリッドの描画
-
#04 二重ループを使ってみよう (02:48)
- forループ
- 二重ループ
-
#05 円の数を増やしてみよう (02:08)
- 変数の導入
-
#06 乱数を使ってみよう (02:21)
- random()
- メリハリの付け方
-
#07 色に応用してみよう (02:44)
- 色への応用
- 配色アルゴリズム
-
#08 HSB色空間を使ってみよう (02:37)
- HSB色空間
- HSBでの配色
-
#09 作品に動きをつけてみよう (02:40)
- draw()
- mouseX, mouseY
- 軌跡の作り方
-
#10 マウスとの距離を使ってみよう (02:43)
- dist()
- 三角関数の利用
補足情報 p5.jsのレッスンについて
この動画で使われているp5.jsについては以下のレッスンを参照してください。
・p5.js入門 (全14回)
https://dotinstall.com/lessons/basic_p5js