Material hypnosis

JADE
canvas#c
STYLUS
html body display: block width: 100% height: 100% #c display: block
COFFEE
c = document.getElementById 'c' ctx = c.getContext '2d' particles = {} particleIndex = 0 particleNum = .9 w = window.innerWidth h = window.innerHeight c.width = w c.height = h class Particle constructor: -> @x = w/2 @y = h/2 @vx = do Math.random * 5 - 2.5 @vy = do Math.random * 2 - 1 @growth = ( Math.abs(@vx) + Math.abs(@vy) ) * 1 particleIndex++ particles[particleIndex] = @ @id = particleIndex @size = do Math.random * 1 @colors = [ "rgba(233,30,99,#{do Math.random + .5})" "rgba(255,160,0,#{do Math.random + .5})" "rgba(139,195,74,#{do Math.random + .5})" "rgba(33,150,243,#{do Math.random + .5})" ] @color = @colors[Math.floor do Math.random * @colors.length] draw: -> @x += @vx @y += @vy @size += @growth delete particles[@id] if @x > w or @y > h ctx.fillStyle = @color do ctx.beginPath ctx.arc @x, @y, @size, 0*Math.PI, 2*Math.PI do ctx.fill setInterval ( -> ctx.fillStyle = "rgba(224,247,250,1)" ctx.fillRect 0, 0, w, h new Particle() if do Math.random > particleNum do particles[k].draw for k of particles ), 1000/60
Expand for more options Login