diff options
| -rw-r--r-- | public/assets/javascripts/mx/extensions/mx.movements.js | 8 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/map/ui_ortho.js | 49 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/sculpture/types/_object.js | 2 | ||||
| -rw-r--r-- | public/assets/test/ortho2.html | 156 | ||||
| -rw-r--r-- | public/assets/test/ortho3.html | 394 |
5 files changed, 420 insertions, 189 deletions
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index cf00adb..931caac 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -94,12 +94,12 @@ MX.Movements = function (cam) { moveRight = true break - // case 37: // left + case 37: // left case 81: // q turnLeft = true break - // case 39: // right + case 39: // right case 69: // e turnRight = true break @@ -200,12 +200,12 @@ MX.Movements = function (cam) { moveRight = false break - // case 37: // left + case 37: // left case 81: // q turnLeft = false break - // case 39: // right + case 39: // right case 69: // e turnRight = false break diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index e69de29..0c501ad 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -0,0 +1,49 @@ +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) + base.tools[currentTool].down(e, cursor) + }, + 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) + base.tools[currentTool].move(e, cursor) + }, + 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 + base.tools[currentTool].drag(e, cursor) + }, + 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.tools[currentTool].up(e, cursor, new_cursor) + } + }) + + var currentTool = "polyline" + base.setTool = function(s){ + currentTool = s + } + base.tools = { + polyline: new PolylineTool, + position: new PositionTool, + } + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 2f24ae5..2f593e8 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -72,7 +72,7 @@ Sculpture.types.base = Fiber.extend(function(base){ else { this.mx.el.classList.add("backface-visible") this.mx.el.classList.remove("backface-hidden") - this.mx.rotationY = PI/2 + this.mx.rotationY = quantize(cam.rotationY, PI/2) } Sculpture.resize.move_dots() }, diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 2c600f5..49e0308 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -41,6 +41,7 @@ body { <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> @@ -66,92 +67,87 @@ app.tube = new Tube () app.on = function(){ app.tube.on.apply(app.tube, arguments) } app.off = function(){ app.tube.off.apply(app.tube, arguments) } -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this +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){}, + } + return exports +}) - base.creating = base.dragging = base.resizing = false +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 +}) - 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) +var PolylineTool = MapTool.extend(function (base) { + var exports = {} + exports.down = function(e, cursor){ - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - placing = false - add_mx_polyline(points) - return + // 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 } - 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 - base.mouse.down = false - e.preventDefault() - e.stopPropagation() 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 ) + // 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) ) - } - }, - 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) - } -} - + } + } + 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 @@ -302,8 +298,8 @@ function build () { floorplan.el.addEventListener("contextmenu", function(e){ e.preventDefault() var offset = offsetFromPoint(e, this) - var x = (offset.left - 0.5) * floorplan.width - var z = (offset.top - 0.5) * floorplan.height + 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 diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 37bf620..a41eb8b 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -1,3 +1,4 @@ +<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 { @@ -14,118 +15,256 @@ body { left:50%; top:0px } -#hud { - white-space: pre; +.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 id="hud"></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 active" 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> +</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/util/coords.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> -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ +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 base = this +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){}, + } + return exports +}) - base.creating = base.dragging = base.resizing = false +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 +}) - 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) +var PolylineTool = MapTool.extend(function (base) { + var exports = {} + exports.down = function(e, cursor){ - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - return + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (placing) { + // close polyline or cancel + placing = false + if (line.points.length > 2) { + line.build() + line.closed = false + } + else { + line.reset() } - e.preventDefault() - e.stopPropagation() - 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 - base.mouse.down = false 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 - } - else { - points.push( p ) - } - } - else { - placing = true - points = [] - 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) - 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) - } - }) + // compare to initial point + var p = new vec2( cursor.x.a, cursor.y.a ) + if (placing) { + if (line.points.length > 2 && line.points[0].distanceTo( p ) < 10/map.zoom) { + line.points.push( line.points[0].clone() ) + line.build() + placing = false + } + else { + line.add(p) + } + } + else { + placing = true + line = new Polyline () + line.add(p) + } + } + exports.move = function(e, cursor){ + last_point = new vec2( cursor.x.a, cursor.y.a ) + if (placing && line.points.length > 1 && line.points[0].distanceTo( last_point ) < 10/map.zoom) { + document.body.style.cursor = "pointer" + last_point.assign(line.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 +}) - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) +var Polyline = Fiber.extend(function(base){ + var exports = {} + + exports.init = function(){ + this.points = [] + this.mx_points = [] + this.closed = false + } - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) + exports.add = function(p){ + this.points.push( p ) + this.mx_points.push( new MX.Point(p) ) } -} + + exports.draw = function(ctx){ + var points = this.points + if (! points.length) return + if (points.length == 1) { + ctx.fillStyle = "#f80" + map.draw.dot_at(this.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 || this.closed) { + ctx.fill() + } + } + } + exports.draw_line = function (ctx, p){ + var last = this.points[this.points.length-1] + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(last.a, last.b) + ctx.lineTo(p.a, p.b) + ctx.stroke() + } + exports.build = function(){ + this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx = new MX.Polyline(this) + this.closed = true + shapes.push(this) + } + exports.reset = function(){ + this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.points.length = 0 + this.mx_points.length = 0 + } + return exports +}) + +MX.Polyline = MX.Object3D.extend({ + init: function(polyline){ + var faces = [], points = polyline.points + for (var i = 1; i < points.length; i++) { + var head = points[i-1] + var tail = points[i] + face = this.add_face(head, tail) + faces.push(face) + } + }, + + add_face: function (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: wall_height/2 + 1, + z: mid_z / 2, + width: ceil(len), + height: wall_height, + rotationY: angle + }) + var hue = abs(round( angle / PI * 90 + 300)) + mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + scene.add(mx) + return mx + } +}) + +MX.Point = MX.Object3D.extend({ + init: function(p){ + this.updateChildren = false + this.move({ + x: p.a, + y: 11, + z: p.b, + width: 20, + height: 20, + rotationX: PI/2, + }) + this.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' + this.el.style.backfaceVisibility = "visible" + this.el.style.borderRadius = "50%" + scene.add(this) + } +}) var scene, map, controls @@ -142,43 +281,76 @@ $(window).resize(function(){ map.canvas.width = map.dimensions.a = window.innerWidth/2 }) - +var wall_height = 180 var placing = false -var points = [] +var line 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) +$("#url").on("input", function(){ + floorplan.load({ src: this.value }) +}) + + +var Toolbar = Fiber.extend(function(base){ + var exports = {} + exports.init = function(rapper){ + this.rapper = (typeof rapper == "string") ? $(rapper)[0] : rapper + this.tools = {} } - 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) + exports.add = function(role, fn){ + this.tools[role] = fn + $("[data-role=" + role + "]", self.rapper).click(function(){ + $(".active", self.rapper).removeClass('active') + $(this).addClass('active') + fn() }) - ctx.stroke() - if (! placing || finished) { - ctx.fill() - } } -} + return exports +}) + +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("", function(){ +}) 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", @@ -188,6 +360,17 @@ function build () { }) 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({ @@ -201,10 +384,16 @@ function build () { animate(0) } -function animate(time){ +var last_t = 0 +function animate(t){ requestAnimationFrame(animate) - map.update(time) + var dt = t - last_t + last_t = t + + map.update(t) + + movements.update(dt) controls.update() scene.update() @@ -215,18 +404,15 @@ function animate(time){ 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() + if (line) { + line.draw(map.draw.ctx) + if (placing && last_point) { + line.draw_line( map.draw.ctx, last_point ) + } } shapes.forEach(function(shape){ - polyline(shape.points, true) + shape.draw(map.draw.ctx) }) ctx.strokeStyle = "#f00"; |