legonzaur/Ascii
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding forward and backward (CTRL+Z and CTRL+Y)

Browse Source
This commit is contained in:
Legonzaur
2020-06-26 19:35:32 +02:00
parent 5cbf91f8fb
commit 1584f7af85
4 changed files with 110 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
View File
index.html
+1
View File
@@ -18,6 +18,7 @@
<body> <body>
<div id="content"></div> <div id="content"></div>
<div id="Test">a</div> <div id="Test">a</div>
<script src="js/drawFunctions.js"></script>
<script src="js/script.js"></script> <script src="js/script.js"></script>
</body> </body>
</html> </html>
js/drawFunctions.js
+70
View File
@@ -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;
}
js/script.js
+39 -77
View File
@@ -13,13 +13,18 @@ var width = test.getBoundingClientRect().width;
var drawGrid = []; var drawGrid = [];
var drawHistory = {
forward: [],
backward: [],
};
var textify = new Worker("./js/textify.js"); var textify = new Worker("./js/textify.js");
var previousX; var previousX;
var previousY; var previousY;
function moveMouse(e) { function moveMouse(e) {
if (e.buttons != 1) return; if (e.buttons != 1) return mouseUp;
let x = Math.floor(e.clientX / width); let x = Math.floor(e.clientX / width);
let y = Math.floor(e.clientY / height); let y = Math.floor(e.clientY / height);
if (x == previousX && y == previousY) { if (x == previousX && y == previousY) {
@@ -27,84 +32,20 @@ function moveMouse(e) {
} }
drawLine(previousX, previousY, x, y); drawLine(previousX, previousY, x, y);
drawPoint(x, y);
previousX = x; previousX = x;
previousY = y; previousY = y;
render(); 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() { function render() {
textify.postMessage(drawGrid); textify.postMessage(drawGrid);
} }
function mouseUp(e) {
content.removeEventListener("mousemove", moveMouse);
}
textify.onmessage = async function (e) { textify.onmessage = async function (e) {
content.innerHTML = e.data; content.innerHTML = e.data;
}; };
@@ -113,6 +54,8 @@ content.addEventListener("mousedown", function (e) {
content.addEventListener("mousemove", moveMouse); content.addEventListener("mousemove", moveMouse);
let x = Math.floor(e.clientX / width); let x = Math.floor(e.clientX / width);
let y = Math.floor(e.clientY / height); let y = Math.floor(e.clientY / height);
drawHistory.backward.unshift(JSON.stringify(drawGrid));
drawHistory.forward = [];
if (e.shiftKey) { if (e.shiftKey) {
drawLine(previousX, previousY, x, y); drawLine(previousX, previousY, x, y);
} }
@@ -121,18 +64,37 @@ content.addEventListener("mousedown", function (e) {
} }
previousX = x; previousX = x;
previousY = y; previousY = y;
// drawPoint(x, y);
render(); render();
}); });
content.addEventListener("mouseup", function (e) { content.addEventListener("mouseup", mouseUp);
content.removeEventListener("mousemove", moveMouse);
drawPoint(x, y);
});
content;
document.addEventListener("keydown", function (e) { 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) { if (e.key.length == 1) {
pencil = e.key; pencil = e.key;
} }