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

Question

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

4

我想创建一个旋转函数，让我的三角形像车轮一样可以在自身上旋转，但是我的代码的某部分移动了我的三角形，我尝试了许多解决方案都没有成功，也许如果你们有线索就好了！

这是我的代码：

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>

- Quentin Serda

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rabbid76 · Accepted Answer

使用矩阵变换来旋转、缩放和平移一个形状。操作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>