Color optional

README.md

@@ -28,6 +28,8 @@ var viewer = ModelViewer({
   // head should slowly drift (overrides lookAt)
   slowDrift: false,
 
+  // An optional seed number for uniquely coloring this fox.
+  colorSeed: 123,
 })
 
 // add viewer to DOM

example/example.js

@@ -1,27 +1,81 @@
-var copy = require('copy-to-clipboard')
+var createViewer = require('../index')
+
+const colorSeed = Math.floor(Math.random() * 100000)
+
+window.addEventListener('load', () => {
+  const saveButton = document.querySelector('button.save')
+  saveButton.addEventListener('click', saveImage)
+
+  const recolorButton = document.querySelector('button.recolor')
+  recolorButton.addEventListener('click', recolor)
+
+  const cycleButton = document.querySelector('button.cycle')
+  cycleButton.addEventListener('click', toggleCycle)
+})
+
+let cycling = false
+let cycleInterval
+function toggleCycle () {
+  if (cycling && cycleInterval) {
+    console.dir(cycleInterval)
+    clearInterval(cycleInterval)
+    cycling = false
+  } else if (!cycling) {
+    cycleInterval = setInterval(recolor, 500)
+    cycling = true
+  }
+}
+
+
+document.addEventListener('keypress', (event) => {
+  if (event.keyCode === 99) { // the C key
+    saveImage()
+  }
+})
 
-document.addEventListener('keypress', function (event) {
-  if (event.keyCode === 99) { // the c key
+function saveImage () {
     var svg = document.querySelector('svg')
     var inner = svg.innerHTML
     var head = '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" '
     + '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> '
     + '<svg width="521px" height="521px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">'
-    var foot = '</svg>'
-
-     var full = head + inner + foot;
-
-     copy(full)
-  }
-})
+   var foot = '</svg>'
 
-var createViewer = require('../index')
+   var full = head + inner + foot;
+   download(full, `custom-fox-${colorSeed}.svg`, 'image/svg+xml')
+}
 
 var viewer = createViewer({
   width: 0.4,
   height: 0.4,
   followMouse: true,
   followMotion: true,
+  // colorSeed,
 })
 
-document.body.appendChild(viewer.container)
+function recolor() {
+  viewer.recolor(Math.floor(Math.random() * 10000000))
+}
+
+const foxDiv = document.querySelector('body div.fox')
+foxDiv.appendChild(viewer.container)
+
+// Function to download data to a file
+function download(data, filename, type) {
+    var file = new Blob([data], {type: type});
+    if (window.navigator.msSaveOrOpenBlob) // IE10+
+        window.navigator.msSaveOrOpenBlob(file, filename);
+    else { // Others
+        var a = document.createElement("a"),
+                url = URL.createObjectURL(file);
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(function() {
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(url);
+        }, 0);
+    }
+}
+

index.js

@@ -5,6 +5,19 @@ var invert = require('gl-mat4/invert')
 var rotate = require('gl-mat4/rotate')
 var transform = require('gl-vec3/transformMat4')
 var foxJSON = require('./fox.json')
+var colors = [
+	'#01888C', // teal
+  '#FC7500', // bright orange
+  '#034F5D', // dark teal
+  '#F73F01', // orangered
+  '#FC1960', // magenta
+  '#C7144C', // raspberry
+  '#F3C100', // goldenrod
+  '#1598F2', // lightning blue
+  '#2465E1', // sail blue
+  '#F19E02', // gold
+]
+var MersenneTwister = require('mersenne-twister');
 
 var SVG_NS = 'http://www.w3.org/2000/svg'
 
@@ -22,6 +35,11 @@ module.exports = function createLogo (options_) {
   var followCursor = !!options.followMouse
   var followMotion = !!options.followMotion
   var slowDrift = !!options.slowDrift
+  var colorSeed = options.colorSeed
+  var twister
+  if (colorSeed) {
+    twister = new MersenneTwister(colorSeed)
+  }
   var shouldRender = true
 
   var DISTANCE = 400
@@ -75,17 +93,28 @@ module.exports = function createLogo (options_) {
     }
   })()
 
-  function Polygon (svg, indices) {
+  function Polygon (svg, indices, chunk) {
     this.svg = svg
     this.indices = indices
     this.zIndex = 0
+    this.chunk = chunk
   }
 
   var polygons = (function () {
     var polygons = []
     for (var i = 0; i < foxJSON.chunks.length; ++i) {
       var chunk = foxJSON.chunks[i]
-      var color = 'rgb(' + chunk.color + ')'
+
+      if (!chunk.polygons) {
+        chunk.polygons = []
+      }
+
+      var color
+      if (twister) {
+        color = colors[Math.floor(twister.random() * colors.length)]
+      } else {
+        color = 'rgb(' + chunk.color + ')'
+      }
       var faces = chunk.faces
       for (var j = 0; j < faces.length; ++j) {
         var f = faces[j]
@@ -103,7 +132,9 @@ module.exports = function createLogo (options_) {
           'points',
           '0,0, 10,0, 0,10')
         container.appendChild(polygon)
-        polygons.push(new Polygon(polygon, f))
+        const poly = new Polygon(polygon, f, chunk)
+        polygons.push(poly)
+        chunk.polygons.push(poly)
       }
     }
     return polygons
@@ -307,11 +338,40 @@ module.exports = function createLogo (options_) {
     stopAnimation()
   }
 
+  function recolor (colorSeed) {
+    var twister
+    if (colorSeed) {
+      twister = new MersenneTwister(colorSeed)
+    }
+
+    for(const chunk of foxJSON.chunks) {
+      let color
+      if (twister) {
+        color = colors[Math.floor(twister.random() * colors.length)]
+      } else {
+        color = 'rgb(' + chunk.color + ')'
+      }
+
+      for (const polygon of chunk.polygons) {
+        setAttribute(
+          polygon.svg,
+          'fill',
+          color)
+          setAttribute(
+            polygon.svg,
+            'stroke',
+            color)
+      }
+    }    
+    renderScene()
+  }
+
   renderScene()
 
   return {
     container: container,
     lookAt: setLookAt,
+    recolor: recolor,
     setFollowMouse: setFollowMouse,
     setFollowMotion: setFollowMotion,
     stopAnimation: stopAnimation,

package.json

@@ -13,7 +13,8 @@
   "license": "ISC",
   "dependencies": {
     "gl-mat4": "1.1.4",
-    "gl-vec3": "1.0.3"
+    "gl-vec3": "1.0.3",
+    "mersenne-twister": "^1.1.0"
   },
   "devDependencies": {
     "browserify": "^16.2.2",

style.css

@@ -9,9 +9,9 @@ body{
   font-family: roboto;
 }
 
-div{
-  height:140px;
+div.fox{
   overflow: visible;
+  cursor: none;
 }
 
 svg {