summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/javascripts/rectangles/_env.js6
-rw-r--r--assets/javascripts/rectangles/builder.js76
-rw-r--r--assets/javascripts/rectangles/draw.js26
-rw-r--r--assets/javascripts/rectangles/rect.js93
-rw-r--r--assets/javascripts/rectangles/room.js9
-rw-r--r--rectangles-mx.html76
-rw-r--r--rectangles.html16
7 files changed, 189 insertions, 113 deletions
diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
index e2e8e31..b70b333 100644
--- a/assets/javascripts/rectangles/_env.js
+++ b/assets/javascripts/rectangles/_env.js
@@ -1,14 +1,13 @@
var environment = new function(){}
environment.init = function(){
- scene.camera.move({
+ window.scene && scene.camera.move({
"x": 240,
"y": -1000,
"z": 240,
"rotationX": -PI/2,
"rotationY": 0 // PI
})
- map && map.zoom(3.00) && map.recenter()
clipper.rects.push( new rect(100,100, 200,300) )
clipper.rects.push( new rect(200,300, 300,500) )
@@ -16,8 +15,9 @@ environment.init = function(){
clipper.rects.push( new rect(300,100, 600,300) )
clipper.rects.push( new rect(400,200, 700,400) )
+ builder.init()
clipper.init()
- scene.update()
+ window.scene && scene.update()
}
environment.update = function(t){
}
diff --git a/assets/javascripts/rectangles/builder.js b/assets/javascripts/rectangles/builder.js
index b25bd59..09040a8 100644
--- a/assets/javascripts/rectangles/builder.js
+++ b/assets/javascripts/rectangles/builder.js
@@ -3,8 +3,15 @@ var builder = new function(){
base.tube = new Tube ()
var els = []
-
- base.tube.on("clipper:update", rebuild)
+
+ base.init = function(){
+ base.bind()
+ }
+
+ base.bind = function(){
+ base.tube.on("clipper:update", rebuild)
+ }
+
base.wheel = new wheel({
el: document.querySelector("#map"),
update: function(e, val, delta){
@@ -13,13 +20,14 @@ var builder = new function(){
})
function rebuild(){
- clear()
- build()
+ if (window.scene) {
+ clear()
+ build()
+ }
}
function build (){
clipper.regions.forEach(function(r){
- var walls = r.walls()
- walls.forEach(function(el){
+ walls(r).forEach(function(el){
els.push(el)
scene.add(el)
})
@@ -32,6 +40,60 @@ var builder = new function(){
els = []
}
-}
+ function walls (r){
+ var list = [], el = null
+
+ var width = r.x.length()
+ var depth = r.y.length()
+ var height = 500
+ if (r.sides & FRONT) {
+ el = wall('.front')
+ el.width = width
+ el.height = height
+ el.x = r.x.a + width/2
+ el.z = r.y.a
+ list.push(el)
+ }
+ if (r.sides & BACK) {
+ var el = wall('.back')
+ el.width = width
+ el.height = height
+ el.rotationY = PI
+ el.x = r.x.b - width/2
+ el.z = r.y.b
+ list.push(el)
+ }
+ if (r.sides & LEFT) {
+ el = wall('.left')
+ el.rotationY = -HALF_PI
+ el.height = height
+ el.width = depth
+ el.x = r.x.a
+ el.z = r.y.a + depth/2
+ list.push(el)
+ }
+ if (r.sides & RIGHT) {
+ el = wall('.right')
+ el.rotationY = HALF_PI
+ el.height = height
+ el.width = depth
+ el.x = r.x.b
+ el.z = r.y.b - depth/2
+ list.push(el)
+ }
+
+ function wall(klass){
+ var el = new MX.Object3D(".face" + (klass || ""))
+ el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1
+ el.z = el.y = el.x = 0
+ el.y = height/2
+ el.type = "Face"
+ return el
+ }
+
+ return list
+ }
+
+}
diff --git a/assets/javascripts/rectangles/draw.js b/assets/javascripts/rectangles/draw.js
index 560c281..eb3dece 100644
--- a/assets/javascripts/rectangles/draw.js
+++ b/assets/javascripts/rectangles/draw.js
@@ -1,5 +1,6 @@
function clear_canvas(){
- ctx.fillStyle = "#fff"
+ ctx.fillStyle = "rgba(255,255,255,0.7)"
+ ctx.clearRect(0,0,w,h)
ctx.fillRect(0,0,w,h)
}
function draw_ruler(){
@@ -27,7 +28,8 @@ function draw_regions(regions){
for (var i = 0; i < regions.length; i++) {
if (regions[i].dupe) continue
ctx.fillStyle = colors[i % colors.length]
- regions[i].fill().stroke_sides()
+ fill_region(regions[i])
+ stroke_sides(regions[i])
}
}
function draw_mouse(mouse){
@@ -38,11 +40,27 @@ function draw_mouse(mouse){
if (mouse.width() != 0 && mouse.height() != 0) {
if (clipper.dragging) {
- mouse.stroke()
+ stroke_rect(mouse)
}
else {
ctx.fillStyle = "rgba(255,255,0,0.5)"
- mouse.clone().translate().fill()
+ fill_region( mouse.clone().translate() )
}
}
}
+
+function fill_region(r){
+ ctx.fillRect(r.x.a + r.translation.a,
+ r.y.a + r.translation.b,
+ r.x.length(),
+ r.y.length())
+}
+function stroke_sides (r){
+ if (r.sides & FRONT) line(r.x.a, r.y.a, r.x.b, r.y.a)
+ if (r.sides & BACK) line(r.x.a, r.y.b, r.x.b, r.y.b)
+ if (r.sides & LEFT) line(r.x.a, r.y.a, r.x.a, r.y.b)
+ if (r.sides & RIGHT) line(r.x.b, r.y.a, r.x.b, r.y.b)
+}
+function stroke_rect (r){
+ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation)
+}
diff --git a/assets/javascripts/rectangles/rect.js b/assets/javascripts/rectangles/rect.js
index 5f3a211..1d402cd 100644
--- a/assets/javascripts/rectangles/rect.js
+++ b/assets/javascripts/rectangles/rect.js
@@ -1,6 +1,6 @@
-window.rect = (function(){
- var FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8
+var FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8
+window.rect = (function(){
var rect = function (x0,y0,x1,y1){
if (x0 instanceof vec2) {
this.x = x0
@@ -42,38 +42,6 @@ window.rect = (function(){
}
rect.prototype.width = function(){ return this.x.length() }
rect.prototype.height = function(){ return this.y.length() }
- rect.prototype.fill = function(){
- // if (! this.sides) return this
- ctx.fillRect(this.x.a + this.translation.a, this.y.a + this.translation.b, this.x.length(), this.y.length())
- return this
- }
- rect.prototype.stroke_sides = function(){
- if (this.sides & FRONT) line(this.x.a, this.y.a, this.x.b, this.y.a)
- if (this.sides & BACK) line(this.x.a, this.y.b, this.x.b, this.y.b)
- if (this.sides & LEFT) line(this.x.a, this.y.a, this.x.a, this.y.b)
- if (this.sides & RIGHT) line(this.x.b, this.y.a, this.x.b, this.y.b)
-
- function line(a,b,c,d){
- ctx.beginPath()
- ctx.moveTo(a,b)
- ctx.lineTo(c,d)
- ctx.stroke()
- }
- return this
- }
- rect.prototype.stroke = function(){
- ctx.beginPath()
- ctx.moveTo(this.x.a, this.y.a)
- ctx.lineTo(this.x.b, this.y.b)
- ctx.stroke()
- return this
- }
- rect.prototype.perimeter = function(){
- line( this.x.a, this.y.a, this.x.b, this.y.a, this.translation )
- line( this.x.a, this.y.b, this.x.b, this.y.b, this.translation )
- line( this.x.a, this.y.a, this.x.a, this.y.b, this.translation )
- line( this.x.b, this.y.a, this.x.b, this.y.b, this.translation )
- }
rect.prototype.toString = function(){
var sides = ""
if (this.sides & FRONT) sides += "front "
@@ -180,63 +148,6 @@ 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 = 500
-
- if (this.sides & FRONT) {
- el = wall('.face.front')
- el.width = width
- el.height = height
- el.x = this.x.a + width/2
- el.z = this.y.a
- list.push(el)
- }
- if (this.sides & BACK) {
- var el = wall('.face.back')
- el.width = width
- el.height = height
- el.rotationY = PI
- el.x = this.x.b - width/2
- el.z = this.y.b
- list.push(el)
- }
-
- if (this.sides & LEFT) {
- el = wall('.face.left')
- el.rotationY = -HALF_PI
- el.height = height
- el.width = depth
- el.x = this.x.a
- el.z = this.y.a + depth/2
- list.push(el)
- }
-
- if (this.sides & RIGHT) {
- el = wall('.face.right')
- el.rotationY = HALF_PI
- el.height = height
- el.width = depth
- el.x = this.x.b
- el.z = this.y.b - depth/2
- 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.y = height/2
- el.type = "Face"
- return el
- }
-
- return list
- }
return rect
diff --git a/assets/javascripts/rectangles/room.js b/assets/javascripts/rectangles/room.js
new file mode 100644
index 0000000..cc7af8f
--- /dev/null
+++ b/assets/javascripts/rectangles/room.js
@@ -0,0 +1,9 @@
+window.room = (function(){
+
+ var room = function (x0,y0,x1,y1){
+ }
+
+
+
+
+})()
diff --git a/rectangles-mx.html b/rectangles-mx.html
new file mode 100644
index 0000000..e06534b
--- /dev/null
+++ b/rectangles-mx.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css">
+<style type="text/css">
+body { background: #fff; }
+body > div {
+ float: left;
+}
+#info {
+ padding: 30px;
+}
+#hud {
+ position: absolute;
+ top:0;left:0;
+ z-index: 10;
+}
+.face {
+ background-color: #fff;
+}
+.front { background-color: #ddd; }
+.back { background-color: #bbb; }
+.left { background-color: #aaa; }
+.right { background-color: #888; }
+#map canvas {
+ border-bottom: 2px solid #ddd;
+ border-right: 2px solid #ddd;
+}
+</style>
+</head>
+<body>
+ <div id="bg"></div>
+ <div id="scene"></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>
+<script type="text/javascript" src="assets/javascripts/rectangles/rect.js"></script>
+<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/wheel.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>
diff --git a/rectangles.html b/rectangles.html
index 3a1b8e2..7d17ad7 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -22,11 +22,13 @@ body > div {
.back { background-color: #bbb; }
.left { background-color: #aaa; }
.right { background-color: #888; }
+#map canvas {
+ border-bottom: 2px solid #ddd;
+ border-right: 2px solid #ddd;
+}
</style>
</head>
<body>
- <div id="bg"></div>
- <div id="scene"></div>
<div id="hud">
<div id="map" style="display: block">
@@ -49,6 +51,7 @@ body > div {
<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>
@@ -61,11 +64,8 @@ body > div {
<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>
+<script>
+ environment.init()
+</script>
</html>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-12 07:16:43 +0000