Created
December 22, 2013 13:10
-
-
Save oraricha/8082434 to your computer and use it in GitHub Desktop.
Snowflakes canvas generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// as seen at http://gtaforums.com/ | |
$j(document).ready(function() { | |
window.disableSnow = false; | |
//canvas init | |
var canvas = document.getElementById("canvas"); | |
var ctx = canvas.getContext("2d"); | |
//canvas dimensions | |
$branding = $j("#branding"); | |
var W = $branding.innerWidth(); | |
var H = $branding.innerHeight(); | |
canvas.width = W; | |
canvas.height = H; | |
//snowflake particles | |
var mp = 25; //max particles | |
var particles = []; | |
for(var i = 0; i < mp; i++) | |
{ | |
particles.push({ | |
x: Math.random()*W, //x-coordinate | |
y: Math.random()*H, //y-coordinate | |
r: Math.random()*4+1, //radius | |
d: Math.random()*mp //density | |
}) | |
} | |
//Lets draw the flakes | |
function draw() | |
{ | |
ctx.clearRect(0, 0, W, H); | |
ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; | |
ctx.beginPath(); | |
for(var i = 0; i < mp; i++) | |
{ | |
var p = particles[i]; | |
ctx.moveTo(p.x, p.y); | |
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); | |
} | |
ctx.fill(); | |
update(); | |
} | |
//Function to move the snowflakes | |
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes | |
var angle = 0; | |
function update() | |
{ | |
if(window.disableSnow) { | |
return; | |
} | |
angle += 0.01; | |
for(var i = 0; i < mp; i++) | |
{ | |
var p = particles[i]; | |
//Updating X and Y coordinates | |
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards | |
//Every particle has its own density which can be used to make the downward movement different for each flake | |
//Lets make it more random by adding in the radius | |
p.y += Math.cos(angle+p.d) + 1 + p.r/2; | |
p.x += Math.sin(angle) * 2; | |
//Sending flakes back from the top when it exits | |
//Lets make it a bit more organic and let flakes enter from the left and right also. | |
if(p.x > W+5 || p.x < -5 || p.y > H) | |
{ | |
if(i%3 > 0) //66.67% of the flakes | |
{ | |
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d}; | |
} | |
else | |
{ | |
//If the flake is exitting from the right | |
if(Math.sin(angle) > 0) | |
{ | |
//Enter from the left | |
particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; | |
} | |
else | |
{ | |
//Enter from the right | |
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d}; | |
} | |
} | |
} | |
} | |
} | |
//animation loop | |
setInterval(draw, 33); | |
// Disable when scrolling or out of view | |
(function() { | |
var bottomOfCanvasPosition = $branding.offset().top + $branding.outerHeight(); | |
var timer; | |
$window = $j(window); | |
$window.bind('scroll',function () { | |
window.disableSnow = true; | |
clearTimeout(timer); | |
timer = setTimeout( refresh , 300 ); | |
}); | |
var refresh = function () { | |
if($window.scrollTop() > bottomOfCanvasPosition) { | |
window.disableSnow = true; | |
} else { | |
window.disableSnow = false; | |
} | |
}; | |
})(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment