Rotating a group of objects while keeping their orientation intact
<p>Basically I have a container object with 'children' that are modified relative to their parent, and I want to rotate all of the objects by changing the parent's rotation value, while keeping the orientation of the individual children stable. (as in, rotate the whole object) I feel like I'm not explaining this very well, so here are two examples. PhysicsJS: <a href="http://wellcaffeinated.net/PhysicsJS/" rel="nofollow">http://wellcaffeinated.net/PhysicsJS/</a> (see the first example, with the 0.7 and the balls -- notice how when the zero or seven are rotated after a collision the overall shape of the object is maintained. Same goes for this example in PhaserJS (<a href="http://phaser.io/examples/v2/groups/group-transform-rotate" rel="nofollow">http://phaser.io/examples/v2/groups/group-transform-rotate</a>) with the robot. Now, just to see if I could, I tried to duplicate the aforementioned PhysicsJS example with my own library -- <a href="https://jsfiddle.net/khanfused/r4LgL5y9/" rel="nofollow">https://jsfiddle.net/khanfused/r4LgL5y9/</a> (simplified for brevity)</p>

<pre><code>Art.prototype.modules.display.rectangle.prototype.draw = function() {

  // Initialize variables.

  var g = Art.prototype.modules.display.rectangle.core.graphics,
    t = this;

  // Execute the drawing commands.

  g.save();
  g.translate(t.parent.x ? t.parent.x + t.x : t.x, t.parent.y ? t.parent.y + t.y : t.y);

  /* Point of interest. */

  g.rotate(t.parent.rotation ? t.rotation : t.rotation);

  g.scale(t.scale.x, t.scale.y);
  g.globalAlpha = t.opacity === 'super' ? t.parent.opacity : t.opacity;
  g.lineWidth = t.lineWidth === 'super' ? t.parent.lineWidth : t.lineWidth;
  g.fillStyle = t.fill === 'super' ? t.parent.fill : t.fill;
  g.strokeStyle = t.stroke === 'super' ? t.parent.stroke : t.stroke;
  g.beginPath();
  g.rect(t.width / -2, t.height / -2, t.width, t.height);
  g.closePath();
  if (t.fill) {
    g.fill();
  }
  if (t.stroke) {
    g.stroke();
  }
  g.restore();

  return this;

};
</code></pre>

<p>Refer to the labeled point of interest -- that's where I rotate the canvas. If the object has a parent, it's rotated by the parent's value plus the object's value -- otherwise, just the object's value. I've tried some different combinations, like...</p>

<p>• parent - object
<br />
• object - parent</p>

<p>...and I looked through PhysicsJS and Phaser's sources for some kind of clue in the right direction, to no avail.</p>

<p>How do I rotate a group but not change its layout?</p>