p5.jsをはじめよう

p5.jsとはビジュアルプログラミング言語ProcessingをJavascriptに移植したライブラリです。

クリエイティブコーディングやVJで用いられるのをよく見かけますが、
この記事では普段のWebページの制作でも使えるかも？なp5.jsの活用方法をまとめていきます。
易しめな難易度の内容です。

ライブラリ用意

まずp5.jsをドキュメントから直接DLするか、CDNで読み込みます
https://p5js.org/get-started/

セットアップ

htmlを用意

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>p5 sample</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="sketch.js"></script>
</head>
<body>
</body>
</html>

今回は別途sketch.jsを用意し、以下のようにp5.jsの記述をしていきます。

sketch.js

function setup() {
}

function draw() {
}

p5.jsの基本

まずはじめにp5.jsの基本の書き方を押さえていきます

sketch.js

function setup() {
    createCanvas(width, height); // canvasの生成
}

function draw() {
    // 描画内容
}

p5.jsではsetup関数、draw関数という二つの関数に主に処理を書いていきます。
setup関数はページ読み込み時一回だけ実行、draw関数は毎フレーム実行されます。

p5.jsの公式サイトではこんなサンプルが紹介されています。

function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}

ellipseは円を描く処理で、実行すると以下のようにシンプルな円が描かれます。

やったね！超簡単！
開発初心者でも数行のコードで簡単に画を描画することができるのがp5.jsの魅力です。

p5.js: Get Started

p5.jsでできること

ellipse以外にはどんな処理があるのでしょうか。
公式ドキュメントに一覧が載っていますが、この記事ではかいつまんで少しだけご紹介します。

2D図形

先ほどの例のような円から四角形、線などが描画できます。
例

ellips(x, y, w, h); // 円
line(): // 線
rect(x, y, w, h); // 四角形

3D図形

setup関数でcanvasを生成するときにwidth, heightの後に WEBGL とを表記するだけで
3D図形を扱えるようになります。

例

bod(x, y, z); //直方体
sphere(radius); // 球
cylinder(radius, height); // 三角錐

アニメーション

アニメーションで表現の幅を増やすこともできます

例

translate(x, y, z); // 3D描画の場合のxyz軸への移動
rotateX(frameCount * 0.01); // x軸方向の回転

その他にもシェーダーを記述できたり、テクスチャをつけたり、色々なことができます。
p5.js reference

p5.jsをwebサイトで利用しよう

ここから発展系で、p5.jsで作ったものをwebサイトに活用してクリエイティブなwebサイトをサクサク作ってみましょう。

この記事ではこんなものを試してみました

webサイトの背景
カーソルで遊ぶ
お絵かき機能をつける

1. webサイトの背景

p5.jsで作った絵をwebサイトの背景に使ってみましょう！
シンプルに、canvasのz-idnexを他のDOM要素より下げているだけですが
なんかとにかくイケてる海外のサイトっぽくなりました。

完成イメージ

sketch.js

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}
function draw() {
  background(255);
  for (var y = 0; y <= 1000; y = y + 500) {
    for (var x = 0; x <= 1000; x = x + 500) {
      noFill();
      stroke(255, 147, 206);
      rotateX(frameCount * 0.01);
      rotateY(frameCount * 0.01);
      box(200, 200, 200);
    }
  }
}

2. カーソルで遊ぶ

p5.jsでマウスカーソルの表現を工夫のあるものにしてみます。

完成イメージ

sketch.js

function setup() {
  createCanvas(windowWidth, windowHeight);
}
function draw() {
  background(0, 30);
  ellipse(mouseX, mouseY, 40, 40);
  fill(230);
  noStroke();
}

draw関数は毎フレーム描画されますが
その都度、半透明のbackgroundも描画することでマウス追従の図形の色が時間が経つにつれて薄くなる、という感じの表現です。

こちらの記事を参考にさせていただきました：
https://www.i-ryo.com/entry/2019/07/21/194243

3. お絵かき機能をつける

マウスやスマホのタッチで絵が描けるお絵かき機能も、p5.jsなら簡単に実装できます。

完成イメージ

sketch.js

function setup() {
  createCanvas(windowWidth / 2, windowHeight / 3);
  background(8, 91, 26);
}

function touchMoved() {
  smooth();
  stroke(255);
  strokeWeight(4);
  line(mouseX, mouseY, pmouseX, pmouseY);
  return false;
}

書かれたもののの削除はsetup関数を呼ぶことでできそうです
（ <a href="javascript:setup()">消す</a> とか）

ついでに書かれたものをpngとしてダウンロードできるボタンとかつけると楽しそうですね。

まとめ

p5.js書いていきたい。

ちなみにWebページには使えなさそうですが、
楽しいp5.jsの使い方記事を最近書いたので発展系としてぜひこちらも。