diff --git a/output/alien.png b/output/alien.png new file mode 100644 index 0000000..b6c56c7 Binary files /dev/null and b/output/alien.png differ diff --git a/output/classic.png b/output/classic.png new file mode 100644 index 0000000..957c048 Binary files /dev/null and b/output/classic.png differ diff --git a/output/pinecone.png b/output/pinecone.png new file mode 100644 index 0000000..c39e1e5 Binary files /dev/null and b/output/pinecone.png differ diff --git a/output/sin.png b/output/sin.png new file mode 100644 index 0000000..42083b9 Binary files /dev/null and b/output/sin.png differ diff --git a/src/distribution.js b/src/distribution.js index f4c14e6..92f28ca 100644 --- a/src/distribution.js +++ b/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) { diff --git a/src/main.js b/src/main.js index 909c8d2..680b76b 100644 --- a/src/main.js +++ b/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(); }