joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Animation trigged by mousemove event where we infer angular measure (relative
to a center point) based on mouse position.
Another follow-up experiment inspired by Math for Pictures.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://jashkenas.github.io/coffee-script/extras/coffee-script.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
<style>
  line, polyline, circle, ellipse {
    stroke: steelblue;
    stroke-width: 10;
  }
  polyline {
    fill: none;
  }
  circle, ellipse {
    fill: aliceblue;
  }
  rect {
    fill: none;
    stroke: #999;
    stroke-width: 2;
  }
</style>
<body>
  <div id="canvas"></div>
<script type="text/coffeescript">
  w = 960
  h = 500
  c = # center
    x: w/2
    y: h/2

  draw = SVG('canvas').size(w, h)
  draw.rect(w, h)

  C = draw.circle(300).center(c.x, c.y)
  L = draw.line(c.x, c.y, c.x+150, c.y).rotate(0, c.x, c.y)

  R2D = 180 / Math.PI   # convert radians to degrees

  document.onmousemove = (e) ->
    x = e.offsetX - c.x
    y = e.offsetY - c.y
    θ = R2D * Math.atan2(y, x)
    θ = θ - 360 if θ > 0
    L.rotate(θ, c.x, c.y)
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://jashkenas.github.io/coffee-script/extras/coffee-script.js"></script>
	<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
	<style>
	line, polyline, circle, ellipse {
	stroke: steelblue;
	stroke-width: 10;
	}
	polyline {
	fill: none;
	}
	circle, ellipse {
	fill: aliceblue;
	}
	rect {
	fill: none;
	stroke: #999;
	stroke-width: 2;
	}
	</style>
	<body>
	<div id="canvas"></div>
	<script type="text/coffeescript">
	w = 960
	h = 500
	c = # center
	x: w/2
	y: h/2

	draw = SVG('canvas').size(w, h)
	draw.rect(w, h)

	C = draw.circle(300).center(c.x, c.y)
	L = draw.line(c.x, c.y, c.x+150, c.y).rotate(0, c.x, c.y)

	R2D = 180 / Math.PI # convert radians to degrees

	document.onmousemove = (e) ->
	x = e.offsetX - c.x
	y = e.offsetY - c.y
	θ = R2D * Math.atan2(y, x)
	θ = θ - 360 if θ > 0
	L.rotate(θ, c.x, c.y)
	</script>