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); }
2つめの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; }
scale()関数を使えば、座標を伸縮させることができる。rotate()と同じように(0.0)が基準点になるので、図形の中心から伸縮させる場合は、totanslate()、scale()、rect()の順に実行し、図形を(0.0)が中心となるように描く。