Skip to content

Instantly share code, notes, and snippets.

@x86128

x86128/anim.coffee

Created May 13, 2018 17:31
Show Gist options
  • Save x86128/272379e3cc3399e12dfcade3aa4f5ae2 to your computer and use it in GitHub Desktop.
Save x86128/272379e3cc3399e12dfcade3aa4f5ae2 to your computer and use it in GitHub Desktop.
Download ZIP
animation test with coffeescript
Raw
anim.coffee
canvas = null
ctx = null
old_x = 0
old_y = 0
frame_count = 0
old_frame_num = 0
show_fps = ->
ctx.fillStyle = 'black'
ctx.fillRect 0,0,500,32
ctx.fillStyle = 'white'
ctx.fillText "FRAME: #{frame_count} FPS: #{frame_count - old_frame_num}", 0, 32
old_frame_num = frame_count
animation = ->
x = Math.random() * 500
y = Math.random() * 500
[r,g,b] = [Math.random() * 255, Math.random() * 255, Math.random() * 255]
ctx.beginPath()
ctx.moveTo old_x, old_y
ctx.strokeStyle = "rgb(#{r},#{g},#{b})"
ctx.lineTo x, y
ctx.stroke()
[old_x, old_y] = [x, y]
frame_count += 1
window.requestAnimationFrame animation
main = ->
canvas = document.getElementById 'screen'
ctx = canvas.getContext '2d'
ctx.font = '32px mono'
ctx.fillStyle = 'black'
ctx.fillRect 0, 0, 500, 500
window.requestAnimationFrame animation
window.setInterval show_fps, 1000
window.onload = main
Raw
html.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<!-- page content -->
<canvas width="500px" height="500px" id="screen"></canvas>
<script src="anim.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment