Help us understand the problem. What is going on with this article?

【p5.js】p5.jsでクリエイティブなwebサイトを作る

p5.jsをはじめよう

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

クリエイティブコーディングやVJで用いられるのをよく見かけますが、
この記事では普段のwebサイト制作で使えるようなp5.jsの活用方法をまとめていきます!

p5.jsを仕事で書きたい!
でも実用的でないと書けない!
webサイトで良い感じに組み込んで良い感じの見た目が作れるんだよとアピールして
仕事でp5.jsを書いていきたい全ての人に捧げます

インストール

まずp5.jsをインストールします。
https://p5js.org/get-started/
この記事では詳細を割愛します…!
こちらの公式ドキュメントより直接DLするか、CDNで読み込んでください。

セットアップ

ベーシックな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); // width, heightにcanvasの大きさを記述
}

function draw() {
    // 図形など
}

基本的にp5.jsでは
setup関数でcanvasを生成し、draw関数にcanvasへ描画する図形を書いていきます。
(setup関数はページ読み込み時一回だけ実行、draw関数は1秒に60回ごと実行されます :引用

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

function setup() {

}

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

ellipseは円を描くコンポーネント。
実行すると以下のようにシンプルな円が描かれます。
スクリーンショット 2019-08-27 15.46.54.png
はい。超簡単。
コード数行で簡単に図形を描くことができました。

p5.js: Get Started

p5.jsでできること

さて、基本形はわかりましたが、実際書いていくにはどんなコンポーネントを使うことができるのでしょうか?
公式ドキュメントに一覧が載っていますが、この記事ではかいつまんで少しだけご紹介します。

2D図形

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

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

3D図形

3Dを扱う場合にはsetup関数でcanvasを生成するときにwidth, heightの後にWEBGLとを表記する必要がありますので注意しましょう。


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

アニメーション

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


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

その他にもシェーダーを記述できたり、テクスチャをつけたり、色々なことができます。
公式リファレンス

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

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

この記事ではこんなものを試してみました
1. webサイトの背景
2. カーソルで遊ぶ
3. お絵かき機能をつける

1. webサイトの背景

p5.jsで作った絵をwebサイトの背景に使ってみましょう!

完成イメージ
gif.gif

p5.jsのcanvasをz-index=-1にすることで、背景にクリエイティブな図形を表示させることができます。

cssの設定はこちらの記事が参考になります!
https://qiita.com/ryomeguro/items/02e0f4b40f9cc8d3045e

JSはこちら

sketch.js
 function windowResized() {
            resizeCanvas(windowWidth, windowHeight);
            canvasSetup;
        }
        function setup() {
            canvas = 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);
                }
            }
        }

なんだかイケてるIT企業のコーポレートサイトみたいですね。
仕事で超使えそうです。

2. カーソルで遊ぶ

p5.jsでマウスカーソルの表現をちょっとリッチに変えてみましょう!

完成イメージ
gif (1).gif

これは1の背景と同じようにcss側でcanvasのz-indexを一番低くしておき、
また、backgroundの色を黒に設定しておきます。

sketch.js
function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    canvasSetup;
}
function setup() {
    canvas = createCanvas(windowWidth, windowHeight);
}
function draw() {
    background(0, 30);
    ellipse(mouseX, mouseY, 40, 40);
    fill(230);
    noStroke();
}

setup関数の読み込みが一回に対して、draw関数は基本的に1フレームごとに都度描画されます。
その都度backgroundも描画されていますので
backgroundの色を半透明にすることでマウス追従の図形の色が時間が経つにつれて薄くなる、という表現を可能にしています。

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

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

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

完成イメージ
スクリーンショット 2019-08-28 12.41.18.png

コードはこちら

sketch.js
function setup() {
    canvas = createCanvas(windowWidth / 2, windowHeight / 3);
    background(8, 91, 26);
}

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

function download() {
    var canvas = document.getElementById("defaultCanvas0");
    var link = document.getElementById("DLlink")
    link.href = canvas.toDataURL()

    // document.getElementById("canvasImage").src = canvas.toDataURL()

    link.click()
}

消すボタンは
<a href="javascript:setup()" class="btn">消す</a>
こんな感じでhtmlからもう一度setup関数を呼び出しています。

canvasをpngに変換してダウンロードさせるコードはこちらを参考にさせていただきました!
https://qiita.com/iwaimagic/items/1d16a721b36f04e91aed

まとめ

p5.jsは簡単なことから複雑な描画までを実現できます。

web表現のアイディアのひとつとして、カジュアルに仕事で使っていきたいですね♪

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away