Hey guys,

I'm working on a Monster submission and have come across a strange obstacle involving translate() and possibly Object Hierarchy. Unfortunately I can't show all the source code for space constraints. Sketch has:

-A ground with scrolling trees when mousePressed. (works fine)
-A Panda Class with a single Panda that bobs up and down
when mousePressed. (works fine)
  -In turn, the Panda Class has within it a Limb Class that
   defines things like arms or legs. So far, only the arms  have been coded.
         -Things work as expected with ONE arm, but adding another arm causes a strange bug: one arm is off place a little, but the next(?) one is WAY off it's pivot point. The second arm appears at the bottom left of the screen and "swings" harder when mouse clicked.
         -If the translate(armX, armY) is disabled, both arms appear predictably on the top left of the screen but cannot rotate properly.

Here is the code for the Panda Class:
Code:

class Panda{  //Lemme give you a quick tour.
  // Panda parts.
  PImage panda; // sprite variable declaration.
  float xpos;
  float ypos;
  float fakeX;  //used to allow "bobbing" of panda as he walks
  Limb rArm; // A "Limb" class, called rArm.
  Limb lArm;

  Panda(float tempX, float tempY) { //Building a Panda.  
    //Tells it where it will be in x,y space.
    xpos = tempX;
    ypos = tempY;
    fakeX= 1; //Used for "bobbing" code.
    //Limbs built here.
    lArm = new Limb((xpos+65), (ypos+65));
    rArm = new Limb((xpos+35), (ypos+65)); //This works properly if by itself.  
  }
  
 void display() { //We're displaying a Panda
   panda = loadImage("panda.gif");
   image(panda, xpos, ypos); //actual panda body
   
   //arm
    lArm.display();
    rArm.display(); // and in turn, the arm. Maybe this is the problem?
  
   }

 
 void move() { //we're moving the panda  
   delay(33);
   //body
   fakeX++;
   float noiseScale =  2.4;
   ypos = ypos + sin(fakeX/2)*noiseScale;
   //Limbs
   rArm.update(ypos); //this keeps the arms at the same "altitude" as the panda.
   lArm.update(ypos);
   rArm.move(); // finally, moving the arm itself.
   lArm.move();
}
}
 

And the Limb Class:
Code:

class Limb {
  //parts of a Limb
  float armX;
  float armY;  
  float swing;
  Limb(float tempX, float tempY) {
 
    armX = tempX; 
    armY = tempY;
    swing = 0.01; //self-explanatory.
 
}

void display() {
 
   translate(armX, armY); // our pivot point...hopefully.
   ellipseMode(CENTER);
   stroke(0);
   fill(0);
   rotate(sin(swing) + HALF_PI); //nothing changed here.
   ellipse(13, -2, 15, 15);
  
} 

void move() {
   swing += 0.23;  
}

void update(float tempYpos) { 
  armY = tempYpos + 65 ; 
}
}
 

I know that since the Panda is a custom asset you won't be able to run it AS-IS but if you just replace the panda.gif with a gray rectangle that should do (just pretend it's an angry-looking panda).
Other notes/observations:
-first disable one arm then the other.
-if you change the order so that the lArm.display() happens BEFORE the panda is displayed, you get really wacky results--the Panda rotates like it is a Limb for some reason.

Any help or pointers would be appreciated. Scratchin' my head here.

Wow! Thanks so much I can't wait to try that out!