orthographic polyline

4 files changed, 251 insertions, 5 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 202803a..d582982 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -48,6 +48,13 @@ var Map = function(opt){
 	base.el.appendChild(canvas)
 	
 	switch (opt.type) {
+		case "ortho":
+			base.draw = new Map.Draw (base, { ortho: true })
+			base.ui = new Map.UI.Ortho (base)
+			base.sides = base.sides_for_camera
+			$(window).resize(base.resize)
+			break
+		
 		case "editor":
 			base.draw = new Map.Draw (base)
 			base.ui = new Map.UI.Editor (base)
@@ -65,6 +72,7 @@ var Map = function(opt){
 	base.resize = function(){
 		canvas.width = base.dimensions.a = window.innerWidth
 		canvas.height = base.dimensions.b = window.innerHeight
+		// resize here - esp if 2d-hires
 	}
 		
 	base.toggle = function(state){
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 5a9b592..b525696 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -5,14 +5,16 @@ Map.Draw = function(map, opt){
 
 	var draw = this
 	
-	var ctx = map.canvas.getContext("2d")
+	var ctx = draw.ctx = map.canvas.getContext("2d")
 
 	draw.animate = function(){
 		ctx.save()
 		draw.clear()
 		draw.fill("rgba(255,255,255,0.98)")
 
-		if (opt.minimap) {
+		if (opt.ortho) {
+		}
+		else if (opt.minimap) {
 			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
 			ctx.scale( map.zoom, map.zoom )
 			ctx.translate( opt.center.x, - opt.center.z )
@@ -22,7 +24,6 @@ Map.Draw = function(map, opt){
 			draw.regions(Rooms.regions, [ "#fff" ], "#000")
 			draw.camera(scene.camera)
 		}
-		
 		else {
 			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
 			ctx.scale( map.zoom, map.zoom )
@@ -31,12 +32,19 @@ Map.Draw = function(map, opt){
 
 			draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000")
 			draw.mouse(map.ui.mouse.cursor)
+			draw.mouse_dimensions(map.ui.mouse.cursor)
 			draw.coords()
 			scene && draw.camera(scene.camera)
 		}
 
 		ctx.restore()
 	}
+	draw.translate = function(){
+		ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
+		ctx.scale( map.zoom, map.zoom )
+		ctx.translate( map.center.a, map.center.b )
+		ctx.scale( -1, 1 )
+	}
 
   // changes the ctx temporarily
 	draw.render = function(){
@@ -87,7 +95,7 @@ Map.Draw = function(map, opt){
 		ctx.putImageData(pixelData, 0, 0)
 
 		// reset the ctx
-		ctx = map.canvas.getContext("2d")
+		ctx = draw.ctx
 
 		return canvas
 	}
@@ -123,7 +131,8 @@ Map.Draw = function(map, opt){
 		ctx.beginPath();
 		ctx.arc(mouse.x.b, mouse.y.b, radius, 0, 2*Math.PI, false);
 		ctx.fill();
-
+	}
+	draw.mouse_dimensions = function(mouse){
 		if (mouse.width() != 0 && mouse.height() != 0) {
 			if (map.ui.dragging) {
 				stroke_rect(mouse)
diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js
index 14d0e6b..290e45e 100644
--- a/public/assets/javascripts/rectangles/models/vec2.js
+++ b/public/assets/javascripts/rectangles/models/vec2.js
@@ -80,6 +80,11 @@
 	  this.a = Math.round(this.a)
 	  this.b = Math.round(this.b)
 	}
+	vec2.prototype.distanceTo = function(v){
+		var va = (this.a - v.a)
+		var vb = (this.b - v.b)
+		return Math.sqrt( va*va + vb*vb )
+	}
 	vec2.prototype.setPosition = function(n){
 		var len = this.length()
 		this.a = n
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
new file mode 100644
index 0000000..8626453
--- /dev/null
+++ b/public/assets/test/ortho.html
@@ -0,0 +1,224 @@
+<style type="text/css">
+html,body{width:100%;height:100%;margin:0;padding:0;}
+body {
+	font-family: Menlo, monospace;
+	overflow: hidden;
+}
+#perspective {
+	position: absolute;
+	left:0%;
+	top:0px
+}
+#orthographic {
+	position: absolute;
+	left:50%;
+	top:0px
+}
+</style>
+
+<div id="perspective"></div>
+<div id="orthographic"></div>
+
+<div id="hud"></div>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/polyfill.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/mx/mx.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/models/vec2.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
+
+<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){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: 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)
+			// 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() )
+					placing = false
+				}
+				else {
+					points.push( p )
+				}
+			}
+			else {
+				placing = true
+				points.length = 0
+				points.push( 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"
+// 			}
+		},
+		drag: function(e, cursor){
+			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
+			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
+		},
+		up: function(e, cursor, new_cursor){
+			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+		}
+	})
+
+}
+
+map = new Map ({
+	type: "ortho",
+	el: document.querySelector("#orthographic"),
+	width: window.innerWidth/2,
+	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
+
+function draw (time) {
+  if (points.length == 1) {
+    ctx.fillStyle = "#000"
+    ctx.fillRect(points[0].a, points[0].b, 10, 10)
+  }
+  if (points.length > 1) {
+    ctx.fillStyle = "#000"
+    ctx.strokeStyle = "#000"
+    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 {
+      ctx.fill()
+    }
+  }
+}
+
+
+function animate(time){
+  requestAnimationFrame(animate)
+  map.update(time)
+
+	map.draw.ctx.save()
+	map.draw.translate()
+
+	map.draw.coords()
+	map.draw.mouse(map.ui.mouse.cursor)
+  draw(time)
+
+	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