クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > JS > p5.js事始め：いろんな図形を配置してみる

p5.js事始め：いろんな図形を配置してみる

JS p5.js

ブラウザでインタラクティブコンテンツを作りたくて検討をした結果、一番興味深かったp5.jeを事始めます。p5.jsは2001年からあるProcessingをJAVAからJSに移植したJSライブラリですが、WebGLに対応したりと今も進化を遂げ続けており、ワクワクしかしません！それでは、いきましょう♪

【目次】

canvasかSVGか、それが問題だ

p5.jsはcanvas要素で作られている。最近はVue.jsと親和性が高いSVGが優勢でcanvasは時代遅れになりつつあるみたい。インタラクティブコンテンツを作る上ではどうなのか、比較検討してみた。

以前触れたSVGのチャートライブラリc3.js。こちらの元となるd3.jsがある。これと比較する。「d3.jsはチャートライブラリではない」ということなのだがサンプルを見るとそれでもチャート系が多い。

※参考：Gallery · d3/d3 Wiki · GitHub

また、p5.jsにはd3.jsよりも私にとってはメリットに感じる部分が多かった。

  • サンプルがp5.jsの方がワクワクする
  • コードがp5.jsの方がシンプル
  • マウスもタッチも対応したインタラクティブコンテンツ作れそう
  • 音声、画像、動画を連動したコンテンツが作れる
  • tone.js（Web audio API）と連携できそう
  • WebGLの3D作品も作れそう
  • canvasだけでなく外部のDOMも操作できそう
  • Processingの作品もちょっとした書き換えで移植できそう
  • Processingも合わせると歴史も情報も多い

ということで、とりあえずインタラクティブコンテンツはp5.jsをメインにすることにした！

p5.jsの基本

p5.jsを始めるにはまずライブラリのファイルをインストールする。こちらのページから…

※参考：http://p5js.org/download/

<script src="../p5.min.js"></script>

CDNもありんす！ダウンロード不要♪

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

最新版が0.80なのね。まだバージョン1にもなっていない。今後の進化が楽しみすぎる♪

基本形はsetup()とdraw()2つのメソッドからなる。

function setup() {
    //全体の設定
}

function draw() {
    //描画コンテンツの設定
}

setup()はcanvasや全体に共通する設定を書く。draw()は描画される設定を書く。描画は毎秒60フレームで行われる。

円を描く：ellipse()

こちらの「Get Started」にあるコードをゲットしてスタートする。

See the Pen p5.js 01 by イイダリョウ (@i_ryo) on CodePen.

PCではマウス、スマホでは指を動かすと円が残像を残しながら描かれる。（PCではクリックしながら動かすと半透明に）

コードはこちら。少しいじっています。

function setup() {
  createCanvas(300, 300);
  background('#eee');
  stroke('#aaa');
}

function draw() {
  if (mouseIsPressed) {
    fill(0,0,0,10);
  } else {
    fill('#fff');
  }
  ellipse(mouseX, mouseY, 80, 80);
}

まずsetup() * createCanvas()はcanvas要素のサイズ。幅、高さともに300px。 * background()は背景色。#eee。 * stroke()は線の色。#aaa。

次にdraw() * if文の条件、mouseIsPressedは「マウスを押しているときは」 * 押しているときの設定、fill()は面の色。引数4つでrgba「R=0、G=0、B=0、A=10」 * 押していないときの面は#fffに。 * ellipse()は円。引数4つで「マウスの横位置、マウスの縦位置、幅80px、高さ80px」

リファレンスを見ると色は16進数、RGBAの他にもHueなどいろいろ設定できそう。

※参考：http://p5js.org/reference/#group-Color

mouseIsPressedはマウスを押しているときの設定

※参考：http://p5js.org/reference/#/p5/mouseIsPressed

ellipse()は円。引数4つは「縦位置、横位置、高さ、幅」。

※参考：http://p5js.org/reference/#/p5/ellipse

縦位置、横位置は絶対値を入れるとcanvasの左上からの位置になるがmouseX、mouseYだとマウス（スマホは指）の位置になる。

この第3、第4引数を異なる数字にすると楕円形になる。

See the Pen p5.js 02 by イイダリョウ (@i_ryo) on CodePen. 

  ellipse(mouseX, mouseY, 60, 80);
  • 高さが60、幅が80の長方形

円弧を描く：arc()

ここからリファレンスの「Shape」にある他の「2D Primitives」を見ていく。

※参考：https://p5js.jp/reference/#group-Shape

まずはarc()円弧から。

See the Pen p5.js 03 by イイダリョウ (@i_ryo) on CodePen. 

arc(mouseX, mouseY, 80, 80,  0, HALF_PI, PIE);
  • 引数は順番に「横位置、縦位置、幅、高さ、開始位置、終了位置、（モード）」
  • 開始位置0にすると右端のようだった。PIは180度のため終了位置HALF_PIにすると90度の円弧になる。
  • 最後のモードは必須ではない。PIEにすると中心点と開始位置、終了位置の3点を結んぶ線になった。

※参考：p5.js | reference

線を描く：line()

次は線line()

※参考：https://p5js.jp/reference/#/p5/line

See the Pen p5.js 04 by イイダリョウ (@i_ryo) on CodePen. 

