From 220320494c60c154e84c579f86d2dfdd8f41be2f Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 3 Feb 2015 17:41:36 -0500
Subject: orthographic polyline

---
 public/assets/test/ortho.html | 224 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 224 insertions(+)
 create mode 100644 public/assets/test/ortho.html

(limited to 'public/assets/test')

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
-- 
cgit v1.2.3-70-g09d2