diff options
Diffstat (limited to 'public/assets/test/ortho.html')
| -rw-r--r-- | public/assets/test/ortho.html | 224 |
1 files changed, 224 insertions, 0 deletions
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 |