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

@@ -23,19 +23,13 @@
     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

@@ -23,6 +23,16 @@ function PointOnCanvas() {
     // alias !
     var state = ptOnCanvas.state
 
+    ptOnCanvas.inputs = {
+        xy1: Input('array', onNewXY1),
+        xy2: Input('array', onNewXY2)
+        // do some canvas stuff 
+    }
+
+    ptOnCanvas.outputs = {
+        //log: Output('string')
+    }
+
     ptOnCanvas.ui = UI()
     var ui = ptOnCanvas.ui
     ui.addElement('threeCanvas', './ui/threeCanvas.js', onUICallback)
@@ -30,17 +40,12 @@ function PointOnCanvas() {
         console.log('canvas is loaded')
     }
 
-    ptOnCanvas.inputs = {
-        xy: Input('array', onNewPoint)
-        // do some canvas stuff 
-    }
-
-    ptOnCanvas.outputs = {
-        log: Output('string')
+    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) {

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

@@ -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
 }