make lsys app

public/ohmlang-lsys/appui.js

@@ -1,5 +1,20 @@
 function createApp(){
 
+    let self = this
+
+    function makeSetter(val){
+        let setstr = 'this.'+val+ '= value; this.redrawEvent();' 
+        return setstr
+    }
+
+    function getNewPosition() {
+        //let allChild = vwf.find("","/*")
+        let cursorVisID = vwf.find("myCursor-avatar-" + vwf.moniker_,"./vis")[0]
+        let avPos = AFRAME.utils.coordinates.parse(vwf.getProperty(cursorVisID, 'worldPosition'));
+        let newPos = [avPos.x, avPos.y, avPos.z]
+        return newPos
+    }  
+
 return {
     $cell: true,
     $type: "div",
@@ -15,34 +30,202 @@ return {
                     $type: "div",
                     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                     $components: [
+                        // {
+                        //     $cell: true,
+                        //     $type: "button",
+                        //     class: "mdc-button mdc-button--raised",
+                        //     $text: "Draw L-System",
+                        //     onclick: function (e) {
+                        //         let sceneID = vwf.find("","/")[0];
+                        //         vwf_view.kernel.callMethod(sceneID, "drawLSys1");
+                        //     }
+
+                        // },
                         {
                             $cell: true,
                             $type: "button",
                             class: "mdc-button mdc-button--raised",
-                            $text: "Draw L-System",
+                            $text: "Create new turtle",
                             onclick: function (e) {
-                                let sceneID = vwf.find("","/")[0];
-                                vwf_view.kernel.callMethod(sceneID, "drawLSys1");
+                               let sceneID = vwf.find("","/")[0];
+                               let turtleID = vwf.find("","/turtle")[0];
+
+                               let params = {
+                                   "angle": 60,
+                                   "iteration": 3,
+                                   "stepLength": 0.3,
+                                   "rule": 'F++F++F',
+                                   "axiomF": 'F-F++F-F',
+                                   "axiomG": ''
+                               }
+
+                               console.log("create new turtle");
+                              //let newTurtle = vwf.getNode(turtleID, true);
+                              // let newTurtle = self.removeProps(node);
+
+                              let newTurtle = self.getNodeDef(turtleID);
+
+                            //    newTurtle.children.drawNode = {
+                            //     "extends": "http://vwf.example.com/aframe/aentity.vwf"
+                            // }
+                           newTurtle.events.redrawEvent = {}
+                            
+                            let props = ["angle", "iteration", "stepLength", "rule", "axiomF", "axiomG"]
+                            
+                              props.forEach(el =>{
+                                newTurtle.properties[el] = {
+                                    "value": params[el],
+                                    "set": makeSetter(el)
+                                }
+                              })
+                            
+                              newTurtle.properties.position = getNewPosition();
+                              newTurtle.properties.ready = false;
+
+                               let randomName = "turtle-new-" + self.GUID();
+                               vwf_view.kernel.createChild(sceneID, randomName, newTurtle);
                             }
 
                         }
-                        // {
-                        //     $cell: true,
-                        //     $type: "button",
-                        //     class: "mdc-button mdc-button--raised",
-                        //     $text: "Create new turtle",
-                        //     onclick: function (e) {
-                        //        // let sceneID = vwf.find("","/")[0];
-                        //         vwf_view.kernel.callMethod(sceneID, "createNewTurtle");
-                        //        // let proto = self.getCleanNodePrototype(this._currentNode);
-                        //     }
+                       
 
-                        // }
+                    ]
+                },
+                {
+                    $cell: true,
+                    $type: "div",
+                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
+                    $components: [
 
+                        {
+                            $type: "img",
+                            src: "./lsys/Koch.jpg",
+                            class: "mdc-elevation--z2",
+                            style: "width: 150px",
+                            onclick: function(evt){
+                                
+                            let turtleID = vwf.find("","/turtle")[0];
+                            
+                            let params = {
+                                "angle": 60,
+                                "iteration": 3,
+                                "stepLength": 0.3,
+                                "rule": 'F++F++F',
+                                "axiomF": 'F-F++F-F',
+                                "axiomG": ''
+                            }
+
+                            vwf_view.kernel.callMethod(turtleID, 'setTurtleParams', [Object.entries(params)])
+                    
+                            
+
+                        }
+                            
+                        }
+                    ]
+                },
+                {
+                    $cell: true,
+                    $type: "div",
+                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
+                    $components: [
+               
+                            {
+                                $type: "img",
+                                src: "./lsys/dragon.jpg",
+                                class: "mdc-elevation--z2",
+                                style: "width: 150px",
+                                onclick: function(evt){
+
+                                    let turtleID = vwf.find("","/turtle")[0];
+                                    
+                                    let params = {
+                                        "angle": 90,
+                                        "iteration": 10,
+                                        "stepLength": 0.3,
+                                        "rule": 'F',
+                                        "axiomF": 'F+G+',
+                                        "axiomG": '-F-G'
+                                    }
+
+                                    vwf_view.kernel.callMethod(turtleID, 'setTurtleParams', [Object.entries(params)])
+                            
+                                    
+
+                                }
+                                
+                            }
+
+                    ]
+                },
+                {
+                    $cell: true,
+                    $type: "div",
+                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
+                    $components: [
+
+                        {
+                            $type: "img",
+                            src: "./lsys/SierpinskiCurve.jpg",
+                            class: "mdc-elevation--z2",
+                            style: "width: 150px",
+                            onclick: function(evt){
+                                
+                            let turtleID = vwf.find("","/turtle")[0];
+                            
+                            let params = {
+                                "angle": 60,
+                                "iteration": 5,
+                                "stepLength": 0.3,
+                                "rule": 'F',
+                                "axiomF": 'G-F-G',
+                                "axiomG": 'F+G+F'
+                            }
+
+                            vwf_view.kernel.callMethod(turtleID, 'setTurtleParams', [Object.entries(params)])
+                    
+                            
+
+                        }
+                            
+                        }
+                    ]
+                },
+                {
+                    $cell: true,
+                    $type: "div",
+                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
+                    $components: [
+
+                        {
+                            $type: "img",
+                            src: "./lsys/SierpinskiTriangle.jpg",
+                            class: "mdc-elevation--z2",
+                            style: "width: 150px",
+                            onclick: function(evt){
+                                
+                            let turtleID = vwf.find("","/turtle")[0];
+                            
+                            let params = {
+                                "angle": 120,
+                                "iteration": 5,
+                                "stepLength": 0.3,
+                                "rule": 'F--F--F',
+                                "axiomF": 'F--F--F--G',
+                                "axiomG": 'GG'
+                            }
+
+                            vwf_view.kernel.callMethod(turtleID, 'setTurtleParams', [Object.entries(params)])
+                    
+                            
+
+                        }
+                            
+                        }
                     ]
                 }
             ]
         }
     ]
 }
