Processingといえばグラフィカルなアート作品を生み出す言語として知られています（またはArduinoで使える言語として知っている方も多いでしょう）。しかし専用の言語を覚えないといけないという点において利用を躊躇してしまっている方も多いはずです。 そんな方に使ってみて欲しいのがp5.jsです。グラフィックス、インタラクティブな体験を生み出すJavaScriptライブラリです。

p5.jsの使い方

単純に線が上がってくるだけの例。

上のデモコードは次のようになります。setupとdrawで構成されます。非常に分かりやすいです。

var y = 100;

function setup() {
  createCanvas(720, 400);
  stroke(255);
  frameRate(30);
}

function draw() { 
  background(0);
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  line(0, y, width, y);  
} 

ボールが落ちるデモ。色の違うゾーンに入ると粘性が変わっているのが分かります。

クリックで矢印が出現するインタラクティブなデモ。

バネのような動き。

p5.jsを使えばProcessingのような書き方で（でも文法はJavaScriptです）、グラフィカルなデジタル作品を容易に作成できます。さらにJavaScriptらしく、マウス操作などのイベントで変化させることも可能です。Webらしく、あっと驚くユーザ体験を生み出しましょう。

p5.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（LGPL）です。

p5.js | home processing/p5.js: p5.js is a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing