examples: fix resolution of graphs in examples/06_array_interpolation

Author: trusktr

examples/06_array_interpolation.html

@@ -25,6 +25,7 @@ <h2>06 _ array interpolation</h2>
 		<div id="target"></div>
 
 		<script src="../dist/tween.umd.js"></script>
+		<script src="js/createGraph.js"></script>
 		<script>
 			init()
 			animate()
@@ -73,51 +74,70 @@ <h2>06 _ array interpolation</h2>
 				target.appendChild(createPath('', TWEEN.Interpolation.Bezier))
 				target.appendChild(createPath('', TWEEN.Interpolation.CatmullRom))
 
-				function createPath(title, interpolation) {
+				function createPath(text, interpolation, width = 240, height = 160) {
 					var div = document.createElement('div')
 					div.style.display = 'inline-block'
+					// +20 for padding
 					div.style.width = width + 20 + 'px'
 					div.style.height = height + 20 + 'px'
 
 					var canvas = document.createElement('canvas')
-					canvas.width = width
-					canvas.height = height
+					canvas.style.width = width + 'px'
+					canvas.style.height = height + 'px'
+					canvas.width = toPhysicalPx(width)
+					canvas.height = toPhysicalPx(height)
 
 					var context = canvas.getContext('2d')
 					context.fillStyle = 'rgb(250,250,250)'
-					context.fillRect(0, 0, width, height)
+					context.fillRect(0, 0, toPhysicalPx(width), toPhysicalPx(height))
 
+					context.lineWidth = toPhysicalPx(1)
+					context.strokeStyle = 'rgb(230,230,230)'
+
+					// points
 					context.fillStyle = 'rgb(200,200,200)'
-					context.fillRect(x0 - 3, y0 - 3, 6, 6)
-					context.fillRect(xA[xA.length - 1] - 3, yA[yA.length - 1] - 3, 6, 6)
+					context.fillRect(
+						toPhysicalPx(x0) - toPhysicalPx(3),
+						toPhysicalPx(y0) - toPhysicalPx(3),
+						toPhysicalPx(6),
+						toPhysicalPx(6),
+					)
+					context.fillRect(
+						toPhysicalPx(xA[xA.length - 1]) - toPhysicalPx(3),
+						toPhysicalPx(yA[yA.length - 1]) - toPhysicalPx(3),
+						toPhysicalPx(6),
+						toPhysicalPx(6),
+					)
 
 					for (var i = 0; i < xA.length; i++) {
-						context.fillRect(xA[i] - 2, yA[i] - 2, 4, 4)
+						context.fillRect(
+							toPhysicalPx(xA[i]) - toPhysicalPx(2),
+							toPhysicalPx(yA[i]) - toPhysicalPx(2),
+							toPhysicalPx(4),
+							toPhysicalPx(4),
+						)
 					}
+					//
 
-					context.lineWidth = 2
+					context.lineWidth = toPhysicalPx(2)
 					context.strokeStyle = 'rgba(255,127,127,0.9)'
+					context.beginPath()
+					context.moveTo(toPhysicalPx(x0), toPhysicalPx(y0))
+					context.lineCap = 'round'
 
-					var obj = {x: x0, y: y0, old: {x: x0, y: y0}}
+					var position = {x: x0, y: y0}
 
-					new TWEEN.Tween(obj)
+					new TWEEN.Tween(position)
 						.to({x: xA, y: yA}, 3000)
-						.onUpdate(function (object) {
-							context.beginPath()
-							context.moveTo(object.old.x, object.old.y)
-							context.lineTo(object.x, object.y)
-							context.closePath()
+						.easing(TWEEN.Easing.Linear.None)
+						.interpolation(interpolation)
+						.onUpdate(function () {
+							context.lineTo(toPhysicalPx(position.x), toPhysicalPx(position.y))
 							context.stroke()
-
-							object.old.x = object.x
-							object.old.y = object.y
 						})
-						.interpolation(interpolation)
-						.easing(TWEEN.Easing.Linear.None)
-						.delay(250)
 						.start()
 
-					div.appendChild(document.createTextNode(title))
+					div.appendChild(document.createTextNode(text))
 					div.appendChild(document.createElement('br'))
 					div.appendChild(canvas)
 

examples/js/createGraph.js

@@ -1,8 +1,6 @@
-function createGraph(t, f, c) {
-	const width = 180
-	const height = 100
-	const toPhysicalPx = cssPx => cssPx * devicePixelRatio
+const toPhysicalPx = cssPx => cssPx * devicePixelRatio
 
+function createGraph(text, easingFn, width = 180, height = 100) {
 	var div = document.createElement('div')
 	div.style.display = 'inline-block'
 	// +20 for padding
@@ -31,7 +29,7 @@ function createGraph(t, f, c) {
 	context.stroke()
 
 	context.lineWidth = toPhysicalPx(2)
-	context.strokeStyle = 'rgb(255,127,127)'
+	context.strokeStyle = 'rgba(255,127,127,0.9)'
 	context.beginPath()
 	context.moveTo(toPhysicalPx(5), toPhysicalPx(80))
 	context.lineCap = 'round'
@@ -44,14 +42,14 @@ function createGraph(t, f, c) {
 		.start()
 	new TWEEN.Tween(position)
 		.to({y: toPhysicalPx(20)}, 2000)
-		.easing(f)
+		.easing(easingFn)
 		.onUpdate(function () {
 			context.lineTo(position.x, position.y)
 			context.stroke()
 		})
 		.start()
 
-	div.appendChild(document.createTextNode(t))
+	div.appendChild(document.createTextNode(text))
 	div.appendChild(document.createElement('br'))
 	div.appendChild(canvas)