Something fricky's going on when moving this path inside a group.

[different55]

Same illustration as the group issue, got another weird thing popping up.

So in this illustration:

// Made with Zdog

// ----- setup ----- //

var sceneSize = 180;
var isSpinning = false;
var TAU = Zdog.TAU;

var illo = new Zdog.Illustration({
  element: '#illustrious',
  dragRotate: true,
  resize: 'fullscreen',
  onDragStart: function() {
    isSpinning = false;
  },
  onResize: function( width, height ) {
    this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
  },
});

window.dispatchEvent(new Event('resize'));

function v(x, y, z) {
  return {x: x, y: y, z: z};
}

// ----- model ----- //

const black = '#000';
const lessBlack = '#334';
const dustDark = '#778';
const dust = '#989';
const dustLight = '#ccd';
const snow = '#fff';
const moonglow = '#feb';

const stroke = 3;

let moon = new Zdog.Anchor({
  addTo: illo,
  translate: { x: 90, y: -110 },
  rotate: { y: (TAU/16)*5 },
});

let moonLight = new Zdog.Hemisphere({
  addTo: moon,
  diameter: 100,
  color: moonglow,
});

let moonDark = new Zdog.Hemisphere({
  addTo: moon,
  diameter: 100,
  color: dustDark,
  rotate: { y: TAU/2 },
});

let bun = new Zdog.Anchor({ addTo: illo });

let noggin = new Zdog.Anchor({ addTo: bun });

let ear = new Zdog.Group({
  addTo: noggin,
  translate: { x: 16, y: -57, z: -10 },
  rotate: { z: -TAU*.98 },
  updateSort: true,
});

let outerEar = new Zdog.RoundedRect({
  addTo: ear,
  width: 25-8,
  height: 62-8,
  cornerRadius: 12.5,
  fill: true,
  color: snow,
  stroke: 8,
  translate: { z: -1 },
});

let innerEar = new Zdog.RoundedRect({
  addTo: ear,
  width: 19,
  height: 55,
  cornerRadius: 10,
  fill: true,
  stroke: false,
  color: dustLight,
  translate: { z: 1 },
});

let otherEar = ear.copyGraph({
  translate: { x: -38, y: -47, z: -15 },
  rotate: { z: -TAU*.605 },
});

let head = new Zdog.Shape({
  addTo: noggin,
  stroke: 80,
  color: snow,
});

let outlineNoggin = new Zdog.Anchor({
  addTo: illo,
});

let outlineHead = head.copy({
  addTo: outlineNoggin,
  color: black,
  stroke: 80 + stroke*2,
});

let outlineEar = outerEar.copy({
  addTo: outlineNoggin,
  color: black,
  stroke: 8 + stroke*2,
  translate: ear.translate.copy().add(outerEar.translate.copy().rotate(ear.rotate)),
  rotate: ear.rotate,
})

outlineEar.copy({
  translate: otherEar.translate.copy().add(outerEar.translate.copy().rotate(otherEar.rotate)),
  rotate: otherEar.rotate,
});

let outlineGroup = new Zdog.Group({
  addTo: illo,
});

outlineGroup.addChild(outlineNoggin);
outlineGroup.addChild(noggin);

let eye = new Zdog.Group({
  addTo: bun,
  translate: { x: 30, y: -15, z: 30, },
});

let eyeOuter = new Zdog.Shape({
  addTo: eye,
  stroke: 34 + stroke,
  color: black,
});

let eyeInner = new Zdog.Shape({
  addTo: eye,
  stroke: 34 - stroke,
  color: snow,
});

eye.copyGraph({
  translate: { x: -31, y: -15, z: 30 },
});

let noseGroup = new Zdog.Group({
  addTo: bun,
  translate: { z: 40 },
});

let nose = new Zdog.Ellipse({
  addTo: noseGroup,
  width: 16,
  height: 11,
  stroke: false,
  fill: true,
  color: snow,
});

let noseLine = nose.copy({
  fill: false,
  stroke: stroke,
  color: black,
})

let mouth = new Zdog.Group({
  addTo: bun,
});

let tongue = new Zdog.Shape({
  addTo: mouth,
  stroke: stroke,
  fill: true,
  color: dustDark,
  path: [
    { x: -12, y: 13.5 },
    { x: -12, y: 22 },
    {arc: [
      { x: -12, y: 27.5 },
      { x: -6.5, y: 27.5 },
    ]},
    {arc: [
      { x: -1, y: 27.5 },
      { x: -1, y: 22 },
    ]},
    { x: -1, y: 13.5 },
  ],
  translate: { z: 35 },
});

