元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【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();  //設定の復元
}
f:id:shiroyuki2020:20210422191222p:plain

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();  //設定の復元
}
f:id:shiroyuki2020:20210422191225p:plain

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

回転するアニメーション

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

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();
}
f:id:shiroyuki2020:20210422191203g:plain

まとめ

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

参考サイト