Skip to content

Instantly share code, notes, and snippets.

@towc
Created July 14, 2015 09:50
Show Gist options
  • Save towc/26de52a64c8ef4da6222 to your computer and use it in GitHub Desktop.
Save towc/26de52a64c8ef4da6222 to your computer and use it in GitHub Desktop.
rainbow rain
<canvas id=c></canvas>
<canvas id=bg></canvas>
//initial
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
//parameters
total = w,
accelleration = .05,
//afterinitial calculations
size = w/total,
occupation = w/total,
repaintColor = 'rgba(0, 0, 0, .04)'
colors = [],
dots = [],
dotsVel = [];
//setting the colors' hue
//and y level for all dots
var portion = 360/total;
for(var i = 0; i < total; ++i){
colors[i] = portion * i;
dots[i] = h;
dotsVel[i] = 10;
}
function anim(){
window.requestAnimationFrame(anim);
ctx.fillStyle = repaintColor;
ctx.fillRect(0, 0, w, h);
for(var i = 0; i < total; ++i){
var currentY = dots[i] - 1;
dots[i] += dotsVel[i] += accelleration;
ctx.fillStyle = 'hsl('+ colors[i] + ', 80%, 50%)';
ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1);
if(dots[i] > h && Math.random() < .01){
dots[i] = dotsVel[i] = 0;
}
}
}
anim();
body {
background-color:black;
}
#c {
opacity:.8;
}
canvas {
position:absolute;
top:0; left:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment