syntagmatic · January 16, 2019 15:12
diff --git a/animation.html b/animation.html
 <style>
 body {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
 }
 </style>
 <canvas id='painting' width=740 height=740></canvas>
 <script src="d3.v4.js"></script>
 <script>
 var canvas = document.getElementById('painting')
 var context = canvas.getContext('2d')

 // center the animation
 context.translate(canvas.width/2, canvas.height/2)

 d3.timer(function(t) {
  context.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height)

  var x = Math.cos(t / 2000 * Math.PI) * 120
  var y = Math.sin(t / 2000 * Math.PI) * 120
  var color = "hsl(" + (Math.floor(t/30) % 360) + ",80%,60%)"

  circle(x,y,40,color)
 })

 function circle(x,y,radius,color) {
  context.fillStyle = color
  context.beginPath()
  context.arc(x,y,radius,0,2*Math.PI)
  context.fill()
 }
 </script>
diff --git a/barchart.html b/barchart.html
 <canvas id='painting' width=120 height=500></canvas>
 <script>

 var canvas = document.getElementById('painting')
 var context = canvas.getContext('2d')

 var data = [1, 1, 2, 3, 5, 8, 13, 21, 34]

 context.fillStyle = "#f5b"
 data.forEach(drawBar)

 function drawBar(d,i) {
  var x = 12*i;
  var y = 200;
  var width = 10;
  var height = -5*d;
  context.fillRect(x,y,width,height);
 }
 </script>
diff --git a/barchart.png b/barchart.png
diff --git a/boids.gif b/boids.gif
diff --git a/bubbles-dark.gif b/bubbles-dark.gif
diff --git a/bubbles.gif b/bubbles.gif
diff --git a/caniuse.png b/caniuse.png
diff --git a/canvas-animation-2.gif b/canvas-animation-2.gif
diff --git a/canvas-animation.gif b/canvas-animation.gif
diff --git a/choro.png b/choro.png
diff --git a/circs.png b/circs.png
diff --git a/color-wheels.html b/color-wheels.html
diff --git a/compositing-2.html b/compositing-2.html
diff --git a/compositing.html b/compositing.html
diff --git a/d3.v4.js b/d3.v4.js
diff --git a/exoplanets.png b/exoplanets.png
diff --git a/eye-brain.jpg b/eye-brain.jpg
diff --git a/eye-cells.jpg b/eye-cells.jpg
diff --git a/hidden-canvas-method.gif b/hidden-canvas-method.gif
diff --git a/index.html b/index.html
diff --git a/infant-mortality.png b/infant-mortality.png
diff --git a/julia.png b/julia.png
diff --git a/lines-closed.png b/lines-closed.png
diff --git a/lines-filled.png b/lines-filled.png
diff --git a/lines.html b/lines.html
diff --git a/lines.png b/lines.png
diff --git a/monitor-big-dark.png b/monitor-big-dark.png
diff --git a/monitor-big.png b/monitor-big.png
diff --git a/monitor-small.jpg b/monitor-small.jpg
diff --git a/multiply.gif b/multiply.gif
diff --git a/nyt-wind.gif b/nyt-wind.gif
diff --git a/rects.png b/rects.png
diff --git a/remark-latest.min.js b/remark-latest.min.js
diff --git a/science-sats.gif b/science-sats.gif
diff --git a/screen.gif b/screen.gif
diff --git a/source-over.gif b/source-over.gif
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/trails-neon.gif b/trails-neon.gif
diff --git a/trails-neon.html b/trails-neon.html
diff --git a/trails.gif b/trails.gif
diff --git a/trails.html b/trails.html
	<style>
	body {
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	}
	</style>
	<canvas id='painting' width=740 height=740></canvas>
	<script src="d3.v4.js"></script>
	<script>
	var canvas = document.getElementById('painting')
	var context = canvas.getContext('2d')

	// center the animation
	context.translate(canvas.width/2, canvas.height/2)

	d3.timer(function(t) {
	context.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height)

	var x = Math.cos(t / 2000 * Math.PI) * 120
	var y = Math.sin(t / 2000 * Math.PI) * 120
	var color = "hsl(" + (Math.floor(t/30) % 360) + ",80%,60%)"

	circle(x,y,40,color)
	})

	function circle(x,y,radius,color) {
	context.fillStyle = color
	context.beginPath()
	context.arc(x,y,radius,0,2*Math.PI)
	context.fill()
	}
	</script>
	<canvas id='painting' width=120 height=500></canvas>
	<script>

	var canvas = document.getElementById('painting')
	var context = canvas.getContext('2d')

	var data = [1, 1, 2, 3, 5, 8, 13, 21, 34]

	context.fillStyle = "#f5b"
	data.forEach(drawBar)

	function drawBar(d,i) {
	var x = 12*i;
	var y = 200;
	var width = 10;
	var height = -5*d;
	context.fillRect(x,y,width,height);
	}
	</script>