-}
+}

public/ohmlang-lsys/index.vwf.yaml

@@ -23,45 +23,51 @@ children:
         properties:
             position: [1, 1.25, -4]
             color: "#e0e014"
-            radius: 0.3
+            radius: 0.2
             wireframe: true
             angleInRadians: 0
-            counter: 1
             iteration:
                 set: |
                     this.iteration = value;
-                    this.makeLSys();
+                    this.redrawEvent();
                 value: 3
             angle:
                 set: |
                     this.angle = value;
-                    this.makeLSys();
+                    this.redrawEvent();
                 value: 60  
             stepLength: 
                 set: |
                     this.stepLength = value;
-                    this.makeLSys();
+                    this.redrawEvent();
                 value: 0.5  
             rule: 
                 set: |
                     this.rule = value;
-                    this.makeLSys();
+                    this.redrawEvent();
                 value: 'F++F++F'
             axiomF: 
                 set: |
                     this.axiomF = value;
-                    this.makeLSys();
+                    this.redrawEvent();
                 value: 'F-F++F-F'
             axiomG:
                 set: |
                     this.axiomG = value;
-                    this.makeLSys();
+                    this.redrawEvent();
                 value: ''
             lsys: ''
-            ready: false
+            readyForDraw: true
         children:
             drawNode:
                 extends: http://vwf.example.com/aframe/aentity.vwf
+                children:
+                    linepath:
+                        extends: http://vwf.example.com/aframe/linepath.vwf
+                        properties:
+                            color: "green"
+                            path: []
+                            width: 0.02
             lsysLang:
                 extends: http://vwf.example.com/ohm/node.vwf
                 properties:
@@ -142,22 +148,13 @@ children:
                                         //vwf_view.kernel.callMethod(turtleID, 'turn', [this.args.y]);
                                         self.parent.turn(this.args.y);
                                     if (this.sourceString == "-")
-                                        // vwf_view.kernel.callMethod(turtleID, 'turn', [-1 * this.args.y]);
+                                        //vwf_view.kernel.callMethod(turtleID, 'turn', [-1 * this.args.y]);
                                         self.parent.turn(-1*this.args.y);
                                     }
                             });  
+        events:
+            redrawEvent:
         methods:
-            clearDraw: |
-                let self = this
-                let drawDef = {
-                    "extends": "http://vwf.example.com/aframe/aentity.vwf",
-                }
-                this.children.delete(this.drawNode);
-                this.children.create("drawNode", drawDef);
-                this.angleInRadians = 0
-                //this.drawNode.children.forEach(el => {
-                //   self.drawNode.children.delete(el)
-                //})
             parseLSys: |
                 var str = this.rule;
                 var axioms = {"F": this.axiomF, "G": this.axiomG};
@@ -172,35 +169,19 @@ children:
                 console.log(str);
                 this.lsys = str;
             makeLSys: |
