From f7c1b3e023b9c323401d44e28c9736f98da98122 Mon Sep 17 00:00:00 2001
From: slweeb <91897291+slweeb@users.noreply.github.com>
Date: Tue, 25 Nov 2025 21:57:38 -0500
Subject: [PATCH 1/3] borders.js
---
mod-list.html | 3 +++
mods/borders.js | 56 +++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 59 insertions(+)
create mode 100644 mods/borders.js
diff --git a/mod-list.html b/mod-list.html
index bbe0402d..5ffc9e13 100644
--- a/mod-list.html
+++ b/mod-list.html
@@ -132,6 +132,7 @@
| Official |
| alchemy.js | Start with only 4 elements and unlock more by reacting them together (Most are not possible) | R74n |
| background_changer.js | Press 'B' to change canvas background to a URL | R74n |
+| borders.js | Black borders around pixels (Use bright background) | R74n |
| building.js | Building generators and materials | R74n |
| classic_explosives.js | Re-adds 4 explosives removed in v1.9.3 | R74n |
| classic_textures.js | Use textures from early versions of the game | R74n |
@@ -415,6 +416,8 @@
| Visual Effects |
| acid_and_shapes.js | Weird visual effects enabled in settings | Alice |
| asciiboxels.js | Renders pixels as ASCII characters | Nekonico |
+| background_changer.js | Press 'B' to change canvas background to a URL | R74n |
+| borders.js | Black borders around pixels (Use bright background) | R74n |
| clouds.js | Moving clouds, sky.js recommended | RedBirdly |
| customBackground.js | Set your background to an image link | Jayd |
| fast_lightmap.js | Light sources glow, but faster | RedBirdly |
diff --git a/mods/borders.js b/mods/borders.js
new file mode 100644
index 00000000..fdf314b3
--- /dev/null
+++ b/mods/borders.js
@@ -0,0 +1,56 @@
+viewInfo[1].pre = function(ctx) {
+ currentPixels.forEach(pixel => {
+ if (!elements[pixel.element].movable) return;
+ let edge = false;
+ for (var i = 0; i < adjacentCoords.length; i++) {
+ var coords = adjacentCoords[i];
+ var x = pixel.x + coords[0];
+ var y = pixel.y + coords[1];
+ if (isEmpty(x,y)) {
+ // if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
+ edge = true;
+ break;
+ }
+ }
+ if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x-0.5,pixel.y-0.5,2);
+ })
+}
+
+let oldPixelRenderer = viewInfo[1].pixel;
+
+viewInfo[1].pixel = function(pixel, ctx) {
+ if (elements[pixel.element].movable) return oldPixelRenderer(pixel, ctx);
+ let edge = false;
+ for (var i = 0; i < adjacentCoords.length; i++) {
+ var coords = adjacentCoords[i];
+ var x = pixel.x + coords[0];
+ var y = pixel.y + coords[1];
+ if (isEmpty(x,y) || (!outOfBounds(x,y) &&
+ elements[pixelMap[x][y].element].movable
+ )) {
+ // if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
+ edge = true;
+ break;
+ }
+ }
+ if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x,pixel.y);
+ else oldPixelRenderer(pixel, ctx);
+}
+
+// viewInfo[1].post = function(ctx) {
+// currentPixels.forEach(pixel => {
+// let edge = false;
+// for (var i = 0; i < adjacentCoords.length; i++) {
+// var coords = adjacentCoords[i];
+// var x = pixel.x + coords[0];
+// var y = pixel.y + coords[1];
+// if (!isEmpty(x,y,true) && elements[pixelMap[x][y].element].movable !== elements[pixel.element].movable) {
+// // if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
+// edge = true;
+// break;
+// }
+// }
+// if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x-0.5,pixel.y-0.5,2);
+// })
+// }
+
From 8100e2ab0dc33815df91a982f370479bed76c483 Mon Sep 17 00:00:00 2001
From: slweeb <91897291+slweeb@users.noreply.github.com>
Date: Tue, 25 Nov 2025 21:59:59 -0500
Subject: [PATCH 2/3] Update borders.js
---
mods/borders.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/mods/borders.js b/mods/borders.js
index fdf314b3..7f69cbd8 100644
--- a/mods/borders.js
+++ b/mods/borders.js
@@ -1,6 +1,6 @@
viewInfo[1].pre = function(ctx) {
currentPixels.forEach(pixel => {
- if (!elements[pixel.element].movable) return;
+ if (elements[pixel.element].movable !== true || elements[pixel.element].isGas === true) return;
let edge = false;
for (var i = 0; i < adjacentCoords.length; i++) {
var coords = adjacentCoords[i];
From b9e61a75857f97680abe3c9aeb4f9cb957c92bb9 Mon Sep 17 00:00:00 2001
From: slweeb <91897291+slweeb@users.noreply.github.com>
Date: Tue, 25 Nov 2025 22:02:54 -0500
Subject: [PATCH 3/3] Update borders.js
---
mods/borders.js | 90 ++++++++++++++++++++++++++-----------------------
1 file changed, 47 insertions(+), 43 deletions(-)
diff --git a/mods/borders.js b/mods/borders.js
index 7f69cbd8..a55500c4 100644
--- a/mods/borders.js
+++ b/mods/borders.js
@@ -1,56 +1,60 @@
-viewInfo[1].pre = function(ctx) {
- currentPixels.forEach(pixel => {
- if (elements[pixel.element].movable !== true || elements[pixel.element].isGas === true) return;
+window.addEventListener("load", () => {
+ let oldPreRenderer = viewInfo[1].pre;
+ let oldPixelRenderer = viewInfo[1].pixel;
+ viewInfo[1].pre = function(ctx) {
+ if (oldPreRenderer) oldPreRenderer(ctx);
+ currentPixels.forEach(pixel => {
+ if (elements[pixel.element].movable !== true || elements[pixel.element].isGas === true) return;
+ let edge = false;
+ for (var i = 0; i < adjacentCoords.length; i++) {
+ var coords = adjacentCoords[i];
+ var x = pixel.x + coords[0];
+ var y = pixel.y + coords[1];
+ if (isEmpty(x,y)) {
+ // if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
+ edge = true;
+ break;
+ }
+ }
+ if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x-0.5,pixel.y-0.5,2);
+ })
+ }
+
+ viewInfo[1].pixel = function(pixel, ctx) {
+ if (elements[pixel.element].movable) return oldPixelRenderer(pixel, ctx);
let edge = false;
for (var i = 0; i < adjacentCoords.length; i++) {
var coords = adjacentCoords[i];
var x = pixel.x + coords[0];
var y = pixel.y + coords[1];
- if (isEmpty(x,y)) {
+ if (isEmpty(x,y) || (!outOfBounds(x,y) &&
+ elements[pixelMap[x][y].element].movable
+ )) {
// if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
edge = true;
break;
}
}
- if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x-0.5,pixel.y-0.5,2);
- })
-}
-
-let oldPixelRenderer = viewInfo[1].pixel;
-
-viewInfo[1].pixel = function(pixel, ctx) {
- if (elements[pixel.element].movable) return oldPixelRenderer(pixel, ctx);
- let edge = false;
- for (var i = 0; i < adjacentCoords.length; i++) {
- var coords = adjacentCoords[i];
- var x = pixel.x + coords[0];
- var y = pixel.y + coords[1];
- if (isEmpty(x,y) || (!outOfBounds(x,y) &&
- elements[pixelMap[x][y].element].movable
- )) {
- // if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
- edge = true;
- break;
- }
+ if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x,pixel.y);
+ else oldPixelRenderer(pixel, ctx);
}
- if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x,pixel.y);
- else oldPixelRenderer(pixel, ctx);
-}
+
+ // viewInfo[1].post = function(ctx) {
+ // currentPixels.forEach(pixel => {
+ // let edge = false;
+ // for (var i = 0; i < adjacentCoords.length; i++) {
+ // var coords = adjacentCoords[i];
+ // var x = pixel.x + coords[0];
+ // var y = pixel.y + coords[1];
+ // if (!isEmpty(x,y,true) && elements[pixelMap[x][y].element].movable !== elements[pixel.element].movable) {
+ // // if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
+ // edge = true;
+ // break;
+ // }
+ // }
+ // if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x-0.5,pixel.y-0.5,2);
+ // })
+ // }
-// viewInfo[1].post = function(ctx) {
-// currentPixels.forEach(pixel => {
-// let edge = false;
-// for (var i = 0; i < adjacentCoords.length; i++) {
-// var coords = adjacentCoords[i];
-// var x = pixel.x + coords[0];
-// var y = pixel.y + coords[1];
-// if (!isEmpty(x,y,true) && elements[pixelMap[x][y].element].movable !== elements[pixel.element].movable) {
-// // if (elements[pixelMap[x][y].element].id !== elements[pixel.element].id || elements[pixelMap[x][y].element].state !== elements[pixel.element].id) continue
-// edge = true;
-// break;
-// }
-// }
-// if (edge) drawSquare(ctx,"rgb(0,0,0)",pixel.x-0.5,pixel.y-0.5,2);
-// })
-// }
+})