a-15 動き(6) 移動、回転、伸縮

Sep 11, 2020

a-15 移動、回転、伸縮

移動　translate()関数

void setup(){
  size(500,500);
  background(99,171,242);
  fill(254,253,108);
  noStroke();

}

void draw(){
  translate(mouseX,mouseY);
  rect(0,0,50,50);
}

translate()関数によって、マウスカーソルがある位置に四角形rect()が描かれます。

void setup(){
  size(500,500);
  background(99,171,242);
  fill(254,253,108);
  stroke(254,132,108);

}

void draw(){
  translate(mouseX,mouseY);
  rect(0,0,50,50);
  translate(60,25);
  rect(0,0,25,25);
}

２つめのtranslate()も表示されます。

void setup(){
  size(500,500);
  background(99,171,242);
  fill(254,253,108);
  stroke(254,132,108);

}

void draw(){
  pushMatrix();
  translate(mouseX,mouseY);
  rect(0,0,50,50);
  popMatrix();
  translate(60,25);
  rect(0,0,25,25);
}

pushMatrix()関数を実行する時の座標が記録され、その後にpopMatrix()を実行するとその座標に戻ります。

回転　rotate()関数

float angle = 0.0;

void setup(){
  size(500,500);
  background(99,171,242);
  fill(254,253,108);
  stroke(254,132,108);
}

void draw(){
  translate(mouseX,mouseY);
  rotate(angle);
  rect(-25,-25,50,50);
  angle += 0.1;
}

rotate()関数は、座標を回転させる。

float angle = 0.0;

void setup(){
  size(500,500);
  background(99,171,242);
  fill(254,253,108);
  stroke(254,132,108);
}

void draw(){
  rotate(angle);
  translate(mouseX,mouseY);
  rect(-25,-25,50,50);
  angle += 0.1;
}

回転軸を(0.0)にする時は、rotate()関数、translate()関数の順にする。逆に、図形の中心を軸にして回転させる場合は、一つ前のコードのようにtanslate()関数で座標をずらし、rotate()関数を呼び出す。

伸縮　scale()関数

float angle = 0.0;

void setup(){
  size(500,500);
  background(99,171,242);
  fill(254,253,108);
  stroke(254,132,108);

}

void draw(){
  translate(mouseX,mouseY);
  scale(sin(angle) + 2);
  rect(-25,-25,50,50);
  angle += 0.1;
}