initial commit

2020-06-26 11:33:45 +02:00
commit 5cbf91f8fb
6 changed files with 222 additions and 0 deletions
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
@@ -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;
+}
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Ascii art painter</title>
+    <meta name="description" content="AScii art painter" />
+    <meta name="author" content="Legonzaur" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="css/style.css?v=1.0" />
+  </head>
+
+  <body>
+    <div id="content"></div>
+    <div id="Test">a</div>
+    <script src="js/script.js"></script>
+  </body>
+</html>
@@ -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 += "&nbsp;";
+      }
+    }
+    text[i] = tempRow;
+  }
+  postMessage(text.join("<br>"));
+};
@@ -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;
+  }
+});
@@ -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 += "&nbsp;";
+      }
+    }
+    text[i] = tempRow;
+  }
+  postMessage(text.join("<br>"));
+};