-                if (this.ready) 
-                {
-                //this.clearDraw();
+                if (this.readyForDraw){
+                this.drawNode.position = [0, 0, 0]
+                this.angleInRadians = 0;
+                this.drawNode.linepath.path = [];
                 this.parseLSys();
-                this.future(0.1).drawLSys();
+                this.drawLSys();
+                this.drawNode.position = [0, 0, 0]
                 }
             drawLSys: |
                 var match = this.turtleLang.grammar.match(this.lsys, 'Draw<"1","1">');
                 if (match.succeeded()){
                     var res = this.turtleLang.semantics(match).draw(this.stepLength, this.angle);
                 }
-            makeMe:
-                parameters:
-                        - childName
-                        - startPosition
-                        - endPosition
-                body: |
-                        //let nodeId = this.drawNode.id;
-                        var childComponent = {
-                                            "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
-                                            "type": "component",
-                                            "properties": {
-                                                "start": startPosition,
-                                                "end": endPosition,
-                                                "color": "green"
-                                            }
-                                        }
-                            //vwf_view.kernel.createChild(this.id, childName, childComponent);
-                            this.drawNode.children.create(childName, childComponent);
             turn:
                 parameters:
                     - angle
@@ -217,30 +198,34 @@ children:
                     var y0 = pos.y;
                     var xx = Math.sin(this.angleInRadians);
                     var yy = Math.cos(this.angleInRadians);
-                    let endPosition = AFRAME.utils.coordinates.stringify({x: x0 + step * xx, y: y0 + step * yy, z: pos.z});
-                    this.counter = this.counter + 1;
-                    this.makeMe('line__' + this.counter, this.drawNode.position, endPosition);
+                    let startPosition = AFRAME.utils.coordinates.parse(this.drawNode.position);
+                    let endPosition = {x: x0 + step * xx, y: y0 + step * yy, z: pos.z};
+                    var drawPath = this.drawNode.linepath.path;
+                    drawPath.push(startPosition);
+                    drawPath.push(endPosition);
+                    vwf_view.kernel.setProperty(this.drawNode.linepath.id, 'path', drawPath);
                     this.drawNode.position = endPosition;
+            setTurtleParams:
+                parameters:
+                    - val
+                body: |
+                    this.readyForDraw = false;
+                    val.forEach(el => {
+                        this[el[0]] = el[1]
+                    })
+                    this.readyForDraw = true;
+                    this.makeLSys();
             initialize:
                 body: |
-                   // vwf_view.kernel.createProperty(this.id, "angle", function() { return 90 })
-                    this.ready = true;
-                    //this.makeLSys();
+                    this.redrawEvent = function(){this.makeLSys()}
+                    vwf_view.kernel.callMethod(this.id, "makeLSys");
                     console.log("initialising turtle");
-                    //vwf_view.kernel.callMethod(this.id, "testDrawLsys");
 methods:
   initialize:
     body: |
-        //this.turtle.ready = true;
         console.log("initialising scene");
-        //vwf_view.kernel.callMethod(this.id, "testDrawLsys");
   drawLSys1: |
     this.turtle.makeLSys()
-  createNewTurtle: |
-        console.log("create new turtle");
-        let newTurtle = vwf.getNode(this.turtle.id, true);
-        let randomName = "turtle-" + this.random();
-        this.children.create(randomName, newTurtle);
   testTurtle: |
     this.turtle.goForward(1);
     this.turtle.goForward(1);

public/simple/appui.js

@@ -0,0 +1,5 @@
+//-----App ui-----
+
+// function createApp() {
+//     return {}
+// }

public/simple/index.vwf.config.yaml

@@ -0,0 +1,8 @@
+---
+info:
+  title: "VWF & AFrame Example App"
+model:
+  vwf/model/aframe:
+view:
+  vwf/view/aframe:
+  vwf/view/editor-new:

public/simple/index.vwf.yaml

@@ -0,0 +1,23 @@
+# A-Frame & VWF simple scene
+# Copyright 2017 Krestianstvo.org project
+---
+extends: http://vwf.example.com/aframe/ascene.vwf
+properties:
+  fog: "type: linear; color: #ECECEC; far: 9; near: 0"
+children:
+  spaceText:
+    extends: http://vwf.example.com/aframe/atext.vwf
+    properties:
+      value: "Virtual World Framework & A-Frame"
+      color: "#b74217"
+      position: [-2, 2.5, -2]
+    children:
+      linepath:
+        extends: http://vwf.example.com/aframe/linepath.vwf
+        properties:
+          color: "#b74217"
+          path: [{"x":0.0, "y":0.0, "z":0.0}, {"x":2.0, "y":1.0, "z":1.0},{"x":3.0, "y":5.0, "z":2.0}]
+  sky:
+    extends: http://vwf.example.com/aframe/asky.vwf
+    properties:
+      color: "#ECECEC"

support/client/lib/vwf.js

@@ -338,13 +338,17 @@
                     "vwf/model/aframe/addon/TransformControls": {
                         deps: [ "vwf/model/aframe/aframe-master" ]
                     },
+                    "vwf/model/aframe/addon/THREE.MeshLine": {
+                        deps: [ "vwf/model/aframe/aframe-master" ]
+                    },
                     
                     "vwf/model/aframe/addon/monument-app": {
                         deps: [ "vwf/model/aframe/aframe-master",
                         "vwf/model/aframe/extras/aframe-extras",
                         "vwf/model/aframe/addon/SkyShader",
                         "vwf/model/aframe/addon/BVHLoader",
-                        "vwf/model/aframe/addon/TransformControls"
+                        "vwf/model/aframe/addon/TransformControls",
+                        "vwf/model/aframe/addon/THREE.MeshLine"
                     ]
                     }
                     
@@ -408,7 +412,8 @@
                     "vwf/model/aframe/addon/SkyShader",
                     "vwf/model/aframe/addon/monument-app",
                     "vwf/model/aframe/addon/BVHLoader",
-                    "vwf/model/aframe/addon/TransformControls"    
+                    "vwf/model/aframe/addon/TransformControls",
+                    "vwf/model/aframe/addon/THREE.MeshLine"    
                  ], 
                     active: false 
                 },
@@ -470,6 +475,8 @@
                 { library: "vwf/model/aframe/addon/monument-app", active: false },
                 { library: "vwf/model/aframe/addon/BVHLoader", active: false },
                 { library: "vwf/model/aframe/addon/TransformControls", active: false },
+                { library: "vwf/model/aframe/addon/THREE.MeshLine", active: false },
+                
                 
               
 

support/client/lib/vwf/model/aframe.js

@@ -253,6 +253,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         //     aframeObject.setAttribute('interpolation', { duration: propertyValue});
                         //         break;
 
+                        case "worldPosition":
+                       
+                        break;
+
                         case "position":
 
                         this.state.setAFrameProperty('position', propertyValue, aframeObject);
@@ -622,6 +626,13 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         //     }
                         //     break;
 
+                        case "worldPosition":
+                        var pos = aframeObject.object3D.getWorldPosition();
+                        if (pos !== undefined) {
+                            value = pos;
+                        }
+                        break;
+
                         case "position":
                             var pos = aframeObject.getAttribute('position');
                             if (pos !== undefined) {

support/client/lib/vwf/model/aframe/addon/THREE.MeshLine.js

@@ -0,0 +1,477 @@
+;(function() {
+
+"use strict";
+
+var root = this
+
+var has_require = typeof require !== 'undefined'
+
+var THREE = root.THREE || has_require && require('three')
+if( !THREE )
+	throw new Error( 'MeshLine requires three.js' )
+
+function MeshLine() {
+
+	this.positions = [];
+
+	this.previous = [];
+	this.next = [];
+	this.side = [];
+	this.width = [];
+	this.indices_array = [];
+	this.uvs = [];
+	this.counters = [];
+	this.geometry = new THREE.BufferGeometry();
+
+	this.widthCallback = null;
+
+}
+
+MeshLine.prototype.setGeometry = function( g, c ) {
+
+	this.widthCallback = c;
+
+	this.positions = [];
+	this.counters = [];
+
+	if( g instanceof THREE.Geometry ) {
+		for( var j = 0; j < g.vertices.length; j++ ) {
+			var v = g.vertices[ j ];
+			var c = j/g.vertices.length;
+			this.positions.push( v.x, v.y, v.z );
+			this.positions.push( v.x, v.y, v.z );
+			this.counters.push(c);
+			this.counters.push(c);
+		}
+	}
+
+	if( g instanceof THREE.BufferGeometry ) {
+		// read attribute positions ?
+	}
+
+	if( g instanceof Float32Array || g instanceof Array ) {
+		for( var j = 0; j < g.length; j += 3 ) {
+			var c = j/g.length;
+			this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
+			this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
+			this.counters.push(c);
+			this.counters.push(c);
+		}
+	}
+
+	this.process();
+
+}
+
+MeshLine.prototype.compareV3 = function( a, b ) {
+
+	var aa = a * 6;
+	var ab = b * 6;
+	return ( this.positions[ aa ] === this.positions[ ab ] ) && ( this.positions[ aa + 1 ] === this.positions[ ab + 1 ] ) && ( this.positions[ aa + 2 ] === this.positions[ ab + 2 ] );
+
+}
+
+MeshLine.prototype.copyV3 = function( a ) {
+
+	var aa = a * 6;
+	return [ this.positions[ aa ], this.positions[ aa + 1 ], this.positions[ aa + 2 ] ];
+
+}
+
+MeshLine.prototype.process = function() {
+
+	var l = this.positions.length / 6;
+
+	this.previous = [];
+	this.next = [];
+	this.side = [];
+	this.width = [];
+	this.indices_array = [];
+	this.uvs = [];
+
+	for( var j = 0; j < l; j++ ) {
+		this.side.push( 1 );
+		this.side.push( -1 );
+	}
+
+	var w;
+	for( var j = 0; j < l; j++ ) {
+		if( this.widthCallback ) w = this.widthCallback( j / ( l -1 ) );
+		else w = 1;
+		this.width.push( w );
+		this.width.push( w );
+	}
+
+	for( var j = 0; j < l; j++ ) {
+		this.uvs.push( j / ( l - 1 ), 0 );
+		this.uvs.push( j / ( l - 1 ), 1 );
+	}
+
+	var v;
+
+	if( this.compareV3( 0, l - 1 ) ){
+		v = this.copyV3( l - 2 );
+	} else {
+		v = this.copyV3( 0 );
+	}
+	this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+	this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+	for( var j = 0; j < l - 1; j++ ) {
+		v = this.copyV3( j );
+		this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+		this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+	}
+
+	for( var j = 1; j < l; j++ ) {
+		v = this.copyV3( j );
+		this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+		this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+	}
+
+	if( this.compareV3( l - 1, 0 ) ){
+		v = this.copyV3( 1 );
+	} else {
+		v = this.copyV3( l - 1 );
+	}
+	this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+	this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
+
+	for( var j = 0; j < l - 1; j++ ) {
+		var n = j * 2;
+		this.indices_array.push( n, n + 1, n + 2 );
+		this.indices_array.push( n + 2, n + 1, n + 3 );
+	}
+
+	if (!this.attributes) {
+		this.attributes = {
+			position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ),
+			previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ),
+			next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ),
+			side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ),
+			width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ),
+			uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ),
+			index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ),
+			counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 )
+		}
+	} else {
+		this.attributes.position.copyArray(new Float32Array(this.positions));
+		this.attributes.position.needsUpdate = true;
+		this.attributes.previous.copyArray(new Float32Array(this.previous));
+		this.attributes.previous.needsUpdate = true;
+		this.attributes.next.copyArray(new Float32Array(this.next));
+		this.attributes.next.needsUpdate = true;
+		this.attributes.side.copyArray(new Float32Array(this.side));
+		this.attributes.side.needsUpdate = true;
+		this.attributes.width.copyArray(new Float32Array(this.width));
+		this.attributes.width.needsUpdate = true;
+		this.attributes.uv.copyArray(new Float32Array(this.uvs));
+		this.attributes.uv.needsUpdate = true;
+		this.attributes.index.copyArray(new Uint16Array(this.indices_array));
+		this.attributes.index.needsUpdate = true;
+    }
+
+	this.geometry.addAttribute( 'position', this.attributes.position );
+	this.geometry.addAttribute( 'previous', this.attributes.previous );
+	this.geometry.addAttribute( 'next', this.attributes.next );
+	this.geometry.addAttribute( 'side', this.attributes.side );
+	this.geometry.addAttribute( 'width', this.attributes.width );
+	this.geometry.addAttribute( 'uv', this.attributes.uv );
+	this.geometry.addAttribute( 'counters', this.attributes.counters );
+
+	this.geometry.setIndex( this.attributes.index );
+
+}
+
+function memcpy (src, srcOffset, dst, dstOffset, length) {
+	var i
+
+	src = src.subarray || src.slice ? src : src.buffer
+	dst = dst.subarray || dst.slice ? dst : dst.buffer
+
+	src = srcOffset ? src.subarray ?
+	src.subarray(srcOffset, length && srcOffset + length) :
+	src.slice(srcOffset, length && srcOffset + length) : src
+
+	if (dst.set) {
+		dst.set(src, dstOffset)
+	} else {
+		for (i=0; i<src.length; i++) {
+			dst[i + dstOffset] = src[i]
+		}
+	}
+
+	return dst
+}
+
+/**
+ * Fast method to advance the line by one position.  The oldest position is removed.
+ * @param position
+ */
+MeshLine.prototype.advance = function(position) {
+
+	var positions = this.attributes.position.array;
+	var previous = this.attributes.previous.array;
+	var next = this.attributes.next.array;
+	var l = positions.length;
+
+	// PREVIOUS
+	memcpy( positions, 0, previous, 0, l );
+
+	// POSITIONS
+	memcpy( positions, 6, positions, 0, l - 6 );
+
+	positions[l - 6] = position.x;
+	positions[l - 5] = position.y;
+	positions[l - 4] = position.z;
+	positions[l - 3] = position.x;
+	positions[l - 2] = position.y;
+	positions[l - 1] = position.z;
+
+    // NEXT
+	memcpy( positions, 6, next, 0, l - 6 );
+
+	next[l - 6]  = position.x;
+	next[l - 5]  = position.y;
+	next[l - 4]  = position.z;
+	next[l - 3]  = position.x;
+	next[l - 2]  = position.y;
+	next[l - 1]  = position.z;
+
+	this.attributes.position.needsUpdate = true;
+	this.attributes.previous.needsUpdate = true;
+	this.attributes.next.needsUpdate = true;
+
+};
+
+function MeshLineMaterial( parameters ) {
+
+	var vertexShaderSource = [
+'precision highp float;',
+'',
+'attribute vec3 position;',
+'attribute vec3 previous;',
+'attribute vec3 next;',
+'attribute float side;',
+'attribute float width;',
+'attribute vec2 uv;',
+'attribute float counters;',
+'',
+'uniform mat4 projectionMatrix;',
+'uniform mat4 modelViewMatrix;',
+'uniform vec2 resolution;',
+'uniform float lineWidth;',
+'uniform vec3 color;',
+'uniform float opacity;',
+'uniform float near;',
+'uniform float far;',
+'uniform float sizeAttenuation;',
+'',
+'varying vec2 vUV;',
+'varying vec4 vColor;',
+'varying float vCounters;',
+'',
+'vec2 fix( vec4 i, float aspect ) {',
+'',
+'    vec2 res = i.xy / i.w;',
+'    res.x *= aspect;',
+'	 vCounters = counters;',
+'    return res;',
+'',
+'}',
+'',
+'void main() {',
+'',
+'    float aspect = resolution.x / resolution.y;',
+'	 float pixelWidthRatio = 1. / (resolution.x * projectionMatrix[0][0]);',
+'',
+'    vColor = vec4( color, opacity );',
+'    vUV = uv;',
+'',
+'    mat4 m = projectionMatrix * modelViewMatrix;',
+'    vec4 finalPosition = m * vec4( position, 1.0 );',
+'    vec4 prevPos = m * vec4( previous, 1.0 );',
+'    vec4 nextPos = m * vec4( next, 1.0 );',
+'',
+'    vec2 currentP = fix( finalPosition, aspect );',
+'    vec2 prevP = fix( prevPos, aspect );',
+'    vec2 nextP = fix( nextPos, aspect );',
+'',
+'	 float pixelWidth = finalPosition.w * pixelWidthRatio;',
+'    float w = 1.8 * pixelWidth * lineWidth * width;',
+'',
+'    if( sizeAttenuation == 1. ) {',
+'        w = 1.8 * lineWidth * width;',
+'    }',
+'',
+'    vec2 dir;',
+'    if( nextP == currentP ) dir = normalize( currentP - prevP );',
+'    else if( prevP == currentP ) dir = normalize( nextP - currentP );',
+'    else {',
+'        vec2 dir1 = normalize( currentP - prevP );',
+'        vec2 dir2 = normalize( nextP - currentP );',
+'        dir = normalize( dir1 + dir2 );',
+'',
+'        vec2 perp = vec2( -dir1.y, dir1.x );',
+'        vec2 miter = vec2( -dir.y, dir.x );',
+'        //w = clamp( w / dot( miter, perp ), 0., 4. * lineWidth * width );',
+'',
+'    }',
+'',
+'    //vec2 normal = ( cross( vec3( dir, 0. ), vec3( 0., 0., 1. ) ) ).xy;',
+'    vec2 normal = vec2( -dir.y, dir.x );',
+'    normal.x /= aspect;',
+'    normal *= .5 * w;',
+'',
+'    vec4 offset = vec4( normal * side, 0.0, 1.0 );',
+'    finalPosition.xy += offset.xy;',
+'',
+'    gl_Position = finalPosition;',
+'',
+'}' ];
+
+	var fragmentShaderSource = [
+		'#extension GL_OES_standard_derivatives : enable',
+'precision mediump float;',
+'',
+'uniform sampler2D map;',
+'uniform sampler2D alphaMap;',
+'uniform float useMap;',
+'uniform float useAlphaMap;',
+'uniform float useDash;',
+'uniform vec2 dashArray;',
+'uniform float visibility;',
+'uniform float alphaTest;',
+'uniform vec2 repeat;',
+'',
+'varying vec2 vUV;',
+'varying vec4 vColor;',
+'varying float vCounters;',
+'',
+'void main() {',
+'',
+'    vec4 c = vColor;',
+'    if( useMap == 1. ) c *= texture2D( map, vUV * repeat );',
+'    if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV * repeat ).a;',
+'	 if( c.a < alphaTest ) discard;',
+'	 if( useDash == 1. ){',
+'	 	 ',
+'	 }',
+'    gl_FragColor = c;',
+'	 gl_FragColor.a *= step(vCounters,visibility);',
+'}' ];
+
+	function check( v, d ) {
+		if( v === undefined ) return d;
+		return v;
+	}
+
+	THREE.Material.call( this );
+
+	parameters = parameters || {};
+
+	this.lineWidth = check( parameters.lineWidth, 1 );
+	this.map = check( parameters.map, null );
+	this.useMap = check( parameters.useMap, 0 );
+	this.alphaMap = check( parameters.alphaMap, null );
+	this.useAlphaMap = check( parameters.useAlphaMap, 0 );
+	this.color = check( parameters.color, new THREE.Color( 0xffffff ) );
+	this.opacity = check( parameters.opacity, 1 );
+	this.resolution = check( parameters.resolution, new THREE.Vector2( 1, 1 ) );
+	this.sizeAttenuation = check( parameters.sizeAttenuation, 1 );
+	this.near = check( parameters.near, 1 );
+	this.far = check( parameters.far, 1 );
+	this.dashArray = check( parameters.dashArray, [] );
+	this.useDash = ( this.dashArray !== [] ) ? 1 : 0;
+	this.visibility = check( parameters.visibility, 1 );
+	this.alphaTest = check( parameters.alphaTest, 0 );
+	this.repeat = check( parameters.repeat, new THREE.Vector2( 1, 1 ) );
+
+	var material = new THREE.RawShaderMaterial( {
+		uniforms:{
+			lineWidth: { type: 'f', value: this.lineWidth },
+			map: { type: 't', value: this.map },
+			useMap: { type: 'f', value: this.useMap },
+			alphaMap: { type: 't', value: this.alphaMap },
+			useAlphaMap: { type: 'f', value: this.useAlphaMap },
+			color: { type: 'c', value: this.color },
+			opacity: { type: 'f', value: this.opacity },
+			resolution: { type: 'v2', value: this.resolution },
+			sizeAttenuation: { type: 'f', value: this.sizeAttenuation },
+			near: { type: 'f', value: this.near },
+			far: { type: 'f', value: this.far },
+			dashArray: { type: 'v2', value: new THREE.Vector2( this.dashArray[ 0 ], this.dashArray[ 1 ] ) },
+			useDash: { type: 'f', value: this.useDash },
+			visibility: {type: 'f', value: this.visibility},
+			alphaTest: {type: 'f', value: this.alphaTest},
+			repeat: { type: 'v2', value: this.repeat }
+		},
+		vertexShader: vertexShaderSource.join( '\r\n' ),
+		fragmentShader: fragmentShaderSource.join( '\r\n' )
+	});
+
+	delete parameters.lineWidth;
+	delete parameters.map;
+	delete parameters.useMap;
+	delete parameters.alphaMap;
+	delete parameters.useAlphaMap;
+	delete parameters.color;
+	delete parameters.opacity;
+	delete parameters.resolution;
+	delete parameters.sizeAttenuation;
+	delete parameters.near;
+	delete parameters.far;
+	delete parameters.dashArray;
+	delete parameters.visibility;
+	delete parameters.alphaTest;
+	delete parameters.repeat;
+
+	material.type = 'MeshLineMaterial';
+
+	material.setValues( parameters );
+
+	return material;
+
+};
+
+MeshLineMaterial.prototype = Object.create( THREE.Material.prototype );
+MeshLineMaterial.prototype.constructor = MeshLineMaterial;
+
+MeshLineMaterial.prototype.copy = function ( source ) {
+
+	THREE.Material.prototype.copy.call( this, source );
+
+	this.lineWidth = source.lineWidth;
+	this.map = source.map;
+	this.useMap = source.useMap;
+	this.alphaMap = source.alphaMap;
+	this.useAlphaMap = source.useAlphaMap;
+	this.color.copy( source.color );
+	this.opacity = source.opacity;
+	this.resolution.copy( source.resolution );
+	this.sizeAttenuation = source.sizeAttenuation;
+	this.near = source.near;
+	this.far = source.far;
+	this.dashArray.copy( source.dashArray );
+	this.useDash = source.useDash;
+	this.visibility = source.visibility;
+	this.alphaTest = source.alphaTest;
+	this.repeat.copy( source.repeat );
+
+	return this;
+
+};
+
+if( typeof exports !== 'undefined' ) {
+	if( typeof module !== 'undefined' && module.exports ) {
+		exports = module.exports = { MeshLine: MeshLine, MeshLineMaterial: MeshLineMaterial };
+	}
+	exports.MeshLine = MeshLine;
+	exports.MeshLineMaterial = MeshLineMaterial;
+}
+else {
+	root.MeshLine = MeshLine;
+	root.MeshLineMaterial = MeshLineMaterial;
+}
+
+}).call(this);
+

