summaryrefslogtreecommitdiff
path: root/public/assets/test
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets/test')
-rw-r--r--public/assets/test/bg.html1
-rw-r--r--public/assets/test/intersect.html5
-rw-r--r--public/assets/test/intersect2.html12
-rw-r--r--public/assets/test/intersect3.html12
-rw-r--r--public/assets/test/orbit.html154
-rw-r--r--public/assets/test/ortho.html290
-rw-r--r--public/assets/test/ortho2.html374
-rw-r--r--public/assets/test/ortho3.html258
-rw-r--r--public/assets/test/ortho4.html303
-rw-r--r--public/assets/test/static.html152
-rw-r--r--public/assets/test/surface.html5
11 files changed, 1552 insertions, 14 deletions
diff --git a/public/assets/test/bg.html b/public/assets/test/bg.html
index fecf811..65dd5d9 100644
--- a/public/assets/test/bg.html
+++ b/public/assets/test/bg.html
@@ -5,6 +5,7 @@
<div id="cursor" style="width:30px;height:30px;background:blue;display:inline-block;"></div>
</div>
<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
<script src="/assets/javascripts/vendor/tube.js"></script>
<script src="/assets/javascripts/vendor/loader.js"></script>
<script src="/assets/javascripts/rectangles/util/constants.js"></script>
diff --git a/public/assets/test/intersect.html b/public/assets/test/intersect.html
index 4e5b0bb..92f1d5d 100644
--- a/public/assets/test/intersect.html
+++ b/public/assets/test/intersect.html
@@ -2,6 +2,7 @@
<div id="hud"></div>
<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
<script src="/assets/javascripts/vendor/tube.js"></script>
<script src="/assets/javascripts/rectangles/util/constants.js"></script>
<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
@@ -10,11 +11,11 @@
<script src="/assets/javascripts/vendor/canvasutilities.js"></script>
<script>
-var ctx = canvas.getContext('2d')
-
var w = canvas.width = 600
var h = canvas.height = 400
+var ctx = canvas.getContext('2d')
+
var vec_a = new Rect( 100, 120, 50, 100 )
var vec_b = new Rect( 20, 200, 120, 120 )
var vecs = [ vec_a, vec_b ]
diff --git a/public/assets/test/intersect2.html b/public/assets/test/intersect2.html
index 3df9f30..553e2f7 100644
--- a/public/assets/test/intersect2.html
+++ b/public/assets/test/intersect2.html
@@ -6,9 +6,11 @@ body,html{margin:0;padding:0;}
<div id="hud"></div>
<script src="/assets/javascripts/util.js"></script>
-<script src="/assets/javascripts/vendor/tube.js"></script>
<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
-<script src="/assets/javascripts/vendor/bower_components/lodash/dist/lodash.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>
@@ -29,12 +31,12 @@ body,html{margin:0;padding:0;}
<script src="/assets/javascripts/vendor/canvasutilities.js"></script>
<script>
-var ctx = canvas.getContext('2d')
-var scene = new MX.Scene()
-
var w = canvas.width = window.innerWidth
var h = canvas.height = window.innerHeight
+var ctx = canvas.getContext('2d')
+var scene = new MX.Scene()
+
var cursor = new Rect( 150, 250, 150, 250 )
var wall_vec = new Rect ( 0, 0, 0, 0 )
var points = [ cursor.x, cursor.y ]
diff --git a/public/assets/test/intersect3.html b/public/assets/test/intersect3.html
index 5440a76..b8f9a0d 100644
--- a/public/assets/test/intersect3.html
+++ b/public/assets/test/intersect3.html
@@ -6,9 +6,11 @@ body,html{margin:0;padding:0;}
<div id="hud"></div>
<script src="/assets/javascripts/util.js"></script>
-<script src="/assets/javascripts/vendor/tube.js"></script>
<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
-<script src="/assets/javascripts/vendor/bower_components/lodash/dist/lodash.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>
@@ -29,12 +31,12 @@ body,html{margin:0;padding:0;}
<script src="/assets/javascripts/vendor/canvasutilities.js"></script>
<script>
-var ctx = canvas.getContext('2d')
-var scene = new MX.Scene()
-
var w = canvas.width = window.innerWidth
var h = canvas.height = window.innerHeight
+var ctx = canvas.getContext('2d')
+var scene = new MX.Scene()
+
var cursor = new Rect( new vec2(400, 200), new vec2(800, 500) )
var wall_vec = new Rect ( 0, 0, 0, 0 )
var points = [ cursor.x, cursor.y ]
diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html
new file mode 100644
index 0000000..0416ff7
--- /dev/null
+++ b/public/assets/test/orbit.html
@@ -0,0 +1,154 @@
+<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
+}
+#hud {
+ white-space: pre;
+}
+</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/mx/extensions/mx.orbitCamera.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>
+<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>
+
+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,
+ 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 scene, map, controls
+
+map = new Map ({
+ type: "ortho",
+ el: document.querySelector("#orthographic"),
+ width: window.innerWidth/2,
+ height: window.innerHeight,
+})
+
+var ctx = map.draw.ctx
+
+document.addEventListener('DOMContentLoaded', build_circle)
+function add_mx_point (p, theta, i) {
+ var mx = new MX.Object3D()
+ mx.updateChildren = false
+ mx.move({
+ x: p.a,
+ y: i/2,
+ z: p.b,
+ rotationY: -theta,
+ width: 1,
+ height: i,
+ })
+ 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()
+}
+function add_center () {
+ var mx = new MX.Object3D()
+ mx.width = 79
+ mx.height = 64
+ mx.y = 32 * 0.05
+ mx.scale = 0.05
+ mx.el.style.backgroundImage = "url(http://i.asdf.us/im/b8/_1400215546_frankhats_1400215573_frankhats.gif)"
+ scene.add(mx)
+}
+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 = 16;
+ for (var i = 0; i < 100; i++) {
+ theta = (i/100 * TWO_PI)
+ add_mx_point({
+ a: sin(theta) * rad,
+ b: cos(theta) * rad,
+ }, theta, i)
+ }
+
+ add_center()
+
+ scene.update()
+
+ controls = new MX.OrbitCamera({ el: document.querySelector("#perspective") })
+ controls.init()
+
+ console.log("ready..perhaps")
+ animate(0)
+}
+function animate(time){
+ requestAnimationFrame(animate)
+ map.update(time)
+
+ controls.update()
+ hud.innerHTML = scene.camera.toString()
+ scene.update()
+
+ map.draw.ctx.save()
+ map.draw.translate()
+
+ map.draw.coords()
+ ctx.strokeStyle = "#f00";
+ map.draw.x_at(0,0)
+ map.draw.mouse(map.ui.mouse.cursor)
+ map.draw.camera(scene.camera)
+
+ map.draw.ctx.restore()
+}
+
+</script> \ No newline at end of file
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
new file mode 100644
index 0000000..2257006
--- /dev/null
+++ b/public/assets/test/ortho.html
@@ -0,0 +1,290 @@
+<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
+}
+#hud {
+ white-space: pre;
+}
+</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/mx/extensions/mx.orbitCamera.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>
+<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>
+
+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 )
+ if (placing) {
+ 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 = []
+ points.push( p )
+ mx_points.push( 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)
+ last_point = new vec2( cursor.x.a, cursor.y.a )
+ if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
+ document.body.style.cursor = "pointer"
+ last_point.assign(points[0])
+ cursor.x.a = cursor.x.b = last_point.a
+ cursor.y.a = cursor.y.b =last_point.b
+ }
+ 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)
+ }
+ })
+
+ base.wheel = new wheel({
+ el: map.el,
+ update: mousewheel,
+ })
+
+ function mousewheel (e, deltaY, deltaX){
+ map.set_zoom(map.zoom_exponent - deltaY/20)
+ }
+}
+
+var scene, map, controls
+
+map = new Map ({
+ type: "ortho",
+ el: document.querySelector("#orthographic"),
+ width: window.innerWidth/2,
+ height: window.innerHeight,
+ zoom: 0,
+})
+
+var placing = false
+var points, mx_points = []
+var shapes = []
+var ctx = map.draw.ctx
+var last_point
+
+function polyline (points, finished) {
+ if (! points) return
+ if (points.length == 1) {
+ ctx.fillStyle = "#f80"
+ map.draw.dot_at(points[0].a, points[0].b, 5)
+ }
+ 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){
+ i && ctx.lineTo(point.a, point.b)
+ })
+ ctx.stroke()
+ if (! placing || finished) {
+ ctx.fill()
+ }
+ }
+}
+
+function add_mx_polyline (points) {
+ mx_points.forEach(function(mx){ scene.remove(mx) })
+ var faces = []
+ for (var i = 1; i < points.length; i++) {
+ var head = points[i-1]
+ var tail = points[i]
+ face = add_mx_polyline_face(head, tail)
+ faces.push(face)
+ }
+ shapes.push({
+ mx: faces,
+ points: points,
+ })
+ points = []
+}
+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))
+ mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
+ scene.add(mx)
+ return mx
+}
+
+function add_mx_point (p, i) {
+ var mx = new MX.Object3D()
+ mx.updateChildren = false
+ mx.move({
+ x: p.a,
+ y: 11,
+ z: p.b,
+ 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)
+ 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.closePath()
+ ctx.stroke()
+}
+
+document.addEventListener('DOMContentLoaded', build)
+function build () {
+ scene = new MX.Scene().addTo("#perspective")
+ scene.camera.radius = 20
+
+ scene.width = window.innerWidth/2
+ scene.height = window.innerHeight
+ scene.perspective = window.innerHeight
+
+ mx_grid()
+
+ scene.update()
+
+ controls = new MX.OrbitCamera({
+ radius: 1000,
+ rotationX: PI/4,
+ rotationY: PI/2,
+ })
+ controls.init()
+
+ animate(0)
+}
+function animate(time){
+ requestAnimationFrame(animate)
+ map.update(time)
+
+ controls.update()
+ scene.update()
+
+ 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(points)
+ if (placing && last_point) {
+ ctx.strokeStyle = "#f80"
+ ctx.lineWidth = 2 / map.zoom
+ ctx.beginPath()
+ ctx.moveTo(points[points.length-1].a, points[points.length-1].b)
+ ctx.lineTo(last_point.a, last_point.b)
+ ctx.stroke()
+ }
+
+ shapes.forEach(function(shape){
+ polyline(shape.points, true)
+ })
+
+ ctx.strokeStyle = "#f00";
+ map.draw.x_at(0,0)
+ map.draw.mouse(map.ui.mouse.cursor)
+ map.draw.camera(scene.camera)
+
+ map.draw.ctx.restore()
+}
+
+</script> \ No newline at end of file
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
new file mode 100644
index 0000000..ef77256
--- /dev/null
+++ b/public/assets/test/ortho2.html
@@ -0,0 +1,374 @@
+<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
+<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
+}
+#hud {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 10px;
+ background: white;
+}
+#url { width: 300px }
+#hud span { color: #888; cursor: pointer; }
+#hud span.active { color: #000; }
+</style>
+
+<div id="perspective"></div>
+<div id="orthographic"></div>
+
+<div id="hud">
+ <input type="text" id="url" placeholder="paste an image URL here!">
+ <span class="ion-ionic active" data-role="orbit-mode"></span>
+ <span class="ion-archive" data-role="keyboard-mode"></span>
+</div>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/defaults.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/bower_components/fiber/src/fiber.min.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/mx/extensions/mx.orbitCamera.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.movements.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/coords.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.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/ui/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/_base.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/arrow.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
+
+<script>
+var app = window.app || {}
+app.tube = new Tube ()
+app.on = function(){ app.tube.on.apply(app.tube, arguments) }
+app.off = function(){ app.tube.off.apply(app.tube, arguments) }
+
+var MapTool = Fiber.extend(function(base){
+ var exports = {
+ down: function(e, cursor){},
+ move: function(e, cursor){},
+ drag: function(e, cursor){},
+ up: function(e, cursor, new_cursor){},
+ cancel: function(){},
+ }
+ return exports
+})
+
+var PositionTool = MapTool.extend(function(base){
+ var exports = {
+ down: function(e, cursor){
+ cursor.quantize(1/map.zoom)
+ map.center.a = cursor.x.a
+ map.center.b = -cursor.y.a
+ cursor.x.b = cursor.x.a
+ cursor.y.b = cursor.y.a
+ map.ui.mouse.down = false
+ },
+ }
+ return exports
+})
+
+var PolylineTool = MapTool.extend(function (base) {
+ var exports = {}
+ exports.down = function(e, cursor){
+
+ // rightclick?
+ if (e.ctrlKey || e.which === 3) {
+ e.preventDefault()
+ e.stopPropagation()
+ if (placing) {
+ // close polyline or cancel
+ placing = false
+ if (points.length > 2) {
+ add_mx_polyline(points)
+ }
+ else {
+ points.length = 0
+ }
+ return
+ }
+ map.ui.tools.position.down(e, cursor)
+ return
+ }
+
+ // compare to initial point
+ var p = new vec2( cursor.x.a, cursor.y.a )
+ if (placing) {
+ 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 = []
+ points.push( p )
+ mx_points.push( add_mx_point(p) )
+ }
+ }
+ exports.move = function(e, cursor){
+ last_point = new vec2( cursor.x.a, cursor.y.a )
+ if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
+ document.body.style.cursor = "pointer"
+ last_point.assign(points[0])
+ cursor.x.a = cursor.x.b = last_point.a
+ cursor.y.a = cursor.y.b = last_point.b
+ }
+ else {
+ document.body.style.cursor = "crosshair"
+ }
+ }
+ return exports
+})
+
+var scene, map, controls
+var last_point = new vec2(0,0)
+
+map = new Map ({
+ type: "ortho",
+ el: document.querySelector("#orthographic"),
+ width: window.innerWidth/2,
+ height: window.innerHeight,
+ zoom: -2,
+})
+map.ui.add_tool("arrow", new ArrowTool)
+map.ui.add_tool("polyline", new PolylineTool)
+map.ui.add_tool("position", new PositionTool)
+map.ui.set_tool("arrow")
+
+$(window).resize(function(){
+ scene.width = window.innerWidth/2
+ map.canvas.width = map.dimensions.a = window.innerWidth/2
+})
+
+var wallHeight = 180
+var placing = false
+var points, mx_points = []
+var shapes = []
+var ctx = map.draw.ctx
+var last_point
+
+shapes.findClosestPoint = function(){}
+
+function polyline (points, finished) {
+ if (! points) return
+ if (points.length == 1) {
+ ctx.fillStyle = "#f80"
+ map.draw.dot_at(points[0].a, points[0].b, 5)
+ }
+ if (points.length > 1) {
+ ctx.fillStyle = "rgba(255,255,0,0.1)"
+ ctx.strokeStyle = "#f80"
+ ctx.lineWidth = 2 / map.zoom
+ ctx.beginPath()
+ ctx.moveTo(points[0].a, points[0].b)
+ points.forEach(function(point, i){
+ i && ctx.lineTo(point.a, point.b)
+ })
+ ctx.stroke()
+ if (! placing || finished) {
+ ctx.fill()
+ }
+ }
+}
+
+function add_mx_polyline (points) {
+ mx_points.forEach(function(mx){ scene.remove(mx) })
+ var faces = []
+ for (var i = 1; i < points.length; i++) {
+ var head = points[i-1]
+ var tail = points[i]
+ face = add_mx_polyline_face(head, tail)
+ faces.push(face)
+ }
+ shapes.push({
+ mx: faces,
+ points: points,
+ })
+ points = []
+}
+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: wallHeight/2 + 1,
+ z: mid_z / 2,
+ width: ceil(len),
+ height: wallHeight,
+ rotationY: angle
+ })
+ var hue = abs(round( angle / PI * 90 + 300))
+ mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
+ scene.add(mx)
+ return mx
+}
+function add_mx_point (p, i) {
+ var mx = new MX.Object3D()
+ mx.updateChildren = false
+ mx.move({
+ x: p.a,
+ y: 11,
+ 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
+}
+
+$("#url").on("input", function(){
+ floorplan.load({ src: this.value })
+})
+$("[data-role=orbit-mode]").click(function(){
+ $("#hud .active").removeClass('active')
+ $(this).addClass('active')
+ controls.toggle(true)
+ movements.lock()
+})
+$("[data-role=keyboard-mode]").click(function(){
+ $("#hud .active").removeClass('active')
+ $(this).addClass('active')
+ controls.toggle(false)
+ movements.unlock()
+ movements.gravity(true)
+ cam.rotationX = 0
+ cam.rotationY = -cam.rotationY
+ cam.x = 0
+ cam.y = viewHeight + 100
+ cam.z = 0
+})
+
+document.addEventListener('DOMContentLoaded', build)
+function build () {
+ scene = new MX.Scene().addTo("#perspective")
+ scene.camera.radius = 20
+
+ viewHeight = 100
+
+ scene.width = window.innerWidth/2
+ scene.height = window.innerHeight
+ scene.perspective = window.innerHeight
+
+ cam = scene.camera
+ movements = new MX.Movements(cam, viewHeight)
+ movements.init()
+ movements.lock()
+ movements.velocity(8)
+ app.on("move", function(pos){
+ cam.x = pos.x
+ cam.y = pos.y
+ cam.z = pos.z
+ })
+
+ floorplan = new MX.Image({
+ src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
+ keepImage: true,
+ rotationX: -PI/2,
+ rotationY: PI,
+ })
+ scene.add(floorplan)
+ floorplan.el.addEventListener("contextmenu", function(e){
+ e.preventDefault()
+ var offset = offsetFromPoint(e, this)
+ var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+ var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
+ controls.opt.center.x = -x
+ controls.opt.center.y = 0
+ controls.opt.center.z = -z
+ }, true)
+
+ scene.update()
+
+ controls = new MX.OrbitCamera({
+ el: scene.el,
+ radius: 3000,
+ radiusRange: [ 10, 10000 ],
+ rotationX: PI/4,
+ rotationY: PI/2,
+ })
+ controls.init()
+
+ animate(0)
+}
+var last_t = 0
+function animate(t){
+ requestAnimationFrame(animate)
+
+ var dt = t - last_t
+ last_t = t
+
+ map.update(t)
+
+ movements.update(dt)
+ controls.update()
+ scene.update()
+
+ map.draw.ctx.save()
+ map.draw.translate()
+
+ floorplan.draw(map.draw.ctx, true)
+
+ map.draw.coords()
+
+ polyline(points)
+ if (placing && last_point) {
+ ctx.strokeStyle = "#f80"
+ ctx.lineWidth = 2 / map.zoom
+ ctx.beginPath()
+ ctx.moveTo(points[points.length-1].a, points[points.length-1].b)
+ ctx.lineTo(last_point.a, last_point.b)
+ ctx.stroke()
+ }
+
+ shapes.forEach(function(shape){
+ polyline(shape.points, true)
+ })
+
+ ctx.strokeStyle = "#f00";
+ map.draw.x_at(0,0)
+ map.draw.mouse(map.ui.mouse.cursor)
+ map.draw.camera(scene.camera)
+
+ map.draw.ctx.restore()
+}
+
+</script> \ No newline at end of file
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
new file mode 100644
index 0000000..71e43f1
--- /dev/null
+++ b/public/assets/test/ortho3.html
@@ -0,0 +1,258 @@
+<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
+<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
+}
+.hud {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 10px;
+ background: white;
+}
+.ortho-hud {
+ left: 50%;
+ border-left: 1px solid black;
+}
+#url { width: 300px }
+.hud span { color: #888; cursor: pointer; }
+.hud span.active { color: #000; }
+</style>
+
+<div id="perspective"></div>
+<div id="orthographic"></div>
+
+<div class="hud persp-hud">
+ <input type="text" id="url" placeholder="paste an image URL here!">
+ <span class="ion-ionic active" data-role="orbit-mode"></span>
+ <span class="ion-archive" data-role="keyboard-mode"></span>
+</div>
+
+<div class="hud ortho-hud">
+ <span class="ion-navigate" data-role="arrow-mode"></span>
+ <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
+ <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
+ <span class="ion-scissors" data-role="eraser-mode"></span>
+</div>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/defaults.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/bower_components/fiber/src/fiber.min.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/mx/extensions/mx.orbitCamera.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.movements.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/mx/primitives/mx.point.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.polyline.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/coords.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.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/engine/map/_map.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/ui/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/_base.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/arrow.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/eraser.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/polyline.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/position.js"></script>
+<script src="/assets/javascripts/rectangles/engine/shapes/shapelist.js"></script>
+<script src="/assets/javascripts/rectangles/engine/shapes/polyline.js"></script>
+<script src="/assets/javascripts/ui/lib/Toolbar.js"></script>
+
+<script>
+var app = window.app || {}
+app.tube = new Tube ()
+app.on = function(){ app.tube.on.apply(app.tube, arguments) }
+app.off = function(){ app.tube.off.apply(app.tube, arguments) }
+
+var scene, map, controls
+
+map = new Map ({
+ type: "ortho",
+ el: document.querySelector("#orthographic"),
+ width: window.innerWidth/2,
+ height: window.innerHeight,
+ zoom: -2,
+ zoom_min: -6.2,
+ zoom_max: 1,
+})
+map.ui.add_tool("arrow", new ArrowTool)
+map.ui.add_tool("polyline", new PolylineTool)
+map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
+map.ui.add_tool("eraser", new EraserTool)
+map.ui.add_tool("position", new PositionTool)
+
+map.ui.placing = false
+
+$(window).resize(function(){
+ scene.width = window.innerWidth/2
+ map.canvas.width = map.dimensions.a = window.innerWidth/2
+})
+
+var wallHeight = 180
+var shapes = new ShapeList
+var ctx = map.draw.ctx
+var last_point = new vec2 (0,0)
+
+$("#url").on("input", function(){
+ floorplan.load({ src: this.value })
+})
+
+var PerspectiveToolbar = new Toolbar (".persp-hud")
+PerspectiveToolbar.add("orbit-mode", function(){
+ controls.toggle(true)
+ movements.lock()
+})
+PerspectiveToolbar.add("keyboard-mode", function(){
+ controls.toggle(false)
+ movements.unlock()
+ movements.gravity(true)
+ cam.rotationX = 0
+ cam.rotationY = -cam.rotationY
+ cam.x = 0
+ cam.y = viewHeight + 100
+ cam.z = 0
+})
+
+var OrthographicToolbar = new Toolbar (".ortho-hud")
+OrthographicToolbar.add("arrow-mode", function(){
+ map.ui.set_tool("arrow")
+})
+OrthographicToolbar.add("polyline-mode", function(){
+ map.ui.set_tool("polyline")
+})
+OrthographicToolbar.add("ortho-polyline-mode", function(){
+ map.ui.set_tool("ortho-polyline")
+})
+OrthographicToolbar.add("eraser-mode", function(){
+ map.ui.set_tool("eraser")
+})
+OrthographicToolbar.pick("ortho-polyline-mode")
+// OrthographicToolbar.pick("eraser-mode")
+
+
+document.addEventListener('DOMContentLoaded', build)
+function build () {
+ scene = new MX.Scene().addTo("#perspective")
+ scene.camera.radius = 20
+
+ viewHeight = 100
+
+ scene.width = window.innerWidth/2
+ scene.height = window.innerHeight
+ scene.perspective = window.innerHeight
+
+ cam = scene.camera
+ movements = new MX.Movements(cam, viewHeight)
+ movements.init()
+ movements.lock()
+ movements.velocity(8)
+ app.on("move", function(pos){
+ cam.x = pos.x
+ cam.y = pos.y
+ cam.z = pos.z
+ })
+
+ floorplan = new MX.Image({
+ src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
+ keepImage: true,
+ rotationX: -PI/2,
+ rotationY: PI,
+ })
+ scene.add(floorplan)
+
+ // recenter perspective view by rightclicking map
+ floorplan.el.addEventListener("contextmenu", function(e){
+ e.preventDefault()
+ var offset = offsetFromPoint(e, this)
+ var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+ var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
+ controls.opt.center.x = -x
+ controls.opt.center.y = 0
+ controls.opt.center.z = -z
+ }, true)
+
+ scene.update()
+
+ controls = new MX.OrbitCamera({
+ el: scene.el,
+ radius: 3000,
+ radiusRange: [ 10, 10000 ],
+ rotationX: PI/4,
+ rotationY: PI/2,
+ })
+ controls.init()
+
+ var line = new Polyline ()
+ line.add( new vec2(-100,100) )
+ line.add( new vec2(100,100) )
+ line.add( new vec2(100,-100) )
+ line.add( new vec2(-100,-100) )
+ line.close()
+ line.build()
+
+ animate(0)
+}
+var last_t = 0
+function animate(t){
+ requestAnimationFrame(animate)
+
+ var dt = t - last_t
+ last_t = t
+
+ map.update(t)
+
+ movements.update(dt)
+ controls.update()
+ scene.update()
+
+ map.draw.ctx.save()
+ map.draw.translate()
+
+ floorplan.draw(map.draw.ctx, true)
+
+ map.draw.coords()
+
+ if (shapes.workline) {
+ shapes.workline.draw(map.draw.ctx)
+ if (map.ui.placing && last_point) {
+ shapes.workline.draw_line( map.draw.ctx, last_point )
+ }
+ }
+
+ shapes.forEach(function(shape){
+ shape.draw(map.draw.ctx)
+ })
+
+ ctx.strokeStyle = "#f00";
+ map.draw.x_at(0,0)
+ map.draw.mouse(map.ui.mouse.cursor)
+ map.draw.camera(scene.camera)
+
+ map.draw.ctx.restore()
+}
+
+</script> \ No newline at end of file
diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html
new file mode 100644
index 0000000..8db7ead
--- /dev/null
+++ b/public/assets/test/ortho4.html
@@ -0,0 +1,303 @@
+<link href='/assets/stylesheets/app.css' rel='stylesheet' type='text/css'>
+<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
+<style type="text/css">
+html,body{width:100%;height:100%;margin:0;padding:0;}
+body {
+ overflow: hidden;
+}
+#perspective,
+#perspective .mx-scene {
+ position: absolute;
+ left:0%;
+ top:0px;
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+}
+
+#orthographic {
+ position: absolute;
+ left:50%;
+ top:0px
+}
+.hud {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 10px;
+ background: white;
+}
+.ortho-hud {
+ left: 50%;
+ border-left: 1px solid black;
+}
+#url { width: 300px }
+.hud span { color: #888; cursor: pointer; }
+.hud span.active { color: #000; }
+
+#blueprintForm {
+ width: 240px;
+}
+</style>
+
+<div id="perspective"></div>
+<div id="orthographic"></div>
+
+<div class="hud persp-hud">
+ <input type="text" id="url" placeholder="paste an image URL here!">
+ <span class="ion-ionic active" data-role="orbit-mode"></span>
+ <span class="ion-archive" data-role="keyboard-mode"></span>
+</div>
+
+<div class="hud ortho-hud">
+ <span class="ion-navigate" data-role="arrow-mode"></span>
+ <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
+ <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
+ <span class="ion-scissors" data-role="eraser-mode"></span>
+</div>
+
+<div class="mediaDrawer fixed animate blueprintUpload active">
+ <span class="close">X</span>
+ <div class="box">
+
+ <h2>Upload A Room Image</h2>
+
+ <div id="blueprintForm">
+ <div class="wallpaperUpload toolButton">
+ <form>
+ <span class="ion-ios-upload-outline upload-icon"></span>
+ <label>Upload</label>
+ <input type="file" accept="image/*" multiple>
+ </form>
+ </div>
+ <input type="text" class="url" placeholder="Enter an image URL or...">
+ </div>
+
+ Please tell us the scale of your map.
+ Click both corners of a wall, and then enter how long the wall is.
+
+ <div id="blueprintMap">
+ </div>
+
+ <div id="blueprintDimensions">
+ <input type="text" name="blueprint-dimensions">
+ <select id="blueprint-units" name="blueprint-units">
+ <option value="ft">foot</option>
+ <option value="m">meter</option>
+ </select>
+
+ <button id="saveBlueprint">Save</button>
+ </div>
+
+ </div>
+</div>
+
+<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/bower_components/fiber/src/fiber.min.js"></script>
+<script src="/assets/javascripts/vendor/polyfill.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/defaults.js"></script>
+
+<script src="/assets/javascripts/mx/mx.js"></script>
+<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/extensions/mx.movements.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/mx/primitives/mx.point.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.polyline.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/coords.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/util/wheel.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/engine/map/_map.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/ui/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/_base.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/arrow.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/eraser.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/polyline.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/position.js"></script>
+<script src="/assets/javascripts/rectangles/engine/shapes/shapelist.js"></script>
+<script src="/assets/javascripts/rectangles/engine/shapes/polyline.js"></script>
+<script src="/assets/javascripts/ui/lib/View.js"></script>
+<script src="/assets/javascripts/ui/lib/ModalView.js"></script>
+<script src="/assets/javascripts/ui/lib/UploadView.js"></script>
+<script src="/assets/javascripts/ui/lib/Parser.js"></script>
+<script src="/assets/javascripts/ui/lib/Toolbar.js"></script>
+<script src="/assets/javascripts/ui/builder/BlueprintUpload.js"></script>
+
+<script>
+var app = window.app || {}
+app.tube = new Tube ()
+app.on = function(){ app.tube.on.apply(app.tube, arguments) }
+app.off = function(){ app.tube.off.apply(app.tube, arguments) }
+
+var scene, map, controls
+
+map = new Map ({
+ type: "ortho",
+ el: document.querySelector("#orthographic"),
+ width: window.innerWidth/2,
+ height: window.innerHeight,
+ zoom: -2,
+ zoom_min: -6.2,
+ zoom_max: 1,
+})
+map.ui.add_tool("arrow", new ArrowTool)
+map.ui.add_tool("polyline", new PolylineTool)
+map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
+map.ui.add_tool("eraser", new EraserTool)
+map.ui.add_tool("position", new PositionTool)
+
+map.ui.placing = false
+
+$(window).resize(function(){
+ scene.width = window.innerWidth/2
+ scene.height = window.innerHeight
+ map.canvas.width = map.dimensions.a = window.innerWidth/2
+ map.canvas.height = map.dimensions.b = window.innerHeight/2
+})
+
+var wallHeight = 180
+var shapes = new ShapeList
+var ctx = map.draw.ctx
+var last_point = new vec2 (0,0)
+
+$("#url").on("input", function(){
+ floorplan.load({ src: this.value })
+})
+
+var PerspectiveToolbar = new Toolbar (".persp-hud")
+PerspectiveToolbar.add("orbit-mode", function(){
+ controls.toggle(true)
+ movements.lock()
+})
+PerspectiveToolbar.add("keyboard-mode", function(){
+ controls.toggle(false)
+ movements.unlock()
+ movements.gravity(true)
+ cam.rotationX = 0
+ cam.rotationY = -cam.rotationY
+ cam.x = 0
+ cam.y = viewHeight + 100
+ cam.z = 0
+})
+
+var OrthographicToolbar = new Toolbar (".ortho-hud")
+OrthographicToolbar.add("arrow-mode", function(){
+ map.ui.set_tool("arrow")
+})
+OrthographicToolbar.add("polyline-mode", function(){
+ map.ui.set_tool("polyline")
+})
+OrthographicToolbar.add("ortho-polyline-mode", function(){
+ map.ui.set_tool("ortho-polyline")
+})
+OrthographicToolbar.add("eraser-mode", function(){
+ map.ui.set_tool("eraser")
+})
+OrthographicToolbar.pick("ortho-polyline-mode")
+
+var BlueprintUpload = new BlueprintUploadView ({})
+
+document.addEventListener('DOMContentLoaded', build)
+function build () {
+ scene = new MX.Scene().addTo("#perspective")
+ scene.camera.radius = 20
+
+ viewHeight = 100
+
+ scene.width = window.innerWidth/2
+ scene.height = window.innerHeight
+ scene.perspective = window.innerHeight
+
+ cam = scene.camera
+ movements = new MX.Movements(cam, viewHeight)
+ movements.init()
+ movements.lock()
+ movements.velocity(8)
+ app.on("move", function(pos){
+ cam.x = pos.x
+ cam.y = pos.y
+ cam.z = pos.z
+ })
+
+ floorplan = new MX.Image({
+ src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
+ keepImage: true,
+ rotationX: -PI/2,
+ rotationY: PI,
+ })
+ scene.add(floorplan)
+
+ // recenter perspective view by rightclicking map
+ floorplan.el.addEventListener("contextmenu", function(e){
+ e.preventDefault()
+ var offset = offsetFromPoint(e, this)
+ var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+ var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
+ controls.opt.center.x = -x
+ controls.opt.center.y = 0
+ controls.opt.center.z = -z
+ }, true)
+
+ scene.update()
+
+ controls = new MX.OrbitCamera({
+ el: scene.el,
+ radius: 3000,
+ radiusRange: [ 10, 10000 ],
+ rotationX: PI/4,
+ rotationY: PI/2,
+ })
+ controls.init()
+
+ animate(0)
+}
+var last_t = 0
+function animate(t){
+ requestAnimationFrame(animate)
+
+ var dt = t - last_t
+ last_t = t
+
+ map.update(t)
+
+ movements.update(dt)
+ controls.update()
+ scene.update()
+
+ map.draw.ctx.save()
+ map.draw.translate()
+
+ floorplan.draw(map.draw.ctx, true)
+
+ map.draw.coords()
+
+ if (shapes.workline) {
+ shapes.workline.draw(map.draw.ctx)
+ if (map.ui.placing && last_point) {
+ shapes.workline.draw_line( map.draw.ctx, last_point )
+ }
+ }
+
+ shapes.forEach(function(shape){
+ shape.draw(map.draw.ctx)
+ })
+
+ ctx.strokeStyle = "#f00";
+ map.draw.x_at(0,0)
+ map.draw.mouse(map.ui.mouse.cursor)
+ map.draw.camera(scene.camera)
+
+ map.draw.ctx.restore()
+}
+
+</script> \ No newline at end of file
diff --git a/public/assets/test/static.html b/public/assets/test/static.html
new file mode 100644
index 0000000..dc098de
--- /dev/null
+++ b/public/assets/test/static.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html>
+<head>
+ <title>VValls</title>
+
+<!-----+ +------+ +------+ +------+ +------+
+|`. `. |\ \ | | / /| .' .'|
+| `+------+ | +------+ +------+ +------+ | +------+' |
+| | | | | | | | | | | | | |
++ | | + | | | | | | + | | +
+ `. | | \| | | | | |/ | | .'
+ `+------+ +------+ +------+ +------+ +------+'
+ VVALLS - developed by okfoc.us
+ .+------+ +------+ +------+ +------+ +------+.
+ .' .'| / /| | | |\ \ |`. `.
++------+' | +------+ | +------+ | +------+ | `+------+
+| | | | | | | | | | | | | |
+| | + | | + | | + | | + | |
+| | .' | |/ | | \| | `. | |
++------+' +------+ +------+ +------+ `+------->
+
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable = no">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="description" content="3D gallery space, fully customizable" />
+ <meta name="author" content="VValls" />
+ <link rel="shortcut icon" href="/favicon.ico" />
+ <meta property="og:title" content="Leaves and such" />
+ <meta property="og:type" content="website" />
+ <meta property="og:image" content="http://www.sport-fitness-advisor.com/images/plyometric_drills_overhead_throws.gif" />
+ <meta property="og:url" content="http://vvalls.com/project/leaves-and-such-1429563199123/" />
+ <meta property="og:site_name" content="vvalls" />
+ <link rel="icon" href="/favicon.ico" type="image/x-icon">
+ <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+ <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
+ <link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
+ <link href='/assets/stylesheets/app.css' rel='stylesheet' type='text/css'>
+</head>
+<body class="loading reader">
+
+<div id="scene"></div>
+
+<div class="rapper">
+ <div id="header">
+ <a href="/" class="logo">
+ <svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+ x="0px" y="0px" width="117px" height="44px" viewBox="-0.896 -0.441 117 44"
+ overflow="visible" enable-background="new -0.896 -0.441 117 44" xml:space="preserve">
+ <defs>
+ </defs>
+ <path d="M0.54,38.759c0-1.44,0.66-3.72,1.56-6.18c1.38-3.84,3.42-8.22,4.5-11.16c0.48-1.32,0.78-2.34,0.78-2.88
+ c0-0.72-0.24-1.02-0.72-1.02c-1.38,0-4.74,5.16-5.4,6.24c-0.36,0.6-0.48,0.78-0.78,0.78c-0.3,0-0.48-0.06-0.48-0.36
+ c0-0.18,0.18-0.84,0.66-1.62c0.9-1.44,2.22-3.6,3.9-5.28c1.44-1.5,3.12-2.64,4.74-2.64c1.38,0,1.92,1.32,1.92,2.7
+ c0,1.02-0.42,2.58-1.02,4.32c-1.26,3.72-3.359,8.521-4.68,12.18c-0.66,1.92-1.14,3.54-1.14,4.62c0,1.38,0.48,2.459,1.979,2.459
+ c6.48,0,13.56-14.639,13.56-17.759c0-1.2-0.3-1.92-0.6-2.58c-0.42-0.9-0.9-1.62-0.9-3.18c0-1.86,0.84-2.76,1.8-2.76
+ c0.9,0,1.98,1.08,1.98,3.66c0,9.179-9.6,24.66-17.58,24.66c-2.82,0-4.08-1.561-4.08-4.141V38.759z"/>
+ <path d="M23.879,38.759c0-1.44,0.66-3.72,1.56-6.18c1.38-3.84,3.42-8.22,4.5-11.16c0.48-1.32,0.78-2.34,0.78-2.88
+ c0-0.72-0.24-1.02-0.72-1.02c-1.38,0-4.74,5.16-5.4,6.24c-0.36,0.6-0.48,0.78-0.78,0.78c-0.3,0-0.48-0.06-0.48-0.36
+ c0-0.18,0.18-0.84,0.66-1.62c0.9-1.44,2.22-3.6,3.9-5.28c1.44-1.5,3.12-2.64,4.74-2.64c1.38,0,1.92,1.32,1.92,2.7
+ c0,1.02-0.42,2.58-1.02,4.32c-1.26,3.72-3.36,8.521-4.68,12.18c-0.66,1.92-1.14,3.54-1.14,4.62c0,1.38,0.48,2.459,1.98,2.459
+ c6.479,0,13.559-14.639,13.559-17.759c0-1.2-0.3-1.92-0.6-2.58c-0.42-0.9-0.9-1.62-0.9-3.18c0-1.86,0.84-2.76,1.8-2.76
+ c0.9,0,1.979,1.08,1.979,3.66c0,9.179-9.6,24.66-17.579,24.66c-2.82,0-4.08-1.561-4.08-4.141V38.759z"/>
+ <path d="M44.339,37.799c0-5.22,2.76-10.92,6.36-15.299c3.66-4.44,8.159-7.5,11.759-7.5c2.7,0,3.78,1.44,3.9,1.44
+ s0.48-0.96,0.66-1.44c0.18-0.48,0.3-0.6,1.02-0.6h1.74c0.359,0,0.6,0.06,0.6,0.42c0,0.18-0.119,0.6-0.24,0.9
+ c-1.919,5.82-3.839,11.64-5.819,17.519c-1.14,3.48-1.26,4.381-1.26,5.041c0,0.659,0.3,0.84,0.66,0.84c0.54,0,1.68-1.141,3.72-4.26
+ c1.5-2.28,1.26-2.94,1.86-2.94c0.3,0,0.42,0.181,0.42,0.479c0,0.84-1.38,3.541-3.24,6c-1.8,2.52-4.14,4.8-6.12,4.8
+ c-1.38,0-1.62-0.96-1.62-2.159c0-0.961,0.24-2.101,0.72-3.66c0.54-1.98,1.5-4.62,2.82-8.52l-0.12-0.12
+ c-2.16,3.3-9.36,14.459-14.1,14.459c-2.76,0-3.72-2.159-3.72-5.339V37.799z M65.338,18.839c0-1.8-1.08-2.76-2.76-2.76
+ c-3,0-6.6,3.72-9.48,8.22c-2.82,4.5-4.919,9.839-4.919,13.019c0,1.561,0.54,2.641,1.86,2.641c2.22,0,6.06-4.26,9.3-9
+ c3.3-4.74,6-10.02,6-12.06V18.839z"/>
+ <path d="M72.178,39.839c0-1.08,0.479-3.479,1.2-6.479c1.74-7.02,4.979-17.52,6.6-23.64c0.66-2.46,1.08-4.2,1.08-4.8
+ c0-0.78-0.24-1.32-1.62-1.44c-1.14-0.12-1.38-0.3-1.38-0.78c0.061-0.42,0.779-0.66,1.8-0.66c2.58,0,4.2-0.78,5.16-1.38
+ c0.6-0.36,0.96-0.66,1.14-0.66c0.3,0,0.42,0.12,0.42,0.48c0,0.3-0.6,1.56-1.14,3.479c-5.04,17.759-7.38,25.799-8.46,29.698
+ c-0.84,3.061-0.96,3.84-0.96,4.681c0,0.6,0.3,1.02,0.78,1.02c0.84,0,1.619-0.659,3.479-3.72c1.08-1.74,1.92-4.199,2.46-4.199
+ c0.301,0,0.42,0.239,0.42,0.539c0,0.42-0.84,2.521-2.16,4.74c-1.739,3-4.319,6.24-6.719,6.24c-1.681,0-2.101-1.32-2.101-3.061
+ V39.839z"/>
+ <path d="M85.497,39.839c0-1.08,0.48-3.479,1.2-6.479c1.739-7.02,4.979-17.52,6.6-23.64c0.66-2.46,1.08-4.2,1.08-4.8
+ c0-0.78-0.24-1.32-1.62-1.44c-1.14-0.12-1.38-0.3-1.38-0.78c0.06-0.42,0.78-0.66,1.8-0.66c2.58,0,4.2-0.78,5.16-1.38
+ c0.6-0.36,0.96-0.66,1.14-0.66c0.3,0,0.42,0.12,0.42,0.48c0,0.3-0.6,1.56-1.14,3.479c-5.04,17.759-7.38,25.799-8.46,29.698
+ c-0.84,3.061-0.96,3.84-0.96,4.681c0,0.6,0.301,1.02,0.78,1.02c0.84,0,1.62-0.659,3.479-3.72c1.08-1.74,1.92-4.199,2.46-4.199
+ c0.3,0,0.42,0.239,0.42,0.539c0,0.42-0.84,2.521-2.159,4.74c-1.74,3-4.32,6.24-6.721,6.24c-1.68,0-2.1-1.32-2.1-3.061V39.839z"/>
+ <path d="M111.416,34.619c0,2.34-0.96,4.439-2.46,5.939c-1.68,1.68-4.02,2.64-6.479,2.64c-1.86,0-3.84-0.78-5.04-1.56
+ c-0.6-0.42-1.02-0.84-1.02-1.2c0-0.96,0.359-3.12,0.959-5.819c0.42-1.98,0.48-2.34,1.08-2.34c0.541,0,0.601,0.359,0.601,2.16
+ c0,3.84,1.2,7.319,4.92,7.319c2.34,0,4.2-2.46,4.2-4.74c0-2.819-1.561-4.979-3.24-6.96c-1.68-1.979-3.24-4.08-3.24-6.899
+ c0-4.38,3.24-8.76,7.859-8.76c3,0,5.82,1.38,5.82,2.1c0,1.14-0.301,2.4-0.66,3.9c-0.72,2.76-0.779,3.06-1.38,3.06
+ c-0.899,0-0.78-1.92-1.08-3.84c-0.3-1.86-1.08-3.78-3.6-3.78c-2.34,0-4.08,2.04-4.08,4.439s1.62,4.44,3.24,6.6
+ c1.8,2.34,3.6,4.68,3.6,7.68V34.619z"/>
+ </svg>
+ </a>
+
+ <div id="minotaur">
+ <span class="label"></span>
+ </div>
+
+ <span class="topLinks">
+ </span>
+ </div>
+
+ <div id="editorView">
+ <div class="aboutRoom vvbox">
+ <h1>
+ <span class="roomName">Leaves and such</span>
+ <br>
+ <a href="/profile/asdf" class="authorName"><div class="profilePic" style="background-image:url(https://vvalls.s3.amazonaws.com/images/avatars/20141010/1412971714922-Screen-Shot-2014-10-09-at-12.png)"></div></a>
+ <a href="/profile/asdf" class="authorName">asdf</a>
+ </h1>
+ <span class="txt">Last modified 4/20/2015</span>
+ <!--
+ <div class="share">
+ <h2>Share on–</h2>
+ <a id="share_facebook">Facebook</a>
+ <a id="share_twitter">Twitter</a>
+ </div>
+ -->
+ </div>
+
+ <div class="vvbox settings" id="mediaPlayer">
+ <span class="playButton video audio" data-role="play-media">
+ <span class="on ion-play"></span>
+ <span class="off ion-pause"></span>
+ </span>
+
+ <span class="muteButton video" data-role="mute-media">
+ <span class="on ion-volume-high"></span>
+ <span class="off ion-volume-mute"></span>
+ </span>
+
+ <span class="name"></span>
+
+ <div class="author"></div>
+ <div class="txt description"></div>
+ <div class="dimensions"></div>
+ </div>
+ </div>
+
+ <div id="minimap" class="vvbox" data-intro="Mini-map shows your position and orientation in a room. Navigate with WASD keys or drag here." data-position="top">
+ <span class="el"></span>
+ </div>
+</div>
+
+ <img src="/assets/img/keys.png" id="keyhint">
+ <img src="/assets/img/360.png" id="threesixty">
+</body>
+<script type="text/javascript">
+vvalls_data={"name":"Leaves and such","viewHeight":186,"colors":{"wall":[255,255,255],"outline":[0,0,0],"floor":[246,246,246],"ceiling":[255,255,255]},"startPosition":false,"lastPosition":{"x":-224,"y":186,"z":300.756,"rotationX":0,"rotationY":1.665},"user_id":"54383cb3b45a88b2a64dc240","slug":"leaves-and-such-1429563199123","created_at":"2015-04-01T19:08:10.150Z","photo":"https://vvalls.s3.amazonaws.com/images/projects/20150401/1427920106818-blob.png","updated_at":"2015-04-20T21:27:41.909Z","featured":false,"sculpture":[{"media":{"url":"http://www.sport-fitness-advisor.com/images/soccer_circuit_dips.gif","type":"image","user_id":"54383cb3b45a88b2a64dc240","created_at":"2014-11-17T16:53:21.043Z","tag":"","keyframe":0,"mute":true,"loop":false,"autoplay":false,"description":"","title":"","height":200,"width":200,"thumbnail":"","token":""},"scale":1,"position":{"rotationY":2.513,"rotationX":0,"z":-470.285,"y":180,"x":-1541.305},"dimensions":[200,200],"id":"sculpture1"},{"backface":true,"billboard":true,"media":{"url":"http://dumpfm.s3.amazonaws.com/images/20120519/1337401400140-dumpfm-FAUXreal-Greek_Marble_Statue.png","type":"image","user_id":"54383cb3b45a88b2a64dc240","created_at":"2015-04-03T22:49:00.855Z","tag":"","keyframe":0,"mute":true,"loop":false,"autoplay":false,"description":"","title":"","height":380,"width":280,"thumbnail":"","token":""},"scale":0.501,"position":{"scale":0.501,"rotationY":1.665,"rotationX":0,"z":370.922,"y":144.466,"x":-1111.901},"dimensions":[141,191],"id":"sculpture5"},{"backface":true,"billboard":false,"media":{"token":"","thumbnail":"","width":238,"height":210,"title":"","description":"","autoplay":false,"loop":false,"mute":true,"keyframe":0,"tag":"","created_at":"2014-11-17T16:53:38.690Z","user_id":"54383cb3b45a88b2a64dc240","type":"image","url":"http://www.sport-fitness-advisor.com/images/plyometric_drills_overhead_throws.gif"},"scale":0.715,"position":{"scale":0.715,"rotationY":2.911,"rotationX":0,"z":-504.672,"y":480.528,"x":-1015.969},"dimensions":[170,150],"id":"sculpture0"},{"backface":true,"billboard":false,"media":{"url":"http://dump.fm/images/20100825/1282780054021-dumpfm-timb-statue.eyez.gif","type":"image","user_id":"54383cb3b45a88b2a64dc240","created_at":"2015-04-03T22:48:39.613Z","tag":"","keyframe":0,"mute":true,"loop":false,"autoplay":false,"description":"","title":"","height":409,"width":295,"thumbnail":"","token":""},"scale":0.800,"position":{"scale":0.800,"rotationY":0.827,"rotationX":0,"z":457.221,"y":250.467,"x":-1331.614},"dimensions":[236,327],"id":"sculpture2"},{"backface":true,"billboard":true,"media":{"url":"http://simpleascension.com/wp-content/uploads/2009/05/leaves.gif","type":"image","user_id":"54383cb3b45a88b2a64dc240","created_at":"2015-04-20T20:52:13.261Z","tag":"","keyframe":0,"mute":true,"loop":false,"autoplay":false,"description":"","title":"","height":300,"width":300,"thumbnail":"","token":""},"scale":1,"position":{"rotationY":1.665,"rotationX":0,"z":500.971,"y":535.5,"x":-919.926},"dimensions":[300,300],"id":"sculpture3"},{"backface":true,"billboard":false,"media":{"url":"http://simpleascension.com/wp-content/uploads/2009/05/leaves.gif","type":"image","user_id":"54383cb3b45a88b2a64dc240","created_at":"2015-04-20T20:52:13.261Z","tag":"","keyframe":0,"mute":true,"loop":false,"autoplay":false,"description":"","title":"","height":300,"width":300,"thumbnail":"","token":""},"scale":1,"position":{"rotationY":2.358,"rotationX":0,"z":-402.875,"y":493.5,"x":-1341.121},"dimensions":[300,300],"id":"sculpture4"},{"backface":true,"billboard":false,"media":{"url":"http://simpleascension.com/wp-content/uploads/2009/05/leaves.gif","type":"image","user_id":"54383cb3b45a88b2a64dc240","created_at":"2015-04-20T20:52:13.261Z","tag":"","keyframe":0,"mute":true,"loop":false,"autoplay":false,"description":"","title":"","height":300,"width":300,"thumbnail":"","token":""},"scale":1,"position":{"rotationY":2.264,"rotationX":0,"z":-310.913,"y":492,"x":-718.718},"dimensions":[300,300],"id":"sculpture6"}],"media":[{"media":{"url":"http://www.sport-fitness-advisor.com/images/plyometric_drills_overhead_throws.gif","type":"image","user_id":"54383cb3b45a88b2a64dc240","created_at":"2014-11-17T16:53:38.690Z","tag":"","keyframe":0,"mute":true,"loop":false,"autoplay":false,"description":"","title":"","height":210,"width":238,"thumbnail":"","token":""},"scale":1,"position":{"rotationY":1.570,"rotationX":0,"z":137.5,"y":350,"x":-1721},"dimensions":[238,210],"side":4,"wall_id":"4_-1731_-636","id":"scenery0"}],"walls":[{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"1_-636_-1731"},{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"1_-168_-204"},{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"2_156_-204"},{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"2_652_-1731"},{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"4_-1731_-636"},{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"8_726_-168"},{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"8_-204_-636"},{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"8_-204_156"},{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"floor"},{"background":{"src":"none","x":0,"y":0,"scale":1},"id":"ceiling"}],"rooms":[{"height":681,"rect":{"y":[-168,156],"x":[-284,726]},"id":"room_0"},{"height":681,"rect":{"y":[-636,652],"x":[-1731,-204]},"id":"room_1"}],"privacy":false,"description":""}
+</script>
+<script type="text/javascript" src="/assets/javascripts/static.min.js"></script>
+<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
+<script type="text/javascript" src="https://w.soundcloud.com/player/api.js"></script>
+</html>
diff --git a/public/assets/test/surface.html b/public/assets/test/surface.html
index 85e3a7b..9e6abe8 100644
--- a/public/assets/test/surface.html
+++ b/public/assets/test/surface.html
@@ -1,6 +1,7 @@
<canvas id="canvas"></canvas>
<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
<script src="/assets/javascripts/vendor/tube.js"></script>
<script src="/assets/javascripts/rectangles/util/constants.js"></script>
<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
@@ -9,11 +10,11 @@
<script src="/assets/javascripts/rectangles/models/surface.js"></script>
<script>
-var ctx = canvas.getContext('2d')
-
var w = canvas.width = 600
var h = canvas.height = 400
+var ctx = canvas.getContext('2d')
+
var surface = new Surface ()
surface.add( new Rect( new vec2(10, 100), new vec2(0, 400) ) )
surface.add( new Rect( new vec2(100, 300), new vec2(200, 400) ) )
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-16 01:48:08 +0000