Trouble with rotate and translate

mromarcoder

Hello everyone. I´m having some trouble with translate,scale and rotate. Im working in a project that consist in moving the figure "yoshi" with the keys, but with the rotate i have the mouth opening and closing, it already does that, but when i move the figure to any direction the mouth appears somewhere else. My question is how can i fix this? Sorry if the code doesn´t appear in line this is my first discussion

        float a, sc;//rotation and scale
        int i=0;//var to if
        PShape bot, bot1;
        int xpos=300, ypos=60;//position of mouth
        void setup() {  
          size(1200, 800); 
          smooth();
          rectMode(CENTER);
          bot=loadShape("bocablanco.svg");//mouth
          bot1=loadShape("cabezaverde.svg");//head
        }
        void draw() {

          //Draw screen
          background(255);
          fill(0, 128, 0);
          shape(bot1, 557, 235, 200, 200);//head-green

          line(width/2, 0, width/2, height);
          line(0, height/2, width, height/2);

          frameRate(1);
          pushMatrix();
          fill(255);
          translate(width/2, height/2);
          translate(85, -120);
          if (i==0) {//open mouth
            rotate(-a);
            scale(sc);
            i=1;
          } else if (i==1) {//close mouth
            //rotate(a);
            shape(bot, 0, 0, 200, 200);
            scale(1.0);
            i=0;
          }
          shape(bot, 0, 0, 200, 200);
          popMatrix();
          a=.1;//value of rotation
          sc=1.005;//value of scale
        }
        //code for the movement
        void keyPressed() {
          if (key == CODED) {
            if (keyCode == LEFT) {
              bot.translate(-5, 0);
              bot1.translate(-5, 0);
            } else if (keyCode == RIGHT) {
              bot.translate(5, 0);
              bot1.translate(5, 0);
            } else if (keyCode == UP) {
              bot.translate(0, -5);
              bot1.translate(0, -5);
            } else if (keyCode == DOWN) {
              bot.translate(0, 5);
              bot1.translate(0, 5);
            }
          }
          redraw();
        }

koogs

edit post, hightlight code, press ctrl-o to format.

jeremydouglass

Without testing:

1. always translate first, rotate second
2. if the coordinates of your mouth shape aren't perfectly centered in the SVG then scaling could shifting it.

In keyPressed it looks like you might be applying translate directly to the contents of the shape itself, rather than saving translation offsets in a variable and applying them. That would cause rotation and scaling problems as described above. You are pushing the contents around on the shape itself in relation to the pivot point, so it pivots differently.

koogs

Please don't post duplicates