EffectHub.com: your best source for gaming

A PHP Error was encountered

Severity: Notice

Message: Undefined index: HTTP_ACCEPT_LANGUAGE

Filename: controllers/item.php

Line Number: 25

A PHP Error was encountered

Severity: Notice

Message: Undefined index: HTTP_ACCEPT_LANGUAGE

Filename: controllers/item.php

Line Number: 1114

EffectHub.com: your best source for gaming

Recommendation

More Effects...

JS

var c = document.querySelector('.c') /* the canvas element */, 
    
    ctx = c.getContext('2d') /* canvas context */, 
    w /* canvas height */, h /* canvas height */, 
    
    t = 0, 
        
    max = Math.max, 
    pow = Math.pow, sqrt = Math.sqrt, 
    PI = Math.PI, 
    sin = Math.sin, cos = Math.cos /* just me being lazy */;

/* FUNCTIONS */
var trimUnit = function(input_str, unit) {
  return parseInt(input_str.split(unit)[0], 10);
};

var spiral = function() {
  var n = 8 /* shades */, 
      m = 4 /* shade repetitions */, 
      p = 32 /* dots on each branch */, 
      r = 1 /* dot radius */, 
      a, b, 
      beta, gamma, 
      x0, y0, x1, y1, 
      hue, grad, 
      t_step = 1/60;
  
  ctx.clearRect(0, 0, w, h);
    
  for(var i = 0; i < n*m; i++) {
    beta = i*2*PI/(n*m);
    x0 = 0;
    
    /* Begin the path up here */
    ctx.beginPath();
    hue = i*360/n;      
    /* only need to set the fillstyle once up here now */
    ctx.fillStyle = 'hsl(' + hue + ', 100%, 65%)';
        
    for(var j = 0; j < p; j++) {      
      gamma = j*2*PI/p;
      r = max(1, pow((j*(p - j)), .4) - 5);
      
      x0 += 3.4*r;
      y0 = x0*sin(gamma + 2*t)/5;
      
      /* change of coordinates */
      x1 = x0*cos(beta) - y0*sin(beta) + w/2;
      y1 = x0*sin(beta) + y0*cos(beta) + h/2;
      
      /* move it to the position of the arc */ 
      /* (remove this for a cool effect) */
      ctx.moveTo(x1,y1);
      /* setup the arc path here */
      ctx.arc(x1, y1, r, 0, 2*PI);
    }
    
    /* close the 1 path that now is a combination of all the arcs */
    ctx.closePath();
    /* fill the whole path only once now */
    ctx.fill();
    /* 
     * reason for moving the fill out of the inner loop:
     * see https://twitter.com/loktar00/status/420369245378076672
     * (thanks!)
     */
  }
  
  t += t_step;
  
  requestAnimationFrame(spiral)
};

var initCanvas = function() {
  var s /* canvas style set via CSS */ ;
  
  setTimeout(function() {
    s = getComputedStyle(c);
    w = c.width = trimUnit(s.width, 'px');
    h = c.height = trimUnit(s.height, 'px');
    
    spiral();
  }, 0);
};

/* STEPS */
initCanvas();

/* fix looks on resize */
addEventListener('resize', initCanvas, false);

CSS

HTML

Join Effecthub.com

Working with Global Gaming Artists and Developers!

Login
Sign Up

Or Sign Up with Your Email Address: