p5.jsを用いたクリエイティブコーディング
p5.jsとは何か
https://i.gyazo.com/eb1fb5dbce3dff32da497162c9b51b6b.gif
クリエイティブ，アート，ビジュアル，インタラクティブな作品制作に特化している
これをブラウザ上で動かせるようにしたのがp5.js
ほぼ同じ関数や使い方をJavaScriptでやれるようになってる
とても便利
shinyaoguri.iconちなみにJavaとJavaScriptは名前似てるけどパンとフライパンくらい違うので注意
p5.jsの名前の由来
元々Processingのドメインがproce55ing.netだったのでP5と呼ばれていたことが由来らしい
パソコン上でCGを扱うための技術
2Dにしろ3Dにしろ至るところでPCはグラフィックを扱う
低レベルなグラフィックAPIがあり，諸々のライブラリやソフトウェアはそれを使っている
低レベルのグラフィックAPI
OpenGL ES（主にモバイル向け，マルチプラットフォーム，p5.jsはこれを使っている） 高レベルなライブラリやソフトウェア
ゲームエンジン
...
ビジュアル制作
...
VR/AR
...
GUI
GTK
Cairo
...
画像処理
...
サイエンス
...
アート，クリエイティブ
Processing
Vvvv
...
クリエイティブな作品を作る方法
別にAdobe PremiereProやAfterEffectsでもクリエイティブな動画は作れる
TouchDesignerを使えばノードベースでコンテンツを作れる
p5.jsではプログラムを使ってコンテンツを作る
クリエイティブコーディングでやる良さ
ともかく自由度が高い
自分でプログラムとして書くので柔軟性や拡張性がある
細かな動作も含めて全て自分で制御するので理解が深まる
データ構造やアルゴリズムなどの勉強になる
他の環境になっても褪せない技術として習得できる
hr.icon
公式のエディタにアクセスしてみる
https://gyazo.com/e1418a130d46f7827487b241db571ce0
再生ボタンを押すと実行
https://i.gyazo.com/57e2965461090292a081270e0fe69c6a.gif
すぐ実行はできる
ログインしてない状態だと編集はできない
アカウントを作成する
自分でもコンテンツを作るためにはアカウント作成が必要
右上の「Sign up」よりアカウントを作成できる
好きな方法でどうぞ
プログラムを編集してみる
例えば以下のようなプログラムに変更
code:color-ball.js
let xPos = 100;
let yPos = 50;
let xDir = 1;
let yDir = 1;
let c = "red";
function setup() {
createCanvas(300, 300);
}
function draw() {
background(220);
fill(c);
ellipse(xPos,yPos,50,50);
xPos = xPos + xDir;
yPos = yPos + yDir;
if (xPos > width-25 || xPos < 25) {
xDir = xDir * (-1);
}
if (yPos > height-25 || yPos < 25) {
yDir = yDir * (-1);
}
}
function mouseClicked(){
c = color(random(0, 255),random(0, 255),random(0, 255));
}
上のコードを実行する
https://i.gyazo.com/cb7066be3d3da75e0494d197d8ef1821.mp4
ボールが画面の中を跳ね返りながら移動
画面をクリックするとランダムに色が変わる
プログジェクトの名前を変える
https://i.gyazo.com/e1c897d3130cd4d7e13e4180f9bdf125.mp4
ランダムで適当なプロジェクト名になっている
自分がわかる名前にしておくと良い
作成したものは全てネット上で公開される
誰でも見れるので，個人情報や著作権に関わるものなど入れないよう気をつける
色々なサンプルがある
https://i.gyazo.com/c140100a0b0a05dbd222ecd28d7a908b.mp4
どんなことができるのか，サンプルがたくさんある
色々と見てみよう
プログラムの説明
code:sample.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
デフォルト状態のコード
大きくsetup()とdraw()で構成されている
setup()はプログラムの実行する最初に1度だけ実行される
createCanvas()ではキャンバスのサイズを決定する
draw()は1秒間に30回呼び出される．つまり30FPSのそれぞれの画面をこの関数が作っていく感じ
background(220)は背景色を220つまりRGBで(220,220,220)のグレーの色に設定するという意味
簡単な図形を書いてみる
code:sample.js
function draw() {
background(220);
circle(50, 60, 100);
}
https://gyazo.com/d9ff146ed6f82c1bd18da4916b26b33e
setup()はとりあえず同じなので省略．以下同じ．
circle(50, 60, 100); の部分で円を中心座標$ (x,y)=(50,60)に直径100の円を書いた
でも色は白で，輪郭に線がある
色を変える
code:sample.js
function draw() {
background(220);
fill(255,0,0);
circle(50, 60, 100);
}
https://gyazo.com/d0b163fae52110968fb92e7ae13ebd7c
fill(255,0,0);という行を追加した．RGB(255,0,0)で塗るという意味
ペンを持ち変えるようなイメージ
code:sample.js
function draw() {
background(220);
fill(255,0,0);
circle(50, 60, 100);
fill(0,255,0);
circle(170, 170, 100);
fill(0,0,255);
circle(320, 330, 100);
}
https://gyazo.com/2d023c9fcd2e78892cd4a31cdf4b6981
円を3つ描いた．色を設定→円を描く→次の色に設定→円を描く→次の色に設定→円を描く
みたいにペンを持ち変えるように手順をプログラムしていく
インタラクティブな要素を追加する
code:sample.js
function draw() {
background(220);
fill(255,0,0);
circle(mouseX, mouseY, 100);
}
https://i.gyazo.com/5dfd973938e2f4b1d5f3ad37cf4d6821.gif
mouseX,mouseYでマウス座標を取れるので，マウス座標に円を描くようにしてみた
つまり，draw()は1秒間に30回実行されていて
1. background(220)で全体をグレーに塗りつぶす（リセット的な）
2. 塗り潰しの色を赤に設定
3. マウス座標に円を描く
4. また1に戻る
background()をしないとどうなるか
code:sample.js
function draw() {
fill(255,0,0);
circle(mouseX, mouseY, 100);
}
https://gyazo.com/c6370eda72b9397f9ed33c87e6a139d4
draw()の度にマウス座標に円を描き続けるので，過去の描画の内容は自動では消えない
ユニティちゃん.iconえ，何したら何ができるかとか機能や関数や変数とか全然わからんけど！！！
shinyaoguri.icon たくさんあり過ぎて紹介しきれないのでリファレンスをみてください
リファレンスを読もう
https://gyazo.com/295b1d0310c1e32e75890c3f4cb7f8d4
リファレンスを見て使い方を確認する
https://gyazo.com/c5cca00b75dcd93d2143e340ac8e9edf
例えばShape（形）＞rect()で四角形の説明を見てみる
https://gyazo.com/30aae0fdb3cbcd45ce7ac69102230c1a
関数の説明と，サンプルプログラム（しかもその場で動作確認ができる）があるのでわかりやすい
まずは小さなものから作ってみよう
たくさんの事例のインプットでどんなことができるのかをイメージしよう
hr.icon
わかる人向け