summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/javascripts/rectangles/_env.js10
-rw-r--r--assets/javascripts/rectangles/engine/clipper.js2
-rw-r--r--assets/javascripts/rectangles/map/_map.js31
-rw-r--r--assets/javascripts/rectangles/map/draw.js130
-rw-r--r--assets/javascripts/rectangles/map/ui.js33
-rw-r--r--assets/javascripts/rectangles/models/room.js1
-rw-r--r--assets/javascripts/rectangles/util/debug.js6
-rw-r--r--assets/javascripts/rectangles/util/sort.js51
-rw-r--r--rectangles-canvas-only.html9
-rw-r--r--rectangles.html1
10 files changed, 163 insertions, 111 deletions
diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
index dbdaf5c..9df73c2 100644
--- a/assets/javascripts/rectangles/_env.js
+++ b/assets/javascripts/rectangles/_env.js
@@ -33,10 +33,16 @@ environment.init = function(){
builder.init()
clipper.init()
window.scene && scene.update()
+ environment.update()
}
environment.update = function(t){
- map.center.a = scene.camera.x
- map.center.b = -scene.camera.z
+ if (window.scene && scene.camera) {
+ map.center.a = scene.camera.x
+ map.center.b = -scene.camera.z
+ }
+ else {
+ requestAnimationFrame(environment.update)
+ }
map.animate()
z = false
}
diff --git a/assets/javascripts/rectangles/engine/clipper.js b/assets/javascripts/rectangles/engine/clipper.js
index 2ca8444..d6eb618 100644
--- a/assets/javascripts/rectangles/engine/clipper.js
+++ b/assets/javascripts/rectangles/engine/clipper.js
@@ -32,7 +32,6 @@ var clipper = new function(){
if (base.rooms.length == 0) return;
for (var i = 0; i < base.rooms.length; i++) {
- base.rooms[i].id = i
base.rooms[i].reset()
}
@@ -92,6 +91,7 @@ var clipper = new function(){
}
}
+ base.rooms = sort_rooms_by_id(rooms)
base.regions = sort_rects_by_position(regions)
}
diff --git a/assets/javascripts/rectangles/map/_map.js b/assets/javascripts/rectangles/map/_map.js
new file mode 100644
index 0000000..833df7a
--- /dev/null
+++ b/assets/javascripts/rectangles/map/_map.js
@@ -0,0 +1,31 @@
+/*
+*/
+
+window.ctx = window.w = window.h = null;
+
+var map = new function(){
+ var base = this
+ base.bounds = new vec2(500,500)
+ base.center = new vec2(0,0)
+
+ var canvas = document.createElement("canvas")
+ var ctx = window.ctx = canvas.getContext("2d")
+ var w = window.w = canvas.width = 500
+ var h = window.h = canvas.height = 500
+ document.querySelector("#map").appendChild(canvas)
+
+ base.animate = function(){
+ ctx.save()
+ map.draw.clear_canvas()
+ map.draw.ruler()
+
+ ctx.translate( map.center.a + map.bounds.a/2, map.center.b + map.bounds.b/2 )
+ ctx.scale( -1, 1 )
+
+ map.draw.regions(clipper.regions)
+ map.draw.mouse(map.ui.mouse.cursor)
+
+ ctx.restore()
+ }
+
+}
diff --git a/assets/javascripts/rectangles/map/draw.js b/assets/javascripts/rectangles/map/draw.js
index 40bb483..8a0649a 100644
--- a/assets/javascripts/rectangles/map/draw.js
+++ b/assets/javascripts/rectangles/map/draw.js
@@ -1,66 +1,80 @@
-function clear_canvas(){
- ctx.fillStyle = "rgba(255,255,255,0.7)"
- ctx.clearRect(0,0,w,h)
- ctx.fillRect(0,0,w,h)
-}
-function draw_ruler(){
- ctx.strokeStyle = "rgba(80,80,80,0.5)"
- ctx.lineWidth = 1
- var len = 5
- for (var i = 0.5; i < w; i += 10) {
- line(i, 0, i, len)
- line(0, i, len, i)
+
+map.draw = new function(){
+
+ var base = this
+
+ base.clear_canvas = function (){
+ ctx.fillStyle = "rgba(255,255,255,0.7)"
+ ctx.clearRect(0,0,w,h)
+ ctx.fillRect(0,0,w,h)
}
-}
-function line (x,y,a,b,translation){
- if (translation) {
- x += translation.a
- a += translation.a
- y += translation.b
- b += translation.b
+
+ base.ruler = function (){
+ ctx.strokeStyle = "rgba(80,80,80,0.5)"
+ ctx.lineWidth = 1
+ var len = 5
+ for (var i = 0.5; i < w; i += 10) {
+ line(i, 0, i, len)
+ line(0, i, len, i)
+ }
}
- ctx.beginPath()
- ctx.moveTo(x,y)
- ctx.lineTo(a,b)
- ctx.stroke()
-}
-function draw_regions(regions){
- for (var i = 0; i < regions.length; i++) {
- if (regions[i].dupe) continue
- ctx.fillStyle = colors[i % colors.length]
- fill_region(regions[i])
- stroke_sides(regions[i])
+
+ base.regions = function(regions){
+ for (var i = 0; i < regions.length; i++) {
+ if (regions[i].dupe) continue
+ ctx.fillStyle = colors[i % colors.length]
+ fill_region(regions[i])
+ stroke_sides(regions[i])
+ }
}
-}
-function draw_mouse(mouse){
- ctx.fillStyle = "rgba(255,0,0,0.4)";
- ctx.beginPath();
- ctx.arc(mouse.x.b, mouse.y.b, 5, 0, 2*Math.PI, false);
- ctx.fill();
- if (mouse.width() != 0 && mouse.height() != 0) {
- if (map.ui.dragging) {
- stroke_rect(mouse)
+ base.mouse = function(mouse){
+ ctx.fillStyle = "rgba(255,0,0,0.4)";
+ ctx.beginPath();
+ ctx.arc(mouse.x.b, mouse.y.b, 5, 0, 2*Math.PI, false);
+ ctx.fill();
+
+ if (mouse.width() != 0 && mouse.height() != 0) {
+ if (map.ui.dragging) {
+ stroke_rect(mouse)
+ }
+ else {
+ ctx.fillStyle = "rgba(255,255,0,0.5)"
+ fill_region( mouse.clone().translate() )
+ }
}
- else {
- ctx.fillStyle = "rgba(255,255,0,0.5)"
- fill_region( mouse.clone().translate() )
+ }
+
+ //
+
+ function line (x,y,a,b,translation){
+ if (translation) {
+ x += translation.a
+ a += translation.a
+ y += translation.b
+ b += translation.b
}
+ ctx.beginPath()
+ ctx.moveTo(x,y)
+ ctx.lineTo(a,b)
+ ctx.stroke()
+ }
+
+ 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 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)
-}
+ function stroke_rect (r){
+ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation)
+ }
+} \ No newline at end of file
diff --git a/assets/javascripts/rectangles/map/ui.js b/assets/javascripts/rectangles/map/ui.js
index 0c90388..cc9a560 100644
--- a/assets/javascripts/rectangles/map/ui.js
+++ b/assets/javascripts/rectangles/map/ui.js
@@ -1,35 +1,6 @@
-/*
-*/
-
-window.ctx = window.w = window.h = null;
-
-var map = new function(){
- var base = this
- base.bounds = new vec2(500,500)
- base.center = new vec2(0,0)
-
- var canvas = document.createElement("canvas")
- var ctx = window.ctx = canvas.getContext("2d")
- var w = window.w = canvas.width = 500
- var h = window.h = canvas.height = 500
- document.querySelector("#map").appendChild(canvas)
-
- base.animate = function(){
- ctx.save()
- clear_canvas()
- draw_ruler()
-
- ctx.translate( map.center.a + map.bounds.a/2, map.center.b + map.bounds.b/2 )
- ctx.scale( -1, 1 )
-
- draw_regions(clipper.regions)
- draw_mouse(map.ui.mouse.cursor)
-
- ctx.restore()
- }
-}
map.ui = new function(){
+
var base = this
base.el = document.querySelector("#map")
@@ -50,6 +21,8 @@ map.ui = new function(){
},
})
+ //
+
function down (e, cursor){
cursor.x.add( map.center.a + map.bounds.a/2 )
cursor.y.add( -map.center.b - map.bounds.b/2 )
diff --git a/assets/javascripts/rectangles/models/room.js b/assets/javascripts/rectangles/models/room.js
index 8c9d67d..a9d6936 100644
--- a/assets/javascripts/rectangles/models/room.js
+++ b/assets/javascripts/rectangles/models/room.js
@@ -23,7 +23,6 @@ window.room = (function(){
// for each of this rect's regions split the region if necessary
var regions = this.regions
var splits
-
for (var i = 0, len = regions.length; i < len; i++) {
if (regions[i] && regions[i].intersects(r)) {
splits = regions[i].split(r)
diff --git a/assets/javascripts/rectangles/util/debug.js b/assets/javascripts/rectangles/util/debug.js
index 437abb8..924c816 100644
--- a/assets/javascripts/rectangles/util/debug.js
+++ b/assets/javascripts/rectangles/util/debug.js
@@ -1,2 +1,8 @@
+/*
+ on mousedown, z := true
+
+ if (z) // log stuff
+*/
+
window.z = true;
document.body.addEventListener("mousedown", function(){ z = true })
diff --git a/assets/javascripts/rectangles/util/sort.js b/assets/javascripts/rectangles/util/sort.js
index 8ece95f..673b3cc 100644
--- a/assets/javascripts/rectangles/util/sort.js
+++ b/assets/javascripts/rectangles/util/sort.js
@@ -1,12 +1,4 @@
-function sort_rooms_by_position(list){
- return list.sort(function(a,b){
- return compare_rect_position(a.rect, b.rect)
- })
-}
-function sort_rects_by_position(list){
- return list.sort(compare_rect_position)
-}
function compare_rect_position(a,b){
if (a.x.a < b.x.a) {
@@ -24,14 +16,39 @@ function compare_rect_position(a,b){
return 0
}
+function compare_rect_area (a,b){
+ if (a[0] < b[0]) {
+ return 1
+ }
+ if (a[0] > b[0]) {
+ return -1
+ }
+ return 0
+}
+
+
+function sort_rooms_by_id(list){
+ return list.sort(function(a,b){
+ return a.id < b.id ? -1 : a.id == b.id ? 0 : 1
+ })
+}
+function sort_rooms_by_position(list){
+ return list.sort(function(a,b){
+ return compare_rect_position(a.rect, b.rect)
+ })
+}
+function sort_rooms_by_area(list){
+ return list.map(function(r){ return [r.rect.area(), r] })
+ .sort(compare_rect_area)
+ .map(function(r){ return r[1] })
+}
+
+
+function sort_rects_by_position(list){
+ return list.sort(compare_rect_position)
+}
function sort_rects_by_area(list){
- return list.map(function(r){ return [r.area(), r] }).sort(function(a,b){
- if (a[0] < b[0]) {
- return 1
- }
- if (a[0] > b[0]) {
- return -1
- }
- return 0
- }).map(function(r){ return r[1] })
+ return list.map(function(r){ return [r.area(), r] })
+ .sort(compare_rect_area)
+ .map(function(r){ return r[1] })
}
diff --git a/rectangles-canvas-only.html b/rectangles-canvas-only.html
index 3157a7f..4cb030b 100644
--- a/rectangles-canvas-only.html
+++ b/rectangles-canvas-only.html
@@ -36,10 +36,10 @@ body > div {
<div id="info">
<select id="palette">
- <option>colors</option>
+ <option selected>colors</option>
<option>redblue</option>
<option>gray</option>
- <option selected>alpha</option>
+ <option>alpha</option>
</select>
<div id="intersects"></div>
</div>
@@ -62,6 +62,11 @@ body > div {
<script type="text/javascript" src="assets/javascripts/rectangles/models/room.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/models/rect.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/models/vec2.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/builder.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/clipper.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/_map.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/ui.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/draw.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/map/ui.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/map/draw.js"></script>
diff --git a/rectangles.html b/rectangles.html
index 4c1334a..535e366 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -66,6 +66,7 @@ body > div {
<script type="text/javascript" src="assets/javascripts/rectangles/models/vec2.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/engine/builder.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/engine/clipper.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/_map.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/map/ui.js"></script>
<script type="text/javascript" src="assets/javascripts/rectangles/map/draw.js"></script>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 21:58:40 +0000