diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index fa1c3fd..ab9d696 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@
a
+ diff --git a/js/drawFunctions.js b/js/drawFunctions.js new file mode 100644 index 0000000..c4fc0ae --- /dev/null +++ b/js/drawFunctions.js @@ -0,0 +1,70 @@ +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) { + 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; +} diff --git a/js/script.js b/js/script.js index d530f0d..1d003ba 100644 --- a/js/script.js +++ b/js/script.js @@ -13,13 +13,18 @@ var width = test.getBoundingClientRect().width; var drawGrid = []; +var drawHistory = { + forward: [], + backward: [], +}; + var textify = new Worker("./js/textify.js"); var previousX; var previousY; function moveMouse(e) { - if (e.buttons != 1) return; + if (e.buttons != 1) return mouseUp; let x = Math.floor(e.clientX / width); let y = Math.floor(e.clientY / height); if (x == previousX && y == previousY) { @@ -27,84 +32,20 @@ function moveMouse(e) { } drawLine(previousX, previousY, x, y); + drawPoint(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); } +function mouseUp(e) { + content.removeEventListener("mousemove", moveMouse); +} + textify.onmessage = async function (e) { content.innerHTML = e.data; }; @@ -113,6 +54,8 @@ content.addEventListener("mousedown", function (e) { content.addEventListener("mousemove", moveMouse); let x = Math.floor(e.clientX / width); let y = Math.floor(e.clientY / height); + drawHistory.backward.unshift(JSON.stringify(drawGrid)); + drawHistory.forward = []; if (e.shiftKey) { drawLine(previousX, previousY, x, y); } @@ -121,18 +64,37 @@ content.addEventListener("mousedown", function (e) { } previousX = x; previousY = y; - // drawPoint(x, y); render(); }); -content.addEventListener("mouseup", function (e) { - content.removeEventListener("mousemove", moveMouse); - drawPoint(x, y); -}); - -content; +content.addEventListener("mouseup", mouseUp); document.addEventListener("keydown", function (e) { + if (e.ctrlKey == true) { + console.log(drawHistory.backward.length); + switch (e.key) { + case "z": + if (drawHistory.backward[0]) { + drawHistory.forward.unshift(JSON.stringify(drawGrid)); + drawGrid = JSON.parse(drawHistory.backward.shift()); + render(); + } + + break; + case "y": + if (drawHistory.forward[0]) { + drawHistory.backward.unshift(JSON.stringify(drawGrid)); + drawGrid = JSON.parse(drawHistory.forward.shift()); + render(); + } + + break; + + default: + break; + } + return; + } if (e.key.length == 1) { pencil = e.key; }