main.js

Jump To … +

Cube.js main.js

main.js

define(function(require, exports, module) {
    var Context = require('samsara/dom/Context');
    var Cube = require('./app/Cube');
    var Transform = require('samsara/core/Transform');
    var Transitionable = require('samsara/core/Transitionable');

¶

Angle to rotate cube by
```
    var angle = new Transitionable(0);
```

Map the angle to a rotation Transform

    var rotation = angle.map(function (angle) {
        return Transform.compose(
            Transform.rotateX(angle),
            Transform.rotateY(angle)
        );
    });

Create the cube

    var cube = new Cube({
        origin : [.5,.5],
        length : 200 // Length of the side of the cube
    });

¶

Create a Samsara Context as the root of the render tree
```
    var context = new Context();
```
¶

Set a perspective on the context
```
    context.setPerspective(600);
```

Add the cube and center the origin point

    context.add({
        align : [.5,.5],
        transform : rotation
    }).add(cube);

¶

Mount the context to a DOM element
```
    context.mount(document.body);
```

Animate the angle

    angle.loop([
        [2 * Math.PI, {duration : 10000}],
        [0, {duration: 10000}]
    ]);

Animate the Cube’s length

    cube.length.loop([
        [300, {curve: 'spring', period: 80, damping: .5}],
        [200, {curve: 'spring', period: 80, damping: .5}]
    ]);
});