support/client/lib/vwf/model/aframe/addon/monument-app.js

@@ -2,6 +2,55 @@ if (typeof AFRAME === 'undefined') {
     throw new Error('Component attempted to register before AFRAME was available.');
 }
 
+AFRAME.registerComponent('linepath', {
+    schema: {
+      color: { default: '#000' },
+      width: { default: 0.01 },
+      path: {
+        default: [
+          { x: -0.5, y: 0, z: 0 },
+          { x: 0.5, y: 0, z: 0 }
+        ]
+  
+        // Deserialize path in the form of comma-separated vec3s: `0 0 0, 1 1 1, 2 0 3`.
+        // parse: function (value) {
+        //   return value.split(',').map(coordinates.parse);
+        // },
+  
+        // Serialize array of vec3s in case someone does setAttribute('line', 'path', [...]).
+        // stringify: function (data) {
+        //   return data.map(coordinates.stringify).join(',');
+        // }
+      }
+    },
+    
+    update: function () {
+      var material = new MeshLineMaterial({
+            color: new THREE.Color(this.data.color), //this.data.color
+            lineWidth: this.data.width
+      });
+  
+      var geometry = new THREE.Geometry();
+      this.data.path.forEach(function (vec3) {
+        geometry.vertices.push(
+          new THREE.Vector3(vec3.x, vec3.y, vec3.z)
+        );
+      });
+  
+     let line = new MeshLine();
+      line.setGeometry( geometry );
+
+//new THREE.Line(geometry, material)
+
+      this.el.setObject3D('mesh', new THREE.Mesh( line.geometry, material ));
+    },
+    
+    remove: function () {
+      this.el.removeObject3D('mesh');
+    }
+  });
+
+
 AFRAME.registerComponent('gizmo', {
 
     schema: {

support/client/lib/vwf/model/aframeComponent.js

@@ -241,6 +241,36 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
+                    
+                                        value = propertyValue;
+                    
+                    
+                                        let parentNodeAF = aframeObject.el;
+                    
+                                        switch (propertyName) {
+                    
+                                            case "color":
+                                                parentNodeAF.setAttribute(aframeObject.compName, 'color', propertyValue);
+                                                break;
+                    
+                                            case "path":
+                                                parentNodeAF.setAttribute(aframeObject.compName, 'path', propertyValue);
+                                                break;
+                    
+                                                case "width":
+                                                parentNodeAF.setAttribute(aframeObject.compName, 'width', propertyValue);
+                                                break;
+
+                                            default:
+                                                value = undefined;
+                                                break;
+                    
+                    
+                                        }
+                    
+                                    }
+
 
                 //isALineDefinition(node.prototypes)
                 //if (value === undefined && node.componentName == 'line') { //isALineDefinition( node.prototypes )
@@ -553,6 +583,31 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 }
 
+                if (value === undefined && isALinePathDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    // let parentNodeAF = self.state.nodes[node.parentID].aframeObj;
+                    let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "color":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).color;
+                            break;
+
+                        case "path":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).path;
+                            break;
+
+                            case "width":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).width;
+                            break;
+                        
+
+                    }
+
+                }
+
 
                 if (value === undefined && isAInterpolationDefinition(node.prototypes)) {
                     value = propertyValue;
@@ -690,6 +745,15 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         return found;
     }
 
