summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/javascripts/app.js57
-rw-r--r--assets/javascripts/environments/app.js2
-rw-r--r--assets/javascripts/rectangles/_env.js18
-rw-r--r--assets/javascripts/rectangles/builder.js31
-rw-r--r--assets/javascripts/rectangles/clipper.js (renamed from assets/javascripts/rectangles/app.js)53
-rw-r--r--assets/javascripts/rectangles/draw.js2
-rw-r--r--assets/javascripts/rectangles/rect.js58
-rw-r--r--assets/javascripts/util.js34
-rw-r--r--assets/javascripts/vendor/polyfill.js80
-rw-r--r--editor.html1
-rw-r--r--rectangles.html50
11 files changed, 264 insertions, 122 deletions
diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
index 862ea62..05f7455 100644
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@@ -1,61 +1,4 @@
-
-// Check if supports 3D transforms
-function has3d(){
- var el = $('<p>')[0], $iframe = $('<iframe>'), has3d, t,
- transforms = {
- 'webkitTransform': '-webkit-transform',
- 'OTransform': '-o-transform',
- 'msTransform': '-ms-transform',
- 'transform': 'transform'
- };
-
- // Add it to the body to get the computed style
- // Sandbox it inside an iframe to avoid Android Browser quirks
- $iframe.appendTo('body').contents().find('body').append( el );
-
- for (t in transforms) {
- if (el.style[t] !== undefined) {
- el.style[t] = 'translate3d(1px,1px,1px)';
- has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
- }
- }
-
- $iframe.remove();
-
- return has3d !== undefined && has3d.length > 0 && has3d !== "none";
-}
-
-
-
-// Identify browser based on useragent string
-(function( ua ) {
- ua = ua.toLowerCase();
- var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
- /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
- /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
- /(msie) ([\w.]+)/.exec( ua ) ||
- ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
- [];
- var matched = {
- browser: match[ 1 ] || "",
- version: match[ 2 ] || "0"
- };
- browser = {};
- if ( matched.browser ) {
- browser[ matched.browser ] = true;
- browser.version = matched.version;
- }
- // Chrome is Webkit, but Webkit is also Safari.
- if ( browser.chrome ) {
- browser.webkit = true;
- } else if ( browser.webkit ) {
- browser.safari = true;
- }
- $.browser = browser;
- return browser;
-})( navigator.userAgent );
-
var is_iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i));
var is_ipad = (navigator.userAgent.match(/iPad/i));
var is_android = (navigator.userAgent.match(/Android/i))
diff --git a/assets/javascripts/environments/app.js b/assets/javascripts/environments/app.js
index 9070881..4a4ccd6 100644
--- a/assets/javascripts/environments/app.js
+++ b/assets/javascripts/environments/app.js
@@ -12,7 +12,7 @@ environment.init = function(){
"rotationX": 0.085,
"rotationY": 0.025
})
- map && map.zoom(2.50) && map.recenter()
+ map && map.zoom(3.00) && map.recenter()
//
// intro floor, models, etc
diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
new file mode 100644
index 0000000..aa7af50
--- /dev/null
+++ b/assets/javascripts/rectangles/_env.js
@@ -0,0 +1,18 @@
+
+var environment = new function(){}
+environment.init = function(){
+ scene.camera.move({
+ "x": 0,
+ "y": 0,
+ "z": -1000,
+ "rotationX": 0.085,
+ "rotationY": 0.025
+ })
+ map && map.zoom(3.00) && map.recenter()
+
+ clipper.init()
+ scene.update()
+}
+environment.update = function(t){
+}
+
diff --git a/assets/javascripts/rectangles/builder.js b/assets/javascripts/rectangles/builder.js
new file mode 100644
index 0000000..1c576a5
--- /dev/null
+++ b/assets/javascripts/rectangles/builder.js
@@ -0,0 +1,31 @@
+var builder = new function(){
+ var base = this
+ base.tube = new Tube ()
+
+ var els = []
+
+ base.tube.on("clipper:update", rebuild)
+
+ function rebuild(){
+ clear()
+ build()
+ }
+ function build (){
+ clipper.regions.forEach(function(r){
+ var walls = r.walls()
+ walls.forEach(function(el){
+ els.push(el)
+ scene.add(el)
+ })
+ })
+ }
+ function clear (){
+ els.forEach(function(el){
+ scene.remove(el)
+ })
+ els = []
+ }
+
+}
+
+
diff --git a/assets/javascripts/rectangles/app.js b/assets/javascripts/rectangles/clipper.js
index 071dfe8..8cefca3 100644
--- a/assets/javascripts/rectangles/app.js
+++ b/assets/javascripts/rectangles/clipper.js
@@ -1,6 +1,7 @@
-window.ctx = window.rects = window.regions = window.w = window.h = null;
+window.ctx = window.w = window.h = null;
-var app = new function(){
+var clipper = new function(){
+ var base = this
var canvas = document.createElement("canvas")
var ctx = window.ctx = canvas.getContext("2d")
var w = window.w = canvas.width = 500
@@ -8,7 +9,7 @@ var app = new function(){
var regions = []
document.querySelector("#map").appendChild(canvas)
- function init(){
+ base.init = function (){
bind()
animate()
}
@@ -18,14 +19,15 @@ var app = new function(){
if (modified) {
solve_rects()
+ builder.tube("clipper:update")
}
draw_ruler()
- draw_regions(regions)
+ draw_regions(base.regions)
draw_mouse(mouse)
z = false
}
- var rects = window.rects = [
+ var rects = base.rects = [
new rect(100,100, 300,300),
new rect(200,200, 400,400),
]
@@ -48,13 +50,13 @@ var app = new function(){
// console.log(intersects)
if (intersects.length){
- app.dragging = intersects[0]
+ clipper.dragging = intersects[0]
}
else {
- app.creating = true
+ clipper.creating = true
}
- if (e.shiftKey && app.dragging) {
- app.dragging.quantize(10)
+ if (e.shiftKey && clipper.dragging) {
+ clipper.dragging.quantize(10)
}
})
canvas.addEventListener("mousemove", function(e){
@@ -71,11 +73,11 @@ var app = new function(){
mouse.x.b = x
mouse.y.b = y
- if (app.dragging) {
- app.dragging.translation.a = mouse.x.magnitude()
- app.dragging.translation.b = mouse.y.magnitude()
+ if (clipper.dragging) {
+ clipper.dragging.translation.a = mouse.x.magnitude()
+ clipper.dragging.translation.b = mouse.y.magnitude()
}
- else if (app.creating) {
+ else if (clipper.creating) {
mouse.x.b = x
mouse.y.b = y
}
@@ -85,28 +87,28 @@ var app = new function(){
}
})
document.addEventListener("mouseup", function(e){
- if (app.creating) {
+ if (clipper.creating) {
if (mouse.height() != 0 && mouse.width() != 0) {
rects.push(mouse.normalize())
}
}
- if (app.dragging) {
- app.dragging.normalize()
+ if (clipper.dragging) {
+ clipper.dragging.normalize()
}
mouse = new rect(e.pageX, e.pageY)
- app.creating = app.dragging = false
+ clipper.creating = clipper.dragging = false
modified = true
})
}
function solve_rects(){
- rects = sort_rects_by_position(rects)
+ var rects = sort_rects_by_position(base.rects)
for (var i = 0; i < rects.length; i++) {
rects[i].id = i
rects[i].reset()
}
- regions = []
+ var regions = []
var left, right
for (var i = 0; i < rects.length; i++) {
@@ -159,19 +161,16 @@ var app = new function(){
}
}
- regions = sort_rects_by_position(regions)
+ base.regions = sort_rects_by_position(regions)
modified = false
// document.getElementById("intersects").innerHTML = sort_rects_by_position(regions).join("<br>")
}
- // generate floor and ceiling for some regions
- // generate walls from surviving regions
- // generate ceiling-walls where ceiling has discontinuity
+ // generate floor and ceiling for some regions
+ // generate walls from surviving regions
+ // generate ceiling-walls where ceiling has discontinuity
-
- this.init = init
- return this
+ return base
}
-app.init()
diff --git a/assets/javascripts/rectangles/draw.js b/assets/javascripts/rectangles/draw.js
index 2785544..8786b0b 100644
--- a/assets/javascripts/rectangles/draw.js
+++ b/assets/javascripts/rectangles/draw.js
@@ -37,7 +37,7 @@ function draw_mouse(mouse){
ctx.fill();
if (mouse.width() != 0 && mouse.height() != 0) {
- if (app.dragging) {
+ if (clipper.dragging) {
mouse.stroke()
}
else {
diff --git a/assets/javascripts/rectangles/rect.js b/assets/javascripts/rectangles/rect.js
index 866727f..67abdee 100644
--- a/assets/javascripts/rectangles/rect.js
+++ b/assets/javascripts/rectangles/rect.js
@@ -181,6 +181,64 @@ window.rect = (function(){
return splits
}
+ rect.prototype.walls = function(){
+ var list = [], el = null
+
+ var width = this.x.length()
+ var depth = this.y.length()
+ var height = 800
+
+ if (this.sides & FRONT) {
+ el = wall('.face.front')
+ el.scaleX = width
+ el.scaleY = height
+ el.z = this.y.a - depth/2
+ el.x = this.x.a
+ el.y = height/2
+ list.push(el)
+ }
+ if (this.sides & LEFT) {
+ el = wall('.face.left')
+ el.rotationY = -HALF_PI
+ el.scaleY = height
+ el.scaleZ = depth
+ el.x = this.x.a - width/2
+ el.z = this.y.a
+ el.y = height/2
+ list.push(el)
+ }
+ if (this.sides & RIGHT) {
+ el = wall('.face.right')
+ el.rotationY = HALF_PI
+ el.scaleY = height
+ el.scaleZ = depth
+ el.x = this.x.a + width/2
+ el.y = height/2
+ el.z = this.y.a
+ list.push(el)
+ }
+ if (this.sides & BACK) {
+ var el = wall('.face.back')
+ el.scaleX = width
+ el.scaleY = height
+ el.rotationY = PI
+ el.z = this.y.a + depth/2
+ el.y = height/2
+ el.x = this.x.a
+ list.push(el)
+ }
+
+ function wall(klass){
+ var el = new MX.Object3D(klass || ".face")
+ el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1
+ el.z = el.y = el.x = 0
+ el.type = "Face"
+ return el
+ }
+
+ return list
+ }
+
return rect
})()
diff --git a/assets/javascripts/util.js b/assets/javascripts/util.js
index 81103aa..c56131d 100644
--- a/assets/javascripts/util.js
+++ b/assets/javascripts/util.js
@@ -12,6 +12,7 @@ var E = Math.E
var PI = Math.PI
var PHI = (1+Math.sqrt(5))/2
var TWO_PI = PI*2
+var HALF_PI = PI/2
var LN10 = Math.LN10
function clamp(n,a,b){ return n<a?a:n<b?n:b }
function norm(n,a,b){ return (n-a) / (b-a) }
@@ -112,6 +113,14 @@ function weave(a){
reverse(aa[1]).forEach(function(el){ b.push(el) })
return b
}
+function range(m,n,s){
+ var a = []
+ s = s || 1
+ for (var i = m; i <= n; i += s) {
+ a.push(i)
+ }
+ return a
+}
var guid_syllables = "iz az ez or iv ex baz el lo lum ot un no".split(" ")
var guid_n = 0
@@ -139,28 +148,3 @@ function smarten(a) {
a = a.replace(/--/g, "\u2014"); // em-dashes
return a
};
-
-(function() {
- var lastTime = 0;
- var vendors = ['ms', 'moz', 'webkit', 'o'];
- 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'];
- }
-
- if (!window.requestAnimationFrame)
- window.requestAnimationFrame = function(callback, element) {
- var currTime = new Date().getTime();
- var timeToCall = Math.max(0, 16 - (currTime - lastTime));
- var id = window.setTimeout(function() { callback(currTime + timeToCall); },
- timeToCall);
- lastTime = currTime + timeToCall;
- return id;
- };
-
- if (!window.cancelAnimationFrame)
- window.cancelAnimationFrame = function(id) {
- clearTimeout(id);
- };
-}());
diff --git a/assets/javascripts/vendor/polyfill.js b/assets/javascripts/vendor/polyfill.js
new file mode 100644
index 0000000..f97e438
--- /dev/null
+++ b/assets/javascripts/vendor/polyfill.js
@@ -0,0 +1,80 @@
+// Check if supports 3D transforms
+function has3d(){
+ var el = $('<p>')[0], $iframe = $('<iframe>'), has3d, t,
+ transforms = {
+ 'webkitTransform': '-webkit-transform',
+ 'OTransform': '-o-transform',
+ 'msTransform': '-ms-transform',
+ 'transform': 'transform'
+ };
+
+ // Add it to the body to get the computed style
+ // Sandbox it inside an iframe to avoid Android Browser quirks
+ $iframe.appendTo('body').contents().find('body').append( el );
+
+ for (t in transforms) {
+ if (el.style[t] !== undefined) {
+ el.style[t] = 'translate3d(1px,1px,1px)';
+ has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
+ }
+ }
+
+ $iframe.remove();
+
+ return has3d !== undefined && has3d.length > 0 && has3d !== "none";
+}
+
+// Identify browser based on useragent string
+(function( ua ) {
+ ua = ua.toLowerCase();
+ var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
+ /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
+ /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
+ /(msie) ([\w.]+)/.exec( ua ) ||
+ ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
+ [];
+ var matched = {
+ browser: match[ 1 ] || "",
+ version: match[ 2 ] || "0"
+ };
+ browser = {};
+ if ( matched.browser ) {
+ browser[ matched.browser ] = true;
+ browser.version = matched.version;
+ }
+ // Chrome is Webkit, but Webkit is also Safari.
+ if ( browser.chrome ) {
+ browser.webkit = true;
+ } else if ( browser.webkit ) {
+ browser.safari = true;
+ }
+ $.browser = browser;
+ return browser;
+})( navigator.userAgent );
+
+
+// rAF shim
+(function() {
+ var lastTime = 0;
+ var vendors = ['ms', 'moz', 'webkit', 'o'];
+ 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'];
+ }
+
+ if (!window.requestAnimationFrame)
+ window.requestAnimationFrame = function(callback, element) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+ timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+
+ if (!window.cancelAnimationFrame)
+ window.cancelAnimationFrame = function(id) {
+ clearTimeout(id);
+ };
+}());
diff --git a/editor.html b/editor.html
index b522478..3655551 100644
--- a/editor.html
+++ b/editor.html
@@ -24,6 +24,7 @@
<script src="assets/javascripts/vendor/tween.js"></script>
<script src="assets/javascripts/vendor/tube.js"></script>
<script src="assets/javascripts/vendor/loader.js"></script>
+<script src="assets/javascripts/vendor/polyfill.js"></script>
<script src="assets/javascripts/mx/mx.js"></script>
<script src="assets/javascripts/mx/mx.quaternion.js"></script>
<script src="assets/javascripts/mx/mx.minimap.js"></script>
diff --git a/rectangles.html b/rectangles.html
index d64e30b..99862de 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -9,23 +9,42 @@ body > div {
#info {
padding: 30px;
}
+#hud {
+ position: absolute;
+ top:0;left:0;
+ z-index: 10;
+}
+.face {
+ background-color: #fff;
+}
</style>
</head>
<body>
+ <div id="bg"></div>
+ <div id="scene"></div>
-<div id="map"></div>
-<div id="info">
- <select id="palette">
- <option>colors</option>
- <option>redblue</option>
- <option>gray</option>
- <option selected>alpha</option>
- </select>
- <div id="intersects"></div>
-</div>
+ <div id="hud">
+ <div id="map" style="display: block">
+ </div>
+ <div id="info">
+ <select id="palette">
+ <option>colors</option>
+ <option>redblue</option>
+ <option>gray</option>
+ <option selected>alpha</option>
+ </select>
+ <div id="intersects"></div>
+ </div>
+ </div>
+
</body>
+<script src="assets/javascripts/vendor/jquery.min.js"></script>
+<script type="text/javascript" src="assets/javascripts/vendor/tube.js"></script>
+<script type="text/javascript" src="assets/javascripts/vendor/loader.js"></script>
+<script type="text/javascript" src="assets/javascripts/vendor/polyfill.js"></script>
<script type="text/javascript" src="assets/javascripts/util.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/_env.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/colors.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/debug.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/tree.js"></script>
@@ -33,5 +52,14 @@ body > div {
<script type="text/javascript" src="assets/javascripts/rectangles/vec2.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/draw.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/sort.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/app.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/builder.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/clipper.js"></script>
+
+<script src="assets/javascripts/mx/mx.js"></script>
+<script src="assets/javascripts/mx/mx.quaternion.js"></script>
+<script src="assets/javascripts/mx/extensions/mx.scene.js"></script>
+<script src="assets/javascripts/mx/extensions/mx.movements.js"></script>
+<script src="assets/javascripts/mx/primitives/mx.scaleBox.js"></script>
+<script src="assets/javascripts/app.js"></script>
+
</html>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 18:28:28 +0000