+ Trees!

src/distribution.js

@@ -1,10 +1,89 @@
+const THREE = require('three'); // older modules are imported like this. You shouldn't have to worry about this much
+
+function fract(x) {
+    return x > 0 ? (x - Math.floor(x)) : 1.0 - (x - Math.ceil(x));
+}
 
 export function func1(mesh, settings) {
     var abs_y = settings.pos;
     var height = settings.max - settings.min;
     var rel_y = (settings.pos - settings.min) / height;
+
+    var t = height - abs_y;
+
+
+    var tt = Math.pow(t / height, 1.5) * height;
+
+    var modulator = tt * .75;
+
+    var wave = Math.abs(Math.sin(t / 3.35)) + Math.abs(Math.sin(t * 3.0)) * .055;
+
+    var scale = wave * modulator;
+
+    mesh.position.set(0, abs_y, 0);
+    mesh.scale.set(scale, settings.size, scale);
+}
+
+
+export function func2(mesh, settings) {
+    var abs_y = settings.pos;
+    var height = settings.max - settings.min;
+    var rel_y = (settings.pos - settings.min) / height;
+
+    var t = height - abs_y;
+
+
+    var tt = Math.pow(t / height, 3.0) * height;
+
+    var modulator = tt * .75;
+
+    var wave = fract(t * .2);// Math.abs(Math.sin(t / 3.35)) + Math.abs(Math.sin(t * 3.0)) * .055;
+
+    var scale = wave * modulator;
+
+    mesh.position.set(0, abs_y, 0);
+    mesh.scale.set(scale, settings.size, scale);
+}
+
+export function func3(mesh, settings) {
+    var abs_y = settings.pos;
+    var height = settings.max - settings.min;
+    var rel_y = (settings.pos - settings.min) / height;
+
+    var t = height - abs_y;
+
+
+    var tt = Math.pow(t / height, 3.0) * height;
+
+    var modulator = tt * .75;
+
+    var wave = 1.0 - Math.abs(Math.sin(t / 2.0));
+
+    var scale = wave * modulator;
+
+    mesh.position.set(0, abs_y, 0);
+    mesh.scale.set(scale, settings.size, scale);
+}
+
+
+export function func4(mesh, settings) {
+    var abs_y = settings.pos;
+    var height = settings.max - settings.min;
+    var rel_y = (settings.pos - settings.min) / height;
+
+    var t = (height - abs_y) / height;
+
+    // var wave = THREE.Math.smootherstep(Math.pow(t / height, 1.0), 0, 1) * t * .75;
+
+
+    var wave = (Math.sin(t * 3.1415 - 1.25) * .5 + .5) * height * .75;
+
+    wave += (1.0 - fract(t * height * .25)) * 6  * (Math.sin(t * 3.1415 - 1.25) * .5 + .5);//* THREE.Math.smootherstep(t / height, 0, 1);// Math.abs(Math.sin(t / 3.35)) + Math.abs(Math.sin(t * 3.0)) * .055;
+
+    var scale = wave;
 
     mesh.position.set(0, abs_y, 0);
+    mesh.scale.set(scale, settings.size, scale);
 }
 
 export function sawtooth(mesh, settings) {

src/main.js

@@ -4,6 +4,13 @@ import Framework from './framework'
 
 import {func1, func2, func3, func4} from './distribution'
 
+var TreeType = {
+  SIN : "Sin",
+  CLASSIC : "Classic",
+  ALIEN : "Alien",
+  PINECONE : "Pinecone"
+}
+
 // called after the scene loads
 function onLoad(framework) {
   var scene = framework.scene;
@@ -39,7 +46,8 @@ function onLoad(framework) {
 
   var settings = {
     treeHeight: 50,
-    leafHeight: 0.1
+    leafHeight: 0.1,
+    treeType: TreeType.SIN
   }
 
   var tree_items = [];
@@ -59,7 +67,15 @@ function onLoad(framework) {
         size: settings.leafHeight
       };
 
-      func1(mesh, params);
+      if(settings.treeType == 'Sin')
+        func1(mesh, params);
+      else if(settings.treeType == 'Classic')
+        func2(mesh, params);
+      else if(settings.treeType == 'Alien')
+        func3(mesh, params);
+      else if(settings.treeType == 'Pinecone')
+        func4(mesh, params);
+
       // func2(mesh, settings);
       // func3(mesh, settings);
       // func4(mesh, settings);
@@ -73,6 +89,7 @@ function onLoad(framework) {
   // more information here: https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
   gui.add(settings, 'treeHeight', 0.1, 100).onChange(buildTree);
   gui.add(settings, 'leafHeight', 0.1, 1).onChange(buildTree);
+  gui.add(settings, 'treeType', [ 'Sin', 'Classic', 'Alien', 'Pinecone' ] ).onChange(buildTree);
 
   buildTree();
 }