From 5cbf91f8fbe3033e78b8075b2da2a724e68ab7db Mon Sep 17 00:00:00 2001
From: Legonzaur <34353603+Legonzaur@users.noreply.github.com>
Date: Fri, 26 Jun 2020 11:33:45 +0200
Subject: [PATCH] initial commit
---
.gitattributes | 2 +
css/style.css | 18 +++++++
index.html | 23 ++++++++
js/render.js | 20 +++++++
js/script.js | 139 +++++++++++++++++++++++++++++++++++++++++++++++++
js/textify.js | 20 +++++++
6 files changed, 222 insertions(+)
create mode 100644 .gitattributes
create mode 100644 css/style.css
create mode 100644 index.html
create mode 100644 js/render.js
create mode 100644 js/script.js
create mode 100644 js/textify.js
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..614fd2b
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,18 @@
+* {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ font-family: monospace;
+ z-index: -1;
+ user-select: none;
+ overflow: hidden;
+}
+#Test {
+ position: absolute;
+ visibility: hidden;
+ height: auto;
+ width: auto;
+ white-space: nowrap; /* Thanks to Herb Caudill comment */
+ top: 0;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fa1c3fd
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ Ascii art painter
+
+
+
+
+
+
+
+
+
+ a
+
+
+
diff --git a/js/render.js b/js/render.js
new file mode 100644
index 0000000..27d2f4d
--- /dev/null
+++ b/js/render.js
@@ -0,0 +1,20 @@
+onmessage = function (message) {
+ let contentArray = message.data;
+ let text = [];
+ for (let i = 0; i < contentArray.length; i++) {
+ let tempRow = "";
+ contentArray[i] = contentArray[i] ? contentArray[i] : [];
+ let row = contentArray[i];
+
+ for (let j = 0; j < row.length; j++) {
+ let char = row[j];
+ if (char && char != " ") {
+ tempRow += char;
+ } else {
+ tempRow += " ";
+ }
+ }
+ text[i] = tempRow;
+ }
+ postMessage(text.join("
"));
+};
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..d530f0d
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,139 @@
+const content = document.getElementById("content");
+
+var pencil = "o";
+
+var fontSize = parseFloat(
+ window.getComputedStyle(content).getPropertyValue("font-size")
+);
+
+var test = document.getElementById("Test");
+test.style.fontSize = fontSize;
+var height = test.getBoundingClientRect().height;
+var width = test.getBoundingClientRect().width;
+
+var drawGrid = [];
+
+var textify = new Worker("./js/textify.js");
+
+var previousX;
+var previousY;
+
+function moveMouse(e) {
+ if (e.buttons != 1) return;
+ let x = Math.floor(e.clientX / width);
+ let y = Math.floor(e.clientY / height);
+ if (x == previousX && y == previousY) {
+ return;
+ }
+
+ drawLine(previousX, previousY, x, y);
+ previousX = x;
+ previousY = y;
+ render();
+}
+
+function drawLine(x0, y0, x1, y1) {
+ //Bresenham's line algorithm
+ let iterations = 0;
+ var dx = Math.abs(x1 - x0);
+ var dy = Math.abs(y1 - y0);
+ var sx = x0 < x1 ? 1 : -1;
+ var sy = y0 < y1 ? 1 : -1;
+ var err = dx - dy;
+ do {
+ drawPoint(x0, y0);
+ var e2 = 2 * err;
+ if (e2 > -dy) {
+ err -= dy;
+ x0 += sx;
+ }
+ if (e2 < dx) {
+ err += dx;
+ y0 += sy;
+ }
+ iterations++;
+ if (iterations > 1000) break;
+ } while (!(x0 == x1 && y0 == y1));
+}
+function fill(x, y) {
+ //custom flood fill algorythm
+ let iterations = 0;
+ drawGrid[y] = drawGrid[y] ? drawGrid[y] : [];
+ if (pencil != drawGrid[y][x]) {
+ const fillChar = drawGrid[y][x];
+ const pixelsToCheck = [x, y];
+ while (pixelsToCheck.length > 0) {
+ if (iterations > 100000) break;
+ iterations++;
+ const ypixel = pixelsToCheck.pop();
+ const xpixel = pixelsToCheck.pop();
+ drawGrid[ypixel] = drawGrid[ypixel] ? drawGrid[ypixel] : [];
+
+ if (
+ drawGrid[ypixel][xpixel] == fillChar &&
+ !(
+ xpixel > window.innerWidth / width ||
+ ypixel > window.innerHeight / height ||
+ xpixel < 0 ||
+ ypixel < 0
+ )
+ ) {
+ drawPoint(xpixel, ypixel);
+
+ pixelsToCheck.push(xpixel + 1, ypixel);
+ pixelsToCheck.push(xpixel - 1, ypixel);
+ pixelsToCheck.push(xpixel, ypixel + 1);
+ pixelsToCheck.push(xpixel, ypixel - 1);
+ }
+ }
+
+ render();
+ }
+}
+function drawPoint(x, y) {
+ if (
+ x > window.innerWidth / width ||
+ y > window.innerHeight / height ||
+ x < 0 ||
+ y < 0
+ )
+ return;
+ drawGrid[y] = drawGrid[y] ? drawGrid[y] : [];
+ drawGrid[y][x] = pencil;
+}
+function render() {
+ textify.postMessage(drawGrid);
+}
+
+textify.onmessage = async function (e) {
+ content.innerHTML = e.data;
+};
+
+content.addEventListener("mousedown", function (e) {
+ content.addEventListener("mousemove", moveMouse);
+ let x = Math.floor(e.clientX / width);
+ let y = Math.floor(e.clientY / height);
+ if (e.shiftKey) {
+ drawLine(previousX, previousY, x, y);
+ }
+ if (e.ctrlKey) {
+ fill(x, y);
+ }
+ previousX = x;
+ previousY = y;
+ // drawPoint(x, y);
+ render();
+});
+
+content.addEventListener("mouseup", function (e) {
+ content.removeEventListener("mousemove", moveMouse);
+ drawPoint(x, y);
+});
+
+content;
+
+document.addEventListener("keydown", function (e) {
+ if (e.key.length == 1) {
+ pencil = e.key;
+ }
+});
diff --git a/js/textify.js b/js/textify.js
new file mode 100644
index 0000000..f28a151
--- /dev/null
+++ b/js/textify.js
@@ -0,0 +1,20 @@
+onmessage = function (message) {
+ let drawGrid = message.data;
+ let text = [];
+ for (let i = 0; i < drawGrid.length; i++) {
+ let tempRow = "";
+ drawGrid[i] = drawGrid[i] ? drawGrid[i] : [];
+ let row = drawGrid[i];
+
+ for (let j = 0; j < row.length; j++) {
+ let char = row[j];
+ if (char && char != " ") {
+ tempRow += char;
+ } else {
+ tempRow += " ";
+ }
+ }
+ text[i] = tempRow;
+ }
+ postMessage(text.join("
"));
+};