見出し画像

p5.jsを使ってウェブサイトにジェネラティブアートを埋め込む

BAKETSU HEAD

自分のサイトを立ち上げることを決めた際、「どうせならコーディングによるアート表現的なこともできないか」と考えた。そこで真っ先に思い浮かんだ手段はp5.jsだった。

現在自分のサイト（上記）には、p5.jsによるクリエイティブコーディングと、それによってブラウザ表示時に毎回生成されるものをサイトに埋め込む設定を行なっている。本記事ではその方法を説明したい。


p5.jsとは何か

p5.jsというのは、一言で表すと「Javascriptでクリエイティブコーディングできるようにするライブラリ」である。ProcessingというJavaベースのプログラミング言語が元々存在し、Javascriptでもできるようにしたものが、このライブラリだ。

Javascriptでクリエイティブコーディングできるということは、すなわちウェブブラウザ上での表示が簡単（という表現が適切かはわからないが）ということである。


まずはp5.jsでクリエイティブのコードを用意する

まずはクリエイティブを生成するコードを用意する。ここについては、各々が表現したいものとかあると思うので、特に説明はしない。
が、p5.jsを触ったこともない、そもそもプログラミングもやったことがないという人もいると思うので、以下のようなページをまずは観ながらスタートするとよいだろう（そのほか"p5.js"でググれば、色々と参考になる記事は出ます）。

また「こんな表現はどうやってコーディングすればよいのか」という悩みがあれば、「OpenProcessing」を参考にするとよいだろう。クリエイティブのアイデアだけでなく、それをどのようなコードで実現しているのかをチェックすることができる。


ウェブサイトの背景に埋め込む

ウェブサイトの背景に埋め込む場合であれば、やることはシンプルだ。
ウェブサイトの<head>内にて、「用意したクリエイティブのコードが記述されたJSファイル」と「p5.jsのライブラリファイル(p5.js あるいは p5.min.js)」の2つを読み込めばOKである。

自動的に<body>の最後のほうに<canvas>という要素が作られ、ウェブサイトの背景に表示されるようになる。（CSSにて<main>などのbackgroundを指定していると、隠れてしまう場合があるので注意すること。）

▼参考ページ


ウェブサイトの特定の箇所に複数埋め込む

ウェブサイトの特定の箇所に複数埋め込みたい場合は、少し手間をかける必要がある。

まずはウェブサイトに、以下のような埋め込みたい箇所を準備しておく。

<div class="nodes" id="node-1"></div>


次に、用意したクリエイティブのコードを加工する。以下のような感じで、元々用意したコードを「code-1」という関数にまとめること。

これは、p5.jsが用意している「インスタンスモード」と呼ばれる書き方に沿ったものである。これを活用することで、複数用意したクリエイティブのコードにて使用している関数・処理がバッティングしなくなり、それぞれのコードが適切に処理されるようだ。

var code-1 = function(p){

  p.setup = function(){
    p.createCanvas(canvasElement.clientWidth, canvasElement.clientHeight);
    p.frameRate(1);
    p.noLoop();
  }
  p.draw = function(){
    p.createNoisePattern(...);
  }

  p.createNoisePattern = function(...){
    p.push();
    p.background(255);
    p.noFill();
    
    for(let i = 0; i<_w; i++){
      for(let j = 0; j<_h; j++){
        ...
      }
    }
    p.pop(); 
  }
}

new p5(code-1, "node-1");

そして、末文の「new p5(code-1, "node-1")」にて、表示したいクリエイティブのコードとウェブサイトの箇所（id属性）を一致させる。


あとは上記を応用して、以下のように、掲載箇所とp5.jsのコードを複数用意すれば、ウェブサイトの様々な箇所でクリエイティブを表示することができる。

▼HTML側

<div class="nodes" id="node-1"></div>
<div class="nodes" id="node-2"></div>
<div class="nodes" id="node-3"></div>

▼JS側

var code-1 = function(p){
  ...
}
var code-2 = function(p){
  ...
}
var code-3 = function(p){
  ...
}

new p5(code-1, "node-1");
new p5(code-2, "node-2");
new p5(code-3, "node-3");


▼参考ページ


おまけ：複数のコードのうちのどれかをランダムで埋め込む

先ほど紹介した、p5(sketch, node) のsketchとnodeをそれぞれランダムに入れ替えることができれば、ウェブサイトにおける表示箇所と内容もランダムにすることができる。

ということで、以下のコードがその一例。
表示したいsketchとnodeの配列を用意しておいて、ウインドウの読み込みが完了されたタイミングで、ランダムにsketchを選んでp5()を呼び出している。
以下のコードを仮に実行した場合、「node-1の場所にはcode-4」「node-2にはnode-1」「node-3にはcode-3」という感じで用意した5つのsketchから、3つランダムに抜粋して各nodeへ表示できるようになる。

window.onload = function(){
  let sketchs = new Array(code-1, code-2, code-3, code-4, code-5);
  let nodes = new Array("node-1","node-2","node-3");

  for(i=0;i<nodes.length;i++){
    num = Math.floor(Math.random()*sketchs.length); 
    new p5(sketchs[num], nodes[i]);
    sketchs.splice(num,1);
  }
}

ポイントとしては、同じsketchが用意したnodeに複数表示されるのを避けるため、一度選択したsketchはsplice()で消去している。ただし、これを行う際はsketchをnodeよりも多く準備しておく必要もある（じゃないとfor文の途中でsketchsが空になり、エラーを起こす）ので、注意しておくこと。

おわりに

という感じで、BAKETSUHEADのサイトは、上記の手順を踏まえてコードによるクリエイティブを埋め込んでいる。本当は、表示する全てのクリエイティブに動きをつけたかったのだが、ブラウザの処理パフォーマンスなどを考えると、断念せざるをえなかった。

とはいえ「ブラウザをリロードする / 別のページへ遷移するごとに未知の絵が表示される」というのは、自分で作っておきながら毎回ちょっとワクワクするものだ。今後はもう少しバリエーションを増やしていきたい。


この記事が気に入ったらサポートをしてみませんか？