“Rotation” et “traduire” dans le traitement de me donner des maux de tête

Comme une petite devoirs à la maison pour entrer dans le Traitement, j'ai dû écrire un peu de code pour obtenir le texte suivant:
“Rotation” et “traduire” dans le traitement de me donner des maux de tête

À l'aide de

public void setup() {
   size(300,200);
   noFill();
   rect(100, 20, 40, 80);
   ellipseMode(CENTER);
   fill(#000000);
   ellipse(width/2, height/2, 5,5);

   noFill();
   translate(width/2, height/2);
   rotate(radians(65));
   rect(-20, -40, 40, 80);
}
public void draw() {
}

cela fonctionnait très bien, jusqu'à présent. Mais je n'aime pas que je devais changer les coordonnées à l'intérieur de la partie inférieure rect instruction afin d'obtenir la rotation à droite. Je sais que par la rotation ne s'effectue pas seul mais en fait l'ensemble du système de coordonnées.
Ce que je ne sais pas est les valeurs à mettre dans le translate instruction à la sortie être comme dans l'image ci-dessus tout en utilisant toujours les mêmes coordonnées dans l' rect commande.

La tâche est déjà fait avec le code que j'ai utilisé, je ne l'aime pas trop. Donc ce n'est pas simple de demander à quelqu'un d'autre faire mes devoirs mais pur intérêt.

EDIT: généralisée de la tentative d'une question: Comment puis-je savoir quelles valeurs fosse traduire avant de tourner pour obtenir ce résultat que je souhaite? Est-il un moyen de les calculer? Pour sûr, ce n'est pas juste d'essayer, est-il?

OriginalL'auteur PattaFeuFeu | 2012-11-19

processing rotation

3

dans mon exemple particulier, de savoir comment le traduire et le faire tourner pour obtenir de l'
résultat dans l'image sans changer le rectangle de coordonnées?

Bien, vous avez besoin de tirer à l'origine de l'utilisation de pivoter correctement, alors vous êtes juste de traiter avec l'origine de la rect... Comme il est dans votre code, la valeur par défaut, l'origine est le coin supérieur gauche, de sorte que vous faites un hors jeu (de (0, 0)) pour dessiner du centre, pas le coin, à la coordonnée(0,0), puis faites-la pivoter vers le milieu. Bien fait. Il n'est pas un hasard que les valeurs que vous avez trouvé est de moins de la moitié rect largeur(-20) et moins de la moitié rect hauteur(-40). Si vous changez de rectMode(au CENTRE) que vous pouvez simplement tirer au point (0,0). La même chose s'applique à traduire, vous pouvez simplement traduire vers le point désiré, le centre de l'écran, où il est l'ellipse. Ce qui est fait à l'aide de la moitié de la largeur et de la moitié de la hauteur...

look:
```
public void setup() {
  size(300, 200);
  smooth();
  ellipseMode(CENTER);
  rectMode(CENTER);
  noFill();
  //here converting the coordinates to work with CENTER mode
  //could have changed the rect mode just after this
  //but i kept as an illustration
  int rwidth = 40;
  int rheight = 80;
  int xpos = 100 + rwidth/2;
  int ypos = height/2 - rheight/2 ;

  rect(xpos, ypos, rwidth, rheight);

  fill(#000000);
  ellipse(width/2, height/2, 5, 5);

  noFill();
  pushMatrix();

  translate(width/2, height/2);

  //draw at origin gray
  stroke(150);
  rect(0, 0, 40, 80);
  //then rotate
  rotate(radians(65));
  //draw again black
  stroke(0);
  rect(0, 0, 40, 80);

  popMatrix();


  //here using the cordinates calculated before as a translate value 
  //we draw at origin, but it appears at same place
  stroke(230,230,100);
  //a bit to the left...
  translate(xpos-2, ypos-2);

  rect(0, 0, 40, 80);
```
}

Je vous remercie. Qui m'a aidé! 🙂

OriginalL'auteur v.k.
6

Un beaucoup de la confusion dans la transformation du système de coordonnées. Dans le Traitement de l'origine (0,0) est en haut à gauche de l'écran et le seul point positif affichage des coordonnées sur l'écran. La très commune de la solution de contournement pour ce qui est de l'appeler:
```
translate(width/2, height/2);
```
au début de votre void draw() méthode. De cette façon 0,0 est maintenant au centre de l'esquisse, et toutes les méthodes appelées comme rotate(radians(65)) va prendre des mesures à partir du centre de l'esquisse.

C'est aussi bon parce que les croquis qui utilisent le P3D ou OPENGL rendu souvent appel traduire de changer le système de coordonnées dans quelque chose qui est plus facile à utiliser. Par exemple un objet à 0,0 ou 0,0,0 est au centre et il est plus facile de l'orbite de la caméra autour de l'objet ou ayant pour objet de faire pivoter autour de son centre.

