May 6, 2014 20:39 · May 6, 2014
diff --git a/Falling-Confetti.markdown b/Falling-Confetti.markdown
@@ -0,0 +1,7 @@
+Falling Confetti
+----------------
+A vanilla.js canvas confetti animation. Move the mouse to change direction.
+
+A [Pen](http://codepen.io/Shipow/pen/cEgiu) by [Kevin Granger](http://codepen.io/Shipow) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/Shipow/pen/cEgiu/license).
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<canvas id="world"></canvas>
diff --git a/script.coffee b/script.coffee
@@ -0,0 +1,80 @@
+NUM_CONFETTI = 350
+COLORS = [[85,71,106], [174,61,99], [219,56,83], [244,92,68], [248,182,70]]
+PI_2 = 2*Math.PI
+
+
+canvas = document.getElementById "world"
+context = canvas.getContext "2d"
+window.w = 0
+window.h = 0
+
+resizeWindow = ->
+  window.w = canvas.width = window.innerWidth
+  window.h = canvas.height = window.innerHeight
+
+window.addEventListener 'resize', resizeWindow, false
+
+window.onload = -> setTimeout resizeWindow, 0
+
+range = (a,b) -> (b-a)*Math.random() + a
+
+drawCircle = (x,y,r,style) ->
+  context.beginPath()
+  context.arc(x,y,r,0,PI_2,false)
+  context.fillStyle = style
+  context.fill()
+
+xpos = 0.5
+
+document.onmousemove = (e) ->
+  xpos = e.pageX/w
+
+window.requestAnimationFrame = do ->
+  window.requestAnimationFrame       ||
+  window.webkitRequestAnimationFrame ||
+  window.mozRequestAnimationFrame    ||
+  window.oRequestAnimationFrame      ||
+  window.msRequestAnimationFrame     ||
+  (callback) -> window.setTimeout(callback, 1000 / 60)
+
+
+class Confetti
+
+  constructor: ->
+    @style = COLORS[~~range(0,5)]
+    @rgb = "rgba(#{@style[0]},#{@style[1]},#{@style[2]}"
+    @r = ~~range(2,6)
+    @r2 = 2*@r
+    @replace()
+
+  replace: ->
+    @opacity = 0
+    @dop = 0.03*range(1,4)
+    @x = range(-@r2,w-@r2)
+    @y = range(-20,h-@r2)
+    @xmax = w-@r
+    @ymax = h-@r
+    @vx = range(0,2)+8*xpos-5
+    @vy = 0.7*@r+range(-1,1)
+
+  draw: ->
+    @x += @vx
+    @y += @vy
+    @opacity += @dop
+    if @opacity > 1
+      @opacity = 1
+      @dop *= -1
+    @replace() if @opacity < 0 or @y > @ymax
+    if !(0 < @x < @xmax)
+      @x = (@x + @xmax) % @xmax
+    drawCircle(~~@x,~~@y,@r,"#{@rgb},#{@opacity})")
+
+
+confetti = (new Confetti for i in [1..NUM_CONFETTI])
+
+window.step = ->
+  requestAnimationFrame(step)
+  context.clearRect(0,0,w,h)
+  c.draw() for c in confetti
+
+step()
diff --git a/style.css b/style.css
@@ -0,0 +1,8 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #111;
+}