J. Voigt joyrexus

Oracle Team USA won its eighth consecutive race to overtake Emirates Team New Zealand and retain the America’s Cup. A look at how the final race unfolded, with Oracle winning by 44 seconds.

A NYT interactive graphic by MIKE BOSTOCK and SHAN CARTER

Simple demonstration of how to extend svg.js. Our little extension, svg.unit.js, enables one to create a unit circle and move around to various points on it based on a specified angle.

Note: moving around a unit circle as our demo use case was largely inspired by Tom MacWright's Math for Pictures post.

For example, we can create a unit circle centered at 150, 150 with radius 100 and use degrees as our angle unit of measure:

Demo of the bug.movesTo method in our little svg.bug.js extension for svg.js.

The movesTo method allows one to specify a series of points for the bug to move to. For example, starting from point A we can move to point B, then to C, then back to A:

A = new Point 40, 20
B = new Point 200, 300
C = new Point 300, 150

bug = draw.bug(A.x, A.y)

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.

	<!DOCTYPE html>
	<meta charset=utf-8 />
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:relative; width:960px;height:500px; }
	</style>
	<body>
	<div id='map'></div>

	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://joyrexus.github.io/sandbox/border/lib.js"></script>
	<style>
	@import url(http://fonts.googleapis.com/css?family=Roboto:700,300);
	body {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	}

	# http://en.wikipedia.org/wiki/Fixed-point_combinator#Y_combinator
	#
	# λf . (λx . x x)(λy . f (λv . ((y y) v)))
	Y = (f) -> ((x) -> x x)((y) -> f ((v) -> (y y) v))

	# or ...

	Y = (f) ->
	p = (h) ->
	(x) -> f(h(h))(x)

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	margin: 0;
	padding: 0;
	}

	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
	<script src="http://jashkenas.github.io/coffee-script/extras/coffee-script.js"></script>
	<script src="svg.cursor.js"></script>
	<style>
	rect {
	fill: none;
	stroke: #999;
	stroke-width: 2;