0

I'm trying to figure out how works famo.us perspective transformation.

I assume that famo.us use one-point perspective which means that new image is just intersections of plane (some plane with different z coordinate) with lines coming from the focal point to the original image.

I also assume that declaration context.setPerspective(100) sets distance from focal point to the original image (screen).

this means that Transform.translate(0, 0, -50) of the image should make new image 2 times smaller But it doesn't!!

I didn't find any information about this in famo.us docs.

Any ideas?
P.S: I need to calculate translate distance to fill screen width with the image (and I don't want to use scale).

31415926
  • 3,811
  • 7
  • 47
  • 78
  • Remember Famo.us Perspective is really just using css 3D transforms . There are some great 3d transform articles on the web that can help you out to understand how they work. – talves Jan 08 '15 at 20:06

1 Answers1

2

Perspective is related to 3D space and is relative to the origin in pixels. First you should work with a larger value for your perspective (say 1000). Second, use a modifier to set the translation of your surface with respect to your context. Positive values position the element closer to the viewer, negative values further away.

Note: Moving your translateZ value by half does not change your surface size by that factor! It only moves it from your perspective that value closer or further away along the origin axis. Run the example below and change the translate to -1000 and you will see.

Example jsBin

  var mainContext = Engine.createContext();
  var contextPerspective = 1000;
  mainContext.setPerspective(contextPerspective);

  var surface = new Surface({ 
    content: 'Background',
    transform: Transform.translate(0, 0, 0.002),
    properties: {
      backgroundColor: 'rgba(0,0,0,0.1)'
    }
  });

  var surfacemod = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });

  mainContext.add(surfacemod).add(surface);

  surfacemod.setTransform(Transform.translate(0, 0, -500));

Edit: To find z transform value based on width of context

Example jsBin (width)

Example jsBin (Image width or heigh based on context size)

  var surfacemod = new Modifier({
    size: [200, 100],
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });


var contextSize = mainContext.getSize();
var surfaceSize = surface.getSize();
var percentage = (contextSize[0]- surfaceSize[0]) / contextSize[0];
var transZ = contextPerspective * percentage;

surfacemod.setTransform(Transform.translate(0, 0, transZ));
talves
  • 13,993
  • 5
  • 40
  • 63
  • Thx for response, but I still don't understand how to calculate translate distance that will result in fitting screen width with the translated surface(fitting projection of the surface actually). – 31415926 Feb 01 '15 at 10:04
  • See my **Edit:** above to find the transformZ value for your surface to make it the `width` of your context. You could do the same with `height` – talves Feb 01 '15 at 19:53