line(mouseX, mouseY, 150, 150);
  • 引数は順番に「点1の横位置、点1の縦位置、点2の横位置、点2の縦位置」
  • 1点目をマウス位置、2点目をcanvasの中央（150）にしている

これによって、マウスを動かすと漫画の集中線のような線が描画される。

点を描く：point()

次は点point()

※参考：https://p5js.jp/reference/#/p5/point

See the Pen p5.js 05 by イイダリョウ (@i_ryo) on CodePen. 

point(mouseX, mouseY);
  • 引数は順番に「点の横位置、点の縦位置」

マウスを動かすと点が描かれる。

四角形を描く：quad()

次は四角形quad()

See the Pen p5.js 06 by イイダリョウ (@i_ryo) on CodePen. 

quad(mouseX, mouseY, mouseX+10, mouseY+80,mouseX+70, mouseY+80,mouseX+100, mouseY+30,);
  • 引数は順番に「「点1の横位置、点1の縦位置、点2の横位置、点2の縦位置、点3の横位置、点3の縦位置、点4の横位置、点4の縦位置」

quad()は四角形だが、正四角形ではない。4点すべての数値を指定することができる。点1をマウスの位置にしてあとは適当な数字をプラスしてみた。

正四角形を描く：rect()

次は正方形rect()

※参考：https://p5js.jp/reference/#/p5/rect

See the Pen p5.js 07 by イイダリョウ (@i_ryo) on CodePen. 

rect(mouseX, mouseY, 60, 60);

円ellipse()と同様に幅と高さを異なる数値にすると長方形になる。

See the Pen p5.js 08 by イイダリョウ (@i_ryo) on CodePen. 

rect(mouseX, mouseY, 80, 60);

引数に5つ目を追加すると角丸になる。

See the Pen p5.js 09 by イイダリョウ (@i_ryo) on CodePen. 

rect(mouseX, mouseY, 60, 60, 10);
  • 五つ目の10で四隅に10pxずつの角丸が入る

角丸は四隅の数値を個別に指定することもできる。

See the Pen p5.js 10 by イイダリョウ (@i_ryo) on CodePen. 

rect(mouseX, mouseY, 60, 60, 10, 5, 0, 30);
  • 引数は順番に「左上、右上、右下、左下」。

左上から時計回りに一周する順番。CSSのborder-radiusと同じ。左上が10、右上が5、右下が0、左下が30。

三角形：triangle()

次は三角形triangle()

See the Pen p5.js 11 by イイダリョウ (@i_ryo) on CodePen. 

triangle(mouseX, mouseY, mouseX+15, mouseY+30, mouseX+-15, mouseY+30);
  • 引数は上から「点1の横位置、点1の縦位置、点2の横位置、点2の縦位置、点3の横位置、点3の縦位置」

点1をマウス位置、点2の横は + 30px、縦位置は + 60、点3は横位置は - 30px、縦は + 60px。

正多角形：sin()、cos()

上の方法で正三角形の数値を調べるのは難しいが、sin()、cos()を組み合わせて描く方法があった。

※参考：p5.js アルゴリズムによる図形描画 – KanoLab

See the Pen p5.js 12 by イイダリョウ (@i_ryo) on CodePen. 

  var corner=3;
  translate(mouseX,mouseY);
  beginShape();
  for (var i=0; i<corner; i++) {
    var angle=map(i, 0, corner, 0, 360);
    var x=sin(radians(angle))*30;
    var y=cos(radians(angle))*30;
    vertex(x, y);
  }
  endShape(CLOSE);
  • 変数cornerに角の数を入れる
  • translate()でマウスの位置に移動
  • beginShape()で図形描画の開始
  • for文で角の数分繰り返す
    変数angleにmap(値, 開始1, 停止1, 開始2, 停止2) 変数xにサイン（角度）× 30px
    変数yにコサイン（角度）× 30px
    シェイプの点vertex()にx、Yの値を入れる

これまでよりちょっと複雑だが、変数cornerに入れた数字で360を割った角度の正多角形ができる。今回は3なので正三角形。

サイン、コサイン、数学で習ったが忘れている…

※参考：sin（サイン）、cos（コサイン）、tan（タンジェント）ってなに？ / 数学I by はっちゃん |マナペディア|

変数cornerを5にすると正五角形になる。

See the Pen p5.js 13 by イイダリョウ (@i_ryo) on CodePen. 

var corner=5;

変数cornerを6にすると正五角形になる。

See the Pen p5.js 14 by イイダリョウ (@i_ryo) on CodePen. 

var corner=6;

以降、変数cornerの数値を増やすごとにだんだんを円に近づいていく。

最後に

f:id:idr_zz:20190526213611j:plain

ということでp5.jsをGettingしてStartedしました！p5.jsの元となるprocessingの存在は前から知ってて本屋さんでパラ見してたが、何ができる技術なのかいまいちよくわかっていなかったんですよね。こうして触ってみるとシンプルなコードで楽しくインタラクティブコンテンツが作れそうに感じました♪

p5.jsでできることはこんなものじゃなくてデザインだけでなくデジタルアートの分野まで発展できそうです。公式サイトのサンプルを見てもワクワクしかしません！

※参考：examples | p5.js

これからもいろいろと試していきたく思います。それではまた！

※参考：p5.jsを習得するためにやった事まとめ qiita.com