diff options
Diffstat (limited to 'public/assets/javascripts/mx')
18 files changed, 2911 insertions, 0 deletions
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js new file mode 100644 index 0000000..074ca9a --- /dev/null +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -0,0 +1,285 @@ + + +MX.Movements = function (cam, viewHeight) { + + var moveForward, + moveLeft, + moveBackward, + moveRight, + moveUp, + moveDown, + turnLeft, + turnRight, + turnUp, + turnDown, + jumping = false, + creeping = false, + locked = false, + gravity = false, + rotationX_min = PI/-2, + rotationX_max = PI/2 + + var v = 12, + vr = Math.PI * 0.012, + jumpV = 23, + vx = vy = vz = 0, + creepFactor = 0.3 + + var DEFAULT_SCALE = scale = 1.0 + + var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 } + + return { + + init: function () { + + document.addEventListener('keydown', function (e) { + // console.log(e.keyCode) + if (locked) return; + switch ( e.keyCode ) { + + case 16: // shift + creeping = true + break + + case 38: // up + case 87: // w + moveForward = true + break + + case 37: // left + case 65: // a + moveLeft = true + break + + case 40: // down + case 83: // s + moveBackward = true + break + + case 39: // right + case 68: // d + moveRight = true + break + + case 81: // q + turnLeft = true + break + + case 69: // e + turnRight = true + break + + case 82: // r + turnUp = true + break + + case 70: // f + turnDown = true + break + + case 32: // space + if (gravity) { + jumping = true + vy = abs(vy) + jumpV * scale + if (e.shiftKey) { + vy *= -1 + } + } + else { + if (e.shiftKey) { + moveDown = true + } + else { + moveUp = true + } + } + break + + case 27: // esc + map.toggle() + break + } + }) + + document.addEventListener('keyup', function (e) { + if (locked) return; + switch ( e.keyCode ) { + + case 16: // shift + creeping = false + break + + case 38: // up + case 87: // w + moveForward = false + break + + case 37: // left + case 65: // a + moveLeft = false + break + + case 40: // down + case 83: // s + moveBackward = false + break + + case 39: // right + case 68: // d + moveRight = false + break + + case 81: // q + turnLeft = false + break + + case 69: // e + turnRight = false + break + + case 82: // r + turnUp = false + break + + case 70: // f + turnDown = false + break + + case 32: // space + moveUp = moveDown = false + break + + case 48: // 0 + cam.rotationX = 0 + cam.rotationY = 0 + cam.x = 0 + cam.y = viewHeight + cam.z = 0 + break + } + }) + + var mouseX, mouseY, dx, dy, rotX, rotY, dragging = false + document.addEventListener('mousedown', function (e) { + if (locked) return; + mouseX = e.pageX + mouseY = e.pageY + rotX = cam.rotationX + rotY = cam.rotationY + dragging = true + }) + + document.addEventListener('mousemove', function (e) { + if (locked || ! dragging || app.dragging) return + var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3 + var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3 + cam.rotationY = rotY + dx + cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max ) + }) + + document.addEventListener('mouseup', function (e) { + app.dragging = dragging = false + }) + + window.addEventListener('blur', reset) + window.addEventListener('focus', reset) + function reset(){ + moveForward = moveLeft = moveBackward = moveRight = moveUp = moveDown = turnLeft = turnRight = jumping = dragging = creeping = false + } + + }, + + update: function () { + + if (locked) return; + + var ry = cam.rotationY + var s = creeping ? scale * creepFactor : scale + var vrrrr = creeping ? vr * creepFactor * 5 : vr + var moving = moveForward || moveBackward || moveRight || moveLeft || moveUp || moveDown || turnLeft || turnRight || turnUp || turnDown + vx = vz = 0 + + pos.x = cam.x + pos.z = cam.z + + if (moving) { + + if (moveForward) { + vx += v * Math.cos(ry + Math.PI / 2) * s + vz += v * Math.sin(ry + Math.PI / 2) * s + } + if (moveBackward) { + vx -= v * Math.cos(ry + Math.PI / 2) * s + vz -= v * Math.sin(ry + Math.PI / 2) * s + } + if (moveLeft) { + vx -= v * Math.cos(ry) * s + vz -= v * Math.sin(ry) * s + } + if (moveRight) { + vx += v * Math.cos(ry) * s + vz += v * Math.sin(ry) * s + } + if (moveUp) { + pos.y += v * scale + } + if (moveDown) { + pos.y -= v * scale + } + + if (turnUp) { + cam.rotationX = clamp( cam.rotationX - vrrrr*s, rotationX_min, rotationX_max) + } + if (turnDown) { + cam.rotationX = clamp( cam.rotationX + vrrrr*s, rotationX_min, rotationX_max) + } + if (turnLeft) { + cam.rotationY += vrrrr*s + } + if (turnRight) { + cam.rotationY -= vrrrr*s + } + + pos.x += vx + pos.z += vz + } + + if (gravity) { + vy -= 1 * scale + + pos.y += vy + + if (vy) { + moving = true + } + if (pos.y <= viewHeight) { + pos.y = viewHeight + vy = 0 + jumping = false + vz = vz || 1 + } + + var ceiling = (Rooms.mover.room ? Rooms.mover.room.height : 5000) + + if (pos.y >= ceiling) { + vy = 0 + pos.y = ceiling + vz = vz || 1 + } + } + + if (moving) { + app.tube("move", pos) + } + }, + + lock: function(){ locked = true }, + unlock: function(){ locked = false }, + scale: function(n){ if (n) scale = n; return scale }, + resetScale: function(n){ scale = DEFAULT_SCALE }, + gravity: function(g){ return typeof g == "boolean" ? gravity = g : gravity }, + velocity: function(n){ v = clamp(n, 1, 50) }, + jumpVelocity: function(n){ jumpV = clamp(n, 1, 50) }, + } +} diff --git a/public/assets/javascripts/mx/extensions/mx.rotationControl.js b/public/assets/javascripts/mx/extensions/mx.rotationControl.js new file mode 100644 index 0000000..9adb627 --- /dev/null +++ b/public/assets/javascripts/mx/extensions/mx.rotationControl.js @@ -0,0 +1,265 @@ +// Usage: +// +// var control = new MX.RotationControl() +// control.init( object{MX.Object3D} [, listener{HTMLElement}] ) +// +// In animation loop: +// +// control.update() +// +// The above code will register handler functions on `listener` +// and will be updating `object`s rotationX and rotationY +// If no `listener` is provided, will default to `object`s el. + +MX.RotationControl = function () { + + var object, + locked = false + + var down = false, + active = false, + lastX, + lastY + + var pointerLockPrefix = + 'pointerLockElement' in document ? '' : + 'mozPointerLockElement' in document ? 'moz' : + 'webkitPointerLockElement' in document ? 'webkit' : null, + hasPointerLock = !(pointerLockPrefix === null) + pointerLockEnabled = false + + var pub = { + + sensitivity : .5, + ease : 10, + drag : true, + + inverseX : false, + inverseY : false, + + disableX : false, + disableY : false, + + rotationX : 0, + rotationY : 0, + + upperBoundX : undefined, + lowerBoundX : undefined, + + upperBoundY : undefined, + lowerBoundY : undefined, + + usePreset: function (name) { + var ops = presets[name] + if (ops) { + if (currentPreset && presets[currentPreset].teardown) { + presets[currentPreset].teardown() + } + for (var op in ops) { + if (op !== 'setup' && op !== 'teardown') { + pub[op] = ops[op] + } + } + if (op.setup) ops.setup() + } + } + } + + var currentPreset + var presets = { + firstPerson: { + drag: false, + ease: 2, + sensitivity: .18, + inverseX: true, + inverseY: true, + upperBoundX: MX.rotationUnit === 'deg' ? 90 : Math.PI / 2, + lowerBoundX: MX.rotationUnit === 'deg' ? -90 : -Math.PI / 2 + }, + skybox: { + sensitivity: .18, + inverseX: true, + inverseY: true, + upperBoundX: MX.rotationUnit === 'deg' ? 90 : Math.PI / 2, + lowerBoundX: MX.rotationUnit === 'deg' ? -90 : -Math.PI / 2 + } + } + + function init (obj, lis) { + if (active) return + + object = obj + pub.rotationX = object.rotationX + pub.rotationY = object.rotationY + + if (lis instanceof HTMLElement) { + listener = lis + } else if (lis instanceof MX.Object3D) { + listener = lis.el + } else { + listener = window.document + } + + listener.addEventListener('mousedown', onDown) + listener.addEventListener('mousemove', onMove) + listener.addEventListener('mouseup', onUp) + listener.addEventListener('touchstart', onDown) + listener.addEventListener('touchmove', onMove) + listener.addEventListener('touchend', onUp) + + active = true + } + + function changeObject (obj) { + object = obj + pub.rotationX = object.rotationX + pub.rotationY = object.rotationY + } + + function changeListener (lis) { + remove() + active = false + init(object, lis) + if (pointerLockEnabled) { + initPointerLock() + } + } + + function remove () { + if (!active) return + listener.removeEventListener('mousedown', onDown) + listener.removeEventListener('mousemove', onMove) + listener.removeEventListener('mouseup', onUp) + listener.removeEventListener('touchstart', onDown) + listener.removeEventListener('touchmove', onMove) + listener.removeEventListener('touchend', onUp) + + if (hasPointerLock) { + document.removeEventListener(pointerLockPrefix + 'pointerlockchange', onPointerLockChange) + document.removeEventListener('mousemove', onPointerLockMove) + document.body[pointerLockPrefix + (pointerLockPrefix ? 'E' : 'e') + 'xitPointerLock']() + } + active = false + } + + function onDown (e) { + e = normalizeEvent(e) + if (!e) return + down = true + lastX = e.pageX + lastY = e.pageY + } + + function onMove (e) { + if (e.type = 'touchmove') { + e.preventDefault() + } + if (pub.drag && !down) return + e = normalizeEvent(e) + if (!e) return + lastX = lastX || e.pageX + lastY = lastY || e.pageY + var dx = e.pageX - lastX, + dy = e.pageY - lastY + lastX = e.pageX + lastY = e.pageY + updateTarget(dx, dy) + } + + function onUp () { + down = false + } + + function initPointerLock () { + + if (pointerLockEnabled) return + + document.addEventListener(pointerLockPrefix + 'pointerlockchange', onPointerLockChange) + document.addEventListener('mousemove', onPointerLockMove) + + document.body[pointerLockPrefix + (pointerLockPrefix ? 'R' : 'r') + 'equestPointerLock']() + } + + function onPointerLockChange () { + var el = document.body + if (document[pointerLockPrefix + (pointerLockPrefix ? 'P' : 'p') + 'ointerLockElement'] === el) { + pointerLockEnabled = true + } else { + pointerLockEnabled = false + } + } + + function onPointerLockMove (e) { + if (!pointerLockEnabled) return + var dx = e[pointerLockPrefix + (pointerLockPrefix ? 'M' : 'm') + 'ovementX'], + dy = e[pointerLockPrefix + (pointerLockPrefix ? 'M' : 'm') + 'ovementY'] + updateTarget(dx, dy) + } + + function normalizeEvent (e) { + if (e.touches) { + return e.touches.length > 1 ? false : e.touches[0] + } else { + return e + } + } + + function updateTarget (dx, dy) { + if (pub.inverseX) dx = -dx + if (pub.inverseY) dy = -dy + if (MX.rotationUnit !== 'deg') { + dx = MX.toRad(dx) + dy = MX.toRad(dy) + } + + if (!pub.disableX) { + pub.rotationX -= dy * pub.sensitivity + if (pub.upperBoundX) pub.rotationX = Math.min(pub.rotationX, pub.upperBoundX) + if (pub.lowerBoundX) pub.rotationX = Math.max(pub.rotationX, pub.lowerBoundX) + } + + if (!pub.disableY) { + pub.rotationY += dx * pub.sensitivity + if (pub.upperBoundY) pub.rotationY = Math.min(pub.rotationY, pub.upperBoundY) + if (pub.lowerBoundY) pub.rotationY = Math.max(pub.rotationY, pub.lowerBoundY) + } + } + + function update () { + if (!object || locked) return + var dx = pub.rotationX - object.rotationX, + dy = pub.rotationY - object.rotationY + if (Math.abs(dx) < 0.0001) { + object.rotationX = pub.rotationX + } else { + object.rotationX += dx / pub.ease + } + if (Math.abs(dy) < 0.0001) { + object.rotationY = pub.rotationY + } else { + object.rotationY += dy / pub.ease + } + } + + function lock () { + locked = true + } + + function unlock () { + pub.rotationX = object.rotationX + pub.rotationY = object.rotationY + locked = false + } + + pub.init = init + pub.remove = remove + pub.update = update + pub.lock = lock + pub.unlock = unlock + pub.initPointerLock = initPointerLock + pub.changeObject = changeObject + pub.changeListener = changeListener + + return pub + +}
\ No newline at end of file diff --git a/public/assets/javascripts/mx/extensions/mx.scene.js b/public/assets/javascripts/mx/extensions/mx.scene.js new file mode 100644 index 0000000..8f11fb0 --- /dev/null +++ b/public/assets/javascripts/mx/extensions/mx.scene.js @@ -0,0 +1,165 @@ +// NOTE +// +// This is not a fully functional 3d scene as you might expect. +// The camera can only do pitch (rotationX) and yaw (rotationY), but no roll (rotationZ) +// because I haven't implemented alternative euler orders or quaternions. +// +// For serious 3D scenes with more functionalities you should use +// THREE.js with CSS3D Renderer. + +MX.Camera = MX.Object3D.extend({ + + init: function(){ + this.el = null + this.type = "Camera" + }, + + move: function(s){ + for (var i in s) { + this[i] = s[i] + } + }, + + toString: function(){ + var params = "x y z rotationX rotationY".split(" ") + return this.__toString(params, "scene.camera.move") + }, + + getCameraEuler: function (target) { + var dx = target.x - this.x, + dy = target.y - this.y, + dz = target.z - this.z + r = {} + r.y = Math.atan2(-dx, dz) + r.x = Math.atan2(-dy, Math.sqrt(dx*dx + dz*dz)) + r.z = 0 + if (MX.rotationUnit === 'deg') { + r.x = MX.toDeg(r.x) + r.y = MX.toDeg(r.y) + } + return r + } + +}) + +MX.Scene = (function () { + + var add = MX.Object3D.prototype.add, + remove = MX.Object3D.prototype.remove + + function Scene () { + + this.el = document.createElement('div') + this.el.classList.add('mx-scene') + + var s = this.el.style + + s[MX.transformProp] = 'preserve-3d' + + s.webkitPerspectiveOrigin = '50% 50%' + s.mozPerspectiveOrigin = '50% 50%' + s.perspectiveOrigin = '50% 50%' + + s.webkitUserSelect = 'none' + s.mozUserSelect = 'none' + s.userSelect = 'none' + + s.overflow = 'hidden' + + this.inner = new MX.Object3D().addTo(this.el) + this.inner.el.style.width = '0' + this.inner.el.style.height = '0' + + var self = this + var width, height, perspective + + Object.defineProperty(this, 'width', { + get: function () { + return width + }, + set: function (val) { + width = val + self.el.style.width = val + 'px' + } + }) + + Object.defineProperty(this, 'height', { + get: function () { + return height + }, + set: function (val) { + height = val + self.el.style.height = val + 'px' + } + }) + + Object.defineProperty(this, 'perspective', { + get: function () { + return perspective + }, + set: function (val) { + perspective = val + self.el.style[MX.perspectiveProp] = val + 'px' + self.inner.z = -val - self.camera.z + self.inner.rotationOrigin.z = -val + } + }) + + var cam = this.camera = new MX.Camera() + + this.inner.rotationOrigin = { x:0, y:0, z:0 } + + this.perspective = 0 + } + + Scene.prototype = { + + constructor: Scene, + + add: function () { + add.apply(this.inner, arguments) + return this + }, + + remove: function () { + remove.apply(this.inner, arguments) + return this + }, + + addTo: function (target) { + if (typeof target === 'string') { + target = document.querySelector(target) + } + if (target instanceof HTMLElement && target.appendChild) { + target.appendChild(this.el) + } else { + console.warn('You can only add a Scene to an HTML element.') + } + return this + }, + + update: function () { + // update inner based on camera + + var i = this.inner, + c = this.camera + + c.update() + + i.z = -this.perspective - c.z + i.x = -c.x + i.y = -c.y + + i.rotationX = -c.rotationX + i.rotationY = -c.rotationY + //i.rotationZ = -c.rotationZ + + i.update() + return this + }, + + } + + return Scene + +})()
\ No newline at end of file diff --git a/public/assets/javascripts/mx/extensions/mx.scrubber.js b/public/assets/javascripts/mx/extensions/mx.scrubber.js new file mode 100644 index 0000000..54612f2 --- /dev/null +++ b/public/assets/javascripts/mx/extensions/mx.scrubber.js @@ -0,0 +1,191 @@ +/* + Use the scrollwheel to tween between different points and orientations + + scrubber = new MX.Scrubber(cam, [ + { + position: [0, viewHeight, -1000], + rotation: [0, 0] + }, + { + position: [0, 1000, 1000], + rotation: [0, Math.PI] + }, + { + position: [0, viewHeight, -1000], + rotation: [0, 2*Math.PI] + }, + { + position: [0, viewHeight, -2000], + rotation: [0, 0] + } + ]) + + // in your animate function: + scrubber.update() + +*/ + +MX.Scrubber = function (obj, points) { + + obj = obj || {} + points = points || {} + + var reversible = true, loop = false; + + var total = points.length * 100, + distance = 0 + destination = 0, + last_index = -1, + last_name = null, + locked = false, + point_count = points.length + (loop+0) + + var avg_speed = scroll_avg_speed = 5, + click_avg_speed = 20, + webkit_ratio = 0.02 + + if (points[0].position) { + points.forEach(function(p){ + p.x = p.position[0] + p.y = p.position[1] + p.z = p.position[2] + p.rotationX = p.rotation[0] + p.rotationY = p.rotation[1] + }) + } + + document.addEventListener('touchstart', next, false); + document.addEventListener('mousedown', next, false); + document.addEventListener('mousewheel', onDocumentMouseWheel, false); + document.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false); + function onDocumentMouseWheel (e) { + + if (locked) return + + var delta = 0; + + // WebKit + if ( event.wheelDeltaY ) { + delta -= event.wheelDeltaY * webkit_ratio + } + // Opera / Explorer 9 + else if ( event.wheelDelta ) { + delta -= event.wheelDelta * webkit_ratio + } + // Firefox + else if ( event.detail ) { + delta += event.detail * 2 + } + if (! reversible && delta < 0) return; + + if (destination < total-100 || delta < 0) { + e.preventDefault() + } + else { + return + } + + destination += delta + + avg_speed = scroll_avg_speed + } + + function add_point(point){ + if (point.type == "Camera") { + point = { + position: [ point.x, point.y, point.z ], + rotation: [ point.rotationX, point.rotationY ], + callback: noop + } + } + points.push(point) + total = points.length * 100 + } + + function reset(){ + distance = destination = 0 + last_index = -1 + last_name = null + } + + function next(){ + destination = ~~(destination/100) * 100 + destination += 100 + avg_speed = click_avg_speed + } + + function update(){ + if (locked) return + + if (destination > total-100) destination = total-100 + + distance = avg(distance, destination, avg_speed) + var ratio = distance / total + + if (! loop) { + if (ratio < 0) { + destination = 0 + ratio = 0 + } + else if (ratio > 1) { + destination = total + ratio = 1 + } + } + + var diff = ratio * point_count + var step = (distance % 100) / 100 + var src = ~~clamp(diff, 0, point_count-1) + var halfway = ~~clamp(diff + 0.5, 0, point_count-1) + var dest = ~~clamp(diff + 1, 0, point_count-1) + + if (halfway != last_index) { + last_index = halfway + if (points[last_index].name != last_name) { + last_name = points[last_index].name + } + $("#info .active").removeClass("active") + $("#info div[data-name='" + last_name + "']").addClass("active") + points[halfway].callback && points[halfway].callback() + } + + var ry0 = points[src].rotationY + var ry1 = points[dest].rotationY + if (abs(ry0 - ry1) == TWO_PI) { + ry0 = ry1 + } + + obj.x = lerp(step, points[src].x, points[dest].x) + obj.y = lerp(step, points[src].y, points[dest].y) + obj.z = lerp(step, points[src].z, points[dest].z) + obj.rotationX = lerp(step, points[src].rotationX, points[dest].rotationX) + obj.rotationY = lerp(step, ry0, ry1) + if (obj.rotationY > PI) { obj.rotationY -= TWO_PI } + } + + var scrubber = { + init: function(){ + app && app.movements && app.movements.lock() + }, + lock: function(){ + app && app.movements && app.movements.unlock() + locked = true + }, + unlock: function(){ + app && app.movements && app.movements.lock() + locked = false + }, + step: function(n){ + distance = destination = n * 100 + }, + add_point: add_point, + reset: reset, + next: next, + update: update, + + obj: obj, + points: points + } + + return scrubber; +} diff --git a/public/assets/javascripts/mx/mx.js b/public/assets/javascripts/mx/mx.js new file mode 100644 index 0000000..df9abe7 --- /dev/null +++ b/public/assets/javascripts/mx/mx.js @@ -0,0 +1,583 @@ +/** + * Copyright (C) 2013 by Evan You + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ + +var MX = MX || (function (undefined) { + + var MX = { + version: '0.1.0', + prefix: undefined, + rotationUnit: 'rad' + } + + var floatPrecision = 5 + + // ======================================================================== + // Setup & Compatibility + // ======================================================================== + + var transformProp, + transitionProp, + transformOriginProp, + transformStyleProp, + perspectiveProp, + transitionEndEvent + + var positionAtCenter = true, // whether to auto center objects + centeringCSS // styles to inject for center positioning + + document.addEventListener('DOMContentLoaded', setup) + + function setup () { + + // sniff prefix + + var s = document.body.style + + MX.prefix = + 'webkitTransform' in s ? 'webkit' : + 'mozTransform' in s ? 'moz' : + 'msTransform' in s ? 'ms' : '' + + transformProp = MX.transformProp = addPrefix('transform') + transitionProp = MX.transitionProp = addPrefix('transition') + transformOriginProp = MX.transformOriginProp = addPrefix('transformOrigin') + transformStyleProp = MX.transformStyleProp = addPrefix('transformStyle') + perspectiveProp = MX.perspectiveProp = addPrefix('perspective') + transitionEndEvent = MX.transitionEndEvent = MX.prefix === 'webkit' ? 'webkitTransitionEnd' : 'transitionend' + + // shiv rAF + + var vendors = ['webkit', 'moz', 'ms'] + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'] + window.cancelAnimationFrame = + window[vendors[x]+'CancelAnimationFrame'] || + window[vendors[x]+'CancelRequestAnimationFrame'] + } + + // inject centering css + + centeringCSS = document.createElement('style') + centeringCSS.type = 'text/css' + centeringCSS.innerHTML = + '.mx-object3d {' + + 'position: absolute;' + + 'top: 50%;' + + 'left: 50%;}' + injectCenteringCSS() + + window.scrollTo(0,0) + } + + function injectCenteringCSS () { + document.head.appendChild(centeringCSS) + } + + function removeCenteringCSS () { + document.head.removeChild(centeringCSS) + } + + // ======================================================================== + // Utils + // ======================================================================== + + function toDeg (rad) { + return rad / Math.PI * 180 + } + + function toRad (deg) { + return deg / 180 * Math.PI + } + + function buildRotationTranslation (obj) { + + // used when rotationOrigin is set + + var origin = obj.rotationOrigin + if (!origin) { + return + } else { + var dx = origin.x - obj.x, + dy = -(origin.y - obj.y), + dz = -(origin.z - obj.z) + return { + before: 'translate3d(' + dx.toFixed(floatPrecision) +'px,' + dy.toFixed(floatPrecision) + 'px,' + dz.toFixed(floatPrecision) + 'px) ', + after: 'translate3d(' + (-dx).toFixed(floatPrecision) + 'px,' + (-dy).toFixed(floatPrecision) + 'px,' + (-dz).toFixed(floatPrecision) + 'px) ' + } + } + } + + function addPrefix (string) { + if (MX.prefix) { + string = MX.prefix + string.charAt(0).toUpperCase() + string.slice(1) + } + return string + } + + // ======================================================================== + // Base Object3D + // ======================================================================== + + function Object3D (el) { + + this.setupDomElement(el) + this.setCSSTransformStyle('preserve-3d') + this.el.classList.add('mx-object3d') + + this.parent = undefined + this.children = [] + this.updateChildren = true + + this.inverseLookAt = false + + this.persisted = true + + this.reset() + +// this.quaternion = new MX.Quaternion () +// this.quaternion._euler = this + + var width, height, + self = this + + Object.defineProperty(this, 'width', { + get: function () { + return width + || parseInt(self.el.style.width, 10) + || 0 + }, + set: function (val) { + width = val + this.el.style.width = width + 'px' + } + }) + + Object.defineProperty(this, 'height', { + get: function () { + return height + || parseInt(self.el.style.height, 10) + || 0 + }, + set: function (val) { + height = val + this.el.style.height = height + 'px' + } + }) + } + + Object3D.prototype = { + + constructor: Object3D, + + reset: function () { + this.x = this.__x = 0 + this.y = this.__y = 0 + this.z = this.__z = 0 + this.rotationX = this.__rotationX = 0 + this.rotationY = this.__rotationY = 0 + this.rotationZ = this.__rotationZ = 0 + this.scaleX = this.__scaleX = 1 + this.scaleY = this.__scaleY = 1 + this.scaleZ = this.__scaleZ = 1 + this.scale = this.__scale = 1 + this.perspective = this.__perspective = 0 + this.rotationOrigin = undefined + this.followTarget = undefined +// this.quaternion = new MX.Quaternion() + this.dirty = true + this.update() + }, + + setupDomElement: function (el) { + this.el = undefined + if (el instanceof HTMLElement) { + this.el = el + } else if (typeof el === 'string') { + var tag = el.match(/^[^.#\s]*/)[1], + id = el.match(/#[^.#\s]*/), + classes = el.match(/\.[^.#\s]*/g) + this.el = document.createElement(tag || 'div') + if (id) { + this.el.id = id[0].slice(1) + } + if (classes) { + var i = classes.length + while (i--) { + this.el.classList.add(classes[i].slice(1)) + } + } + } else { + this.el = document.createElement('div') + } + }, + + update: function () { + + if (this.updateChildren) { + var i = this.children.length + while (i--) { + this.children[i].update() + } + } + + if (this.followTarget) { + this.lookAt(this.followTarget, false) + } + + if (this.scaleX !== this.__scaleX || + this.scaleY !== this.__scaleY || + this.scaleZ !== this.__scaleZ) { + this.__scaleX = this.scaleX + this.__scaleY = this.scaleY + this.__scaleZ = this.scaleZ + this.dirty = true + } + + if (this.scale !== this.__scale) { + this.scaleX = + this.scaleY = + this.scaleZ = + this.__scaleX = + this.__scaleY = + this.__scaleZ = + this.__scale = + this.scale + this.dirty = true + } + + if (this.rotationX !== this.__rotationX || + this.rotationY !== this.__rotationY || + this.rotationZ !== this.__rotationZ) { + this.__rotationX = this.rotationX + this.__rotationY = this.rotationY + this.__rotationZ = this.rotationZ + this.dirty = true + } + + if (this.x !== this.__x || + this.y !== this.__y || + this.z !== this.__z) { + this.__x = this.x + this.__y = this.y + this.__z = this.z + this.dirty = true + } + + if (this.perspective !== this.__perspective) { + this.__perspective = this.perspective + this.dirty = true + } + + if (this.dirty && this.el) { + + var rotationTranslation = buildRotationTranslation(this), + rotation = 'rotateX(' + this.rotationX.toFixed(floatPrecision) + MX.rotationUnit + ') ' + + 'rotateY(' + this.rotationY.toFixed(floatPrecision) + MX.rotationUnit + ') ' + + 'rotateZ(' + this.rotationZ.toFixed(floatPrecision) + MX.rotationUnit + ') ' + + var transformString = + (MX.positionAtCenter ? 'translate3d(-50%, -50%, 0) ' : '') + + (this.perspective ? 'perspective(' + this.perspective + 'px) ' : '') + + 'translate3d(' + + this.x.toFixed(floatPrecision || 0) + 'px,' + + (-this.y).toFixed(floatPrecision) + 'px,' + + (-this.z).toFixed(floatPrecision) + 'px) ' + + 'scale3d(' + + this.scaleX.toFixed(floatPrecision) + ',' + + this.scaleY.toFixed(floatPrecision) + ',' + + this.scaleZ.toFixed(floatPrecision) + ') ' + + if (rotationTranslation) { + transformString += rotationTranslation.before + + rotation + + rotationTranslation.after + + } else { + transformString += rotation + } + + this.el.style[transformProp] = transformString + this.dirty = false + } + + return this + + }, + + // taken from three.js + setFromQuaternion: function ( q, order, update ) { + // q is assumed to be normalized + + // http://www.mathworks.com/matlabcentral/fileexchange/20696-function-to-convert-between-dcm-euler-angles-quaternions-and-euler-vectors/content/SpinCalc.m + + var sqx = q.x * q.x; + var sqy = q.y * q.y; + var sqz = q.z * q.z; + var sqw = q.w * q.w; + + this.rotationX = Math.atan2( 2 * ( q.x * q.w - q.y * q.z ), ( sqw - sqx - sqy + sqz ) ); + this.rotationY = Math.asin( clamp( 2 * ( q.x * q.z + q.y * q.w ), -1, 1 ) ); + this.rotationZ = Math.atan2( 2 * ( q.z * q.w - q.x * q.y ), ( sqw + sqx - sqy - sqz ) ); + }, + + lookAt: function (target, update) { + var r = this.getLookAtEuler(target) + this.setRotation(r) + if (update !== false) this.update() + return this + }, + + getLookAtEuler: function (target) { + // euler order XYZ + var r = {}, + dx = target.x - this.x, + dy = target.y - this.y, + dz = target.z - this.z + if (this.inverseLookAt) { + dx = -dx + dy = -dy + dz = -dz + } + if (dz === 0) dz = 0.001 + r.x = -Math.atan2(dy, dz) + var flip = dz > 0 ? 1 : -1 + r.y = flip * Math.atan2(dx * Math.cos(r.x), dz * -flip) + r.z = Math.atan2(Math.cos(r.x), Math.sin(r.x) * Math.sin(r.y)) - Math.PI / 2 + if (MX.rotationUnit === 'deg') { + r.x = toDeg(r.x) + r.y = toDeg(r.y) + r.z = toDeg(r.z) + } + return r + }, + + add: function () { + if (!this.el) return + var parent = this + Array.prototype.forEach.call(arguments, function (child) { + if (!child instanceof Object3D) return + parent.el.appendChild(child.el) + if (!parent.children) parent.children = [] + parent.children.push(child) + child.parent = parent + }) + return this + }, + + remove: function () { + var parent = this + Array.prototype.forEach.call(arguments, function (child) { + var index = parent.children.indexOf(child) + if (index !== -1) { + parent.children.splice(index, 1) + parent.el.removeChild(child.el) + child.parent = undefined + } + }) + return this + }, + + addTo: function (target) { + if (typeof target === 'string') { + target = document.querySelector(target) + } + if (target instanceof HTMLElement && target.appendChild) { + target.appendChild(this.el) + } else if (target instanceof Object3D || target instanceof Scene) { + target.add(this) + } + return this + }, + + removeElement: function () { + if (this.el.parentNode) { + this.el.parentNode.removeChild(this.el) + } + }, + + setPosition: function (tar) { + this.x = (tar.x || tar.x === 0) ? tar.x : this.x + this.y = (tar.y || tar.y === 0) ? tar.y : this.y + this.z = (tar.z || tar.z === 0) ? tar.z : this.z + }, + + setRotation: function (tar) { + this.rotationX = (tar.x || tar.x === 0) ? tar.x : this.rotationX + this.rotationY = (tar.y || tar.y === 0) ? tar.y : this.rotationY + this.rotationZ = (tar.z || tar.z === 0) ? tar.z : this.rotationZ + }, + + setScale: function (tar) { + this.scaleX = (tar.x || tar.x === 0) ? tar.x : this.scaleX + this.scaleY = (tar.y || tar.y === 0) ? tar.y : this.scaleY + this.scaleZ = (tar.z || tar.z === 0) ? tar.z : this.scaleZ + }, + + setCSSTransformOrigin: function (origin) { + this.el && (this.el.style[transformOriginProp] = origin) + return this + }, + + setCSSTransformStyle: function (style) { + this.el && (this.el.style[transformStyleProp] = style) + return this + }, + + setCSSTransition: function (trans) { + this.el && (this.el.style[transitionProp] = trans) + return this + }, + + setCSSPerspective: function (pers) { + this.el && (this.el.style[perspectiveProp] = pers) + return this + }, + + onTransitionEnd: function (callback) { + this.cancelTransitionEnd() + var el = this.el + el.addEventListener(transitionEndEvent, onEnd) + function onEnd () { + el.removeEventListener(transitionEndEvent, onEnd) + callback() + } + }, + + cancelTransitionEnd: function () { + this.el.removeEventListener(transitionEndEvent) + }, + + toString: function(params){ + params = params || "id width height depth x y z rotationX rotationY rotationZ scale".split(" ") + return this.__toString(params) + }, + + __toString: function(params, func){ + this.id = this.id || guid() + var list = [], + obj = {}, + type = this.type || "Object3d", + name = type.toLowerCase(), + val, + param + for (var i in params) { + param = params[i] + val = this[param] + if (val === 0 && ! func) continue; + if (typeof val == "number") { + if (param.indexOf("rotation") != -1) { + obj[param] = Number(val.toFixed(3)) + } + else { + obj[param] = ~~val + } + } + else { + obj[param] = val + } + } + + return (func || "var " + name + " = new MX." + type ) + "(" + + JSON.stringify(obj, undefined, 2) + + ")\n" + (func ? "" : "scene.add(" + name + ")") + }, + + contains: function(x,y,z){ + var containsX = false, + containsY = false, + containsZ = false + + if (x === null) { + containsX = true + } + else { + containsX = abs(this.x - x) <= this.width/2 + } + + if (y === null) { + containsY = true + } + else { + containsY = abs(this.y - y) <= this.height/2 + } + + if (z === null) { + containsZ = true + } + else { + containsZ = abs(this.z - z) <= this.depth/2 + } + + return (containsX && containsY && containsZ) + } + + } + + // ======================================================================== + // Inheritance + // ======================================================================== + + Object3D.extend = extend.bind(Object3D) + + function extend (props) { + var Super = this + var ExtendedObject3D = function () { + Super.call(this) + props.init && props.init.apply(this, arguments) + } + ExtendedObject3D.prototype = Object.create(Super.prototype) + for (var prop in props) { + if (props.hasOwnProperty(prop) && prop !== 'init') { + ExtendedObject3D.prototype[prop] = props[prop] + } + } + ExtendedObject3D.extend = extend.bind(ExtendedObject3D) + return ExtendedObject3D + } + + // ======================================================================== + // Expose API + // ======================================================================== + + MX.Object3D = Object3D + MX.toRad = toRad + MX.toDeg = toDeg + + // center positioning getter setter + Object.defineProperty(MX, 'positionAtCenter', { + get: function () { + return positionAtCenter + }, + set: function (val) { + if (typeof val !== 'boolean') return + positionAtCenter = val + if (positionAtCenter) { + injectCenteringCSS() + } else { + removeCenteringCSS() + } + } + }) + + return MX + +})()
\ No newline at end of file diff --git a/public/assets/javascripts/mx/mx.min.js b/public/assets/javascripts/mx/mx.min.js new file mode 100644 index 0000000..b0f0cdd --- /dev/null +++ b/public/assets/javascripts/mx/mx.min.js @@ -0,0 +1 @@ +var MX=MX||function(undefined){var MX={prefix:undefined,rotationUnit:"rad"};var floatPrecision=5;var transformProp,transitionProp,transformOriginProp,transformStyleProp,perspectiveProp;var positionAtCenter=true,centeringCSS;document.addEventListener("DOMContentLoaded",setup);function setup(){var s=document.body.style;MX.prefix="webkitTransform"in s?"webkit":"mozTransform"in s?"moz":"msTransform"in s?"ms":"";transformProp=MX.transformProp=addPrefix("transform");transitionProp=MX.transitionProp=addPrefix("transition");transformOriginProp=MX.transformOriginProp=addPrefix("transformOrigin");transformStyleProp=MX.transformStyleProp=addPrefix("transformStyle");perspectiveProp=MX.perspectiveProp=addPrefix("perspective");var vendors=["webkit","moz","ms"];for(var x=0;x<vendors.length&&!window.requestAnimationFrame;++x){window.requestAnimationFrame=window[vendors[x]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[vendors[x]+"CancelAnimationFrame"]||window[vendors[x]+"CancelRequestAnimationFrame"]}centeringCSS=document.createElement("style");centeringCSS.type="text/css";centeringCSS.innerHTML=".mx-object3d {"+"position: absolute;"+"top: 50%;"+"left: 50%;}";injectCenteringCSS()}function injectCenteringCSS(){document.head.appendChild(centeringCSS)}function removeCenteringCSS(){document.head.removeChild(centeringCSS)}function toDeg(rad){return rad/Math.PI*180}function toRad(deg){return deg/180*Math.PI}function buildRotationTranslation(obj){var origin=obj.rotationOrigin;if(!origin){return}else{var dx=origin.x-obj.x,dy=-(origin.y-obj.y),dz=-(origin.z-obj.z);return{before:"translate3d("+dx+"px,"+dy+"px,"+dz+"px) ",after:"translate3d("+-dx+"px,"+-dy+"px,"+-dz+"px) "}}}function addPrefix(string){if(MX.prefix){string=MX.prefix+string.charAt(0).toUpperCase()+string.slice(1)}return string}function Object3D(el){this.setupDomElement(el);this.setCSSTransformStyle("preserve-3d");this.el.classList.add("mx-object3d");this.parent=undefined;this.children=[];this.updateChildren=true;this.inverseLookAt=false;this.reset();var width,height,self=this;Object.defineProperty(this,"width",{get:function(){return width||parseInt(self.el.style.width,10)||0},set:function(val){width=val;this.el.style.width=width+"px"}});Object.defineProperty(this,"height",{get:function(){return height||parseInt(self.el.style.height,10)||0},set:function(val){height=val;this.el.style.height=height+"px"}})}Object3D.prototype={constructor:Object3D,reset:function(){this.x=this.__x=0;this.y=this.__y=0;this.z=this.__z=0;this.rotationX=this.__rotationX=0;this.rotationY=this.__rotationY=0;this.rotationZ=this.__rotationZ=0;this.scaleX=this.__scaleX=1;this.scaleY=this.__scaleY=1;this.scaleZ=this.__scaleZ=1;this.scale=this.__scale=1;this.rotationOrigin=undefined;this.followTarget=undefined;this.dirty=true;this.update()},setupDomElement:function(el){this.el=undefined;if(el instanceof HTMLElement){this.el=el}else if(typeof el==="string"){var tag=el.match(/^[^.#\s]*/)[1],id=el.match(/#[^.#\s]*/),classes=el.match(/\.[^.#\s]*/g);this.el=document.createElement(tag||"div");if(id){this.el.id=id[0].slice(1)}if(classes){var i=classes.length;while(i--){this.el.classList.add(classes[i].slice(1))}}}else{this.el=document.createElement("div")}},update:function(){if(this.updateChildren){var i=this.children.length;while(i--){this.children[i].update()}}if(this.followTarget){this.lookAt(this.followTarget,false)}if(this.scaleX!==this.__scaleX||this.scaleY!==this.__scaleY||this.scaleZ!==this.__scaleZ){this.__scaleX=this.scaleX;this.__scaleY=this.scaleY;this.__scaleZ=this.scaleZ;this.dirty=true}if(this.scale!==this.__scale){this.scaleX=this.scaleY=this.scaleZ=this.__scaleX=this.__scaleY=this.__scaleZ=this.__scale=this.scale;this.dirty=true}if(this.rotationX!==this.__rotationX||this.rotationY!==this.__rotationY||this.rotationZ!==this.__rotationZ){this.__rotationX=this.rotationX;this.__rotationY=this.rotationY;this.__rotationZ=this.rotationZ;this.dirty=true}if(this.x!==this.__x||this.y!==this.__y||this.z!==this.__z){this.__x=this.x;this.__y=this.y;this.__z=this.z;this.dirty=true}if(this.dirty&&this.el){var rotationTranslation=buildRotationTranslation(this),rotation="rotateX("+this.rotationX.toFixed(floatPrecision)+MX.rotationUnit+") "+"rotateY("+this.rotationY.toFixed(floatPrecision)+MX.rotationUnit+") "+"rotateZ("+this.rotationZ.toFixed(floatPrecision)+MX.rotationUnit+") ";var transformString=(MX.positionAtCenter?"translate3d(-50%, -50%, 0) ":"")+"translate3d("+this.x.toFixed(floatPrecision)+"px,"+(-this.y).toFixed(floatPrecision)+"px,"+(-this.z).toFixed(floatPrecision)+"px) "+"scale3d("+this.scaleX.toFixed(floatPrecision)+","+this.scaleY.toFixed(floatPrecision)+","+this.scaleZ.toFixed(floatPrecision)+") ";if(rotationTranslation){transformString+=rotationTranslation.before+rotation+rotationTranslation.after}else{transformString+=rotation}this.el.style[transformProp]=transformString;this.dirty=false}return this},lookAt:function(target,update){var r=this.getLookAtEuler(target);this.setRotation(r);if(update!==false)this.update();return this},getLookAtEuler:function(target){var r={},dx=target.x-this.x,dy=target.y-this.y,dz=target.z-this.z;if(this.inverseLookAt){dx=-dx;dy=-dy;dz=-dz}if(dz===0)dz=.001;r.x=-Math.atan2(dy,dz);var flip=dz>0?1:-1;r.y=flip*Math.atan2(dx*Math.cos(r.x),dz*-flip);r.z=Math.atan2(Math.cos(r.x),Math.sin(r.x)*Math.sin(r.y))-Math.PI/2;if(MX.rotationUnit==="deg"){r.x=toDeg(r.x);r.y=toDeg(r.y);r.z=toDeg(r.z)}return r},add:function(){if(!this.el)return;var parent=this;Array.prototype.forEach.call(arguments,function(child){if(!child instanceof Object3D)return;parent.el.appendChild(child.el);if(!parent.children)parent.children=[];parent.children.push(child);child.parent=parent});return this},remove:function(){var parent=this;Array.prototype.forEach.call(arguments,function(child){var index=parent.children.indexOf(child);if(index!==-1){parent.children.splice(index,1);child.parent=undefined}});return this},addTo:function(target){if(typeof target==="string"){target=document.querySelector(target)}if(target instanceof HTMLElement&&target.appendChild){target.appendChild(this.el)}else if(target instanceof Object3D||target instanceof Scene){target.add(this)}return this},removeElement:function(){if(this.el.parentNode){this.el.parentNode.removeChild(this.el)}},setPosition:function(tar){this.x=tar.x||tar.x===0?tar.x:this.x;this.y=tar.y||tar.y===0?tar.y:this.y;this.z=tar.z||tar.z===0?tar.z:this.z},setRotation:function(tar){this.rotationX=tar.x||tar.x===0?tar.x:this.rotationX;this.rotationY=tar.y||tar.y===0?tar.y:this.rotationY;this.rotationZ=tar.z||tar.z===0?tar.z:this.rotationZ},setScale:function(tar){this.scaleX=tar.x||tar.x===0?tar.x:this.scaleX;this.scaleY=tar.y||tar.y===0?tar.y:this.scaleY;this.scaleZ=tar.z||tar.z===0?tar.z:this.scaleZ},setCSSTransformOrigin:function(origin){this.el&&(this.el.style[transformOriginProp]=addPrefix(origin));return this},setCSSTransformStyle:function(style){this.el&&(this.el.style[transformStyleProp]=addPrefix(style));return this},setCSSTransition:function(trans){this.el&&(this.el.style[transitionProp]=addPrefix(trans));return this},setCSSPerspective:function(pers){this.el&&(this.el.style[perspectiveProp]=addPrefix(pers));return this}};Object3D.extend=extend.bind(Object3D);function extend(props){var Super=this;var ExtendedObject3D=function(){Super.call(this);props.init&&props.init.apply(this,arguments)};ExtendedObject3D.prototype=Object.create(Super.prototype);for(var prop in props){if(props.hasOwnProperty(prop)&&prop!=="init"){ExtendedObject3D.prototype[prop]=props[prop]}}ExtendedObject3D.extend=extend.bind(ExtendedObject3D);return ExtendedObject3D}MX.Object3D=Object3D;MX.toRad=toRad;MX.toDeg=toDeg;Object.defineProperty(MX,"positionAtCenter",{get:function(){return positionAtCenter},set:function(val){if(typeof val!=="boolean")return;positionAtCenter=val;if(positionAtCenter){injectCenteringCSS()}else{removeCenteringCSS()}}});return MX}();
\ No newline at end of file diff --git a/public/assets/javascripts/mx/mx.minimap.js b/public/assets/javascripts/mx/mx.minimap.js new file mode 100644 index 0000000..252305c --- /dev/null +++ b/public/assets/javascripts/mx/mx.minimap.js @@ -0,0 +1,211 @@ +MX.Minimap = function () { + var canvas = document.createElement("canvas") + var ctx = canvas.getContext("2d") + var w = canvas.width = 200 + var h = canvas.height = 200 + + var gridSpace; + var zoom = 2.7 + + var gridStroke = '#ddd' + var boxFill = '#fff' + var boxStroke = '#000' + var playerColor = '#888' + + var xmin, xmax, ymin, ymax, xpos, ypos, scale, side; + + this.update = function(){ + this.draw() + } + + this.bounds = function(){ + gridSpace = Math.pow(10, ~~(zoom-0.5)+0.5) + side = Math.pow(10, zoom+1) + scale = w / side + xpos = -cam.x + ypos = cam.z + + xmin = side/-2 - xpos + xmax = side/2 - xpos + ymin = side/-2 - ypos + ymax = side/2 - ypos + } + + this.draw = function(){ + ctx.clearRect(0,0,w,h) + + ctx.fillStyle = "#fff" + ctx.fillRect(0,0,w,h) + this.bounds() + this.grid() + this.boxes() + this.player() + } + + this.grid = function(){ + ctx.strokeStyle = gridStroke + ctx.lineWidth = 1 + ctx.fillStyle = "transparent" + + var xmod = xmin-(xmin % gridSpace) + var ymod = ymin-(ymin % gridSpace) + + for (var x = xmin; x < xmax+gridSpace; x += gridSpace) { + var xline = (x-xmod) * scale + line(xline, 0, xline, h) + } + for (var y = ymin; y < ymax+gridSpace; y += gridSpace) { + var yline = (y-ymod) * scale + line(0, yline, w, yline) + } + + function line(x0,y0,x1,y1) { + ctx.beginPath() + ctx.moveTo(x0, y0) + ctx.lineTo(x1, y1) + ctx.stroke() + } + } + this.player = function(){ + ctx.save() + + ctx.translate(~~(w/2),~~(h/2)); + ctx.rotate(-cam.rotationY) + + var radius = 5 + + ctx.fillStyle = playerColor; + + ctx.beginPath(); + ctx.arc(0, 0, radius, 0, 2*Math.PI, false); + ctx.fill(); + + ctx.beginPath(); + ctx.moveTo(0,0) + ctx.lineTo(-radius,0) + ctx.lineTo(0,radius*3) + ctx.lineTo(radius,0) + ctx.moveTo(0,0) + ctx.fill() + + ctx.fillStyle = "transparent" + ctx.restore() + } + + this.boxes = function(){ + + ctx.save() + ctx.translate(~~(w/2),~~(h/2)); + ctx.lineWidth = 0.5 + var tx = ((-xpos) * scale), + ty = ((-ypos) * scale); + ctx.translate(tx, ty) + + scene.inner.children.forEach(function(obj){ + if (obj.type == "BoxDimensions") { + + ctx.save() + ctx.fillStyle = obj.color + ctx.strokeStyle = obj.borderColor + + var obj_scale = (obj.scale || 1) * scale + + var tx = ~~((obj.x) * obj_scale), + ty = ~~((obj.z) * obj_scale); + ctx.translate(-tx, ty) + ctx.rotate(-obj.rotationY) + + var ww = ~~(obj.width/2 * obj_scale) + var hh = ~~(obj.depth/2 * obj_scale) + ctx.beginPath(); + ctx.moveTo(ww, hh) + + ctx.lineTo(ww, -hh) + ctx.lineTo(-ww, -hh) + ctx.lineTo(-ww, hh) + ctx.closePath() + ctx.fill() + ctx.stroke() + ctx.restore() + } + if (obj.type == "Image") { + + ctx.save() + ctx.strokeStyle = "#444" + + var obj_scale = (obj.scale || 1) * scale + + var tx = ~~((obj.x) * obj_scale), + ty = ~~((obj.z) * obj_scale); + ctx.translate(-tx, ty) + ctx.rotate(-obj.rotationY) + + var ww = ~~(obj.width/2 * obj_scale) + ctx.beginPath(); + ctx.moveTo(ww, 0) + ctx.lineTo(-ww, 0) + ctx.closePath() + ctx.stroke() + ctx.restore() + } + }) + ctx.restore() + } + + var dragging = false, mx = 0, my = 0, mdx = 0, mdy = 0, cx, cy; + canvas.addEventListener("mousedown", function(e){ + e.stopPropagation() + var rect = canvas.getBoundingClientRect() + dragging = true; + mx = e.pageX - rect.left + my = e.pageY - rect.top + mdx = (mx - w/2) / scale + mdy = (my - h/2) / scale + cx = cam.x // -= mdx + cy = cam.z // += mdy + + minimap.update() + }) + document.addEventListener("mousemove", function(e){ + if (dragging) { + e.stopPropagation() + var rect = canvas.getBoundingClientRect() + var mnx = e.pageX - rect.left + var mny = e.pageY - rect.top + mdx = (mnx - mx) / scale + mdy = (mny - my) / scale + + cam.x = cx + mdx + cam.z = cy - mdy + minimap.update() + } + }) + document.addEventListener("mouseup", function(e){ + dragging = false; + }) + + canvas.addEventListener( 'mousewheel', onDocumentMouseWheel, false ); + canvas.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false); + function onDocumentMouseWheel (e) { + e.preventDefault() + e.stopPropagation() + // WebKit + if ( event.wheelDeltaY ) { + zoom -= event.wheelDeltaY * 0.0003; + } + // Opera / Explorer 9 + else if ( event.wheelDelta ) { + zoom -= event.wheelDelta * 0.0003; + } + // Firefox + else if ( event.detail ) { + zoom += event.detail * 0.01; + } + minimap.update() + } + + this.draw() + document.querySelector("#minimap .el").appendChild(canvas) + + return this; +}
\ No newline at end of file diff --git a/public/assets/javascripts/mx/mx.quaternion.js b/public/assets/javascripts/mx/mx.quaternion.js new file mode 100644 index 0000000..783f887 --- /dev/null +++ b/public/assets/javascripts/mx/mx.quaternion.js @@ -0,0 +1,414 @@ +/** + * quaternion taken from three.js + * @author mikael emtinger / http://gomo.se/ + * @author alteredq / http://alteredqualia.com/ + * @author WestLangley / http://github.com/WestLangley + * @author bhouston / http://exocortex.com + */ + +MX.Quaternion = function ( x, y, z, w ) { + + this._x = x || 0; + this._y = y || 0; + this._z = z || 0; + this._w = ( w !== undefined ) ? w : 1; + +}; + +MX.Quaternion.prototype = { + + constructor: MX.Quaternion, + + _x: 0,_y: 0, _z: 0, _w: 0, + + _euler: undefined, + + _updateEuler: function ( callback ) { + + if ( this._euler !== undefined ) { + + this._euler.setFromQuaternion( this, undefined, false ); + + } + + }, + + get x () { + + return this._x; + + }, + + set x ( value ) { + + this._x = value; + this._updateEuler(); + + }, + + get y () { + + return this._y; + + }, + + set y ( value ) { + + this._y = value; + this._updateEuler(); + + }, + + get z () { + + return this._z; + + }, + + set z ( value ) { + + this._z = value; + this._updateEuler(); + + }, + + get w () { + + return this._w; + + }, + + set w ( value ) { + + this._w = value; + this._updateEuler(); + + }, + + set: function ( x, y, z, w ) { + + this._x = x; + this._y = y; + this._z = z; + this._w = w; + + this._updateEuler(); + + return this; + + }, + + copy: function ( quaternion ) { + + this._x = quaternion._x; + this._y = quaternion._y; + this._z = quaternion._z; + this._w = quaternion._w; + + this._updateEuler(); + + return this; + + }, + + setFromEuler: function ( euler, update ) { + + if ( euler instanceof MX.Euler === false ) { + throw new Error( 'ERROR: Quaternion\'s .setFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code.' ); + } + + // http://www.mathworks.com/matlabcentral/fileexchange/ + // 20696-function-to-convert-between-dcm-euler-angles-quaternions-and-euler-vectors/ + // content/SpinCalc.m + + var c1 = Math.cos( euler._x / 2 ); + var c2 = Math.cos( euler._y / 2 ); + var c3 = Math.cos( euler._z / 2 ); + var s1 = Math.sin( euler._x / 2 ); + var s2 = Math.sin( euler._y / 2 ); + var s3 = Math.sin( euler._z / 2 ); + + this._x = s1 * c2 * c3 + c1 * s2 * s3; + this._y = c1 * s2 * c3 - s1 * c2 * s3; + this._z = c1 * c2 * s3 + s1 * s2 * c3; + this._w = c1 * c2 * c3 - s1 * s2 * s3; + + if ( update !== false ) this._updateEuler(); + + return this; + + }, + + setFromAxisAngle: function ( axis, angle ) { + + // from http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm + // axis have to be normalized + + var halfAngle = angle / 2, s = Math.sin( halfAngle ); + + this._x = axis.x * s; + this._y = axis.y * s; + this._z = axis.z * s; + this._w = Math.cos( halfAngle ); + + this._updateEuler(); + + return this; + + }, + + setFromRotationMatrix: function ( m ) { + + // http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToQuaternion/index.htm + + // assumes the upper 3x3 of m is a pure rotation matrix (i.e, unscaled) + + var te = m.elements, + + m11 = te[0], m12 = te[4], m13 = te[8], + m21 = te[1], m22 = te[5], m23 = te[9], + m31 = te[2], m32 = te[6], m33 = te[10], + + trace = m11 + m22 + m33, + s; + + if ( trace > 0 ) { + + s = 0.5 / Math.sqrt( trace + 1.0 ); + + this._w = 0.25 / s; + this._x = ( m32 - m23 ) * s; + this._y = ( m13 - m31 ) * s; + this._z = ( m21 - m12 ) * s; + + } else if ( m11 > m22 && m11 > m33 ) { + + s = 2.0 * Math.sqrt( 1.0 + m11 - m22 - m33 ); + + this._w = (m32 - m23 ) / s; + this._x = 0.25 * s; + this._y = (m12 + m21 ) / s; + this._z = (m13 + m31 ) / s; + + } else if ( m22 > m33 ) { + + s = 2.0 * Math.sqrt( 1.0 + m22 - m11 - m33 ); + + this._w = (m13 - m31 ) / s; + this._x = (m12 + m21 ) / s; + this._y = 0.25 * s; + this._z = (m23 + m32 ) / s; + + } else { + + s = 2.0 * Math.sqrt( 1.0 + m33 - m11 - m22 ); + + this._w = ( m21 - m12 ) / s; + this._x = ( m13 + m31 ) / s; + this._y = ( m23 + m32 ) / s; + this._z = 0.25 * s; + + } + + this._updateEuler(); + + return this; + + }, + + inverse: function () { + + this.conjugate().normalize(); + + return this; + + }, + + conjugate: function () { + + this._x *= -1; + this._y *= -1; + this._z *= -1; + + this._updateEuler(); + + return this; + + }, + + lengthSq: function () { + + return this._x * this._x + this._y * this._y + this._z * this._z + this._w * this._w; + + }, + + length: function () { + + return Math.sqrt( this._x * this._x + this._y * this._y + this._z * this._z + this._w * this._w ); + + }, + + normalize: function () { + + var l = this.length(); + + if ( l === 0 ) { + + this._x = 0; + this._y = 0; + this._z = 0; + this._w = 1; + + } else { + + l = 1 / l; + + this._x = this._x * l; + this._y = this._y * l; + this._z = this._z * l; + this._w = this._w * l; + + } + + return this; + + }, + + multiply: function ( q, p ) { + + if ( p !== undefined ) { + + console.warn( 'DEPRECATED: Quaternion\'s .multiply() now only accepts one argument. Use .multiplyQuaternions( a, b ) instead.' ); + return this.multiplyQuaternions( q, p ); + + } + + return this.multiplyQuaternions( this, q ); + + }, + + multiplyQuaternions: function ( a, b ) { + + // from http://www.euclideanspace.com/maths/algebra/realNormedAlgebra/quaternions/code/index.htm + + var qax = a._x, qay = a._y, qaz = a._z, qaw = a._w; + var qbx = b._x, qby = b._y, qbz = b._z, qbw = b._w; + + this._x = qax * qbw + qaw * qbx + qay * qbz - qaz * qby; + this._y = qay * qbw + qaw * qby + qaz * qbx - qax * qbz; + this._z = qaz * qbw + qaw * qbz + qax * qby - qay * qbx; + this._w = qaw * qbw - qax * qbx - qay * qby - qaz * qbz; + + this._updateEuler(); + + return this; + + }, + + multiplyVector3: function ( vector ) { + + console.warn( 'DEPRECATED: Quaternion\'s .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead.' ); + return vector.applyQuaternion( this ); + + }, + + slerp: function ( qb, t ) { + + var x = this._x, y = this._y, z = this._z, w = this._w; + + // http://www.euclideanspace.com/maths/algebra/realNormedAlgebra/quaternions/slerp/ + + var cosHalfTheta = w * qb._w + x * qb._x + y * qb._y + z * qb._z; + + if ( cosHalfTheta < 0 ) { + + this._w = -qb._w; + this._x = -qb._x; + this._y = -qb._y; + this._z = -qb._z; + + cosHalfTheta = -cosHalfTheta; + + } else { + + this.copy( qb ); + + } + + if ( cosHalfTheta >= 1.0 ) { + + this._w = w; + this._x = x; + this._y = y; + this._z = z; + + return this; + + } + + var halfTheta = Math.acos( cosHalfTheta ); + var sinHalfTheta = Math.sqrt( 1.0 - cosHalfTheta * cosHalfTheta ); + + if ( Math.abs( sinHalfTheta ) < 0.001 ) { + + this._w = 0.5 * ( w + this._w ); + this._x = 0.5 * ( x + this._x ); + this._y = 0.5 * ( y + this._y ); + this._z = 0.5 * ( z + this._z ); + + return this; + + } + + var ratioA = Math.sin( ( 1 - t ) * halfTheta ) / sinHalfTheta, + ratioB = Math.sin( t * halfTheta ) / sinHalfTheta; + + this._w = ( w * ratioA + this._w * ratioB ); + this._x = ( x * ratioA + this._x * ratioB ); + this._y = ( y * ratioA + this._y * ratioB ); + this._z = ( z * ratioA + this._z * ratioB ); + + this._updateEuler(); + + return this; + + }, + + equals: function ( quaternion ) { + + return ( quaternion._x === this._x ) && ( quaternion._y === this._y ) && ( quaternion._z === this._z ) && ( quaternion._w === this._w ); + + }, + + fromArray: function ( array ) { + + this._x = array[ 0 ]; + this._y = array[ 1 ]; + this._z = array[ 2 ]; + this._w = array[ 3 ]; + + this._updateEuler(); + + return this; + + }, + + toArray: function () { + + return [ this._x, this._y, this._z, this._w ]; + + }, + + clone: function () { + + return new MX.Quaternion( this._x, this._y, this._z, this._w ); + + } + +}; + +MX.Quaternion.slerp = function ( qa, qb, qm, t ) { + + return qm.copy( qa ).slerp( qb, t ); + +} diff --git a/public/assets/javascripts/mx/primitives/mx.box.js b/public/assets/javascripts/mx/primitives/mx.box.js new file mode 100644 index 0000000..dfe3f5e --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.box.js @@ -0,0 +1,62 @@ +MX.Box = MX.Object3D.extend({ + + // this will be called within the contructor + init: function (size, color, borderColor) { + + this.type = "Box" + + size = size || 100 + color = color || 'rgba(0, 255, 122, .1)' + borderColor = borderColor || '#0f3' + + // an Object3D's associated DOM node is the "el" property + this.el.classList.add('box') + + var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) + + var top = this.top = new MX.Object3D('.face') + top.rotationX = angle + top.y = size / 2 + + var bottom = this.bottom = new MX.Object3D('.face') + bottom.rotationX = -angle + bottom.y = -size / 2 + + var left = this.left = new MX.Object3D('.face') + left.rotationY = -angle + left.x = -size / 2 + + var right = this.right = new MX.Object3D('.face') + right.rotationY = angle + right.x = size / 2 + + var front = this.front = new MX.Object3D('.face') + front.z = -size / 2 + + var back = this.back = new MX.Object3D('.face') + back.rotationY = angle * 2 + back.z = size / 2 + + // adding children, must also be instances of Object3D + this.add(top, bottom, left, right, front, back) + + this.children.forEach(function (face) { + face.width = size - 2 + face.height = size - 2 + face.el.style.backgroundColor = color + face.el.style.border = '1px solid ' + borderColor + }) + + // this applies the updated CSS style + // required for any change to take effect + // when a parent object's update() is called + // all its children will be updated as well + this.update() + + // if this object's children won't move by themselves + this.updateChildren = false + } + + // other properties will be mixed into the prototype of the new constructor + +})
\ No newline at end of file diff --git a/public/assets/javascripts/mx/primitives/mx.boxDimensions.js b/public/assets/javascripts/mx/primitives/mx.boxDimensions.js new file mode 100644 index 0000000..f3edb13 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.boxDimensions.js @@ -0,0 +1,154 @@ +MX.BoxDimensions = MX.Object3D.extend({ + + // this will be called within the contructor + init: function (opt) { + + var base = this + + this.type = "BoxDimensions" + + var id = this.id = opt.id || guid() + this.x = opt.x || 0 + this.y = opt.y || 0 + this.z = opt.z || 0 + // this.scale = opt.scale || 1 + var scale = opt.scale || 1 + this.rotationX = opt.rotationX || 0 + this.rotationY = opt.rotationY || 0 + this.rotationZ = opt.rotationZ || 0 + var width = this.width = opt.width || 100 + var height = this.height = opt.height || 100 + var depth = this.depth = opt.depth || 100 + var color = this.color = opt.color || 'rgba(0, 255, 122, .1)' + var backgroundImage = this.backgroundImage = opt.backgroundImage; + var borderColor = this.borderColor = opt.borderColor || '#0f3' + var borderWidth = this.borderWidth = typeof opt.borderWidth !== 'undefined' ? opt.borderWidth : 3; + var borderRadius = this.borderRadius = typeof opt.borderRadius !== 'undefined' ? opt.borderRadius : undefined; + var sides = this.sides = opt.sides || "top bottom left right front back" + var className = this.className = opt.className || null + + // an Object3D's associated DOM node is the "el" property + this.el.classList.add('box') + + var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) + + this.top = this.bottom = this.left = this.right = this.front = this.back = null + if (-1 != sides.indexOf("top")) { + var top = this.top = new MX.Object3D('.face.top') + top.rotationX = angle + top.width = width + top.height = depth + top.y = height * scale + top.scale = scale + this.add(top) + } + if (-1 != sides.indexOf("bottom")) { + var bottom = this.bottom = new MX.Object3D('.face.bottom') + bottom.rotationX = -angle + bottom.width = width + bottom.height = depth + bottom.y = 0 + bottom.scale = scale + this.add(bottom) + } + if (-1 != sides.indexOf("left")) { + var left = this.left = new MX.Object3D('.face.left') + left.rotationY = -angle + left.width = depth + left.height = height + left.x = -width/2 * scale + left.y = height/2 * scale + left.scale = scale + this.add(left) + } + if (-1 != sides.indexOf("right")) { + var right = this.right = new MX.Object3D('.face.right') + right.rotationY = angle + right.width = depth + right.height = height + right.x = width/2 * scale + right.y = height/2 * scale + right.scale = scale + this.add(right) + } + if (-1 != sides.indexOf("front")) { + var front = this.front = new MX.Object3D('.face.front') + front.width = width + front.height = height + front.z = -depth/2 * scale + front.y = height/2 * scale + front.scale = scale + this.add(front) + } + if (-1 != sides.indexOf("back")) { + var back = this.back = new MX.Object3D('.face.back') + back.width = width + back.height = height + back.rotationY = angle * 2 + back.z = depth/2 * scale + back.y = height/2 * scale + back.scale = scale + this.add(back) + } + + this.children.forEach(function (face) { + if (borderRadius) { + face.el.style.borderRadius = borderRadius + "px" + } + if (className) { + face.el.classList.add(className) + } + else { + if (backgroundImage) { + face.el.style.backgroundImage = "url(" + backgroundImage + ")" + } + else if (color) { + face.el.style.backgroundColor = color + } + if (borderWidth) { + face.el.style.border = borderWidth + 'px solid ' + borderColor + } + } + }) + + // bottom.el.style.border = "0" + + // this applies the updated CSS style + // required for any change to take effect + // when a parent object's update() is called + // all its children will be updated as well + this.update() + + // if this object's children won't move by themselves + this.updateChildren = true + + this.setWidth = function(w){ + base.width = top.width = bottom.width = front.width = back.width = w + left.x = -w/2 + right.x = w/2 + base.dirty = true + } + this.setHeight = function(h){ + base.height = left.height = right.height = front.height = back.height = h + bottom.y = 0 + left.y = right.y = front.y = back.y = h/2 + top.y = h + base.dirty = true + } + this.setDepth = function(d){ + base.depth = top.height = bottom.height = left.width = right.width = d + front.z = -d/2 + back.z = d/2 + base.dirty = true + } + + }, + + toString: function(){ + var params = "id width height depth x y z rotationX rotationY scale color borderColor borderWidth backgroundImage borderRadius sides".split(" ") + return this.__toString(params) + }, + + // other properties will be mixed into the prototype of the new constructor + +})
\ No newline at end of file diff --git a/public/assets/javascripts/mx/primitives/mx.coords.js b/public/assets/javascripts/mx/primitives/mx.coords.js new file mode 100644 index 0000000..80b148c --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.coords.js @@ -0,0 +1,61 @@ +MX.Coords = (function () { + + var colors = { + x: '#f33', + y: '#3f3', + z: '#66f' + } + + var Axis = MX.Object3D.extend({ + init: function (axis, size) { + + var label = document.createElement('span') + label.textContent = axis.toUpperCase() + label.style.position = 'absolute' + label.style.right = '0px' + label.style.bottom = '3px' + label.style.fontSize = Math.round(size / 10) + 'px' + this.el.appendChild(label) + + var faceA = new MX.Object3D(), + faceB = new MX.Object3D() + faceA.rotationX = 90 + this.add(faceA, faceB) + + this.el.style.color = + faceA.el.style.backgroundColor = + faceB.el.style.backgroundColor = colors[axis] + + this.width = + faceA.width = + faceB.width = size + + this.height = + faceA.height = + faceB.height = Math.round(size / 100) + + var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) + + if (axis === 'y') { + this.rotationZ = -angle + } else if (axis === 'z') { + this.rotationY = angle + } + } + }) + + var Coords = MX.Object3D.extend({ + init: function (size) { + size = size || 100 + var x = new Axis('x', size), + y = new Axis('y', size), + z = new Axis('z', size) + this.add(x, y, z) + this.update() + this.updateChildren = false + } + }) + + return Coords + +})()
\ No newline at end of file diff --git a/public/assets/javascripts/mx/primitives/mx.cutout.js b/public/assets/javascripts/mx/primitives/mx.cutout.js new file mode 100644 index 0000000..9d9043f --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.cutout.js @@ -0,0 +1,66 @@ +MX.Cutout = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Cutout" + + var layer = this + layer.width = 0 + layer.height = 0 + + if (ops.src) this.loadTexture(ops) + + if (ops.texture) { + } + else if (ops.classname) { + layer.el.classList.add(ops.classname) + } + else { + } + layer.el.style.backgroundRepeat = 'no-repeat' + + this.dirty = true + this.updateChildren = true + this.update() + }, + + loadTexture: function(ops){ + var layer = this + var image = new Image() + var pattern = ops.pattern + var texture = ops.texture + + image.onload = function(){ + var canvas = document.createElement("canvas") + var ctx = canvas.getContext('2d') + + layer.width = canvas.width = image.naturalWidth + layer.height = canvas.height = image.naturalHeight + + ctx.drawImage(image, 0, 0, canvas.width, canvas.height) + ctx.globalCompositeOperation = "source-in" + + if (texture) { + ctx.fillStyle = ctx.createPattern(texture, 'repeat') + ctx.fillRect(0, 0, canvas.width, canvas.height) + } + if (pattern) { + ctx.fillStyle = ctx.createPattern(pattern, 'repeat') + ctx.fillRect(0, 0, canvas.width, canvas.height) + } + + layer.scale = ops.scale || 1 + layer.x = ops.x || 0 + layer.y = (ops.y || 0) + layer.height/2 + 1 + layer.z = ops.z || 0 + layer.rotationX = ops.rotationX || 0 + layer.rotationY = ops.rotationY || 0 + layer.el.appendChild(canvas) + + layer.el.classList.add('image') + ops.className && layer.el.classList.add(ops.className) + layer.dirty = true + layer.update() + } + image.src = ops.src; + } +}) diff --git a/public/assets/javascripts/mx/primitives/mx.face.js b/public/assets/javascripts/mx/primitives/mx.face.js new file mode 100644 index 0000000..ac47ab4 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.face.js @@ -0,0 +1,41 @@ +MX.Face = MX.Object3D.extend({ + + // this will be called within the contructor + init: function (size, color, borderColor) { + + size = size || 100 + color = color || 'rgba(0, 255, 122, .1)' + borderColor = borderColor || '#0f3' + + // an Object3D's associated DOM node is the "el" property + this.el.classList.add('face') + + var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) + + var top = this.top = new MX.Object3D('.face') + top.rotationX = angle + top.y = size / 2 + + // adding children, must also be instances of Object3D + this.add(top) + + this.children.forEach(function (face) { + face.width = size - 2 + face.height = size - 2 + face.el.style.backgroundColor = color + face.el.style.border = '1px solid ' + borderColor + }) + + // this applies the updated CSS style + // required for any change to take effect + // when a parent object's update() is called + // all its children will be updated as well + this.update() + + // if this object's children won't move by themselves + this.updateChildren = false + } + + // other properties will be mixed into the prototype of the new constructor + +}) diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js new file mode 100644 index 0000000..d1e292d --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -0,0 +1,69 @@ +MX.Image = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Image" + + var layer = this + layer.width = 0 + layer.height = 0 + layer.x = ops.x || 0 + layer.y = ops.y || 0 + layer.z = ops.z || 0 + layer.backface = ops.backface || false + + if (layer.backface) { + layer.el.classList.add("backface-visible") + } + + if (ops.src) { + this.loadTexture(ops) + } + + if (ops.className) { + layer.el.classList.add(ops.className) + } + layer.el.style.backgroundRepeat = 'no-repeat' + + this.dirty = true + this.updateChildren = true + this.update() + }, + + loadTexture: function(ops){ + var layer = this + layer.ops = defaults(ops, layer.ops) + var image = new Image() + image.onload = function(){ + layer.scale = layer.ops.scale || 1 + layer.width = image.naturalWidth + layer.height = image.naturalHeight + layer.x = layer.ops.x || 0 + layer.y = (layer.ops.y || 0) + layer.scale * layer.height/2 + 1 + layer.z = layer.ops.z || 0 + layer.rotationX = layer.ops.rotationX || 0 + layer.rotationY = layer.ops.rotationY || 0 + layer.rotationZ = layer.ops.rotationZ || 0 + layer.el.style.backgroundImage = "url(" + image.src + ")" + layer.el.classList.add('image') + layer.dirty = true + layer.update() + } + image.src = ops.src; + }, + + move: function(ops){ + var layer = this + layer.ops = defaults(ops, layer.ops) + for (var i in ops) { + layer[i] = ops[i] + } + layer.dirty = true + layer.update() + }, + + toString: function(){ + var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ") + return this.__toString(params) + }, + +}) diff --git a/public/assets/javascripts/mx/primitives/mx.scaleBox.js b/public/assets/javascripts/mx/primitives/mx.scaleBox.js new file mode 100644 index 0000000..77f45e9 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.scaleBox.js @@ -0,0 +1,140 @@ +MX.ScaleBox = MX.Object3D.extend({ + + // this will be called within the contructor + init: function (opt) { + + var base = this + + this.type = "ScaleBox" + + var id = this.id = opt.id || guid() + this.x = opt.x || 0 + this.y = opt.y || 0 + this.z = opt.z || 0 + this.rotationX = opt.rotationX || 0 + this.rotationY = opt.rotationY || 0 + this.rotationZ = opt.rotationZ || 0 + var scale = this.scale = opt.scale || 1 + var width = this.width = scale * (opt.width || 100) + var height = this.height = scale * (opt.height || 100) + var depth = this.depth = scale * (opt.depth || 100) + var color = this.color = opt.color || 'rgba(0, 255, 122, .1)' + var sides = this.sides = opt.sides || "top bottom left right front back" + + // an Object3D's associated DOM node is the "el" property + this.el.classList.add('box') + + var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) + + var top = this.top = new MX.Object3D('.face.top') + top.rotationX = angle + top.width = 1 + top.height = 1 + top.scaleX = width + top.scaleY = 1 + top.scaleZ = depth + top.y = height + + var bottom = this.bottom = new MX.Object3D('.face.bottom') + bottom.rotationX = -angle + bottom.width = 1 + bottom.height = 1 + bottom.scaleX = width + bottom.scaleY = 1 + bottom.scaleZ = depth + bottom.y = 0 + + var left = this.left = new MX.Object3D('.face.left') + left.rotationY = -angle + left.width = 1 + left.height = 1 + left.scaleX = 1 + left.scaleY = height + left.scaleZ = depth + left.x = -width/2 + left.y = height/2 + + var right = this.right = new MX.Object3D('.face.right') + right.rotationY = angle + right.width = 1 + right.height = 1 + right.scaleX = 1 + right.scaleY = height + right.scaleZ = depth + right.x = width/2 + right.y = height/2 + + var front = this.front = new MX.Object3D('.face.front') + front.width = 1 + front.height = 1 + front.scaleX = width + front.scaleY = height + front.scaleZ = 1 + front.z = -depth/2 + front.y = height/2 + + var back = this.back = new MX.Object3D('.face.back') + back.width = 1 + back.height = 1 + back.scaleX = width + back.scaleY = height + back.scaleZ = 1 + back.rotationY = angle * 2 + back.z = depth/2 + back.y = height/2 + + // adding children, must also be instances of Object3D + if (-1 != sides.indexOf("top")) this.add(top) + if (-1 != sides.indexOf("bottom")) this.add(bottom) + if (-1 != sides.indexOf("left")) this.add(left) + if (-1 != sides.indexOf("right")) this.add(right) + if (-1 != sides.indexOf("front")) this.add(front) + if (-1 != sides.indexOf("back")) this.add(back) + + this.children.forEach(function (face) { + face.el.style.backgroundColor = color + }) + + // this applies the updated CSS style + // required for any change to take effect + // when a parent object's update() is called + // all its children will be updated as well + this.update() + + // if this object's children won't move by themselves + this.updateChildren = true + + this.setWidth = function(w){ + base.width = top.width = bottom.width = front.width = back.width = w + left.x = -w/2 + right.x = w/2 + base.dirty = true + } + this.setHeight = function(h){ + base.height = left.height = right.height = front.height = back.height = h + bottom.y = 0 + left.y = right.y = front.y = back.y = h/2 + top.y = h + base.dirty = true + } + this.setDepth = function(d){ + base.depth = top.height = bottom.height = left.width = right.width = d + front.z = -d/2 + back.z = d/2 + base.dirty = true + } + + }, + + toString: function(){ + var params = "id width height depth x y z rotationX rotationY color sides".split(" ") + return this.__toString(params) + }, + + clone: function(){ + return new MX[this.type] (this) + } + + // other properties will be mixed into the prototype of the new constructor + +}) diff --git a/public/assets/javascripts/mx/primitives/mx.tableau.js b/public/assets/javascripts/mx/primitives/mx.tableau.js new file mode 100644 index 0000000..514e206 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.tableau.js @@ -0,0 +1,48 @@ + + +var Tableau = function(){ + this.extend = extend.bind(Tableau) + + function extend (props) { + var Super = this + var ExtendedTableau = function () { + Super.call(this) + props.init && props.init.apply(this, arguments) + } + ExtendedTableau.prototype = Object.create(Tableau.prototype) + for (var prop in props) { + if (props.hasOwnProperty(prop) && prop !== 'init') { + ExtendedTableau.prototype[prop] = props[prop] + } + } + ExtendedTableau.extend = extend.bind(ExtendedTableau) + return ExtendedTableau + } +} + +Tableau.prototype.init = function(opt){} +Tableau.prototype.animate = function(t){} +Tableau.prototype.show = function(){} +Tableau.prototype.hide = function(){} + +MX.Tableau = new Tableau() +MX.Tableaux = {} + +/* + +MX.Tableaux.Foo = MX.Tableau.extend({ + // this will be called within the contructor + init: function (opt) { + }, + + show: function(){ + }, + + hide: function(){ + }, + + animate: function() { + } +}) + +*/ diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js new file mode 100644 index 0000000..0c278a9 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -0,0 +1,34 @@ +MX.Text = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Text" + + var layer = new MX.Object3D('text') + layer.width = ops.width || 100 + layer.height = ops.height || 50 + layer.x = ops.x || 0 + layer.y = ops.y || 0 + layer.z = ops.z || 0 + layer.scale = ops.scale || 1 + layer.el.innerHTML = ops.value || "" + if (ops.id) layer.el.id = ops.id; + if (ops.background) layer.el.style.background = ops.background; + if (ops.color) layer.el.style.color = ops.color; + if (ops.fontSize) layer.el.style.fontSize = ops.fontSize + "px"; + + this.add(layer) + + this.children.forEach(function (c, i) { + if (ops.classname) { + c.el.classList.add(ops.classname) + } + else { + } + c.el.style.backgroundRepeat = 'no-repeat' + }) + + this.dirty = true + this.updateChildren = true + this.update() + } +}) diff --git a/public/assets/javascripts/mx/primitives/mx.texturedBox.js b/public/assets/javascripts/mx/primitives/mx.texturedBox.js new file mode 100644 index 0000000..daec2d8 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.texturedBox.js @@ -0,0 +1,121 @@ +// Creates a box using a given texture image. +// Uses a texture image like this: +// +// ---------- ---------- +// | | | +// | top | bottom | +// | | | +// ---------- ---------- ---------- ---------- +// | | | | | +// | left | front | right | back | +// | | | | | +// ---------- ---------- ---------- ---------- +// +// See `examples/images/skins/` for some minecraft skin examples. + +// Options: +// +// - {number} `width` +// - {number} `height` +// - {number} `depth` +// - {string} `texture` path to texture image +// - {string} `classname` class to be added to dom element + +MX.TexturedBox = MX.Object3D.extend({ + + init: function (ops) { + + this.type = "TexturedBox" + + if (!ops.width || !ops.height || !ops.depth || (!ops.texture && !ops.classname)) { + console.warn('TextureBox: missing arguments') + return + } + + // faces + var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2), + offsetX = ops.offset ? (ops.offset.x || 0) : 0, + offsetY = ops.offset ? (ops.offset.y || 0) : 0, + overlap = ops.overlap ? ops.overlap : 0 + var multiTexture = typeof ops.texture == "object"; + + var top = this.top = new MX.Object3D() + top.width = ops.width + top.height = ops.depth + top.rotationX = angle + top.y = ops.height / 2 - overlap + if (!multiTexture) + top.el.style.backgroundPosition = + (-(offsetX + ops.depth) + 'px ') + + (-offsetY + 'px') + + var bottom = this.bottom = new MX.Object3D() + bottom.width = ops.width + bottom.height = ops.depth + bottom.rotationX = -angle + bottom.y = -ops.height / 2 + overlap + if (!multiTexture) + bottom.el.style.backgroundPosition = + (-(offsetX + ops.depth + ops.width) + 'px ') + + (-offsetY + 'px') + + var left = this.left = new MX.Object3D() + left.width = ops.depth + left.height = ops.height + left.rotationY = -angle + left.x = -ops.width / 2 + overlap + if (!multiTexture) + left.el.style.backgroundPosition = + (-offsetX + 'px ') + + (-(offsetY + ops.depth) + 'px') + + var right = this.right = new MX.Object3D() + right.width = ops.depth + right.height = ops.height + right.rotationY = angle + right.x = ops.width / 2 - overlap + if (!multiTexture) + right.el.style.backgroundPosition = + (-(offsetX + ops.depth + ops.width) + 'px ') + + (-(offsetY + ops.depth) + 'px') + + var front = this.front = new MX.Object3D() + front.width = ops.width + front.height = ops.height + front.z = -ops.depth / 2 + overlap + if (!multiTexture) + front.el.style.backgroundPosition = + (-(offsetX + ops.depth) + 'px ') + + (-(offsetY + ops.depth) + 'px') + + var back = this.back = new MX.Object3D() + back.width = ops.width + back.height = ops.height + back.rotationY = angle * 2 + back.z = ops.depth / 2 - overlap + if (!multiTexture) + back.el.style.backgroundPosition = + (-(offsetX + ops.depth * 2 + ops.width) + 'px ') + + (-(offsetY + ops.depth) + 'px') + + this.add(top, bottom, left, right, front, back) + + this.children.forEach(function (c,i) { + if (multiTexture) { + c.el.style.backgroundImage = 'url(' + ops.texture[i] + ')' + } + else if (ops.texture) { + c.el.style.backgroundImage = 'url(' + ops.texture + ')' + } + if (ops.classname) { + c.el.classList.add(ops.classname) + } + c.el.style.backgroundRepeat = 'no-repeat' + }) + + this.update() + this.updateChildren = false + + } + +}) |