JSFiddle - React, Tailwind, and code Playground

by coolwanglu

HTML

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
Press arrow keys:<br>
x/y
<canvas class="box" id="box1" width="200" height="200"></canvas>
Math.round(x/y)
<canvas class="box" id="box2" width="200" height="200"></canvas>
(x/y).toFixed(2)
<canvas class="box" id="box3" width="200" height="200"></canvas>

CSS

.box {
    position:relative;
    width:200px;
    height:200px;
    border:1px solid black;
    margin:10px;
    display:block;
}

JavaScript

var angle = 0.0;
var angular_speed = 0.005;
var size = 200.0;
var x0 = size / 2;
var y0 = size / 2;

var stages = [];
var balls = [];

['box1', 'box2', 'box3'].forEach(function(box) {
    var stage = new createjs.Stage(box);
    stages.push(stage);
    
    var ball = new createjs.Shape();
    balls.push(ball);
    stage.addChild(ball);
    
    ball.graphics.f('red').dc(0,0,10);
    ball.x = size / 2;
    ball.y = size / 2;
});

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', function(e) {
    if(e.paused)
        return;

    angle += angular_speed * e.delta;
    var x = size / 4.0 * Math.cos(angle);
    var y = size / 4.0 * Math.sin(angle);
    
    balls[0].x = x0 + x;
    balls[0].y = y0 + y;
    
    balls[1].x = x0 + Math.round(x);
    balls[1].y = y0 + Math.round(y);
    
    balls[2].x = x0 + x.toFixed(2);
    balls[2].y = y0 + y.toFixed(2);
    
    stages.forEach(function(stage){ stage.update(e); });    
});