famo.us: simulating Parallax from a desktop web browser

Question

I am using the DeviceView from the famo.us examples to allow people using a desktop/laptop to be able to envision how an app would look on their phone. I had to extract DeviceView.js and the supporting images from the famo.us site. I now have a 2D image of the phone with a surface on the screen that I can do whatever I want with, and now I want to make a small "joystick" off to the right which I can use to do two things:

1. as the joystick moves, I want the DeviceView to rotate in 3 dimensions so it's actually like the device is rotating
2. send a signal to my famo.us code to adjust app layers for Parallax effect

The hard part for me is #1 because I don't know how to make this 2D image rotate in 3D space. Are there famo.us transforms for this? It would also be awesome if I could take the image and extrude into the Z-dimension so it looked like a 3D object.

Can anyone help?

Answer 1

Cool idea.

I edited the code in the hello-famous example, you should be able to copy and paste.

var Engine        = require('famous/core/Engine');
var Surface       = require('famous/core/Surface');
var Transform     = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing        = require('famous/transitions/Easing');
var Lightbox      = require('famous/views/Lightbox');
var DeviceView    = require('./DeviceView');

var mainContext = Engine.createContext();

// Set perspective
mainContext.setPerspective(1000);

var device, lightbox;
var slides = [];
var index = 0;

var RotatorX = new StateModifier();
var RotatorY = new StateModifier();
var RotatorZ = new StateModifier();

function joyStickMovedUpDown(positionX) {
    RotatorX.setTransform(new Transform.rotateX(positionX));   
}

function joyStickMovedLeftRight(positionY) {
    RotatorY.setTransform(new Transform.rotateY(positionY));
}
function spin(positionZ) {
    RotatorZ.setTransform(new Transform.rotateZ(positionZ));
}
// Hook this up to your joystick movement
joyStickMovedUpDown(0.9);
joyStickMovedLeftRight(0.3)
spin(0.25);

var lightboxOptions = {
  inOpacity: 1,
  outOpacity: 1,
  inTransform: Transform.translate(320,0, 0),
  outTransform: Transform.translate(-320, 0, 1),
  inTransition: { duration: 400, curve: Easing.outBack },
  outTransition: { duration: 150, curve: Easing.easeOut }
};

createDevice();
createSlides();
createLightbox();

function createDevice() {
  var deviceOptions = {
    type: 'iphone',
    height: window.innerHeight - 100
  };

  device = new DeviceView(deviceOptions);

  var deviceModifier = new StateModifier({
    size: device.getSize(),
    origin: [0.5, 0.5]
  });

  // Add rotators
  mainContext.add(deviceModifier).add(RotatorY).add(RotatorX).add(RotatorZ).add(device);
}

function createSlides() {
  var slideContent = [
    '<img src="http://launch.famo.us/fu-assets/hello/slide1.png" width="100%">',
    '<img src="http://launch.famo.us/fu-assets/hello/slide2.png" width="100%">',
    '<img src="http://launch.famo.us/fu-assets/hello/slide3.png" width="100%">'];

  var background = new Surface({
    properties: {
      backgroundColor: '#FA5C4F'
    }
  });

  device.add(background);

  for (var i = 0; i < slideContent.length; i++) {
    var slide = new Surface({
      content: slideContent[i],
      properties: {
        color: 'white',
        lineHeight: '200%',
        textAlign: 'center',
        fontSize: '36px',
        cursor: 'pointer'
      }
    });

    slide.on('click', showNextSlide);

    slides.push(slide);
  }
}

function createLightbox() {
  lightbox = new Lightbox(lightboxOptions);
  device.add(lightbox);
  lightbox.show(slides[0]);
}

function showNextSlide() {
  index++;
  if(index >= slides.length) index = 0;
  lightbox.show(slides[index]);
}