diff options
Diffstat (limited to 'public/assets/test/ortho2.html')
| -rw-r--r-- | public/assets/test/ortho2.html | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html new file mode 100644 index 0000000..d554a60 --- /dev/null +++ b/public/assets/test/ortho2.html @@ -0,0 +1,200 @@ +<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/mx/primitives/mx.grid.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/ui_ortho.js"></script> +<script src="/assets/javascripts/rectangles/engine/map/draw.js"></script> + +<script> + +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 +} + +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 + + grid = new MX.Grid() + scene.add(grid) + + scene.update() + + controls = new MX.OrbitCamera({ + el: scene.el, + 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) + grid.draw(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 |