Skip to content

Instantly share code, notes, and snippets.

@krll-k
Created December 2, 2012 16:31
Show Gist options
  • Save krll-k/4189631 to your computer and use it in GitHub Desktop.
Save krll-k/4189631 to your computer and use it in GitHub Desktop.
A CodePen by Tim Holman. Dripping Paint - A little canvas background I made a while back... was the featured background of creativeapplications.net for a small while
<canvas id='c'></canvas>
var width = window.innerWidth,
height = window.innerHeight,
c = document.getElementById('c'),
ctx = c.getContext('2d');
c.width = width;
c.height = height;
var paint = [];
var totalPaints = width/50;
var size = 20;
function init(){
for (var i = 0; i < totalPaints; i++){
addPaint();
}
setInterval( update, 40 );
}
function drawPaint(x,y,size, colour) {
ctx.beginPath();
ctx.arc(x, y, size ,0 , Math.PI*2, true);
ctx.closePath();
ctx.fillStyle=colour;
ctx.fill();
}
function update(){
for (var i = 0; i < paint.length; i++){
paint[i].y = paint[i].y + paint[i].v;
if (paint[i].y > height + 60){
paint.splice(i,1);
addPaint();
}
drawPaint(paint[i].x, paint[i].y, paint[i].s, paint[i].c);
}
}
function addPaint(){
//Try 50 times
var i = 50;
while(i > 0){
size = Math.random() * size + 10;
x = Math.random() * width;
found = false;
//Dont Allow drips ontop of each other (Overtaking drops destroy the prettyness)
for (var j = 0; j < paint.length; j++){
if ((x + size > paint[j].x) && (x - size < paint[j].x + paint[j].s)){
found = true;
break;
}
if ((x - size < paint[j].x) && (x + size > paint[j].x - paint[j].s)){
found = true;
break;
}
}
if (found == false){
paint.push({s:size,
x:x,
y:-60,
v:(Math.random() * 2) + 2,
c:'#' + (Math.random() * 0x313131 + 0xaaaaaa | 0).toString(16)});
i--;
return;
}
}
}
init();
body { background-color: #FFFFFF; margin:0px;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment