From 272032cf1bf3e00cf3ab83297989e1622e330a1c Mon Sep 17 00:00:00 2001
From: Jake <jake.read@cba.mit.edu>
Date: Sat, 8 Dec 2018 15:55:11 -0500
Subject: [PATCH] three canvas shoot thru
---
canvas.js | 3 ++
client/ui/threeCanvas.js | 30 +++++++--------
modules/ui/threeCanvas.js | 31 ++++++++-------
modules/util/array.js | 70 ++++++++++++++++++++++++++++++++++
modules/{ui => util}/number.js | 0
src/ui/threeCanvas.js | 22 ++++++++++-
6 files changed, 125 insertions(+), 31 deletions(-)
create mode 100644 modules/util/array.js
rename modules/{ui => util}/number.js (100%)
diff --git a/canvas.js b/canvas.js
index 8e1b812..bdbc6d5 100644
--- a/canvas.js
+++ b/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')
diff --git a/client/ui/threeCanvas.js b/client/ui/threeCanvas.js
index b514da2..06ce3fd 100644
--- a/client/ui/threeCanvas.js
+++ b/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 {
diff --git a/modules/ui/threeCanvas.js b/modules/ui/threeCanvas.js
index 533cf7e..f898599 100644
--- a/modules/ui/threeCanvas.js
+++ b/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)
}
diff --git a/modules/util/array.js b/modules/util/array.js
new file mode 100644
index 0000000..ade6932
--- /dev/null
+++ b/modules/util/array.js
@@ -0,0 +1,70 @@
+// 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
diff --git a/modules/ui/number.js b/modules/util/number.js
similarity index 100%
rename from modules/ui/number.js
rename to modules/util/number.js
diff --git a/src/ui/threeCanvas.js b/src/ui/threeCanvas.js
index 705aed3..0f5d098 100644
--- a/src/ui/threeCanvas.js
+++ b/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
}
--
GitLab