JSFiddle - React, Tailwind, and code Playground

by mattpodwysocki

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.18/rx.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.18/rx.binding.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.18/rx.time.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/2.0.7/rx.dom.js"></script>

JavaScript

var canvas, context, subscription;

init();
animate();

function init() {
    
    canvas = document.createElement( 'canvas' );
    canvas.width = 512;
    canvas.height = 512;
    
    context = canvas.getContext( '2d' );
    
    document.body.appendChild( canvas );
}

function animate() {
   subscription = Rx.Observable
       .generate(
           0,
           function () { return true; },
           function (x) { return x + 1; },
           function (x) { return x; },
           Rx.Scheduler.requestAnimationFrame)
       .timestamp()
       .subscribe(draw);
}

function draw(ts) {
    
    var time = ts.timestamp * 0.002;
    var x = Math.sin( time ) * 192 + 256;
    var y = Math.cos( time * 0.9 ) * 192 + 256;
    
    context.fillStyle = ts.value % 2 === 0 ? 'rgb(200,200,20)' :  'rgb(20,20,200)';
    context.beginPath();
    context.arc( x, y, 10, 0, Math.PI * 2, true );
    context.closePath();
    context.fill();
    
}