像轮子一样围绕中心点旋转三角形

Question

我想创建一个旋转函数，在该函数中我的三角形可以像轮子一样自行旋转，但我与移动三角形的部分代码发生冲突，我尝试了许多解决方案但没有成功，也许如果你们中的一个人有线索会很好！

这是我的代码：

let triangle1;
let triangle2;
let triangle3;
let triangle4;
let triangle5;
let triangle6;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;

function setup() {
    startColor = color("hsl(144, 100%, 61%)");
    endColor = color("hsl(0,77%,36%)");
    createCanvas(windowWidth, 800);
    //creer notre triangle
    triangle1 = new Triangles(200, 100, 0, 4);
    /*    triangle2 = new Triangles(100, 50, 2, 0);
        triangle3 = new Triangles(50, 200, -1, 4);
        triangle4 = new Triangles(250, 400, 4, 4);
        triangle5 = new Triangles(150, 500, 0, 2);
        triangle6 = new Triangles(350, 500, -4, 2);*/


}

function draw() {
    colorMode(RGB);
    background(252, 238, 10);
    triangle1.show();
    triangle1.move();
    /* triangle2.show();
     triangle2.move();
     triangle3.show();
     triangle3.move();
     triangle4.show();
     triangle4.move();
     triangle5.show();
     triangle5.move();
     triangle6.move();
     triangle6.show();*/

}

class Triangles {
    //configuration de l'objet
    constructor(triX, triY, speedX, speedY) {
        this.x = triX;
        this.y = triY;
        this.speedX = speedX;
        this.speedY = speedY;
    }

    show() {
        if (amt >= 1) {
            amt = 0;
            let tmpColor = startColor;
            startColor = endColor;
            endColor = tmpColor;
        }
        amt += 0.03;
        let colorTransition = lerpColor(startColor, endColor, amt);
        noStroke();
        fill(colorTransition);
        triangle(this.x, this.y, this.x + 25, this.y + 40, this.x - 25, this.y + 40);

    }

    move() {
        this.x += this.speedX;
        this.y += this.speedY;

        if (this.x > width || this.x < 0) {
            this.speedX *= -1;
        }

        if (this.x + 25 > width || this.x + 25 < 0) {

            this.speedX *= -1;

        }

        if (this.x - 25 > width || this.x - 25 < 0) {

            this.speedX *= -1;

        }

        if (this.y > height || this.y < 0) {

            this.speedY = this.speedY * -1;

        }

        if (this.y + 40 > height || this.y + 40 < 0) {

            this.speedY = this.speedY * -1;
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>

Answer 1

使用矩阵变换来旋转、缩放和平移形状。操作rotate、scale 和translate 定义了一个新的变换矩阵，并将当前矩阵与新矩阵相乘。

如果要对单个形状（三角形）进行变换，需要在变换前用push保存当前矩阵，用pop恢复变换后的矩阵。

push();

// [...] scale, rotate, translate

// [...] draw shape

pop();

如果要围绕局部枢轴点旋转形状，则需要围绕 (0, 0) 绘制形状。旋转形状并将旋转后的形状移动到其目标位置：

shapeTrasformation = translate * rotate * scale

等边三角形的局部旋转：

push()

translate(this.x, this.y, this.z);
rotate(this.angle)
scale(30);

triangle(-0.866, 0.5, 0.866, 0.5, 0, -1);

pop();
this.angle += 0.01; 

let triangle1;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;

function setup() {
    startColor = color("hsl(144, 100%, 61%)");
    endColor = color("hsl(0,77%,36%)");
    createCanvas(windowWidth, windowHeight);
    //creer notre triangle
    triangle1 = new Triangles(200, 100, 0, 4);
}

function draw() {
    colorMode(RGB);
    background(252, 238, 10);
    triangle1.show();
    triangle1.move();
}

class Triangles {
    //configuration de l'objet
    constructor(triX, triY, speedX, speedY) {
        this.x = triX;
        this.y = triY;
        this.speedX = speedX;
        this.speedY = speedY;
        this.angle = 0;
    }

    show() {
        if (amt >= 1) {
            amt = 0;
            let tmpColor = startColor;
            startColor = endColor;
            endColor = tmpColor;
        }
        amt += 0.03;
        let colorTransition = lerpColor(startColor, endColor, amt);
        noStroke();
        fill(colorTransition);

        push()

        translate(this.x, this.y, this.z);
        rotate(this.angle)
        scale(30);

        triangle(-0.866, 0.5, 0.866, 0.5, 0, -1);

        pop();
        this.angle += 0.01;
    }

    move() {
        this.x += this.speedX;
        this.y += this.speedY;

        if (this.x > width || this.x < 0) {
            this.speedX *= -1;
        }

        if (this.x + 25 > width || this.x + 25 < 0) {

            this.speedX *= -1;

        }

        if (this.x - 25 > width || this.x - 25 < 0) {

            this.speedX *= -1;

        }

        if (this.y > height || this.y < 0) {

            this.speedY = this.speedY * -1;

        }

        if (this.y + 40 > height || this.y + 40 < 0) {

            this.speedY = this.speedY * -1;
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>