three canvas shoot thru

canvas.js

@@ -10,6 +10,9 @@ var program = Programs.new('new program')
 var canvas = Programs.loadModuleFromSource(program, './modules/ui/threeCanvas.js')
 Programs.setUI(canvas, 200, 200)
 
+var array = Programs.loadModuleFromSource(program, './modules/util/array.js')
+array.state.array = [2,4]
+array.outputs.out.attach(canvas.inputs.xy1)
 
 // UI 
 const View = require('./views.js')

client/ui/threeCanvas.js

@@ -20,22 +20,16 @@
 
     // grid 
     var gridHelper = new THREE.GridHelper(10, 100)
-    gridHelper.translateOnAxis(new THREE.Vector3(0,0,1), -0.01)
-    gridHelper.rotateX(- Math.PI / 2)
+    gridHelper.translateOnAxis(new THREE.Vector3(0, 0, 1), -0.01)
+    gridHelper.rotateX(-Math.PI / 2)
     scene.add(gridHelper)
-    /*
-    // floor 
-    var flrGeo = new THREE.PlaneBufferGeometry(2000, 2000, 8, 8)
-    var flrMat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide })
-    var floor = new THREE.Mesh(flrGeo, flrMat)
-    scene.add(floor);
-    */
 
-    // adding to scene
+    // one line 
     var material = new THREE.LineBasicMaterial({ color: 0x00ffff })
     var geometry = new THREE.Geometry()
-    geometry.vertices.push(new THREE.Vector3(-10, 0, 0))
-    geometry.vertices.push(new THREE.Vector3(0, 2, 2))
+    geometry.vertices.push(new THREE.Vector3(0, 0, 0))
+    geometry.vertices.push(new THREE.Vector3(0.5, 0, 0.5))
+    geometry.vertices.push(new THREE.Vector3(1, 0, 0.5))
     var line = new THREE.Line(geometry, material)
     scene.add(line)
 