let toothSmall = new Zdog.Ellipse({
  addTo: mouth,
  stroke: false,
  fill: true,
  color: snow,
  width: 9,
  height: 9,
  quarters: 2,
  rotate: { z: TAU/4, y: -TAU*.97 },
  translate: { x: -11.4, y: 13.5, z: 36 }
});

let toothSmallOutline = toothSmall.copy({
  stroke: stroke,
  color: black,
  fill: false,
});

let toothBig = new Zdog.Shape({
  addTo: mouth,
  stroke: false,
  fill: true,
  color: snow,
  path: [
    { x: -3.2, y: 13.5 },
    { x: -3.2, y: 16 },
    {arc: [
      { x: -3.2, y: 20 },
      { x: 1.3, y: 20 },
    ]},
    {arc: [
      { x: 5.7, y: 20 },
      { x: 5.7, y: 16 },
    ]},
    { x: 5.7, y: 13.5 },
  ],
  translate: { z: 36 },
});

toothBigOutline = toothBig.copy({
  stroke: stroke,
  color: black,
  fill: false,
});

let lips = new Zdog.Shape({
  addTo: mouth,
  stroke: stroke,
  color: black,
  closed: false,
  path: [
    v( -20, 13, 32.5 ),
    {arc: [
      v( 0, 14, 43.22 ),
      v( 20, 13, 32.5 ),
    ]},
  ]
});

let blush = new Zdog.Ellipse({
  addTo: bun,
  width: 17,
  height: 11,
  fill: true,
  stroke: false,
  color: dustLight,
  translate: v( -25.5, 8, 31 ),
  rotate: { y: TAU*.0625 },
});

blush.copy({
  rotate: blush.rotate.copy().multiply(-1),
  translate: v( 25.5, 7.5, 31 ),
});

let bowtie = new Zdog.Anchor({
  addTo: illo,
  translate: { x: -10.5, y: 45, z: 20 },
});

let center = new Zdog.Group({
  addTo: bowtie,
});
let centerFill = new Zdog.Ellipse({
  addTo: center,
  diameter: 17,
  fill: true,
  color: dustDark,
});
let centerStroke = centerFill.copy({
  diameter: 17,
  stroke: stroke,
  fill: false,
  color: black,
});

let wings = new Zdog.Group({
  addTo: bowtie,
  translate: bowtie.translate,
});

let wingFill = new Zdog.Shape({
  addTo: wings,
  fill: true,
  color: dustDark,
  stroke: stroke-1,
  closed: false,
  translate: { x: 10.5, y: -45 },
  path: [
    {"x":6.13,"y":-5.43},
    {"bezier":[
      {"x":9.41,"y":-6.33},
      {"x":12.7,"y":-7.23},
      {"x":16,"y":-8.13}
    ]},
    {"bezier":[
      {"x":17.91,"y":-8.66},
      {"x":19.84,"y":-7.24},
      {"x":19.9,"y":-5.23}
    ]},
    {"bezier":[
      {"x":19.97,"y":-3.13},
      {"x":20,"y":-1},
      {"x":20,"y":1}
    ]},
    {"bezier":[
      {"x":20.16,"y":2.87},
      {"x":18.7,"y":4.34},
      {"x":16.9,"y":4.28}
    ]},
    {"bezier":[
      {"x":12.9,"y":4.15},
      {"x":8.98,"y":4},
      {"x":5,"y":3.9}
    ]}
  ],
});

let wingStroke = wingFill.copy({
  fill: false,
  stroke: stroke,
  color: black,
});

// ----- animate ----- //

function animate() {
  illo.rotate.y += isSpinning ? -0.02 : 0;
  illo.updateRenderGraph();
  requestAnimationFrame( animate );
}

animate();

It's the bowtie again. But see the wingFill object has been translated the exact inverse of its grandparent's translation. I thought somehow my path was offset despite my numbers seeming right, but when I started trying to Z-offset the bowtie to the front of the bun's head, I realized what was going on.

Every translation is being doubled for the wings. If I move it forward by 10, the center moves 10, and the wings move double. The scales of all object should be 1, and this seems to hold true from some extremely limited poking around in the console. Should definitely investigate more later.