p5js:01.開発環境

p5.jsの開発環境

Processing を javascript 形式でコーディングすることで簡単にブラウザ上でプロセッシングを動作させることができます.様々なやり方でブラウザ上での実装ができます.ここではそのやり方と最初に抑えておくべきjsでのポイント(java-Processingとjs-Processingの違い)を記述します.これまでProcessingを利用して行ってきたことをそのままブラウザで動かそう程度のことであれば、以下をよく読んでおけばほとんど問題ないかなと思います。ただし実はそれだけではP5jsの恩恵を有効に活用できているとは言えません。p5jsのすごいところは、html, cssとjsの組み合わせをProcessingライクに実装できる点にあります。これまではjavascriptや周辺ライブラリを利用して同様のこともできましたが、p5.jsを使うことで、様々なアプリケーションをウェブ上に容易に実装できるようになるのです。

このページはその導入として、まずはProcessingからp5.jsへ移行するための必要最低限の知識を共有します。

Processingに慣れていればこれが一番簡単かもしれません.下記のようにp5.jsを選択すれば js モードに切り替わります.記述したプログラムを実行するとデフォルトのブラウザが開いて画面が描画されます.

試しに下記プログラムをコピペして動作を確認してみましょう.

function piet(x0, y0, x1, y1, N) {
  if (N == 0) {
    let sw = 10; //this is the stroke width for the rectangle's border
    let c = [[255,0,0], [0,0,255], [0,255,255], [255,255,0] ];
    fill(c[int(random(c.length))]);
    
    stroke(0);
    strokeWeight(sw);
    rect (x0, y0, x1-x0, y1-y0);
  } else {
    let i = int(random(x0, x1)); //Pick a random x coordinate inside the current rectangle
    let j = int(random(y0, y1)); //Pick a random y coordinate inside the current rectangle
    piet(x0, y0, i, j, N-1); // Recurse on upper left rectangle
    piet(i, y0, x1, j, N-1); // Recurse on upper right rectangle
    piet(x0, j, i, y1, N-1); // Recurse on lower left rectangle
    piet(i, j, x1, y1, N-1); // Recurse on lower right rectangle
  }  
 
}

function setup() {
  createCanvas(400, 400);
  piet(0,0,400,400,2);
}

function draw() {
}

利用するブラウザはchromeを利用してください。トラブルが起きた場合にブラウザを統一しておくことで問題解決が早くなりますので。

上記が伝統的なProcessing IDEを利用した場合の実行ですが,2018年8月31日にProcessing Foundationからp5.js Web Editorがアナウンスされたことで,環境構築の手間が大きく省かれました.端的に言えば,ブラウザで動作するProcessing IDEになります.試しに下記リンクに飛んでみてください.

先ほど作成したモンドリアンのコンポジションが確認できたと思います,これは同時に編集もできます.使い方は下記動画を参照してください.ログインせずとも利用できますが,ファイルの保存やshare等の機能を利用するにはアカウントを作成し,ログインしておくとよいでしょう.

一番手軽なのはprocessingのp5jsモードを利用するのがよいのですが、そもそもprocessingが起動しなくなっちゃったり、processingの使いづらいエディタが気に入らなかったりすることもあるでしょう。最近ではVisual Studio Code(以下vscode)が一般的に広く利用されているため、このvscodeを利用してのp5js開発をすすめるための開発環境構築手順を示します。

  1. vscodeを立ち上げて、ExtensionsからLive Server、p5js Snippetsをインストールする

をまず最初に準備してください。次にファイルを準備します。hogehogeというフォルダをデスクトップに作成して、以下のファイルを保存します。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
 
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
style.css
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
sketch.js
function setup() {
  createCanvas(400, 400);
}
 
function draw() {
  background(220);
}

以下のようなファイル構成になったかと思います。このhogehogeフォルダをvscodeで開きましょう。

hogehoge
├── index.html
├── sketch.js
└── style.css

では最後にsketch.jsを選択した後、vscodeの右下に Go Liveなる文言が表示されているので、これをクリックしてみてください。

以下のようにブラウザが開き、プログラムが実行できるようになりました。

Processignを触った事がある人は参考にしてください。p5.jsはjavascriptなので、javascriptの構文に従いますが、processingと比較した場合はいかに載せておきます。 下記のオフィシャル解説がよくまとまっているので,このページを参照してください.

このページでも簡単にまとめておきます.

最初のsetupとdrawは次のようになります.

// Processingの場合
void setup(){}
void draw(){}
// p5.jsの場合
function setup(){}
function draw(){}

varとletを用いて変数を指定します.従来のマニュアル型指定ではなく自動型指定になるので,勝手によろしくやってくれるわけです.で,varとletは何が違うかというと,スコープが異なる点です.ブロックが変わると参照できないのがletで参照できるのがvarです.もうちょっと簡単にいうと,global変数はvarでローカル変数はletで宣言すると思っておけば良いです.直感的に言い換えると、そこでしか使わないのがletで、他でも使うものをvarとして考えておいてください。プログラム初学者は最初は全部varだっていいと思います。

javascriptにおいてもclassは利用できますが,微妙に書き方が異なりますので,覚えておきましょう.クラス内のメンバ変数の宣言はjavascriptではコンストラクタ内にてthis参照付きで宣言してあげるとそれがメンバ変数として利用できるようになります.

// Processing
class Hello{
  Hello(String _message)
  {
    message = _message;
  }
  void echo(){
    print(message);
  }
  String message;
}

Hello hello = new Hello("Hello World");
void setup()
{
  hello.echo();
}
void draw()
{
}
// p5.js
class Hello {
  constructor(message) {
    this.message = message;
  }
  echo() {
    print(this.message);
  }  
}

var hello = new Hello("Hello World");

function setup() {
  hello.echo();
}
function draw() {
}

Processingに慣れているけど,p5.jsは初めて,という方にチートシート(よく使う項目を見やすく一枚のスライドにまとめたもの)があるので,以下リンクを利用するとよいでしょう.

  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/pages/p5js/01.開発環境.txt
  • 最終更新: 2021/03/09 09:09
  • by baba