plotting points on an image of an art gallery

3 files changed, 51 insertions, 10 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js
index 7a40144..a765c89 100644
--- a/public/assets/javascripts/mx/primitives/mx.grid.js
+++ b/public/assets/javascripts/mx/primitives/mx.grid.js
@@ -34,8 +34,13 @@ MX.Grid = MX.Object3D.extend({
 		this.draw(ctx)
   },
   
-  draw: function(ctx){
+  draw: function(ctx, recenter){
     ctx = ctx || this.ctx
+
+    if (recenter) {
+      ctx.save()
+      ctx.translate( -grid.width/2, -grid.height/2 )
+    }
     
     var cells = this.ops.cells,
         space = this.ops.space,
@@ -53,6 +58,11 @@ MX.Grid = MX.Object3D.extend({
     }
     ctx.closePath()
     ctx.stroke()
+
+    if (recenter) {
+      ctx.restore()
+    }
+
   },
 
 })
diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index b8557bf..ca79065 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -1,6 +1,5 @@
 MX.Image = MX.Object3D.extend({
   init: function (ops) {
-  
   	this.type = "Image"
 		this.media = ops.media
     this.width = 0
@@ -41,8 +40,31 @@ MX.Image = MX.Object3D.extend({
       layer.el.classList.add('image')
       layer.dirty = true
       layer.update()
+      layer.ops.onload
     }
     image.src = ops.src;
+
+    if (ops.keepImage) {
+      this.image = image
+    }
+  },
+
+  draw: function(ctx, recenter){
+    if (recenter) {
+      ctx.save()
+      ctx.scale(-1, 1)
+      ctx.translate( -this.width/2 * this.scale, -this.height/2 * this.scale )
+    }
+
+    ctx.drawImage(this.image,
+      0, 0, this.image.naturalWidth, this.image.naturalHeight,
+      0, 0, this.image.width * this.scale, this.image.height * this.scale
+    )
+
+    if (recenter) {
+      ctx.restore()
+    }
+
   },
 
 })
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index d554a60..733c90c 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -34,6 +34,7 @@ body {
 <script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.image.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/util/wheel.js"></script>
@@ -53,7 +54,7 @@ map = new Map ({
 	el: document.querySelector("#orthographic"),
 	width: window.innerWidth/2,
 	height: window.innerHeight,
-	zoom: 0,
+	zoom: -2,
 })
 
 var placing = false
@@ -127,9 +128,11 @@ function add_mx_point (p, i) {
 		z: p.b,
 		width: 20,
 		height: 20,
+		rotationX: PI/2,
 	})
 	mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
 	mx.el.style.backfaceVisibility = "visible"
+	mx.el.style.borderRadius = "50%"
 	scene.add(mx)
 	return mx
 }
@@ -143,14 +146,22 @@ function build () {
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
 
-  grid = new MX.Grid()
-  scene.add(grid)
+//   grid = new MX.Grid()
+//   scene.add(grid)
+  floorplan = new MX.Image({
+    src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
+    keepImage: true,
+    rotationX: -PI/2,
+    rotationY: PI,
+  })
+  scene.add(floorplan)
   
 	scene.update()
 
 	controls = new MX.OrbitCamera({
 	  el: scene.el,
-	  radius: 1000,
+	  radius: 3000,
+	  radiusRange: [ 10, 10000 ],
 	  rotationX: PI/4,
 	  rotationY: PI/2,
 	})
@@ -168,10 +179,8 @@ function animate(time){
 	map.draw.ctx.save()
 	map.draw.translate()
 
-  map.draw.ctx.save()
-  map.draw.ctx.translate(-(20*20)/2, -(20*20)/2)
-  grid.draw(map.draw.ctx, 20, 20)
-  map.draw.ctx.restore()
+//   grid.draw(map.draw.ctx, true)
+  floorplan.draw(map.draw.ctx, true)
 
 	map.draw.coords()