une autre façon populaire d'objets de dessin serait de définir l'origine comme ci-dessus et au lieu de donner les coordonnées de chaque objet, c'est à dire rect(-100, -50, 50, 50) est d'utiliser popMatrix() et pushMatrix avant de traduire avant de dessiner chaque objet à 0,0, comme illustré ci-dessous:
```
translate(width/2, height/2);
pushMatrix();
  translate(-100, -50);
  rect(0,0,50,50);
popMatrix();
```
C'est une bonne approche pour une utilisation dans un moteur de rendu 2d si vous pensez que vous pourriez passer à la 3d convertisseur finalement, parce que vous pouvez facilement remplacer rect() avec box() ou sphere() ou créer votre propre méthode ou d'un objet qui attire l'géométrie en supposant que l'origine est à 0,0.

Si vous remplacez les coordonnées x et y des variables ou parcourir un tableau dans une boucle for, il devient très facile de tracer des centaines ou des milliers de formes en 2d ou en 3d avec un minimum d'effort et un minimum de réécriture du code.

mise à jour: ajout de précisions pour l'affiche originale, par leurs commentaires.

J'ai changé un peu le problème pour vous montrer comment je l'approche de cette. Je suis en train de montrer la translation /rotation de la méthode que j'ai décrite ci-dessus à l'aide de push et pop de la matrice. Je suis juste deviner les valeurs, mais si vous voulez quelque chose de pixel précis que vous pouvez prendre des mesures dans un programme de retouche d'image comme photoshop ou aperçu.
```
translate(180, 150);
rect(0, 0, 180, 80);
```
```
translate(185, 170);
rotate(radians(65));
rect(0, 0, 180, 80);
```
```
translate(180, 250);
ellipse(0, 0, 8, 8);
```
Mettre tous ensemble avec pushMatrix() et popMatrix().
```
void setup(){
  size(400,400);
}

void draw(){
  //rect1
  noFill();
  pushMatrix();
    translate(180, 150);
    rect(0, 0, 180, 80);
  popMatrix();
  //rect2
  pushMatrix();
    translate(185, 170);
    rotate(radians(65));
    rect(0, 0, 180, 80);
  popMatrix();
  //ellipse
  fill(0);
  pushMatrix();
    translate(180, 250);
    ellipse(0, 0, 8, 8);
  popMatrix();
}
```
Les deux réponses données jusqu'à présent sont bonnes et je vais utiliser les conseils donnés dans l'avenir, mais comment pourrais-je, dans mon exemple particulier, de savoir comment le traduire et le faire tourner pour obtenir le résultat dans l'image sans changer le rectangle de coordonnées?
Je viens de mettre à jour le post. J'espère que cela va vous expliquer comment cela s'applique à votre question.
Merci pour la mise à jour. Il a aidé aussi, mais j'ai eu à décider quelle réponse correspond le mieux. Les deux d'entre vous m'a beaucoup aidé!

OriginalL'auteur JAMESSTONEco
3

Rotation est aways appliquée au point d'origine (0,0), si vous souhaitez dessiner votre axe de rotation à l'origine. Ou déplacer l'origine du système de coordonnées, votre axe. C'est en effet à confusion. Lors de l'utilisation de transformations, j'ai tendance à dessiner à l'origine et toujours. Essayer ce pour voir si ça rend les choses plus clair... ou de moins 🙂
Il y a aussi push/popMatrix() pour contrôler la portée des transformations...
```
public void setup() {
  size(300, 380);
  smooth();
}
public void draw() {
  background(0);
  stroke(255);
  //use push/pop Matrix to control scope of translate and rotate
  pushMatrix();
  //move coordinates system origin to center of screen
  translate(width/2, height/2);
  //rotate with origin as axis
  rotate(radians(mouseY));
  //draw at origin (now temp moved to center of screen)
  //white line 
  line(0, 0, 150, 0);
  //here all coordinate system is back to normal
  popMatrix();

  //draw with normal system red line at origin
  stroke(255, 0, 0);
  line(0, 0, 150, 0);

    //draw with normal system blue line at centre
  stroke(0, 0, 255);
  line(width/2, height/2, width/2 + 150, height/2);
}
```
Les deux réponses données jusqu'à présent sont bonnes et je vais utiliser les conseils donnés dans l'avenir, mais comment pourrais-je, dans mon exemple particulier, de savoir comment le traduire et le faire tourner pour obtenir le résultat dans l'image sans changer le rectangle de coordonnées?

OriginalL'auteur v.k.

Vous devez vous connecter pour publier un commentaire.