P5.js 日本語リファレンス(shearX) #JavaScript

このページでは「P5.js 日本語リファレンス」の shearX関数を説明します。

shearX()

説明文

角度パラメータで指定された量だけ x 軸を中心に形状をせん断変形します。角度は angleMode で指定する必要があります。オブジェクトは常に原点に対する相対位置を中心にせん断変形し、正の数はオブジェクトを時計回りにせん断変形します。

変換は関数への後続の呼び出しが効果を蓄積した後に発生するすべてに適用されます。たとえば shearX(PI / 2) を呼び出してから shearX(PI / 2) を呼び出すことは shearX(PI) と同じです。 draw() 内でshearX() が呼び出された場合、ループが再び始まると変換がリセットされます。

技術的には shearX() は現在の変換行列に回転行列を乗算します。この関数は push() および pop() 関数によってさらに制御できます。

構文

shearX(angle)

パラメタ

angle
Number：現在の angleMode に応じて、ラジアンまたは度で指定されたせん断角度

例1

function setup() {
  createCanvas(200, 200);
}

function draw() {
  background(220);

  translate(10, 10);
  stroke("black");
  rect(0, 0, 30, 30);

  stroke("red");
  shearX(PI / 6.0); // 角度30°を指定
  rect(40, 0, 30, 30);

  stroke("green");
  shearX(PI / 6.0); // 更に角度30°を指定
  rect(80, 0, 30, 30);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。