cshier/jsbin.oTazItU.coffee

## jsbin.oTazItU.coffee
canvas = document.getElementById 'canvas'
ctx = canvas.getContext '2d'
canvas.resizeToWindow = ->
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

Mouse =
  x: window.innerWidth/2
  y: window.innerHeight/2
  down: false
  points: []
  pushPoints: ->
    if Mouse.points.length < 180
      Mouse.points.unshift
        x: Mouse.x
        y: Mouse.y
    else
      Mouse.points[0] =
        x: Mouse.x
        y: Mouse.y
      for i in [ Mouse.points.length-1 .. 1] by -1
        Mouse.points[i] = Mouse.points[i-1]
  updatePosition: (e) ->
    Mouse.x = (e.pageX + Mouse.x) * 0.5 | 0
    Mouse.y = (e.pageY + Mouse.y) * 0.5 | 0
    #Mouse.pushPoints()
  events:
    move: (e) ->
      Mouse.updatePosition e
    down: (e) ->
      e.preventDefault()
      console.dir e
      Mouse.down = not Mouse.down
      Mouse.updatePosition e
    up: (e) ->
      Mouse.down = not Mouse.down
  addEventListeners: (target) ->
    target.addEventListener 'mousemove', Mouse.events.move, false
    target.addEventListener 'touchmove', Mouse.events.move, false
    target.addEventListener 'mousedown', Mouse.events.down, false
    target.addEventListener 'touchstart', Mouse.events.down, false
    target.addEventListener 'mouseup', Mouse.events.up, false
    target.addEventListener 'touchend', Mouse.events.up, false

rainbow = (angle, alpha = 1, offset = 1) ->
  r = Math.sin(angle + offset*0*Math.PI/3) * 127 + 127
  g = Math.sin(angle + offset*2*Math.PI/3) * 127 + 127
  b = Math.sin(angle + offset*4*Math.PI/3) * 127 + 127
  "rgba(#{r|0}, #{g|0}, #{b|0}, #{alpha})"

animloop = ->
  animloop.id = requestAnimationFrame animloop
  now = (Date.now() - start)/2
  #ctx.clearRect 0, 0, canvas.width, canvas.height
  ctx.save()
  ctx.translate Math.cos(now/2000)/8 - (Mouse.x/canvas.width - 0.5)/16, Math.sin(now/2000)/8 - (Mouse.y/canvas.height - 0.5)/16
  ctx.drawImage canvas, 0, 0, canvas.width - Math.cos(now/2000)/4, canvas.height - Math.sin(now/2000)/4
  ctx.restore()

  ctx.lineCap = 'round'
  for i in [ Mouse.points.length - 2...1 ] by -1
    iOne = i/Mouse.points.length
    xWiggle = Math.cos(iOne*Math.PI*555 - Math.PI/2)*canvas.width/1
    yWiggle = Math.sin(iOne*Math.PI*777 - Math.PI/2)*canvas.height/1 #- canvas.width/3
    ctx.beginPath()
    ctx.moveTo Mouse.points[i+1].x + xWiggle, Mouse.points[i+1].y + yWiggle
    ctx.lineTo Mouse.points[i].x + xWiggle, Mouse.points[i].y + yWiggle
    #ctx.strokeStyle = "hsla(#{-now/2 + iOne * 360},100%,85%,#{1.3 * (1 - iOne)})"
    ctx.strokeStyle = rainbow iOne*Math.PI*2 -now/360, 0.3, 0.6
    ctx.lineWidth = 25
    ctx.stroke()
    ctx.strokeStyle = 'black'
    ctx.lineWidth = 3
    ctx.stroke()
  Mouse.pushPoints()

init = ->
  window.addEventListener 'resize', canvas.resizeToWindow, false
  window.addEventListener 'orientationchange', canvas.resizeToWindow, false
  canvas.resizeToWindow()
  Mouse.addEventListeners canvas
  @start = Date.now()
  animloop()
init()

## jsbin.oTazItU.css
body, canvas {
  margin:0;
  padding: 0;
  border: 0;
  position:fixed;
}

