feat: shape morphing with non-matching points

Closes #5.
colinmeinke · Jun 28, 2016 · 1e39925 · 1e39925
1 parent 9f02b64
commit 1e39925
Show file tree

Hide file tree

Showing 11 changed files with 157 additions and 5 deletions.
diff --git a/examples/morph/.gitignore b/examples/morph/.gitignore
@@ -0,0 +1,3 @@
+client.dist.js
+node_modules/
+npm-debug.log
diff --git a/examples/morph/README.md b/examples/morph/README.md
@@ -0,0 +1,10 @@
+# Wilderness morph example
+
+## Usage
+
+```
+npm install
+npm run build
+```
+
+Then open `index.html` in your browser.
diff --git a/examples/morph/client.js b/examples/morph/client.js
@@ -0,0 +1,26 @@
+import { shape, render, play } from '../../src';
+
+const from = {
+  type: 'circle',
+  cx: 25,
+  cy: 25,
+  r: 25,
+  fill: '#E54',
+};
+
+const to = {
+  type: 'path',
+  d: 'M75,75l10-5l15,20v10h-10l-5-5l-10,5z',
+  moveIndex: 1,
+  reverse: true,
+};
+
+const animation = shape( from, to );
+
+render({ selector: '.svg' }, animation );
+
+play( animation, {
+  alternate: true,
+  duration: 2000,
+  iterations: Infinity,
+});
diff --git a/examples/morph/index.html b/examples/morph/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Wilderness morph example</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      .svg {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <svg
+      class="svg"
+      height="100"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox="0 0 100 100"
+      width="100"
+    >
+    </svg>
+    <script src="./client.dist.js"></script>
+  </body>
+</html>
diff --git a/examples/morph/package.json b/examples/morph/package.json
@@ -0,0 +1,34 @@
+{
+  "author": {
+    "name": "Colin Meinke",
+    "email": "hello@colinmeinke.com",
+    "url": "www.colinmeinke.com"
+  },
+  "babel": {
+    "plugins": [
+      "transform-object-rest-spread"
+    ],
+    "presets": [
+      "es2015"
+    ]
+  },
+  "bugs": {
+    "url": "https://github.com/colinmeinke/wilderness/issues"
+  },
+  "description": "Wilderness morph example",
+  "devDependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.0.1"
+  },
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/colinmeinke/wilderness.git"
+  },
+  "scripts": {
+    "build": "browserify ./client.js -o ./client.dist.js -t babelify"
+  },
+  "version": "0.0.0-semantically-released"
+}
diff --git a/examples/playback/README.md b/examples/playback/README.md
@@ -1,4 +1,4 @@
-# Wilderness basic example
+# Wilderness playback example
 
 ## Usage
 

diff --git a/examples/playback/index.html b/examples/playback/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Wilderness playback controls example</title>
+    <title>Wilderness playback example</title>
     <style>
       html,
       body {

diff --git a/examples/playback/package.json b/examples/playback/package.json
@@ -15,7 +15,7 @@
   "bugs": {
     "url": "https://github.com/colinmeinke/wilderness/issues"
   },
-  "description": "Wilderness basic example",
+  "description": "Wilderness playback example",
   "devDependencies": {
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-preset-es2015": "^6.9.0",

diff --git a/src/core/helpers/index.js b/src/core/helpers/index.js
@@ -11,6 +11,7 @@ import {
 
 import { filter } from './misc';
 import match from './match';
+import normalise from './points';
 
 export {
   currentIteration,
@@ -21,6 +22,7 @@ export {
   finished,
   iterationsComplete,
   match,
+  normalise,
   paused,
   previousIteration,
 };
diff --git a/src/core/helpers/points.js b/src/core/helpers/points.js
@@ -0,0 +1,43 @@
+import { add, cubify, remove } from 'points';
+
+const addCurves = ( a, b ) => {
+  const c = [];
+
+  for ( let i = 0, l = a.length; i < l; i++ ) {
+    if ( !a[ i ].curve && b[ i ].curve ) {
+      c.push({ ...a[ i ], curve: {
+        type: 'cubic',
+        x1: a[ i - 1 ].x,
+        y1: a[ i - 1 ].y,
+        x2: a[ i ].x,
+        y2: a[ i ].y,
+      }});
+    } else {
+      c.push( a[ i ]);
+    }
+  }
+
+  return c;
+}
+
+const normaliseCurves = ( a, b ) => ([ addCurves( a, b ), addCurves( b, a )]);
+
+const normalisePoints = ( a, b ) => {
+  let c = cubify( remove( a ));
+  let d = cubify( remove( b ));
+
+  if ( d.length > c.length ) {
+    c = add( c, d.length );
+  } else if ( c.length > d.length ) {
+    d = add( d, c.length );
+  }
+
+  return normaliseCurves( c, d );
+};
+
+const normalise = ( a, b ) => {
+  const [ c, d ] = normalisePoints( a.points, b.points );
+  return [{ ...a, points: c }, { ...b, points: d }];
+};
+
+export default normalise;
diff --git a/src/core/shape/update.js b/src/core/shape/update.js
@@ -1,4 +1,4 @@
-import { currentState, easingFunc, match } from '../helpers';
+import { currentState, easingFunc, match, normalise } from '../helpers';
 import { stylePropAttrMap } from './props';
 import { toPath } from 'svg-points';
 
@@ -39,7 +39,9 @@ const currentShape = ({ shapes, state, timeline }) => {
   const t = d * offset / scale;
   const ease = typeof easing === 'function' ? easing : easingFunc( easing );
 
-  return match( shape1, shape2, ( b, e ) => b === e ? b : ease( t, b, e, d ));
+  const [ s1, s2 ] = normalise( shape1, shape2 );
+
+  return match( s1, s2, ( b, e ) => b === e ? b : ease( t, b, e, d ));
 };
 
 const update = shape => {