JSFiddle - React, Tailwind, and code Playground

by serio

JavaScript

var canvas
  , context
  , amount = 8
  , jitter = 0
  , speed = 60

$(function()
{
  // requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              }
    })()

  // example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/






var offsets = (function() {
  var offsets = []
  for( var i = 0; i < amount; i++ )
  {
    offsets.push( Math.random() * 0.0001 )
  }
  return offsets
})()

init()

function randBetween( min, max )
{
  return Math.round( Math.random() * ( max - min + 1 ) + min )
}

function init() {
  
  canvas = document.createElement( 'canvas' )
  
  canvas.width = document.body.clientWidth
  canvas.height = 2000
  
  context = canvas.getContext( '2d' )
  
  document.body.appendChild( canvas )
  
  img = new Image()
  
  img.onload = function()
  {
    animate()
  }
  
  img.src = 'http://ziluolan.files.wordpress.com/2011/11/fat-dog.jpg' /* this will need to be made into an array of images */
}

function animate() {
  requestAnimFrame( animate )
  draw()
}

function draw( offset, size, radius ) {
    
    context.fillStyle = '#000';
    context.fillRect( 0, 0, canvas.width, canvas.height )
    
    for( var i = 0; i < amount; i++ )
    {
      var radius = 40
      var time = ( new Date().getTime() * offsets[ i ] * ( speed * 0.2 ) )
      var x = Math.sin( time ) * ( canvas.width / 2 ) + ( canvas.width / 2 )
      var y = Math.cos( time * 0.9 ) * ( canvas.height / 2 ) + ( canvas.height / 2 )
      
      context.drawImage( img, x, y )
    }
}
})