diff options
| author | Jules <jules@asdf.us> | 2016-11-10 15:34:53 -0500 |
|---|---|---|
| committer | Jules <jules@asdf.us> | 2016-11-10 15:34:53 -0500 |
| commit | dc06cab69f9e871aa8f7f519c964cf632d2217ea (patch) | |
| tree | 1c9344a58185c55f90c9b0db7f87c478e5d9a947 /particle.html | |
Diffstat (limited to 'particle.html')
| -rwxr-xr-x | particle.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/particle.html b/particle.html new file mode 100755 index 0000000..fe535f9 --- /dev/null +++ b/particle.html @@ -0,0 +1,109 @@ +<!doctype html> +<html> +<head> +<title>PARTICLES</title> +<style type="text/css"> +html,body{height: 100%;width:100%; overflow:hidden;} +#container + { + position: fixed; + top: 0; + left: 0; + height: 100%;width:100%; +background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.23, rgb(43,42,40)), + color-stop(0.62, rgb(0,0,0)) +); +background-image: -moz-linear-gradient( + center bottom, + rgb(43,42,40) 23%, + rgb(0,0,0) 62% +); + + } +.point + { + display: block; + position: absolute; + } +</style> +</head> +<body> +<div id="container"></div> +</body> +<script type="text/javascript" src="/js/jquery.js"></script> +<script type="text/javascript"> +function Point (x,y,color) + { + var width = Math.floor( 10 * Math.random() + 5 ) + var dx = (Math.random() * 2 - 1) * 20 + var dy = (Math.random() * 2 - 1) * 20 + var div = document.createElement('div') + div.className = "point" + div.style.width = width+"px" + div.style.height = width+"px" + div.style.background = color + div.style.left = x+"px" + div.style.top = y+"px" + document.getElementById("container").appendChild(div) + this.update = function () + { + if (! div) + return false + width -= 1 + if (width === 1) + { + // document.getElementById("container").removeChild(div) + div.style.background = choice(Particles.dead_colors) + div = false + } + else + { + x += dx + y += dy + dy += 2 + div.style.width = width+"px" + div.style.height = width+"px" + div.style.left = x+"px" + div.style.top = y+"px" + } + } + } +function choice(list){return list[ Math.floor( Math.random() * list.length )]} +var Particles = + { + list: [], + count: 20, + delay: 90, + colors: ["#f33","#ff0","#3df","#33f","#83b","#d3d"], + dead_colors: ["#000","#080808","#111","#181818","#222","#333","#444","#555","#666"], + update: function () + { + var update_count = 0 + for (var i = 0; i < Particles.list.length; i++) + { + if (! Particles.list[i].update()) + update_count += 1 + } + if (update_count === 0) + Particles.list = [] + }, + click: function (e) + { + console.log("CLICKED "+e.pageX+ " "+ e.pageY) + count = Particles.count * Math.random() + Particles.count/2 + for (var i = 0; i < count; i++) + Particles.list.push ( new Point (e.pageX, e.pageY, choice(Particles.colors) ) ) + }, + init: function () + { + $("#container").bind("click", Particles.click) + setInterval(Particles.update, Particles.delay) + }, + } +Particles.init() +</script> +</html> |