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>"));
 };
		`@@ -0,0 +1,2 @@`
							`# Auto detect text files and perform LF normalization`
							`* text=auto`