Блог

Главная - Вопросы по программированию - Вращение треугольника вокруг центральной точки, как колеса

Вращение треугольника вокруг центральной точки, как колеса

#javascript #processing #p5.js

#javascript #обработка #p5.js

Вопрос:

Я хочу создать функцию, вращающуюся так, чтобы мой треугольник мог поворачиваться сам по себе, как колесо, но у меня возник конфликт с частью моего кода, которая перемещает мой треугольник, и я безуспешно пробовал много решений, может быть, если у кого-то из вас есть подсказка, это будет здорово!

Это мой код:

 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>

Ответ №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>

Комментарии:

1. Хорошо, спасибо за помощь! Я попробовал перевести и повернуть, но я не понял полезности push() и pop ()! Также поместить позицию в translate — хорошая идея, и я так не думал .. Так что большое вам спасибо за ваше время, я лучше понимаю! 🙂

2. @QuentinSerda push помещает матрицу в стек и pop помещает ее. Перейдите по ссылкам, чтобы получить более подробную информацию. Спасибо. Пожалуйста.