Graph CoffeeScript
by Frank van Puffelen
HTML
<script src="http://yandex.st/raphael/2.1.0/raphael.js"></script>
<script src="http://www.shapevent.com/scaleraphael/scale.raphael.js"></script>
<script src="https://gist.github.com/raw/1579671/7f515ade253afbc860dac1f84e21998d54359d79/rAF.js"></script>
<div id='playfield'></div>
CoffeeScript
points = [[50, 40], [100, 40], [50, 80], [40, 40], [100, 100]]
segments = [[0,1], [1,2], [2,3], [3,4], [4,0]]
paper = Raphael(10, 10, 640, 480)
player
init = () ->
i
for point in points
do (point) ->
paper.circle(point[0], point[1], 5).attr('fill', '#ccc')
for segment in segments
do (segment) ->
p1 = points[segment[0]]
p2 = points[segment[1]]
paper.path 'M '+p1[0]+' '+p1[1]+' L '+p2[0]+' '+p2[1]
player.init paper ;
paper.setViewBox 10, 10, 320, 240
class Worker
constructor: (paper, @x, @y) ->
@circle = paper.circle @x, @y, 5
@circle.attr fill '#c00'
@route = []
@targetPoint = undefined
@speed = 5.0 // pixels per second
@wait = 0
update: (delta) ->
if (@wait > 0)
@wait = @wait - delta
else
dx = 1.0 * points[@targetPoint][0] - @x
dy = 1.0 * points[@targetPoint][1] - @y
d = Math.sqrt(dx*dx + dy*dy)
if (d > 0.1)
@circle.attr 'fill' '#0c0'
f = @speed / d
if f > 1.0 then f = 1.0
@x += dx * f * delta / 1000.0
@y += dy * f * delta / 1000.0
@circle.attr { cx: @x, cy: @y }
else
@circle.attr 'fill' '#c00'
@wait = 1000
if (@route && @route.length > 0)
@targetPoint = @route[0]
@route = @route.slice 1
lastTimestamp = undefined
counter = 0
player = new Player paper, 40, 50
animate = (timestamp) ->
if (lastTimestamp)
delta = timestamp - lastTimestamp
player.update delta
lastTimestamp = timestamp
requestAnimationFrame animate
init
animate