added support for functions that specify curvature

Author: alvinwan

README.md

@@ -26,11 +26,7 @@ To get started, include the minified javascript in your a-frame project.
 
 # Usage
 
-Every low-poly object supports the following attributes:
-
-**`position-function: function(x, y, z)`**
-
-Function that accepts the vertex's *original position* and outputs the vertex's new position, or *root position*. This is applied *before* customizable randomization. All random perturbations are applied to the vertex's root position.
+Every low-poly object supports the following attributes. Modify the following attributes just like you would any other AFrame VR attribute:
 
 **`max-amplitude: <x double> <y double> <z double>`**
 
@@ -42,6 +38,10 @@ Maximum and minimum amount of perturbation allowed for each vertex. The vertex w
 
 Seed for random-number generator, allowing you to fix randomness during design
 
+**`position-function: function({x, y, z, min: {x, y, z}, max: {x, y, z}})`**
+
+Function that accepts the vertex's *original position* and outputs the vertex's new position, or *root position*. This is applied *before* customizable randomization. All random perturbations are applied to the vertex's root position.
+
 > **`max-amplitude-difference: <x double> <y double> <z double>`** *coming soon*
 >
 > **`min-amplitude-difference: <x double> <y double> <z double>`** *coming soon*

demo/index.html

@@ -16,7 +16,15 @@
     <!-- Google Analytics -->
     <script>
       $(document).ready(function() {
-        var t =0;
+        // setup "sky" so that it's sinusoidal
+        document.querySelector('#ground').setAttribute('position-function', function (position) {
+            var py = (position.y - position.min.y) / (position.max.y - position.min.y);
+            var z1 = Math.sin(py * 2 * Math.PI) * 1 + position.min.z;
+            return {x: position.x, y: position.y, z: z1}
+        });
+
+        // change seed every second
+        var t = 0;
         setInterval(function() {
           t += 1;
           seed = 'seed' + t;
@@ -68,18 +76,18 @@
           </lp-sphere>
           <a-entity class="tree" position="0 1 0">
             <lp-cylinder class="trunk reseed" radius-top="0.01" radius-bottom="0.1" height="2" color="#A5602D"></lp-cylinder>
-            <lp-cone class="reseed" radius="0.35" height="1" segments-height="5" amplitude="0.02" mixin="foliage" position="0 1.4 0"></lp-cone>
+            <lp-cone class="reseed" radius="0.35" height="1" segments-height="5" mixin="foliage" position="0 1.4 0"></lp-cone>
             <lp-cone class="reseed" radius="0.5" height="0.8" segments-height="3" mixin="foliage" position="0 0.8 0" seed="1"></lp-cone>
             <lp-cone class="reseed" radius="0.6" height="0.8" segments-height="3" mixin="foliage" position="0 0.4 0" seed="2"></lp-cone>
             <lp-cone class="reseed" radius="0.7" height="0.8" segments-height="3" mixin="foliage" position="0 0 0" seed="3"></lp-cone>
           </a-entity>
           <a-entity class="tree" scale="0.75 0.75 0.75" position="1 0.75 0">
             <lp-cylinder class="trunk reseed" radius-top="0.02" radius-bottom="0.3" height="2.5" color="#795110" position="0 0.25 0"></lp-cylinder>
-            <lp-sphere class="reseed" position="0 0.6 0" color="#59810C" radius="1" segments-width="10" segments-height="10" amplitude="0.2" low-poly-sphere></lp-sphere>
+            <lp-sphere class="reseed" position="0 0.6 0" color="#59810C" radius="1" segments-width="10" segments-height="10" low-poly-sphere></lp-sphere>
           </a-entity>
           <a-entity class="tree" scale="0.75 0.75 0.75" position="0 0.75 -1">
             <lp-cylinder class="trunk reseed" radius-top="0.02" radius-bottom="0.3" height="2.5" color="#795110" position="0 0.25 0"></lp-cylinder>
-            <lp-sphere class="reseed" position="0 0.8 0" color="#59810C" radius="1" segments-width="8" segments-height="8" amplitude="0.2" low-poly-sphere></lp-sphere>
+            <lp-sphere class="reseed" position="0 0.8 0" color="#59810C" radius="1" segments-width="8" segments-height="8" low-poly-sphere></lp-sphere>
           </a-entity>
           <a-entity class="rocks">
             <lp-sphere class="reseed" color="#666" radius="0.25" position="0 0 1"></lp-sphere>
@@ -118,6 +126,8 @@
         <lp-sphere class="reseed" color="#f4cb6b" radius="0.6"></lp-sphere>
         <a-animation attribute="position" from="2 3 0" to="2 2.5 0" direction="alternate" repeat="indefinite" dur="5000"></a-animation>
       </a-entity>
+
+      <lp-plane id="ground" color="#609af7" rotation="0 0 90" position="0 0 -3" width="10" height="10" max-amplitude="0.5 0.5 0.25"></lp-plane>
     </a-scene>
   </body>
 </html>

src/main.js

@@ -4,6 +4,7 @@ class LowPoly {
     return Object.assign({}, mapping, {
       'max-amplitude'             : name + '.maxAmplitude',
       'min-amplitude'             : name + '.minAmplitude',
+      'position-function'         : name + '.positionFunction',
       'seed'                      : name + '.seed',
     });
   }
@@ -15,7 +16,7 @@ class LowPoly {
       // Randomness amplitude and variance.
       maxAmplitude      : {default: {x: 0.1, y: 0.1, z: 0.1}, type: 'vec3'},
       minAmplitude      : {default: {x: 0, y: 0, z: 0}, type: 'vec3'},
-      positionFunction  : {default: (x, y, z) => { return {x: x, y: y, z: z} }},
+      positionFunction  : {default: position => { return {x: position.x, y: position.y, z: position.z} }},
       amplitudePDF      : {default: p => p},
 
       // Material.
@@ -60,18 +61,42 @@ class LowPoly {
 
   static randomizeVertices(data, geometry) {
       Random.seed(data.seed);
+      var min = LowPoly.computeMinPosition(geometry.vertices);
+      var max = LowPoly.computeMaxPosition(geometry.vertices);
       for (let v, i = 0, l = geometry.vertices.length; i < l; i++) {
         v = geometry.vertices[i];
 
-        var root = LowPoly.computeRootPosition(v, data.positionFunction);
+        var root = LowPoly.computeRootPosition(v, data.positionFunction, min, max);
         LowPoly.randomizeVertexDimension(v, 'x', root.x, data.amplitudePDF, data.maxAmplitude.x, data.minAmplitude.x);
         LowPoly.randomizeVertexDimension(v, 'y', root.y, data.amplitudePDF, data.maxAmplitude.y, data.minAmplitude.y);
         LowPoly.randomizeVertexDimension(v, 'z', root.z, data.amplitudePDF, data.maxAmplitude.z, data.minAmplitude.z);
       }
       geometry.verticesNeedUpdate = true;
   }
 
-  static computeRootPosition(vertex, positionFunction) {
+  static computeMinPosition(vertices) {
+    var min = {x: Infinity, y: Infinity, z: Infinity};
+    for (let v, i = 0, l = vertices.length; i < l; i++) {
+      v = vertices[i];
+      min.x = Math.min(v.x, min.x);
+      min.y = Math.min(v.y, min.y);
+      min.z = Math.min(v.z, min.z);
+    }
+    return min;
+  }
+
+  static computeMaxPosition(vertices) {
+    var max = {x: -Infinity, y: -Infinity, z: -Infinity};
+    for (let v, i = 0, l = vertices.length; i < l; i++) {
+      v = vertices[i];
+      max.x = Math.max(v.x, max.x);
+      max.y = Math.max(v.y, max.y);
+      max.z = Math.max(v.z, max.z);
+    }
+    return max;
+  }
+
+  static computeRootPosition(vertex, positionFunction, min, max) {
 
     ['x', 'y', 'z'].forEach(function (dimension) {
       var key = 'o' + dimension;
@@ -80,13 +105,24 @@ class LowPoly {
       }
     })
 
-    return positionFunction(vertex['ox'], vertex['oy'], vertex['oz'])
+    // TODO: hack to support funnctions in attributes... not a good idea
+    if (typeof positionFunction === 'string') {
+      eval("positionFunction = " + positionFunction);
+    }
+
+    return positionFunction({
+      x: vertex['ox'],
+      y: vertex['oy'],
+      z: vertex['oz'],
+      min: min,
+      max: max
+    })
   }
 
   static randomizeVertexDimension(vertex, dimension, root, amplitudePDF, maxAmplitude, minAmplitude) {
     let p = amplitudePDF(Random.random());
     let amp = (maxAmplitude - minAmplitude) * p + minAmplitude;
-    var value = vertex['o' + dimension];
+    var value = root;
     vertex[dimension] = value + amp;
   }
 }