【p5.js】図形の変形:push(),pop()

図形の変形について書きます。図形のパラメータを変更するのではなく、座標空間を変更して変形させます。移動、回転、拡大、縮小などが使えるようになると表現の幅が広がります。おまけで回転するアニメーションのサンプルコードを書きました。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

図形の変形の流れ

• 変形したい図形の処理をpush()とpop()で挟む
• push()で、これまでの図形の設定(座標空間の他に色、塗りなど)を保存する
• 変形する(移動、回転、拡大、縮小など)
• pop()で、push()した時の設定に復元する

基本形

function setup(){
  createCanvas(200, 200);
  background(127);

  fill(255, 0, 0, 127);
  rect(0, 0, 100, 100);

  push(); //以降、変形処理を記述する
  fill(0, 0, 255, 127);
  rect(0, 0, 100, 100);
  pop();  //設定の復元
}

push()とpop()で囲んでいるだけで、まだ変形していない。push()以降に、変形の処理を記述する。

変形の実装

function setup(){
  createCanvas(200, 200);
  background(127);
  noStroke();

  fill(255, 0, 0, 127);
  rect(0, 0, 100, 100);

  push();
  //以降、変形処理
  translate(50, 50);  //移動
  rotate(PI/4); //回転。ラジアンで指定
  rotate(radians(30)); //回転。角度で指定(30°回転)
  scale(2, 0.5);  //拡大、縮小
  fill(0, 0, 255, 127);
  rect(0, 0, 100, 100);
  pop();  //設定の復元
}

上記のコードでは、移動、回転、拡大、縮小の変形を試している。

回転するアニメーション

描画領域の中央で回転するアニメーション。

function setup(){
  createCanvas(200, 200);
  background(127);

  noStroke();
  rectMode(CENTER); //始点の座標を中心に変更
}

let rad = 0;
let step = 15;

function draw(){
  background(127);
  rad += step;

  //描画領域の中央で回転
  push();
  translate(width/2, height/2); //中央に移動
  rotate(radians(rad));
  fill(0, 0, 255, 127);
  rect(0, 0, 100, 100);
  pop();
}

まとめ

• push():現在の設定を保存する
• pop():push()した時の設定に復元する
• translate():移動
• rotate():回転
• scale():拡大、縮小

参考サイト

• p5.js入門 (全14回) - プログラミングならドットインストール