p5.js(Processing)
andsaki.icon
前々から興味のあった。p5.jsを勉強してみました！
荒木くんごめん！
IDE:
オンラインエディタ:
p5.jsはProcessingをJavaScriptで書けるようにできるライブラリ。ビジュアルコーディングツールを使わなくてもwebブラウザ上でJavaScriptでクリエイティブコーディングができるようになります。アニメーションやCG（コンピュータグラフィックス）などのアートを表現したい時に使うと良い。
書いてみる
code: p5.js
function setup() {
createCanvas(400, 400); // キャンバスのサイズ
}
function draw() {
background(220); // 背景色
ellipse(width/2, height/2, mouseX, mouseY); // 楕円
}
result
https://gyazo.com/cc744be22efe60d35c162ec1a877729e
code: p5.js
function setup() {
createCanvas(400, 400);
}
function draw() {
ellipse(mouseX, mouseY, 10, 10);
}
result
https://gyazo.com/21cb2d6d73694d33d92b1d1e5f1bf230
setup()は初期設定で起動時に一度だけ実行される。draw()はアニメーションの繰り返しの設定。(widthは横幅、heightは縦幅、mouseXはカーソルのx座標、mouseYはカーソルのy座標をとる)
座標は以下の図。左上を原点とし、xが右へyが下へ大きくなる。
https://gyazo.com/5ba145010dc89cb0f80c23436a8059b5
table:基本図形
point(px, px); 点
line(px, px, px, px); 線
triangle(px, px, px, px, px, px); 三角形
rect(px, px, px, px); 長方形
arc(px, px, r, r, 0, angle); 円弧
ellipse(px, px, w, h); 円
quad(px, px, px, px, px, px, px, px); 四辺形
Ex 1 書いてみよう！
https://gyazo.com/afb71a7d476ba52adacfdeb76bde5745
クリックした時だけ書く
mousePressed()はマウスのクリック時の動作を設定する命令です。
code: p5.js
function setup() {
createCanvas(400, 400);
}
function mousePressed() {
ellipse(mouseX, mouseY, 10, 10);
}
result
https://gyazo.com/548e1df7a0880cb16af746b40cd62140
色を指定する
background(200, 0, 0, 30)の第一引数をR、第二引数をG、第三引数をB、第四引数を透明度で指定する。16進数表記も可。background(#FFCC00, 30)
code: p5.js
function setup() {
createCanvas(255, 255);
}
function draw() {
background(mouseX, 0, mouseY);
ellipse(width/2, height/2, mouseX, mouseY);
}
result
https://gyazo.com/e400bedfe25c69e3f76fe7d17ecccc21
table:
stroke(R, G, B); 線の色
strokeWidth(px); 線の太さ
fill(R, G, B); 塗り潰しの色
noStroke(); 線を書かなくする
text(string, x, y); 文字を書く
textSize(px); 文字サイズ
code: p5.js
function setup(){
createCanvas(600,425);
background(255);
noStroke();
}
function draw(){
fill(random(255), random(255), random(255), 30);
ellipse(random(width), random(height), random(100));
}
result
https://gyazo.com/1e89aa0d571561868ac8971e3eea94b4
フェードアウト
半透明な白で画面を塗りつぶすようにすると、描いた図形が少しずつフェードアウトしていくように表現できます。
code: p5.js
function setup() {
createCanvas(255, 255);
}
function draw() {
fadeToWhite();
stroke(mouseX, 0, mouseY);
ellipse(mouseX, mouseY, 10, 10);
}
function fadeToWhite() {
noStroke();
fill(255, 30); // 半透明の白
rect(0, 0, width, height);
}
文字を書く
code: p5.js
function setup() {
createCanvas(255, 255);
}
function draw() {
fadeToWhite();
fill(mouseX, 0, mouseY);
textSize((mouseX+mouseY)/2);
text("Hello", mouseX, mouseY);
}
function fadeToWhite() {
fill(255, 30);
rect(0, 0, width, height);
}
物理運動
createVector(x, y, z)でベクトルを作ることができる。
code: p5.js
const speed = 5; //速度
const r = 5; //半径
const n = 30; // 数
const angle = 2 * Math.PI/n; //角度
const g = 9.8; // 重力加速度
const fr = 60; // フレームレート
let balls = Array(n).fill(null);
function setup() {
createCanvas(255, 255);
background(0);
noFill();
stroke(255, 255, 255);
frameRate(fr)
balls = balls.map((ball, i) => {
const addx = Math.cos(angle * i);
const addy = Math.sin(angle * i);
const vecLocation = createVector(width / 2 + addx, height / 2 + addy);
const vecVelocity = createVector(speed + addx, -1*speed + addy);
const vecAcceleration = createVector(0, g/fr);
return new Ball(vecLocation, vecVelocity, vecAcceleration);
});
}
function draw() {
fadeToBlack();
balls.forEach((ball) => {
ball.move();
ball.draw();
});
}
function fadeToBlack() {
noStroke();
fill(0, 30);
rect(0, 0, width, height);
}
class Ball {
constructor(_location, _velocity, _vecAcceleration) {
this.location = _location;
this.velocity = _velocity;
this.vecAcceleration = _vecAcceleration;
}
move() {
this.velocity.add(this.vecAcceleration); // 加速度を速度に足す
this.location.add(this.velocity); // 速度を位置に足す
if (this.location.x - r <= 0) {
this.location.x = r;
this.velocity.x *= -1;
}
if (this.location.x + r >= width) {
this.location.x = width - r;
this.velocity.x *= -1;
}
if (this.location.y - r <= 0) {
this.location.y = r;
this.velocity.y *= -1;
}
if (this.location.y + r >= height) {
this.location.y = height - r;
this.velocity.y *= -1;
}
}
draw() {
const { x, y } = this.location;
stroke(x, y, 0);
ellipse(x, y, r * 2, r * 2);
}
}
3Dアニメーション
createCanvasの第三引数にWEBGLを追加できる。
code: p5.js
function setup(){
//3Dなら 引数にWEBGLを追加
createCanvas( 200, 200, WEBGL);
}
function draw(){
background(220);
//3DなのでX,Y,Zで設定
normalMaterial();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
torus(50, 20); //ドーナツ型
}
result
https://gyazo.com/870916d5fdf9bbd4f92d403568339088
nomalMaterial: 光の影響を受けないマテリアル
torus(radius, tubeRadius, detailX, detailY)
サイトに組み込む
position: fixedにすればWEBサイトの背景にできる！！
code: p5.js
const n = 6;
function setup() {
canvas = createCanvas(windowWidth, windowHeight, WEBGL);
}
function draw() {
background(255);
for (let i = 0; i < n; i++) {
noFill();
stroke(255, 147, 206);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(200, 200, 200);
}
}
code: p5.css
position: fixed;
top: 0;
}
result
https://gyazo.com/f7bf051a622d3313d5c7f90dcc308ca2
実際に書いてみよう！
https://gyazo.com/471db1d93feb89bedc4dd9545b0f97bc
連続性のあるゆらぎを提供するnoise関数でsinの式をランダムに変化させている
noise関数がすげえ
onuma.icon
p5.jsの利点ってweb資産じゃないprocessingと実装コードがほぼ同じだから、そのコードを簡単にwebで試せるところが大きいですね。 勉強会で見ていたサンプルもp5.jsじゃなくてprocessingのコードでしたし。
公式サンプル
作品集
音に絡めたこともやってみたかったが準備できなかったので次回やります！
reference