+    function isALinePathDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/linepath.vwf");
+            }
+        }
+        return found;
+    }
 
     function isAGizmoDefinition(prototypes) {
         var found = false;
@@ -794,6 +858,14 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         }
 
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/linepath.vwf")) {
+            
+            
+                        // aframeObj.el.setAttribute(node.type, {});
+                        aframeObj.compName = "linepath";
+                        aframeObj.el.setAttribute(aframeObj.compName, {});
+            
+                    }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/interpolation-component.vwf")) {
 

support/client/lib/vwf/view/editor-new.js

@@ -90,6 +90,41 @@ define([
 
             // $('body').append('<script>mdc.autoInit()</script>');
 
+
+
+            this.removeProps = (obj) => {
+                Object.keys(obj).forEach(key =>
+                (key === 'id' || key === 'patches' || key === 'random' || key === 'sequence') && delete obj[key] ||
+                (obj[key] && typeof obj[key] === 'object') && this.removeProps(obj[key])
+                );
+                return obj;
+            };
+
+            this.getNodeDef = function(nodeID) {
+                let node = vwf.getNode(nodeID, true);
+                let nodeDef = self.removeProps(node);
+                return nodeDef
+            }
+
+
+            this.GUID = function()
+            {
+                var S4 = function ()
+                {
+                    return Math.floor(
+                            Math.random() * 0x10000 /* 65536 */
+                        ).toString(16);
+                };
+    
+                return (
+                        S4() + S4() + "-" +
+                        S4() + "-" +
+                        S4() + "-" +
+                        S4() + "-" +
+                        S4() + S4() + S4()
+                    );
+            }
+
             this.getRoot = function () {
                 var app = window.location.pathname;
                 var pathSplit = app.split('/');
@@ -169,7 +204,7 @@ define([
             );
 
 
-            function avatarCardDef(src, desc, onclickfunc) {
+            this.avatarCardDef = function(src, desc, onclickfunc) {
 
                 return {
                     $cell: true,
@@ -283,7 +318,7 @@ define([
                                                             class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                             $components: [
 
-                                                                avatarCardDef("/../assets/avatars/ico/simple.jpg", { title: "Simple", subtitle: "Cube" },
+                                                                self.avatarCardDef("/../assets/avatars/ico/simple.jpg", { title: "Simple", subtitle: "Cube" },
                                                                     function (e) {
                                                                         let avatarID = 'avatar-' + self.kernel.moniker();
                                                                         vwf_view.kernel.callMethod(avatarID, "createSimpleAvatar");
@@ -297,7 +332,7 @@ define([
                                                             $type: "div",
                                                             class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                             $components: [
-                                                                avatarCardDef("/../assets/avatars/ico/female.jpg", { title: "Human", subtitle: "Female" },
+                                                                self.avatarCardDef("/../assets/avatars/ico/female.jpg", { title: "Human", subtitle: "Female" },
                                                                     function (e) {
                                                                         let avatarID = 'avatar-' + self.kernel.moniker();
                                                                         vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/female/avatar1.gltf"]);
@@ -309,7 +344,7 @@ define([
                                                             $type: "div",
                                                             class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                             $components: [
-                                                                avatarCardDef("/../assets/avatars/ico/male.jpg", { title: "Human", subtitle: "Male" },
+                                                                self.avatarCardDef("/../assets/avatars/ico/male.jpg", { title: "Human", subtitle: "Male" },
                                                                     function (e) {
                                                                         let avatarID = 'avatar-' + self.kernel.moniker();
                                                                         vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/male/avatar1.gltf"]);
@@ -695,8 +730,10 @@ define([
                     class: "mdc-layout-grid__inner",
                     _prop: {},
                     $init: function () {
+                        
                         let prop = m[1].prop;
-                        if (prop.value == undefined) {
+                       
+                        if (prop.value == undefined && this._currentNode !== undefined) {
                             prop.value = JSON.stringify(utility.transform(vwf.getProperty(this._currentNode, prop.name, []), utility.transforms.transit));
                         }
                         this._prop = prop
@@ -2202,7 +2239,7 @@ define([
                                             let sideBar = document.querySelector('#sideBar');
 
                                             try {
-                                                sideBar._sideBarComponent = createApp();
+                                                sideBar._sideBarComponent = createApp.call(self);
                                             } catch (e) {
                                                 sideBar._sideBarComponent = defaultApp();
                                             }

support/proxy/vwf.example.com/aframe/aentity.vwf.yaml

@@ -18,6 +18,7 @@ properties:
   displayName:
   visible:
   edit:
+  worldPosition:
 methods:
   setGizmoMode:
     parameters:

support/proxy/vwf.example.com/aframe/linepath.vwf.yaml

@@ -0,0 +1,8 @@
+# linepath
+--- 
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:
+  color:
+  path:
+  width:

support/proxy/vwf.example.com/aframe/turtlelsys.vwf.yaml

@@ -1,210 +0,0 @@
-# Turtle for L-System
---- 
-extends: http://vwf.example.com/aframe/asphere.vwf
-type: "turtle"
-properties:
-    position: [1, 1.25, -4]
-    color: "#e0e014"
-    radius: 0.3
-    wireframe: true
-    angleInRadians: 0
-    counter: 1
-    iteration:
-        set: |
-            this.iteration = value;
-            this.makeLSys();
-        value: 3
-    angle:
-        set: |
-            this.angle = value;
-            this.makeLSys();
-        value: 60  
-    stepLength: 
-        set: |
-            this.stepLength = value;
-            this.makeLSys();
-        value: 0.5  
-    rule: 
-        set: |
-            this.rule = value;
-            this.makeLSys();
-        value: 'F++F++F'
-    axiomF: 
-        set: |
-            this.axiomF = value;
-            this.makeLSys();
-        value: 'F-F++F-F'
-    axiomG:
-        set: |
-            this.axiomG = value;
-            this.makeLSys();
-        value: ''
-    lsys: ''
-    ready: false
-children:
-    drawNode:
-        extends: http://vwf.example.com/aframe/aentity.vwf
-    lsysLang:
-        extends: http://vwf.example.com/ohm/node.vwf
-        properties:
-            grammar:
-            semantics:
-            ohmLang: |
-                LSys { Gen<x> 
-                        = ReadRule+ 
-                        ReadRule 
-                        = letters | symbols
-                        letters  = "F" | "G" 
-                        symbols  = "-" | "+" }
-        methods:
-            initLang:
-                body: |
-                    console.log("add operations to semantics")
-                    this.addOperationLang();
-            addOperationLang:
-                body: |
-                    this.semantics.addOperation('gen(x)', {
-                        Gen: function(e)
-                        {
-                            return e.gen(this.args.x);
-                        },
-                        ReadRule: function(e)
-                        {
-                            return e.gen(this.args.x);
-                        },
-                        letters: function(_)
-                        {
-                            for (var propName in this.args.x)
-                            {
-                                if (propName == this.sourceString)
-                                    return this.args.x[propName]
-                            }
-                            return this.sourceString
-                        },
-                        symbols: function(_)
-                        {
-                            return this.sourceString;
-                        }
-                    });
-    turtleLang:
-        extends: http://vwf.example.com/ohm/node.vwf
-        properties:
-            grammar:
-            semantics:
-            ohmLang: |
-                Turtle {
-                Draw<x, y> 
-                    = (drawLetter | turn)+ 
-                drawLetter 
-                    = letter
-                turn 
-                    = "+" | "-" }
-        methods:
-            initLang:
-                body: |
-                    console.log("add operations to semantics")
-                    this.addOperationLang();
-            addOperationLang:
-                body: |
-                    var turtleID = this.parent.id;
-                    var self = this;
-                    this.semantics.addOperation('draw(x,y)', {
-                        Draw: function(e)
-                        {
-                            e.draw(this.args.x, this.args.y);
-                        },
-                        drawLetter: function(e)
-                        {
-                            //vwf_view.kernel.callMethod(turtleID, 'goForward', [this.args.x]);
-                            self.parent.goForward(this.args.x);
-                        },
-                        turn: function(e)
-                        {
-                            if (this.sourceString == "+")
-                                //vwf_view.kernel.callMethod(turtleID, 'turn', [this.args.y]);
-                                self.parent.turn(this.args.y);
-                            if (this.sourceString == "-")
-                                // vwf_view.kernel.callMethod(turtleID, 'turn', [-1 * this.args.y]);
-                                self.parent.turn(-1*this.args.y);
-                            }
-                    });  
-methods:
-    clearDraw: |
-        let self = this
-        let drawDef = {
-            "extends": "http://vwf.example.com/aframe/aentity.vwf",
-        }
-        this.children.delete(this.drawNode);
-        this.children.create("drawNode", drawDef);
-        this.angleInRadians = 0
-        //this.drawNode.children.forEach(el => {
-        //   self.drawNode.children.delete(el)
-        //})
-    parseLSys: |
-        var str = this.rule;
-        var axioms = {"F": this.axiomF, "G": this.axiomG};
-        for (var i = 1; i < this.iteration; i++)
-        {
-            var match = this.lsysLang.grammar.match(str, 'Gen<"y">');
-            if (match.succeeded()){
-            var res = this.lsysLang.semantics(match).gen(axioms);
-            str = res.join("");
-            }
-        }
-        console.log(str);
-        this.lsys = str;
-    makeLSys: |
-        if (this.ready) 
-        {
-        this.clearDraw();
-        this.parseLSys();
-        this.future(0.1).drawLSys();
-        }
-    drawLSys: |
-        var match = this.turtleLang.grammar.match(this.lsys, 'Draw<"1","1">');
-        if (match.succeeded()){
-            var res = this.turtleLang.semantics(match).draw(this.stepLength, this.angle);
-        }
-    makeMe:
-        parameters:
-                - childName
-                - startPosition
-                - endPosition
-        body: |
-                //let nodeId = this.drawNode.id;
-                var childComponent = {
-                                    "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
-                                    "type": "component",
-                                    "properties": {
-                                        "start": startPosition,
-                                        "end": endPosition,
-                                        "color": "green"
-                                    }
-                                }
-                    //vwf_view.kernel.createChild(this.id, childName, childComponent);
-                    this.drawNode.children.create(childName, childComponent);
-    turn:
-        parameters:
-            - angle
-        body: |
-            var angle0 = this.angleInRadians;
-            var targetAngle = angle * Math.PI / 180.0;
-            this.angleInRadians = angle0 + targetAngle;
-    goForward:
-        parameters:
-            - step
-        body: |
-            let pos = AFRAME.utils.coordinates.parse(this.drawNode.position);
-            var x0 = pos.x;
-            var y0 = pos.y;
-            var xx = Math.sin(this.angleInRadians);
-            var yy = Math.cos(this.angleInRadians);
-            let endPosition = AFRAME.utils.coordinates.stringify({x: x0 + step * xx, y: y0 + step * yy, z: pos.z});
-            this.counter = this.counter + 1;
-            this.makeMe('line__' + this.counter, this.drawNode.position, endPosition);
-            this.drawNode.position = endPosition;
-    initialize:
-        body: |
-            this.ready = true;
-            console.log("initialising turtle");
-            //vwf_view.kernel.callMethod(this.id, "testDrawLsys");