Chaining modfier with rotations

Question

I expected the grey surface to be rotating around its center on the right, lower corner of its parent in the SAME plane as the yellow surface.

What am i missing?

var initialTime = Date.now();    

var grey = new famous.core.Surface({
  size: [500, 500],
  properties: {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    color: 'white'
  },
  content: '<div style="padding: 20px">A</div>',
  classes: ['backfaceVisibility']
});

var yellow = new famous.core.Surface({
  properties: {
    backgroundColor: 'rgba(250, 250, 0, 0.7)'
  },
  content: '<h1>ende</h1>',
  size: [200, 200],
  classes: ['backfaceVisibility']
});

var m2 = new famous.core.Modifier({
  transform: function () {
    return famous.core.Transform.rotateZ(0.002 * (Date.now() - initialTime));
  },
  origin: [0.5, 0.5],
  align: [1, 1]
});

var m1 = new famous.core.Modifier({
  transform: function () {
    return famous.core.Transform.rotateY(0.0002 * (Date.now() - initialTime));
  },
  align: [0.5, 0.5],
  origin: [0.5, 0.5]
});

var virtualNode = context.add(m1);
virtualNode.add(yellow);
virtualNode.add(m2).add(grey);

talves · Answer 1 · 2014-08-13T23:51:07.713

0

Based on what I now know about the requirement. I would say that you did set it up correctly. What you might want is to have perspective of your two surfaces moving on their parent modifier node in 3d space. Also changing the parent (m1) modifier size to a fixed size helps us to see how they are placed.

mainContext.setPerspective(1000);
var p1 = new Modifier({
    transform: function () {
        return Transform.translate(0, 0, -400);
    }
});

var virtualNode = context.add(p1).add(m1));
virtualNode.add(yellow);
virtualNode.add(m2).add(grey);

Here is a jsFiddle of it working

edited Aug 13 '14 at 23:51

answered Aug 13 '14 at 15:41

talves

13,993
5
40
63

For some reason when adding size:[undefined, undefined] to the top modifier it's working as expected. Also when using encapsulated widgets, aren't there always mixes of modifiers and views/surfaces?! – Jens Zastrow Aug 13 '14 at 19:58
ok, so you do want the two surfaces to rotate on the same plane around modifier m1's origin? You are right there is not a problem with the mixing of modifiers and renderables on a node branch. I was thinking you wanted the two surfaces to have their own modifiers at the same node. I set perspective on my example for you to see and will update my answer. – talves Aug 13 '14 at 23:34

Chaining modfier with rotations

1 Answers1