Проблемы с вращением каждого отдельного элемента в двойном цикле с обработкой

Question

Итак, если вы запустите этот эскиз, вы увидите сетку плюсовых знаков. Я хочу повернуть каждого человека, но я не могу понять это. Я попытался перевести, pushMatrix/popMatrix. Но, возможно, это не в нужном месте. Я удалил его сейчас, возможно, кто-то может указать, как поворачивать каждый отдельный знак плюс вокруг своей оси.

int rib; 
void setup() { 
    size(1200, 800); 
    rib = 7; 
} 


void draw() { 
    background(0); 
    for (int i = -100; i < width+100; i = i + rib * 10) { 
    for (int j = -100; j < height+100; j = j + rib * 10) { 
     noStroke(); 
     fill(255); 

     plus(i, j); 
     plus(3*rib+i, 1*rib+j); 
     plus(6*rib+i, 2*rib+j); 
     plus(9*rib+i, 3*rib+j); 
     plus(2*rib+i, 4*rib+j); 
     plus(5*rib+i, 5*rib+j); 
     plus(8*rib+i, 6*rib+j); 
     plus(1*rib+i, 7*rib+j); 
     plus(4*rib+i, 8*rib+j); 
     plus(7*rib+i, 9*rib+j); 
    } 
    } 
} 

void plus(int x, int y) { 
    pushMatrix(); 
    beginShape(); 
    vertex(x+0, y+0); 
    vertex(x+0, y+-rib); 
    vertex(x+rib, y+-rib); 
    vertex(x+rib, y+0); 
    vertex(x+2*rib, y+0); 
    vertex(x+2*rib, y+rib); 
    vertex(x+rib, y+rib); 
    vertex(x+rib, y+2*rib); 
    vertex(x+0, y+2*rib); 
    vertex(x+0, y+rib); 
    vertex(x+-rib, y+rib); 
    vertex(x+-rib, y+0); 
    endShape(CLOSE); 
    popMatrix(); 
} 

Answer 1

Ось вращения всегда находится в начале координат (0,0). Поэтому мы должны перевести начало координат туда, где нам нужна ось вращения. В вашем случае нарисуйте плюс с центром в (0,0) и используйте перевод, чтобы переместить его в нужную позицию. Я сделал этот пример, используя более простой квадрат, но идея такая же. (Мне не хватает времени :) Посмотрите, поможет ли это вам.

void setup() { 
    size(1200, 800); 
    noStroke(); 
    fill(255); 
} 


void draw() { 
    background(0); 
    float a = map(mouseY, 0, height, 30, 270); 
    for (int i = -100; i < width+100; i+=40) { 
    for (int j = -100; j < height+100; j+=40) { 

     plus(i, j, a); 
    } 
    } 
} 

void plus(int x, int y, float a) { 

    pushMatrix(); 
    translate(x, y); 
    rotate(radians(a)); 
    beginShape(); 
    vertex(-10, -10); 
    vertex(10, -10); 
    vertex(10, 10); 
    vertex(-10, 10); 
    endShape(CLOSE); 
    popMatrix(); 
} 

Вы могли бы эти учебники:

http://processing.org/tutorials/transform2d/

https://processing.org/tutorials/pshape/

Answer 2

Шаг 1: Используйте pushMatrix() для сохранения состояния текущей матрицы.

Вам нужно сделать это, потому что вы не хотите, чтобы вращения накапливались. Если вы поворачиваете одну форму на 30 градусов, а другую на 45 градусов, вы не хотите, чтобы вторая фигура была повернута (30 + 45) градусов.

Here является ссылкой для pushMatrix().

Шаг 2: Используйте translate(), чтобы переместить форму там, где она должна быть.

Убедитесь, что вы затем нарисуете свою фигуру с этой координатой в качестве источника! Прямо сейчас вы рисуете фигуры с x, y в качестве источника, когда вам нужно использовать 0,0 в качестве источника после перевода.

Here является ссылкой для translate().

Шаг 3: Используйте rotate(), чтобы повернуть форму вокруг начала координат.

Помните, что вы теперь «переместили» 0,0 на x, y, вы перешли в функцию translate()!

Шаг 4: Нарисуйте свою форму.

Опять же, не забудьте использовать 0,0 в качестве источника, а не x, y.

Here является ссылкой для rotate().

Шаг 5: Позвоните по телефону popMatrix(), чтобы восстановить матрицу, которую вы получили при вызове `pushMatrix() '.

Это восстанавливает поворот и перевод обратно в норму, поэтому следующий перевод и вращения не накапливаются.

Here является ссылкой для popMatrix().

Шаг 6: Повторите.

Поместите все вышеперечисленное в функцию, а затем вызовите его из цикла for, чтобы нарисовать более одной формы.

Вот упрощенная примеры, черпает прямоугольниками:

void setup() { 
    size(500, 500); 
} 

void draw() { 
    background(0); 

    noStroke(); 
    fill(255); 

    plus(100, 100); 
    plus(200, 200); 
} 

void plus(float x, float y) { 
    pushMatrix(); 
    translate(x, y); 
    rotate(mouseX); 
    rect(-20, -40, 40, 80); 
    popMatrix(); 
}