移動、回転、伸縮

座標系に変更を加えることで、モノの動きを制御できます。ただし、あくまでも座標系が変換されることを意識してくだいさい。

code:rotateTranslate.js

'use strict'

let packman;

function setup() {

let cnv=createCanvas(300, 300);

colorMode(RGB,255,255,255,1);

background(230)

let a = new Arrow(0,0,100,200,'red');

a.draw();

ellipse(50,0,100,50);

textSize(20)

text('translate(100,200)', 70,100)

text('rotate(PI/2.0)', 170,290)

translate(100,200)

fill(0,255,255,0.5);

ellipse(50,0,100,50);

a = new RoundArrow(0,0,100,100,0,PI/2,'purple');

a.draw()

rotate(radians(90));//90度回転

fill(0,255,0,0.5);

ellipse(50,0,100,50);

//save(cnv,'rotation01.jpg')

}

class Arrow{

constructor(x1,y1,x2,y2,color='black'){

this.x1 = x1;

this.y1 = y1;

this.x2 = x2;

this.y2 = y2;

this.c = color;

}

setColor(color){

this.c = color;

}

draw(){

let offset = 10;

push()

// 色を変更

fill(this.c);

stroke(this.c);

line(this.x1,this.y1, this.x2,this.y2);

//gets the angle of the line

let angle = atan2(this.y1 - this.y2, this.x1 - this.x2);

translate(this.x2, this.y2);// 先に移動

rotate(angle+PI); // 線の角度に合わせて回転

triangle(0,0, -offset,-offset/2, -offset, offset/2); //三角形を描く

pop();

}

}

class RoundArrow{

constructor(x, y, rX, rY, aStart, aEnd, color='black'){

this.x = x; this.y = y;

this.rx = rX, this.ry = rY;

this.aS = aStart; this.aE = aEnd;

this.c = color;

}

draw(){

let offset = 10;

push()

noFill();

stroke(this.c);

arc(this.x, this.y, this.rx*2, this.ry*2, this.aS, this.aE);

fill(this.c)

translate(this.rx*cos(this.aE),this.ry*sin(this.aE))

rotate(this.aE+HALF_PI)

triangle(0,0, -offset,-offset/2, -offset, offset/2); //三角形を描く

pop();

}

}

https://scrapbox.io/files/620357aa1be5650020de59c1.png