From 220320494c60c154e84c579f86d2dfdd8f41be2f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 17:41:36 -0500 Subject: orthographic polyline --- public/assets/test/ortho.html | 224 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 public/assets/test/ortho.html (limited to 'public/assets/test/ortho.html') 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 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From ab6f7d9f205f740c3af4d7f083af436cc038d5b4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 18:16:29 -0500 Subject: mx on the other side --- public/assets/test/ortho.html | 165 +++++++++++++++++------------------------- 1 file changed, 66 insertions(+), 99 deletions(-) (limited to 'public/assets/test/ortho.html') diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 8626453..e7ec113 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -39,12 +39,6 @@ body { \ No newline at end of file -- cgit v1.2.3-70-g09d2 From eb1f73bd8be4ba8909ec5c7cd83c37269fbff31b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 07:55:32 -0500 Subject: basic orbit camera --- public/assets/test/ortho.html | 55 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 50 insertions(+), 5 deletions(-) (limited to 'public/assets/test/ortho.html') diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index e7ec113..bd94a51 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -14,6 +14,9 @@ body { left:50%; top:0px } +#hud { + white-space: pre; +}
@@ -90,10 +93,46 @@ Map.UI.Ortho = function(map){ new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) } }) - +} +MX.OrbitCamera = function(opt){ + var exports = {}, bound = false + exports.opt = opt = defaults(opt, { + el: window, // object to bind events on + camera: scene.camera, // camera object we'll be moving + radius: 100, + radiusRange: [ 10, 1000 ], + rotationX: 0, + rotationY: 0, + center: { x: 0, y: 0, z: 0 }, + }) + exports.init = function(){ + exports.bind() + } + exports.toggle = function(state){ + if (state) exports.bind() + else exports.unbind() + } + exports.bind = function(){ + if (bound) return; + bound = true + } + exports.unbind = function(){ + if (! bound) return; + bound = false + } + exports.update = function(){ + opt.camera.x = opt.radius * sin(opt.rotationY) * cos(opt.rotationX) + opt.camera.y = opt.radius * sin(opt.rotationY) * sin(opt.rotationX) + opt.camera.z = opt.radius * cos(opt.rotationY) + opt.camera.rotationX = opt.rotationX + opt.camera.rotationY = PI-opt.rotationY + hud.innerHTML = opt.camera.toString() + } + + return exports } -var scene, map +var scene, map, controls map = new Map ({ type: "ortho", @@ -135,8 +174,8 @@ function add_mx_point (p) { x: p.a, y: 0, z: p.b, - width: 5, - height: 5, + width: 1, + height: 1, }) mx.el.style.backgroundColor = "#f80" mx.el.style.backfaceVisibility = "visible" @@ -169,13 +208,18 @@ function build_circle () { } scene.update() + + controls = new MX.OrbitCamera() + controls.init() + console.log("ready..perhaps") - animate() + animate(0) } function animate(time){ requestAnimationFrame(animate) map.update(time) + controls.update() scene.update() map.draw.ctx.save() @@ -183,6 +227,7 @@ function animate(time){ map.draw.coords() map.draw.mouse(map.ui.mouse.cursor) + map.draw.camera(scene.camera) polyline() map.draw.ctx.restore() -- cgit v1.2.3-70-g09d2 From 4c7cad2ebfc44244ba845c1574271e48b9f2b740 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 13:30:39 -0500 Subject: orbit camera --- .../javascripts/mx/extensions/mx.orbitCamera.js | 80 ++++++++++++ public/assets/javascripts/rectangles/util/mouse.js | 8 ++ public/assets/test/orbit.html | 140 +++++++++++++++++++++ public/assets/test/ortho.html | 50 ++------ 4 files changed, 235 insertions(+), 43 deletions(-) create mode 100644 public/assets/javascripts/mx/extensions/mx.orbitCamera.js create mode 100644 public/assets/test/orbit.html (limited to 'public/assets/test/ortho.html') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js new file mode 100644 index 0000000..b3dcc43 --- /dev/null +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -0,0 +1,80 @@ +MX.OrbitCamera = function(opt){ + var exports = {}, bound = false + exports.opt = opt = defaults(opt, { + el: window, // object to bind events on + camera: scene.camera, // camera object we'll be moving + radius: 100, + radiusRange: [ 10, 1000 ], + rotationX: PI/2, + rotationY: 0, + center: { x: 0, y: 0, z: 0 }, + sensitivity: 10, // moving 1 pixel is like moving N radians + ease: 10, + }) + var rx, ry, px, py, epsilon = 1e-10, dragging = false + exports.init = function(){ + ry = opt.rotationY + rx = opt.rotationX + exports.bind() + } + exports.toggle = function(state){ + if (state) exports.bind() + else exports.unbind() + } + exports.bind = function(){ + if (bound) return; + bound = true + opt.el.addEventListener("mousedown", down) + opt.el.addEventListener("mousemove", move) + opt.el.addEventListener("mouseup", up) + } + exports.unbind = function(){ + if (! bound) return; + bound = false + opt.el.removeEventListener("mousedown", down) + opt.el.removeEventListener("mousemove", move) + opt.el.removeEventListener("mouseup", up) + } + function down (e) { + px = e.pageX + py = e.pageY + dragging = true + } + function move (e) { + if (! dragging) return + exports.delta(px- e.pageX, py - e.pageY) + px = e.pageX + py = e.pageY + } + function up (e) { + dragging = false + } + exports.delta = function(x,y){ + opt.rotationY += x/window.innerWidth * opt.sensitivity + opt.rotationX = clamp( opt.rotationX + y/window.innerHeight * opt.sensitivity, 0, PI) + } + exports.move = function(y, x){ + opt.rotationY = y + if (typeof x == "number") { opt.rotationX = x } + } + exports.update = function(){ + if (abs(ry - opt.rotationY) > epsilon) { + ry = avg(ry, opt.rotationY, opt.ease) + } + else { + ry = opt.rotationY + } + if (abs(rx - opt.rotationX) > epsilon) { + rx = avg(rx, opt.rotationX, opt.ease) + } + else { + rx = opt.rotationX + } + opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + opt.radius * cos(rx) + opt.camera.rotationX = PI/2 - rx + opt.camera.rotationY = ry + PI/2 + } + return exports +} diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index cb36038..86edf6c 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -76,6 +76,14 @@ function mouse (opt) { window.addEventListener("mousemove", base.mousemove) window.addEventListener("mouseup", base.mouseup) } + base.unbind = function(){ + if (opt.el) { + opt.el.removeEventListener("mousedown", base.mousedown) + opt.el.removeEventListener("contextmenu", base.contextmenu) + } + window.removeEventListener("mousemove", base.mousemove) + window.removeEventListener("mouseup", base.mouseup) + } base.bind_el = function(el){ el.addEventListener("mousedown", base.mousedown) diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html new file mode 100644 index 0000000..8b45de6 --- /dev/null +++ b/public/assets/test/orbit.html @@ -0,0 +1,140 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index bd94a51..57e050c 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -32,6 +32,7 @@ body { + @@ -94,43 +95,6 @@ Map.UI.Ortho = function(map){ } }) } -MX.OrbitCamera = function(opt){ - var exports = {}, bound = false - exports.opt = opt = defaults(opt, { - el: window, // object to bind events on - camera: scene.camera, // camera object we'll be moving - radius: 100, - radiusRange: [ 10, 1000 ], - rotationX: 0, - rotationY: 0, - center: { x: 0, y: 0, z: 0 }, - }) - exports.init = function(){ - exports.bind() - } - exports.toggle = function(state){ - if (state) exports.bind() - else exports.unbind() - } - exports.bind = function(){ - if (bound) return; - bound = true - } - exports.unbind = function(){ - if (! bound) return; - bound = false - } - exports.update = function(){ - opt.camera.x = opt.radius * sin(opt.rotationY) * cos(opt.rotationX) - opt.camera.y = opt.radius * sin(opt.rotationY) * sin(opt.rotationX) - opt.camera.z = opt.radius * cos(opt.rotationY) - opt.camera.rotationX = opt.rotationX - opt.camera.rotationY = PI-opt.rotationY - hud.innerHTML = opt.camera.toString() - } - - return exports -} var scene, map, controls @@ -167,17 +131,17 @@ function polyline (time) { } } document.addEventListener('DOMContentLoaded', build_circle) -function add_mx_point (p) { +function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false mx.move({ x: p.a, - y: 0, + y: i/4, z: p.b, width: 1, - height: 1, + height: i/2, }) - mx.el.style.backgroundColor = "#f80" + 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() @@ -200,11 +164,11 @@ function build_circle () { var theta, rad = 10; for (var i = 0; i < 100; i++) { - theta = (i/TWO_PI) + theta = (i/100 * TWO_PI) add_mx_point({ a: sin(theta) * rad, b: cos(theta) * rad, - }) + }, i) } scene.update() -- cgit v1.2.3-70-g09d2 From 24c2c9bd7b776c49e5e90caef00c99bc008ac72a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 14:04:48 -0500 Subject: separate orbit test & add mousewheel zoom --- .../javascripts/mx/extensions/mx.orbitCamera.js | 31 ++++++++++++++++------ .../javascripts/rectangles/engine/map/draw.js | 21 ++++++++++++++- public/assets/javascripts/rectangles/util/wheel.js | 10 ++++--- public/assets/test/orbit.html | 22 ++++++++++++--- public/assets/test/ortho.html | 1 + 5 files changed, 68 insertions(+), 17 deletions(-) (limited to 'public/assets/test/ortho.html') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b3dcc43..b09512e 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -11,10 +11,17 @@ MX.OrbitCamera = function(opt){ sensitivity: 10, // moving 1 pixel is like moving N radians ease: 10, }) - var rx, ry, px, py, epsilon = 1e-10, dragging = false + var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false exports.init = function(){ ry = opt.rotationY rx = opt.rotationX + radius = opt.radius + exports.wheel = new wheel({ + el: opt.el, + update: function(e, delta){ + opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + }, + }) exports.bind() } exports.toggle = function(state){ @@ -25,15 +32,17 @@ MX.OrbitCamera = function(opt){ if (bound) return; bound = true opt.el.addEventListener("mousedown", down) - opt.el.addEventListener("mousemove", move) - opt.el.addEventListener("mouseup", up) + window.addEventListener("mousemove", move) + window.addEventListener("mouseup", up) + exports.wheel.unlock() } exports.unbind = function(){ if (! bound) return; bound = false opt.el.removeEventListener("mousedown", down) - opt.el.removeEventListener("mousemove", move) - opt.el.removeEventListener("mouseup", up) + window.removeEventListener("mousemove", move) + window.removeEventListener("mouseup", up) + exports.wheel.lock() } function down (e) { px = e.pageX @@ -70,9 +79,15 @@ MX.OrbitCamera = function(opt){ else { rx = opt.rotationX } - opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) - opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) - opt.camera.y = opt.center.z + opt.radius * cos(rx) + if (abs(radius - opt.radius) > epsilon) { + radius = avg(radius, opt.radius, opt.ease) + } + else { + radius = opt.radius + } + opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + radius * cos(rx) opt.camera.rotationX = PI/2 - rx opt.camera.rotationY = ry + PI/2 } diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index b525696..564b351 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,7 +228,7 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - function dot_at (x,z){ + draw.dot_at = function dot_at (x,z){ ctx.save() ctx.translate(x,z) @@ -240,4 +240,23 @@ Map.Draw = function(map, opt){ ctx.restore() } + + draw.x_at = function x_at (x, z, length){ + ctx.save() + ctx.translate(x,z) + + var len = (length/2 || 4) / map.zoom + + ctx.lineCap = "square" + ctx.lineWidth = 2/map.zoom + ctx.beginPath() + ctx.moveTo( -len, -len); + ctx.lineTo( len, len); + ctx.moveTo( -len, len); + ctx.lineTo( len, -len); + ctx.stroke(); + + ctx.restore() + } + } \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 712d470..4155a70 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -3,8 +3,8 @@ base.wheel = new wheel({ el: document.querySelector("#map"), - update: function(e, val, delta){ - // do something with val + update: function(e, delta){ + // do something with delta }, }) @@ -13,7 +13,7 @@ function wheel (opt) { opt = defaults(opt, { el: document, - fn: function(e, val, delta){}, + update: function(e, delta){}, propagate: false, locked: false, reversible: true, @@ -22,7 +22,7 @@ function wheel (opt) { }) opt.el.addEventListener('wheel', onMouseWheel, false); -// opt.el.addEventListener('mousewheel', onMouseWheel, false); + // opt.el.addEventListener('mousewheel', onMouseWheel, false); opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false); function onMouseWheel (e) { @@ -58,6 +58,8 @@ function wheel (opt) { // opt.val = clamp(opt.val + delta, opt.min, opt.max) + // deltaX is also passed, but these values tend to be unusable + // try http://vvalls.com/assets/test/wheel.html with a trackpad opt.update(e, deltaY, deltaX) } diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html index 8b45de6..0416ff7 100644 --- a/public/assets/test/orbit.html +++ b/public/assets/test/orbit.html @@ -35,6 +35,7 @@ body { + @@ -76,17 +77,26 @@ function add_mx_point (p, theta, i) { mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: i/2, z: p.b, rotationY: -theta, width: 1, - height: i/2, + 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({ @@ -102,7 +112,7 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; + var theta, rad = 16; for (var i = 0; i < 100; i++) { theta = (i/100 * TWO_PI) add_mx_point({ @@ -111,9 +121,11 @@ function build_circle () { }, theta, i) } + add_center() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ el: document.querySelector("#perspective") }) controls.init() console.log("ready..perhaps") @@ -131,6 +143,8 @@ function animate(time){ 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) diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 57e050c..b00b6fe 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -35,6 +35,7 @@ body { + -- cgit v1.2.3-70-g09d2 From cbc0e733553648f24c8c0256caee36d1e4f24ce1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 18:08:43 -0500 Subject: build MX divs from polyline --- .../javascripts/mx/extensions/mx.orbitCamera.js | 3 +- public/assets/test/ortho.html | 107 +++++++++++++++++---- 2 files changed, 88 insertions(+), 22 deletions(-) (limited to 'public/assets/test/ortho.html') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b09512e..6dc5b6c 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -9,6 +9,7 @@ MX.OrbitCamera = function(opt){ rotationY: 0, center: { x: 0, y: 0, z: 0 }, sensitivity: 10, // moving 1 pixel is like moving N radians + wheelSensitivity: 10, ease: 10, }) var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false @@ -19,7 +20,7 @@ MX.OrbitCamera = function(opt){ exports.wheel = new wheel({ el: opt.el, update: function(e, delta){ - opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + opt.radius = clamp( opt.radius + delta * opt.wheelSensitivity, opt.radiusRange[0], opt.radiusRange[1] ) }, }) exports.bind() diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index b00b6fe..041ec3f 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -62,17 +62,19 @@ Map.UI.Ortho = function(map){ 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.length = 0 + points.length = mx_points.length = 0 points.push( p ) + mx_points.push( add_mx_point(p) ) } - 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) @@ -104,10 +106,11 @@ map = new Map ({ el: document.querySelector("#orthographic"), width: window.innerWidth/2, height: window.innerHeight, + zoom: 0, }) var placing = false -var points = [] +var points = [], mx_points = [] var ctx = map.draw.ctx var last_point @@ -119,6 +122,7 @@ function polyline (time) { 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){ @@ -131,24 +135,80 @@ function polyline (time) { } } } -document.addEventListener('DOMContentLoaded', build_circle) + +function add_mx_polyline (points) { + mx_points.forEach(function(mx){ scene.remove(mx) }) + for (var i = 1; i < points.length; i++) { + var head = points[i-1] + var tail = points[i % (points.length-1)] + add_mx_polyline_face(head, tail) + } +} +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)) + console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') + mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + scene.add(mx) +} + + function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: 11, z: p.b, - width: 1, - height: i/2, + 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) - mx.update() + 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.stroke() } -function build_circle () { +document.addEventListener('DOMContentLoaded', build) +function build () { scene = new MX.Scene().addTo("#perspective") scene.camera.move({ "x": 0, @@ -163,21 +223,17 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; - for (var i = 0; i < 100; i++) { - theta = (i/100 * TWO_PI) - add_mx_point({ - a: sin(theta) * rad, - b: cos(theta) * rad, - }, i) - } - + mx_grid() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ + radius: 1000, + rotationX: PI/4, + rotationY: PI/2, + }) controls.init() - console.log("ready..perhaps") animate(0) } function animate(time){ @@ -190,10 +246,19 @@ function animate(time){ 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() + + ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - polyline() map.draw.ctx.restore() } -- cgit v1.2.3-70-g09d2 From 779226a92063b91151988b132415e76636337de9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 18:47:51 -0500 Subject: keeping track of finished paths --- public/assets/test/ortho.html | 43 +++++++++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 16 deletions(-) (limited to 'public/assets/test/ortho.html') diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 041ec3f..ce52f99 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -71,7 +71,7 @@ Map.UI.Ortho = function(map){ } else { placing = true - points.length = mx_points.length = 0 + points = [] points.push( p ) mx_points.push( add_mx_point(p) ) } @@ -110,11 +110,13 @@ map = new Map ({ }) var placing = false -var points = [], mx_points = [] +var points, mx_points = [] +var shapes = [] var ctx = map.draw.ctx var last_point -function polyline (time) { +function polyline (points, finished) { + if (! points) return if (points.length == 1) { ctx.fillStyle = "#f80" ctx.fillRect(points[0].a, points[0].b, 10, 10) @@ -128,9 +130,8 @@ function polyline (time) { points.forEach(function(point, i){ i && ctx.lineTo(point.a, point.b) }) - placing && last_point && ctx.lineTo(last_point.a, last_point.b) ctx.stroke() - if (! placing) { + if (! placing || finished) { ctx.fill() } } @@ -138,11 +139,18 @@ function polyline (time) { 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 % (points.length-1)] - add_mx_polyline_face(head, tail) + 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() @@ -162,9 +170,9 @@ function add_mx_polyline_face(head, tail){ console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') 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 @@ -204,19 +212,13 @@ function draw_grid (ctx, cells, space) { 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.move({ - "x": 0, - "y": 0, - "z": 0, - "rotationX": 0, // PI/2, - "rotationY": PI/2, // PI - }) scene.camera.radius = 20 scene.width = window.innerWidth/2 @@ -253,7 +255,16 @@ function animate(time){ map.draw.coords() - polyline() + polyline(points) + if (placing && last_point && points.length) { + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + ctx.lineTo(last_point.a, last_point.b) + } + + shapes.forEach(function(shape){ + polyline(shape.points, true) + }) ctx.strokeStyle = "#f00"; map.draw.x_at(0,0) -- cgit v1.2.3-70-g09d2 From bcf1904e0bdd64353e6d06f922112cf28b1bc87f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 5 Feb 2015 12:28:04 -0500 Subject: line to cursor --- public/assets/javascripts/rectangles/engine/map/draw.js | 4 ++-- public/assets/test/ortho.html | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) (limited to 'public/assets/test/ortho.html') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 564b351..24f7cf3 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,11 +228,11 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - draw.dot_at = function dot_at (x,z){ + draw.dot_at = function dot_at (x, z, radius){ ctx.save() ctx.translate(x,z) - var radius = 2 / map.zoom + radius = (radius || 2) / map.zoom ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI, false); diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index ce52f99..1ca7e06 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -80,9 +80,11 @@ Map.UI.Ortho = function(map){ 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 ) - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( p ) < 10/map.zoom) { + 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" @@ -119,7 +121,7 @@ function polyline (points, finished) { if (! points) return if (points.length == 1) { ctx.fillStyle = "#f80" - ctx.fillRect(points[0].a, points[0].b, 10, 10) + map.draw.dot_at(points[0].a, points[0].b, 5) } if (points.length > 1) { ctx.fillStyle = "#ff0" @@ -167,7 +169,6 @@ function add_mx_polyline_face(head, tail){ rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) - console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' scene.add(mx) return mx @@ -256,10 +257,13 @@ function animate(time){ map.draw.coords() polyline(points) - if (placing && last_point && points.length) { + if (placing && last_point) { + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom ctx.beginPath() - ctx.moveTo(points[0].a, points[0].b) + 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){ -- cgit v1.2.3-70-g09d2 From 4b794104e86b74c531e35443cf23ce8cf144d505 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 12:44:28 -0400 Subject: etc --- public/assets/javascripts/app.js | 2 - .../javascripts/rectangles/engine/map/ui_ortho.js | 82 --------------------- public/assets/test/ortho.html | 9 +++ public/assets/test/ortho2.html | 83 ++++++++++++++++++++++ 4 files changed, 92 insertions(+), 84 deletions(-) (limited to 'public/assets/test/ortho.html') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 6ff062e..6ebcda5 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -21,8 +21,6 @@ app.init = function () { app.launch = function () { if ($.browser.msie || ! has3d()) { return app.fallback() } - var movements - scene = new MX.Scene().addTo('#scene') scene.width = window.innerWidth scene.height = window.innerHeight diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index adcc078..e69de29 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -1,82 +0,0 @@ -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) - - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - return - } - 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 - } - - // 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) - } -} \ No newline at end of file diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 1ca7e06..2257006 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -99,6 +99,15 @@ Map.UI.Ortho = function(map){ 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 diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 733c90c..17acead 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -46,6 +46,89 @@ body {