@@ -48,8 +42,10 @@
 
     var animate = function() {
         requestAnimationFrame(animate)
+        /*
         line.geometry.vertices[1].x += 0.01
         line.geometry.verticesNeedUpdate = true
+        */
         controls.update()
 
         renderer.render(scene, camera)
@@ -73,10 +69,12 @@
     // the server 
     threeCanvas.onMessage = function(msg) {
         //console.log('got message in client side ui object', msg)
-        if (msg.call == 'setXY') {
-            // do stuff 
-        } else if (msg.call == 'anotherThing') {
-            //
+        if (msg.call == 'setXY1') {
+            line.geometry.vertices[1].set(msg.argument[0], msg.argument[1], msg.argument[2])
+            line.geometry.verticesNeedUpdate = true 
+        } else if (msg.call == 'setXY2') {
+            line.geometry.vertices[2].set(msg.argument[0], msg.argument[1], msg.argument[2])
+            line.geometry.verticesNeedUpdate = true 
         } else if (msg.call == 'setRows') {
             //  
         } else {

modules/ui/threeCanvas.js

@@ -6,7 +6,7 @@ let State = JSUnit.State
 
 // interface elements
 const JSUI = require('../../src/jsui.js')
-let UI = JSUI.UI 
+let UI = JSUI.UI
 
 // a constructor, a fn, a javascript mess
 function PointOnCanvas() {
@@ -23,27 +23,32 @@ function PointOnCanvas() {
     // alias !
     var state = ptOnCanvas.state
 
-    ptOnCanvas.ui = UI()
-    var ui = ptOnCanvas.ui 
-    ui.addElement('threeCanvas', './ui/threeCanvas.js', onUICallback)
-    ui.threeCanvas.onload = function(){
-        console.log('canvas is loaded')
-    }
-
     ptOnCanvas.inputs = {
-        xy: Input('array', onNewPoint)
+        xy1: Input('array', onNewXY1),
+        xy2: Input('array', onNewXY2)
         // do some canvas stuff 
     }
 
     ptOnCanvas.outputs = {
-        log: Output('string')
+        //log: Output('string')
+    }
+
+    ptOnCanvas.ui = UI()
+    var ui = ptOnCanvas.ui
+    ui.addElement('threeCanvas', './ui/threeCanvas.js', onUICallback)
+    ui.threeCanvas.onload = function() {
+        console.log('canvas is loaded')
+    }
+
+    function onNewXY1(array) {
+        ui.threeCanvas.updateXY1([array[0], 0, array[1]])
     }
 
-    function onNewPoint(array) {
-        console.log('pt inputs to ptOnCanvas', array)
+    function onNewXY2(array){
+        ui.threeCanvas.updateXY2f([array[0], 0, array[1]])
     }
 
-    function onUICallback(msg){
+    function onUICallback(msg) {
         console.log('msg callback from threeCanvas ui element', msg)
     }
 

modules/util/array.js

+// boilerplate rndmc header
+const JSUnit = require('../../src/jsunit.js')
+let Input = JSUnit.Input
+let Output = JSUnit.Output
+let State = JSUnit.State
+
+// interface elements
+const JSUI = require('../../src/jsui.js')
+let UI = JSUI.UI 
+
+// a constructor, a fn, a javascript mess
+function UIArray() {
+
+    // this is the tiny program-as-and-object that we'll load into rundmc 
+    // description / name is required to load successfully 
+    var uiArray = {
+        description: {
+            name: 'array-output',
+            alt: 'for clicking'
+        }
+    }
+
+    // the State() object is what the system scrapes for ui variables / updates from the UI
+    // this includes things like Button('title', callback), which are unique state variables
+    // they can also be found in jsunit.js 
+    uiArray.state = State()
+    // alias !
+    var state = uiArray.state 
+
+    state.array = [1.2,5.5,7.1]
+
+    uiArray.ui = UI() 
+    var ui = uiArray.ui 
+    ui.addElement('onArrayButton', './ui/uiButton.js', onArrayDesire)
+    ui.onArrayButton.onload = function() {
+        ui.onArrayButton.setText('array out ->')
+    }
+
+    // inputs are required, and must be Input('type', callback) 
+    uiArray.inputs = {
+        thru: Input('any', onThruInput), // makes anything into num event 
+        evt: Input('any', onArrayDesire)
+    }
+
+    // outputs: Output('type')
+    uiArray.outputs = {
+        out: Output('number')
+    }
+
+    // here's our input callback, specified in the input constructor 
+    function onThruInput(input){
+        if(typeof input == 'number'){
+            state.number = input
+        } else {
+            state.number = parseFloat(input)
+        }
+        onArrayDesire()
+    }
+
+    function onArrayDesire(){
+        // here's how we fire an output. 
+        uiArray.outputs.out.emit(state.array)
+    }
+
+    // gotta give the program this thing we made 
+    return uiArray
+}
+
+// this for node.js's require() function 
+module.exports = UIArray
\ No newline at end of file

src/ui/threeCanvas.js

@@ -10,8 +10,8 @@ function ThreeCanvasUIElement() {
     // hook to recv messages from the ui counterpart
     threeCanvasUIElement.onMessage = function(msg) {
         //console.log('message into server side object', msg)
-        if(msg == 'onload'){
-        	this.onload() 
+        if (msg == 'onload') {
+            this.onload()
         } else {
             // do other message stuff?
             // is this why callback ?
@@ -20,7 +20,25 @@ function ThreeCanvasUIElement() {
         }
     }
 
+    threeCanvasUIElement.updateXY1 = function(arary) {
+        // ex. of how to send data up to client 
+        var msg = {
+            call: 'setXY1',
+            argument: arary
+        }
+        // this.sendToUi is given to us during load
+        this.sendToUi(msg)
+    }
 
+    threeCanvasUIElement.updateXY2 = function(arary) {
+        // ex. of how to send data up to client 
+        var msg = {
+            call: 'setXY2',
+            argument: arary
+        }
+        // this.sendToUi is given to us during load
+        this.sendToUi(msg)
+    }
 
     return threeCanvasUIElement
 }