Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
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
* { overflow: hidden; margin: 0; width: 100%; height: 100%; } .c { background: black; }
HTML
psychedelic rainbow spiral
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email