From f8f1b583c034810b795b37510603fb147ff3f60e Mon Sep 17 00:00:00 2001 From: Yuval Adam Date: Sun, 20 May 2012 18:31:52 +0300 Subject: page updates and better tree rotation --- index.html | 59 ++++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 36 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index d34536a..4f1dc2d 100644 --- a/index.html +++ b/index.html @@ -32,10 +32,19 @@

L-Systems (short for Lindenmayer systems) are instances of a formal grammar that are used to model growth processes of plant deveopment. L-Systems can be used to generate realistic, natural-looking organisms in simulated environments.

-

An L-System consists of an initial axiom string, for example: F, and a set of production rules, for example: F -> F-F+FF. The rules are used to iterativey expand the string to a larger one. In our example, two iterations on the string will yield the string F-F+FF-F-F+FF+F-F+FFF-F+FF. L-Systems also include a mechanism that converts the output string into a geometrical representation. The syntax includes a unit vector step forward that draws a line - F, left and right turns on all three axises - +,-,&,^,<,>, a vector direction flip - |, and state push and pop functions - [, ] that enable branch creation. L-Systems.JS can generate the proper cartesian coordinates for processing in the front-end of your choice (WebGL, canvas or SVG). +

An L-System consists of an initial axiom string, for example: F, and a set of production rules, for example: F -> F-F+FF. The rules are used to iterativey expand the string to a larger one. In our example, two iterations on the string will yield the string F-F+FF-F-F+FF+F-F+FFF-F+FF. L-Systems also include a mechanism that converts the output string into a geometrical representation. The syntax includes:

+ + + +

Proper cartesian coordinates can then be generated from the result string, for processing in the front-end of your choice (WebGL, canvas or SVG).

-

L-Systems.JS is created and maintained by Yuval Adam.

+

L-Systems.JS was created by Yuval Adam.

@@ -53,11 +62,13 @@ console.log(coords); // [[[0,0,0], [0,1,0], [1,1,0], ... ]]

These coordinates can now be plotted by any front-end. For example, using THREE.js:

 for (var i=0; i<coords.length; i++) {
-  var branch = coords[i];
+  var branch = [];
+  for (var j=0; j<coords[i].length; j++) {
+    branch.push(new THREE.Vector3(coords[i][j][0], coords[i][j][1], coords[i][j][2]));
+  }
   var geometry = new THREE.Shape(branch).createPointsGeometry();
-  var material = new THREE.LineBasicMaterial({color: 0x111122, linewidth: 2});
-  var line = new THREE.Line(geometry, material);
-  scene.add(line);
+  console.log(geometry);
+  draw_geometry(geometry);
 }
@@ -89,6 +100,7 @@ for (var i=0; i<coords.length; i++) { var container; var scene, camera, renderer; + var lsys_tree; var mouseX = 0, mouseY = 0; var windowHalfX = WIDTH / 2; @@ -96,8 +108,8 @@ for (var i=0; i<coords.length; i++) { init(); draw_axes(); - //draw_cube(); - var lsys = new LSystem('F', { 'F': 'F-F+FF' }); + draw_cube(); + var lsys = new LSystem('F', { 'F': 'F+F-F' }); var tree = lsys.iterate(4); var coords = lsys.draw(Math.PI / 2); draw_lsys(coords); @@ -107,7 +119,8 @@ for (var i=0; i<coords.length; i++) { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(20, WIDTH / HEIGHT, 1, 10000); - camera.position.z = 10; + camera.position.y = 100; + camera.position.z = 100; scene.add(camera); light = new THREE.DirectionalLight( 0xffffff ); @@ -178,20 +191,21 @@ for (var i=0; i<coords.length; i++) { } function draw_lsys(coords) { + lsys_tree = new THREE.Object3D(); for (var i=0; i