## jsbin.oTazItU.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <canvas id='canvas'></canvas>
</body>
</html>
	canvas = document.getElementById 'canvas'
	ctx = canvas.getContext '2d'
	canvas.resizeToWindow = ->
	canvas.width = window.innerWidth
	canvas.height = window.innerHeight

	Mouse =
	x: window.innerWidth/2
	y: window.innerHeight/2
	down: false
	points: []
	pushPoints: ->
	if Mouse.points.length < 180
	Mouse.points.unshift
	x: Mouse.x
	y: Mouse.y
	else
	Mouse.points[0] =
	x: Mouse.x
	y: Mouse.y
	for i in [ Mouse.points.length-1 .. 1] by -1
	Mouse.points[i] = Mouse.points[i-1]
	updatePosition: (e) ->
	Mouse.x = (e.pageX + Mouse.x) * 0.5 \| 0
	Mouse.y = (e.pageY + Mouse.y) * 0.5 \| 0
	#Mouse.pushPoints()
	events:
	move: (e) ->
	Mouse.updatePosition e
	down: (e) ->
	e.preventDefault()
	console.dir e
	Mouse.down = not Mouse.down
	Mouse.updatePosition e
	up: (e) ->
	Mouse.down = not Mouse.down
	addEventListeners: (target) ->
	target.addEventListener 'mousemove', Mouse.events.move, false
	target.addEventListener 'touchmove', Mouse.events.move, false
	target.addEventListener 'mousedown', Mouse.events.down, false
	target.addEventListener 'touchstart', Mouse.events.down, false
	target.addEventListener 'mouseup', Mouse.events.up, false
	target.addEventListener 'touchend', Mouse.events.up, false

	rainbow = (angle, alpha = 1, offset = 1) ->
	r = Math.sin(angle + offset0Math.PI/3) * 127 + 127
	g = Math.sin(angle + offset2Math.PI/3) * 127 + 127
	b = Math.sin(angle + offset4Math.PI/3) * 127 + 127
	"rgba(#{r\|0}, #{g\|0}, #{b\|0}, #{alpha})"

	animloop = ->
	animloop.id = requestAnimationFrame animloop
	now = (Date.now() - start)/2
	#ctx.clearRect 0, 0, canvas.width, canvas.height
	ctx.save()
	ctx.translate Math.cos(now/2000)/8 - (Mouse.x/canvas.width - 0.5)/16, Math.sin(now/2000)/8 - (Mouse.y/canvas.height - 0.5)/16
	ctx.drawImage canvas, 0, 0, canvas.width - Math.cos(now/2000)/4, canvas.height - Math.sin(now/2000)/4
	ctx.restore()

	ctx.lineCap = 'round'
	for i in [ Mouse.points.length - 2...1 ] by -1
	iOne = i/Mouse.points.length
	xWiggle = Math.cos(iOneMath.PI555 - Math.PI/2)*canvas.width/1
	yWiggle = Math.sin(iOneMath.PI777 - Math.PI/2)*canvas.height/1 #- canvas.width/3
	ctx.beginPath()
	ctx.moveTo Mouse.points[i+1].x + xWiggle, Mouse.points[i+1].y + yWiggle
	ctx.lineTo Mouse.points[i].x + xWiggle, Mouse.points[i].y + yWiggle
	#ctx.strokeStyle = "hsla(#{-now/2 + iOne * 360},100%,85%,#{1.3 * (1 - iOne)})"
	ctx.strokeStyle = rainbow iOneMath.PI2 -now/360, 0.3, 0.6
	ctx.lineWidth = 25
	ctx.stroke()
	ctx.strokeStyle = 'black'
	ctx.lineWidth = 3
	ctx.stroke()
	Mouse.pushPoints()

	init = ->
	window.addEventListener 'resize', canvas.resizeToWindow, false
	window.addEventListener 'orientationchange', canvas.resizeToWindow, false
	canvas.resizeToWindow()
	Mouse.addEventListeners canvas
	@start = Date.now()
	animloop()
	init()
	body, canvas {
	margin:0;
	padding: 0;
	border: 0;
	position:fixed;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<canvas id='canvas'></canvas>
	</body>
	</html>