mx on the other side

1 files changed, 65 insertions, 98 deletions

diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
index 8626453..e7ec113 100644
--- a/public/assets/test/ortho.html
+++ b/public/assets/test/ortho.html
@@ -39,12 +39,6 @@ body {
 
 <script>
 
-// var w = canvas.width = window.innerWidth/2
-// var h = canvas.height = window.innerHeight
-
-// var ctx = canvas.getContext('2d')
-var scene = new MX.Scene()
-
 Map.UI = Map.UI || {}
 Map.UI.Ortho = function(map){
 
@@ -59,7 +53,6 @@ Map.UI.Ortho = function(map){
 			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
 			// compare to initial point
 			var p = new vec2( cursor.x.a, cursor.y.a )
-			console.log(p+"")
 			if (placing) {
 				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
 					points.push( points[0].clone() )
@@ -74,17 +67,19 @@ Map.UI.Ortho = function(map){
 				points.length = 0
 				points.push( 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)
 			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-// 			var p = new vec2( cursor.x.a, cursor.y.a )
-// 			if (placing && points.length > 2 && points[0].distanceTo(p) < 3 ) {
-// 				document.body.style.cursor = "pointer"
-// 			}
-// 			else {
-// 				document.body.style.cursor = "crosshair"
-// 			}
+			last_point = new vec2( cursor.x.a, cursor.y.a )
+			var p = new vec2( cursor.x.a, cursor.y.a )
+			if (placing && points.length > 1 && points[0].distanceTo( p ) < 10/map.zoom) {
+				document.body.style.cursor = "pointer"
+			}
+			else {
+				document.body.style.cursor = "crosshair"
+			}
 		},
 		drag: function(e, cursor){
 			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
@@ -98,6 +93,8 @@ Map.UI.Ortho = function(map){
 
 }
 
+var scene, map
+
 map = new Map ({
 	type: "ortho",
 	el: document.querySelector("#orthographic"),
@@ -105,120 +102,90 @@ map = new Map ({
 	height: window.innerHeight,
 })
 
-scene.camera.move({
-	"x": 0,
-	"y": 0,
-	"z": 0,
-	"rotationX": 0, // PI/2,
-	"rotationY": PI/2, // PI
-})
-scene.camera.radius = 20
-
 var placing = false
 var points = []
 var ctx = map.draw.ctx
+var last_point
 
-function draw (time) {
+function polyline (time) {
   if (points.length == 1) {
-    ctx.fillStyle = "#000"
+    ctx.fillStyle = "#f80"
     ctx.fillRect(points[0].a, points[0].b, 10, 10)
   }
   if (points.length > 1) {
-    ctx.fillStyle = "#000"
-    ctx.strokeStyle = "#000"
+    ctx.fillStyle = "#ff0"
+    ctx.strokeStyle = "#f80"
     ctx.beginPath()
     ctx.moveTo(points[0].a, points[0].b)
     points.forEach(function(point, i){
       i && ctx.lineTo(point.a, point.b)
     })
-    if (placing) {
-      ctx.stroke()
-    }
-    else {
+    placing && last_point && ctx.lineTo(last_point.a, last_point.b)
+		ctx.stroke()
+    if (! placing) {
       ctx.fill()
     }
   }
 }
+document.addEventListener('DOMContentLoaded', build_circle)
+function add_mx_point (p) {
+	var mx = new MX.Object3D()
+	mx.updateChildren = false
+	mx.move({
+		x: p.a,
+		y: 0,
+		z: p.b,
+		width: 5,
+		height: 5,
+	})
+	mx.el.style.backgroundColor = "#f80"
+	mx.el.style.backfaceVisibility = "visible"
+	scene.add(mx)
+	mx.update()
+}
+
+function build_circle () {
+	scene = new MX.Scene().addTo("#perspective")
+	scene.camera.move({
+		"x": 0,
+		"y": 0,
+		"z": 0,
+		"rotationX": 0, // PI/2,
+		"rotationY": PI/2, // PI
+	})
+	scene.camera.radius = 20
+
+	scene.width = window.innerWidth/2
+	scene.height = window.innerHeight
+	scene.perspective = window.innerHeight
 
+	var theta, rad = 10;
+	for (var i = 0; i < 100; i++) {
+		theta = (i/TWO_PI)
+		add_mx_point({
+			a: sin(theta) * rad,
+			b: cos(theta) * rad,
+		})
+	}
 
+	scene.update()
+	console.log("ready..perhaps")
+	animate()
+}
 function animate(time){
   requestAnimationFrame(animate)
   map.update(time)
 
+  scene.update()
+
 	map.draw.ctx.save()
 	map.draw.translate()
 
 	map.draw.coords()
 	map.draw.mouse(map.ui.mouse.cursor)
-  draw(time)
+  polyline()
 
 	map.draw.ctx.restore()
 }
-animate()
-
-
-/*
-var mymouse = new mouse({
-  el: canvas,
-  down: function(e, cursor){
-    // compare to initial point
-    var p = new vec2( -cursor.x.a, cursor.y.a )
-    console.log(p+"")
-    if (placing) {
-      if (points.length > 2 && points[0].distanceTo( p ) < 3) {
-        points.push( points[0].clone() )
-        placing = false
-      }
-      else {
-        points.push( p )
-      }
-    }
-    else {
-      placing = true
-      points.length = 0
-      points.push( p )
-    }
-  },
-  move: function(e, cursor){
-    var p = new vec2( cursor.x.a, cursor.y.a )
-    if (placing && points.length > 2 && points[0].distanceTo(p) < 3 ) {
-      document.body.style.cursor = "pointer"
-    }
-    else {
-      document.body.style.cursor = "crosshair"
-    }
-  },
-  drag: function(e, cursor){
-  },
-  up: function(e, cursor, new_cursor){
-  },
-})
-
-function draw (time) {
-  ctx.fillStyle = "#fff"
-  ctx.fillRect(0,0,w,h)
-
-  if (points.length == 1) {
-    ctx.fillStyle = "#000"
-    ctx.fillRect(points[0].a, points[0].b, 1, 1)
-  }
-  if (points.length > 1) {
-    ctx.fillStyle = "#000"
-    ctx.strokeStyle = "#000"
-    ctx.beginPath()
-    ctx.moveTo(points[0].x, points[0].y)
-    points.forEach(function(point, i){
-      i && ctx.lineTo(point.x, point.y)
-    })
-    if (placing) {
-      ctx.stroke()
-    }
-    else {
-      ctx.fill()
-    }
-  }
-}
-*/
-
 
 </script>
\ No newline at end of file