build MX divs from polyline

2 files changed, 88 insertions, 22 deletions

diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
index b09512e..6dc5b6c 100644
--- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
+++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js
@@ -9,6 +9,7 @@ MX.OrbitCamera = function(opt){
 		rotationY: 0,
 		center: { x: 0, y: 0, z: 0 },
 		sensitivity: 10,              // moving 1 pixel is like moving N radians
+		wheelSensitivity: 10,
 		ease: 10,
 	})
 	var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false
@@ -19,7 +20,7 @@ MX.OrbitCamera = function(opt){
     exports.wheel = new wheel({
 			el: opt.el,
 			update: function(e, delta){
-				opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] )
+				opt.radius = clamp( opt.radius + delta * opt.wheelSensitivity, opt.radiusRange[0], opt.radiusRange[1] )
 			},
 		})
 		exports.bind()
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
index b00b6fe..041ec3f 100644
--- a/public/assets/test/ortho.html
+++ b/public/assets/test/ortho.html
@@ -62,17 +62,19 @@ Map.UI.Ortho = function(map){
 				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
 					points.push( points[0].clone() )
 					placing = false
+					add_mx_polyline(points)
 				}
 				else {
 					points.push( p )
+          mx_points.push( add_mx_point(p) )
 				}
 			}
 			else {
 				placing = true
-				points.length = 0
+				points.length = mx_points.length = 0
 				points.push( p )
+        mx_points.push( add_mx_point(p) )
 			}
-			add_mx_point(p)
 		},
 		move: function(e, cursor){
 			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
@@ -104,10 +106,11 @@ map = new Map ({
 	el: document.querySelector("#orthographic"),
 	width: window.innerWidth/2,
 	height: window.innerHeight,
+	zoom: 0,
 })
 
 var placing = false
-var points = []
+var points = [], mx_points = []
 var ctx = map.draw.ctx
 var last_point
 
@@ -119,6 +122,7 @@ function polyline (time) {
   if (points.length > 1) {
     ctx.fillStyle = "#ff0"
     ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
     ctx.beginPath()
     ctx.moveTo(points[0].a, points[0].b)
     points.forEach(function(point, i){
@@ -131,24 +135,80 @@ function polyline (time) {
     }
   }
 }
-document.addEventListener('DOMContentLoaded', build_circle)
+
+function add_mx_polyline (points) {
+  mx_points.forEach(function(mx){ scene.remove(mx) })
+  for (var i = 1; i < points.length; i++) {
+    var head = points[i-1]
+    var tail = points[i % (points.length-1)]
+    add_mx_polyline_face(head, tail)
+  }
+}
+function add_mx_polyline_face(head, tail){
+  var mx = new MX.Object3D()
+  var mid_x = (head.a + tail.a)
+  var mid_z = (head.b + tail.b)
+  var len = head.distanceTo( tail )
+  var angle = atan2( head.b - tail.b, head.a - tail.a )
+  mx.move({
+    x: mid_x / 2,
+    y: 25 + 1,
+    z: mid_z / 2,
+    width: ceil(len),
+    height: 50,
+    rotationY: angle
+  })
+  var hue = abs(round( angle / PI * 90 + 300))
+  console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')')
+  mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
+  scene.add(mx)
+}
+
+
 function add_mx_point (p, i) {
 	var mx = new MX.Object3D()
 	mx.updateChildren = false
 	mx.move({
 		x: p.a,
-		y: i/4,
+		y: 11,
 		z: p.b,
-		width: 1,
-		height: i/2,
+		width: 20,
+		height: 20,
 	})
 	mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
 	mx.el.style.backfaceVisibility = "visible"
 	scene.add(mx)
-	mx.update()
+	return mx
+}
+function mx_grid () {
+  var space = 20, cells = 20, side = space*cells
+  var ctx, canvas = document.createElement("canvas")
+  canvas.width = canvas.height = side + 4
+  ctx = canvas.getContext('2d')
+
+  draw_grid(ctx, 20, 20)
+
+  var mx = new MX.Object3D(canvas)
+  mx.rotationX = PI/2
+  scene.add(mx)
+}
+function draw_grid (ctx, cells, space) {  
+  var side = space * cells
+  ctx.strokeStyle = "#444"
+  ctx.lineWidth = 1
+  ctx.beginPath()
+  ctx.translate(1,1)
+  for (var i = 0; i <= cells; i++) {
+    ctx.moveTo(i*space, 0)
+    ctx.lineTo(i*space, side)
+    ctx.moveTo(0, i*space)
+    ctx.lineTo(side, i*space)
+  }
+  ctx.stroke()
 }
 
-function build_circle () {
+document.addEventListener('DOMContentLoaded', build)
+function build () {
 	scene = new MX.Scene().addTo("#perspective")
 	scene.camera.move({
 		"x": 0,
@@ -163,21 +223,17 @@ function build_circle () {
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
 
-	var theta, rad = 10;
-	for (var i = 0; i < 100; i++) {
-		theta = (i/100 * TWO_PI)
-		add_mx_point({
-			a: sin(theta) * rad,
-			b: cos(theta) * rad,
-		}, i)
-	}
-
+  mx_grid()
+  
 	scene.update()
 
-	controls = new MX.OrbitCamera()
+	controls = new MX.OrbitCamera({
+	  radius: 1000,
+	  rotationX: PI/4,
+	  rotationY: PI/2,
+	})
 	controls.init()
 
-	console.log("ready..perhaps")
 	animate(0)
 }
 function animate(time){
@@ -190,10 +246,19 @@ function animate(time){
 	map.draw.ctx.save()
 	map.draw.translate()
 
+  map.draw.ctx.save()
+  map.draw.ctx.translate(-(20*20)/2, -(20*20)/2)
+  draw_grid(map.draw.ctx, 20, 20)
+  map.draw.ctx.restore()
+
 	map.draw.coords()
+
+  polyline()
+
+  ctx.strokeStyle = "#f00";
+  map.draw.x_at(0,0)
 	map.draw.mouse(map.ui.mouse.cursor)
 	map.draw.camera(scene.camera)
-  polyline()
 
 	map.draw.ctx.restore()
 }