Skip to content

Instantly share code, notes, and snippets.

@rsperberg
Last active August 29, 2015 14:01
Show Gist options
  • Save rsperberg/74ca030bafdca1635e47 to your computer and use it in GitHub Desktop.
Save rsperberg/74ca030bafdca1635e47 to your computer and use it in GitHub Desktop.
Rotating codefamouses
// This code puts the text "codefamo.us" in the
// center of the display, colors it orange and then
// rotates it around the Z axis, then adds a blue
// "codefamo.us" that rotates around the Y axis.
// To make them display more clearly, a black background
// surface is added and, using a StateModifier, is
// translated behind the other two surfaces. (If the
// translation isn't done, the blue text flickers.)
//
// This example spun off of the rotating famo.us logo
// in the default famous-generator project.
/* globals define */
define(function(require, exports, module) {
'use strict';
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
// create the main context
var mainContext = Engine.createContext();
// our app here
var logo = new Surface({
size: [true, true],
content: 'codefamo.us',
classes: ['backfaceVisibility'],
properties: {
zIndex:1,
fontFamily: "Arial, Helvetica, sans-serif",
fontWeight:"bold",
fontSize:"36pt",
color:"#ff9f00"
}
});
var logo2 = new Surface({
size: [true, true],
content: 'codefamo.us',
classes: ['backfaceVisibility'],
properties: {
zIndex:1,
fontFamily: "Arial, Helvetica, sans-serif",
fontSize:"36pt",
fontWeight:"bold",
color:"#318ce7"
}
});
var background = new Surface({
size: [undefined, undefined],
properties: {
zIndex:-1,
backgroundColor:"black"
}
});
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0.5, 0.5],
opacity: 0.8,
transform : function() {
return Transform.rotateZ(.0016 * (Date.now() - initialTime));
}
});
var centerSpinModifier2 = new Modifier({
origin: [0.5, 0.5],
opacity: 0.8,
transform : function() {
return Transform.rotateY(.0016 * (Date.now() - initialTime));
}
});
var backgroundModifier = new StateModifier({
transform: Transform.translate(0,0,-100)
})
mainContext.add(backgroundModifier).add(background);
mainContext.add(centerSpinModifier).add(logo);
mainContext.add(centerSpinModifier2).add(logo2);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment