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()
- 三角関数の利用

2018年10月25日

この動画で使われているp5.jsについては以下のレッスンを参照してください。

3分動画でマスターできる、初心者向けプログラミング学習サイトです。

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト