👨‍💻 Scaffolding...

.gitignore

@@ -0,0 +1,4 @@
+bower_components
+node_modules
+*.log
+.DS_Store

.npmignore

@@ -0,0 +1,10 @@
+bower_components
+node_modules
+*.log
+.DS_Store
+bundle.js
+test
+test.js
+demo/
+.npmignore
+LICENSE.md

.nvmrc

@@ -0,0 +1 @@
+v6

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+Copyright (c) 2015 Matt DesLauriers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.
+

demo/2d.js

@@ -0,0 +1,50 @@
+/*
+  An example rendering a triangulated mesh in Canvas2D.
+  
+  To test:
+    npm install
+    npm run 2d    
+ */
+
+var extractPath = require('extract-svg-path').parse
+var loadSvg = require('load-svg')
+var createMesh = require('../')
+var drawTriangles = require('draw-triangles-2d')
+
+var canvas = document.createElement('canvas')
+var context = canvas.getContext('2d')
+
+var size = 256
+canvas.width = size
+canvas.height = size
+
+loadSvg('demo/svg/entypo-social/twitter.svg', function (err, svg) {
+  if (err) throw err
+  var svgPath = extractPath(svg)
+  var mesh = createMesh(svgPath, {
+    scale: 1,
+    simplify: 0.01
+  })
+  render(mesh)
+})
+
+function render (mesh) {
+  context.clearRect(0, 0, size, size)
+  context.save()
+
+  var scale = size / 2
+  context.translate(size/2, size/2)
+  context.scale(scale, -scale)
+  context.beginPath()
+  context.lineJoin = 'round'
+  context.lineCap = 'round'
+  context.lineWidth = 2 / scale
+  drawTriangles(context, mesh.positions, mesh.cells)
+  context.fillStyle = '#d86c15'
+  context.strokeStyle = '#3b3b3b'
+  context.fill()
+  context.stroke()
+  context.restore()
+}
+
+document.body.appendChild(canvas)

demo/frag.glsl

@@ -0,0 +1,6 @@
+uniform float animate;
+uniform float opacity;
+
+void main() {
+  gl_FragColor = vec4(vec3(1.0), opacity);
+}

demo/index.js

@@ -0,0 +1,173 @@
+/*
+  This is a more advanced ES6 example, animating and
+  rendering the triangles with ThreeJS.
+
+  To test:
+    npm install
+    npm run start
+ */
+
+import THREE from 'three'
+// import createLoop from 'canvas-loop'
+import loadSvg from 'load-svg'
+import Tweenr from 'tweenr'
+import { parse as getSvgPaths } from 'extract-svg-path'
+import randomVec3 from 'gl-vec3/random'
+import triangleCentroid from 'triangle-centroid'
+import reindex from 'mesh-reindex'
+import unindex from 'unindex-mesh'
+// import shuffle from 'array-shuffle'
+import svgMesh3d from '../'
+
+const createGeom = require('three-simplicial-complex')(THREE)
+const fs = require('fs')
+
+const tweenr = Tweenr({ defaultEase: 'expoOut' })
+const vertShader = fs.readFileSync(__dirname + '/vert.glsl', 'utf8')
+const fragShader = fs.readFileSync(__dirname + '/frag.glsl', 'utf8')
+let files = fs.readdirSync(__dirname + '/svg')
+  .filter(file => /\.svg$/.test(file))
+// files = shuffle(files)
+
+// document.querySelector('.count').innerText = files.length
+
+const canvas = document.querySelector('canvas')
+canvas.addEventListener('touchstart', (ev) => ev.preventDefault())
+canvas.addEventListener('contextmenu', (ev) => ev.preventDefault())
+
+const renderer = new THREE.WebGLRenderer({
+  canvas: canvas,
+  antialias: true,
+  // devicePixelRatio: window.devicePixelRatio
+})
+renderer.setClearColor(0x78D8FF, 1)
+
+const scene = new THREE.Scene()
+const camera = new THREE.PerspectiveCamera(50, 1, 0.01, 100)
+camera.position.set(0, 0, 5)
+
+let pointer = 0
+createApp()
+nextSvgMesh()
+
+function nextSvgMesh (delay) {
+  delay = delay || 0
+  var file = files[pointer++ % files.length]
+  loadSvg('demo/svg/' + file, (err, svg) => {
+    if (err) throw err
+    renderSVG(svg, delay)
+  })
+}
+
+function renderSVG (svg, delay) {
+  delay = delay || 0
+
+  // const wireframe = pointer % 2 === 0
+  const wireframe = true
+
+  // grab all <path> data
+  const svgPath = getSvgPaths(svg)
+  // triangulate
+  let complex = svgMesh3d(svgPath, {
+    scale: 10,
+    simplify: 0.01,
+    // play with this value for different aesthetic
+    randomization: 800
+  })
+
+  // split mesh into separate triangles so no vertices are shared
+  complex = reindex(unindex(complex.positions, complex.cells))
+
+  // we will animate the triangles in the vertex shader
+  const attributes = getAnimationAttributes(complex.positions, complex.cells)
+
+  // build a ThreeJS geometry from the mesh primitive
+  const geometry = new createGeom(complex)
+
+  // our shader material
+  const material = new THREE.ShaderMaterial({
+    color: 0xffffff,
+    side: THREE.DoubleSide,
+    vertexShader: vertShader,
+    fragmentShader: fragShader,
+    wireframe: wireframe,
+    transparent: true,
+    attributes: attributes,
+    uniforms: {
+      opacity: { type: 'f', value: 1 },
+      scale: { type: 'f', value: 0 },
+      animate: { type: 'f', value: 0 }
+    }
+  })
+  const mesh = new THREE.Mesh(geometry, material)
+  scene.add(mesh)
+  const interval = 2 + delay
+
+
+  // explode in
+  tweenr.to(material.uniforms.animate, {
+    value: 1, duration: 1.5, delay: delay, ease: 'expoInOut'
+  })
+  tweenr.to(material.uniforms.scale, {
+    value: 1, duration: 1, delay: delay
+  })
+
+  // explode out
+  // tweenr.to(material.uniforms.scale, {
+  //   delay: interval, value: 0, duration: 0.75, ease: 'expoIn'
+  // })
+  // tweenr.to(material.uniforms.animate, {
+  //   duration: 0.75, value: 0, delay: interval
+  // }).on('complete', () => {
+  //   geometry.dispose()
+  //   geometry.vertices.length = 0
+  //   scene.remove(mesh)
+  //   // nextSvgMesh()
+  // })
+}
+
+function getAnimationAttributes (positions, cells) {
+  const directions = []
+  const centroids = []
+  for (let i=0; i<cells.length; i++) {
+    const [ f0, f1, f2 ] = cells[i]
+    const triangle = [ positions[f0], positions[f1], positions[f2] ]
+    const center = triangleCentroid(triangle)
+    const dir = new THREE.Vector3().fromArray(center)
+    centroids.push(dir, dir, dir)
+
+    const random = randomVec3([], Math.random())
+    const anim = new THREE.Vector3().fromArray(random)
+    directions.push(anim, anim, anim)
+  }
+  return {
+    direction: { type: 'v3', value: directions },
+    centroid: { type: 'v3', value: centroids }
+  }
+}
+
+function createApp () {
+  // const app = createLoop(canvas, { scale: renderer.devicePixelRatio })
+  //   .start()
+  //   .on('tick', render)
+  //   .on('resize', resize)
+  window.addEventListener('resize', resize);
+
+  function resize () {
+    // var [ width, height ] = app.shape
+    var width = window.innerWidth;
+    var height = window.innerHeight;
+    camera.aspect = width / height
+    renderer.setSize(width, height, false)
+    camera.updateProjectionMatrix()
+    render()
+  }
+
+  function render () {
+    renderer.render(scene, camera)
+
+    setTimeout(() => render(), 100);
+  }
+
+  resize()
+}

demo/vert.glsl

@@ -0,0 +1,29 @@
+attribute vec3 direction;
+attribute vec3 centroid;
+
+uniform float animate;
+uniform float opacity;
+uniform float scale;
+
+#define PI 3.14
+
+void main() {
+  // rotate the triangles
+  // each half rotates the opposite direction
+  float theta = (1.0 - animate) * (PI * 1.5) * sign(centroid.x);
+  mat3 rotMat = mat3(
+    vec3(cos(theta), 0.0, sin(theta)),
+    vec3(0.0, 1.0, 0.0),
+    vec3(-sin(theta), 0.0, cos(theta))
+  );
+
+  // push outward
+  vec3 offset = mix(vec3(0.0), direction.xyz * rotMat, 1.0 - animate);
+
+  // scale triangles to their centroids
+  vec3 tPos = mix(centroid.xyz, position.xyz, scale) + offset;
+
+  gl_Position = projectionMatrix *
+              modelViewMatrix *
+              vec4(tPos, 1.0);
+}