Added new demo, fixed link to black hole demo

benjamminf · Nov 24, 2015 · df34a98 · df34a98
1 parent 520daf8
commit df34a98
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -18,12 +18,14 @@ distort.withPoints(function(x, y)
 ## Demos
 
 - [Smudging tool](http://codepen.io/benjamminf/full/GpaKGV/)
-- [Black hole effect](blackhole.html)
+- [Twirling effect](http://codepen.io/benjamminf/full/yYWowL/)
+- [Black hole effect](http://codepen.io/benjamminf/pen/Xbymvm)
 
 ## How it works
 
 DVG has three phases; normalisation, interpolation/extrapolation, and application.
 
+
 #### Normalisation
 
 The SVG file is taken apart, and all primitive shapes like `<rect>` and `<ellipse>` are converted to paths.

diff --git a/demos/twirl.html b/demos/twirl.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+<head>
+<title>SVG Distort</title>
+	<style>
+		body {
+			margin: 0;
+			padding: 0;
+		}
+	</style>
+</head>
+<body>
+<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	width="1000px" height="335px" viewBox="180 73 1000 335" style="enable-background:new 180 73 1000 335;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4285F4;}
+	.st1{fill:#EA4335;}
+	.st2{fill:#FBBC05;}
+	.st3{fill:#34A853;}
+</style>
+<g>
+	<path class="st0" d="M555,216.8h-57.9v17.1h41.2c-2,23.9-21.9,34.1-40.6,34.1c-24,0-44.9-18.9-44.9-45.3c0-25.8,19.9-45.6,45-45.6
+		c19.3,0,30.7,12.3,30.7,12.3l11.9-12.3c0,0-15.3-17.1-43.2-17.1c-35.6,0-63.1,30-63.1,62.3c0,31.8,25.9,62.7,64,62.7
+		c33.5,0,58-23,58-56.9C556.1,221,555,216.8,555,216.8L555,216.8z"/>
+	<path class="st1" d="M604,204.5c-23.6,0-40.4,18.4-40.4,39.9c0,21.8,16.4,40.6,40.7,40.6c22,0,40.1-16.9,40.1-40.1
+		C644.4,218.2,623.4,204.5,604,204.5L604,204.5z M604.3,220.3c11.6,0,22.6,9.3,22.6,24.5c0,14.8-10.9,24.4-22.6,24.4
+		c-12.8,0-23-10.3-23-24.5C581.2,230.7,591.2,220.3,604.3,220.3L604.3,220.3z"/>
+	<path class="st2" d="M691.5,204.5c-23.6,0-40.4,18.4-40.4,39.9c0,21.8,16.4,40.6,40.7,40.6c22,0,40.1-16.9,40.1-40.1
+		C731.8,218.2,710.8,204.5,691.5,204.5L691.5,204.5z M691.7,220.3c11.6,0,22.6,9.3,22.6,24.5c0,14.8-10.9,24.4-22.6,24.4
+		c-12.8,0-23-10.3-23-24.5C668.7,230.7,678.7,220.3,691.7,220.3L691.7,220.3z"/>
+	<path class="st0" d="M777.7,204.5c-21.6,0-38.6,18.9-38.6,40.2c0,24.2,19.7,40.3,38.2,40.3c11.5,0,17.5-4.6,22.1-9.8v8
+		c0,13.9-8.4,22.2-21.1,22.2c-12.3,0-18.4-9.1-20.6-14.3l-15.5,6.5c5.5,11.6,16.5,23.7,36.2,23.7c21.5,0,37.9-13.5,37.9-41.9V206
+		h-16.9v7.8C794.2,208.2,787.1,204.5,777.7,204.5L777.7,204.5z M779.3,220.3c10.6,0,21.5,9,21.5,24.5c0,15.7-10.8,24.4-21.7,24.4
+		c-11.5,0-22.2-9.3-22.2-24.2C756.8,229.5,767.9,220.3,779.3,220.3L779.3,220.3z"/>
+	<path class="st1" d="M889.7,204.4c-20.4,0-37.5,16.2-37.5,40.2c0,25.3,19.1,40.4,39.5,40.4c17,0,27.4-9.3,33.7-17.6l-13.9-9.2
+		c-3.6,5.6-9.6,11.1-19.7,11.1c-11.3,0-16.5-6.2-19.7-12.2l53.9-22.4l-2.8-6.6C917.9,215.1,905.8,204.5,889.7,204.4L889.7,204.4z
+		 M890.4,219.9c7.4,0,12.6,3.9,14.9,8.6l-36,15.1C867.7,231.9,878.8,219.9,890.4,219.9L890.4,219.9z"/>
+	<rect x="827.5" y="164" class="st3" width="16.5" height="118.5"/>
+</g>
+</svg>
+<div>
+	<label for="input-twirl">Brush size:</label>
+	<input id="input-twirl" type="range" min="-25" max="25" value="0" step="0.1">
+</div>
+<script src="../dist/dvg.min.js"></script>
+<script>
+
+	var svg = document.getElementById('svg');
+	var input = document.getElementById('input-twirl');
+	var distort = new DVG(svg, DVG.STATIC_INTERPOLATION, 4);
+
+	var s = 0;
+	var t = input.value;
+
+	var prevTime = 0;
+
+	var cx = 1000 / 2;
+	var cy = 335 / 2;
+	var cd = Math.sqrt(cx * cx + cy * cy);
+
+	input.addEventListener('change', function()
+	{
+		t = this.value;
+	});
+
+	var ease = 0.00004;
+
+	function twirl()
+	{
+		s = s + (t - s) * ease;
+
+		var ox = this.restX() - 180 - cx;
+		var oy = this.restY() -  73 - cy;
+
+		var d = Math.sqrt(ox * ox + oy * oy);
+
+		var cos = Math.cos(d / cd * s);
+		var sin = Math.sin(d / cd * s);
+
+		var xp = ox * cos + oy * sin;
+		var yp = oy * cos - ox * sin;
+
+		this.x(xp + 180 + cx);
+		this.y(yp +  73 + cy);
+	}
+
+	function frame()
+	{
+		distort.withPoints(twirl);
+		requestAnimationFrame(frame);
+	}
+
+	frame();
+
+
+
+</script>
+</body>
+</html>