Skip to content

Commit

Permalink
try to speed up the buildFacet a bit by removing the duplicate index …
Browse files Browse the repository at this point in the history 
…calculations, add a browse for file
  • Loading branch information
@drake7707
drake7707 committed May 1, 2019
1 parent 8e27e8b commit cd9ec35
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 18 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div class="container">
<div class="row">
<h2> Paint by number generator </h2>
<span>Paste from clipboard (ctrl+v) to change the image. Large images are very slow to process though.</span>
<span>Paste from clipboard (ctrl+v) to change the image (or browse for a file <input id="file" type="file" accept="image/x-png,image/gif,image/jpeg"></input>). Large images are very slow to process though.</span>
<br/>
<span>Example images:
<a id="lnkTrivial" href="#">trivial</a> -
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@
"@types/jquery": "^3.3.29",
"@types/materialize-css": "^1.0.6"
}
}
}
46 changes: 39 additions & 7 deletions scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ define("common", ["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function delay(ms) {
return new Promise((exec) => window.setTimeout(exec, ms));
return __awaiter(this, void 0, void 0, function* () {
return new Promise((exec) => window.setTimeout(exec, ms));
});
}
exports.delay = delay;
class CancellationToken {
Expand Down Expand Up @@ -39,7 +41,7 @@ define("lib/clustering", ["require", "exports"], function (require, exports) {
* Calculates the weighted average of the given points
*/
static average(pts) {
if (pts.length == 0) {
if (pts.length === 0) {
throw Error("Can't average 0 elements");
}
const dims = pts[0].values.length;
Expand Down Expand Up @@ -292,6 +294,13 @@ define("structs/typedarrays", ["require", "exports"], function (require, exports
set(x, y, value) {
this.arr[y * this.width + x] = value;
}
matchAllAround(x, y, value) {
const idx = y * this.width + x;
return (x - 1 >= 0 && this.arr[idx - 1] === value) &&
(y - 1 >= 0 && this.arr[idx - this.width] === value) &&
(x + 1 < this.width && this.arr[idx + 1] === value) &&
(y + 1 < this.height && this.arr[idx + this.width] === value);
}
}
exports.Uint8Array2D = Uint8Array2D;
class BooleanArray2D {
Expand All @@ -301,7 +310,7 @@ define("structs/typedarrays", ["require", "exports"], function (require, exports
this.arr = new Uint8Array(width * height);
}
get(x, y) {
return this.arr[y * this.width + x] != 0;
return this.arr[y * this.width + x] !== 0;
}
set(x, y, value) {
this.arr[y * this.width + x] = value ? 1 : 0;
Expand Down Expand Up @@ -1183,10 +1192,12 @@ define("facetmanagement", ["require", "exports", "common", "lib/fill", "lib/poly
facetResult.facetMap.set(ptx, pty, facetIndex);
facet.pointCount++;
// determine if the point is a border or not
const isInnerPoint = (ptx - 1 >= 0 && imgColorIndices.get(ptx - 1, pty) === facetColorIndex) &&
(pty - 1 >= 0 && imgColorIndices.get(ptx, pty - 1) === facetColorIndex) &&
(ptx + 1 < facetResult.width && imgColorIndices.get(ptx + 1, pty) === facetColorIndex) &&
(pty + 1 < facetResult.height && imgColorIndices.get(ptx, pty + 1) === facetColorIndex);
/* const isInnerPoint = (ptx - 1 >= 0 && imgColorIndices.get(ptx - 1, pty) === facetColorIndex) &&
(pty - 1 >= 0 && imgColorIndices.get(ptx, pty - 1) === facetColorIndex) &&
(ptx + 1 < facetResult.width && imgColorIndices.get(ptx + 1, pty) === facetColorIndex) &&
(pty + 1 < facetResult.height && imgColorIndices.get(ptx, pty + 1) === facetColorIndex);
*/
const isInnerPoint = imgColorIndices.matchAllAround(ptx, pty, facetColorIndex);
if (!isInnerPoint) {
facet.borderPoints.push(new point_1.Point(ptx, pty));
}
Expand Down Expand Up @@ -3039,6 +3050,27 @@ define("main", ["require", "exports", "gui", "lib/clipboard"], function (require
$(".tabs").tabs();
$(".tooltipped").tooltip();
const clip = new clipboard_1.Clipboard("canvas", true);
$("#file").change(function (ev) {
const files = $("#file").get(0).files;
if (files !== null && files.length > 0) {
const reader = new FileReader();
reader.onloadend = function () {
const img = document.createElement("img");
img.onload = () => {
const c = document.getElementById("canvas");
const ctx = c.getContext("2d");
c.width = img.naturalWidth;
c.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
};
img.onerror = () => {
alert("Unable to load image");
};
img.src = reader.result;
};
reader.readAsDataURL(files[0]);
}
});
gui_2.loadExample("imgSmall");
$("#btnProcess").click(function () {
return __awaiter(this, void 0, void 0, function* () {
Expand Down
10 changes: 6 additions & 4 deletions src/facetmanagement.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,10 +231,12 @@ export class FacetCreator {
facet.pointCount++;

// determine if the point is a border or not
const isInnerPoint = (ptx - 1 >= 0 && imgColorIndices.get(ptx - 1, pty) === facetColorIndex) &&
(pty - 1 >= 0 && imgColorIndices.get(ptx, pty - 1) === facetColorIndex) &&
(ptx + 1 < facetResult.width && imgColorIndices.get(ptx + 1, pty) === facetColorIndex) &&
(pty + 1 < facetResult.height && imgColorIndices.get(ptx, pty + 1) === facetColorIndex);
/* const isInnerPoint = (ptx - 1 >= 0 && imgColorIndices.get(ptx - 1, pty) === facetColorIndex) &&
(pty - 1 >= 0 && imgColorIndices.get(ptx, pty - 1) === facetColorIndex) &&
(ptx + 1 < facetResult.width && imgColorIndices.get(ptx + 1, pty) === facetColorIndex) &&
(pty + 1 < facetResult.height && imgColorIndices.get(ptx, pty + 1) === facetColorIndex);
*/
const isInnerPoint = imgColorIndices.matchAllAround(ptx, pty, facetColorIndex);

if (!isInnerPoint) {
facet.borderPoints.push(new Point(ptx, pty));
Expand Down
32 changes: 27 additions & 5 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,38 @@
import { downloadPalettePng, downloadPNG, downloadSVG, loadExample, process, updateOutput } from "./gui";
import { Clipboard } from "./lib/clipboard";

$(document).ready(function() {
$(document).ready(function () {

$(".tabs").tabs();
$(".tooltipped").tooltip();

const clip = new Clipboard("canvas", true);

$("#file").change(function (ev) {
const files = (<HTMLInputElement>$("#file").get(0)).files;
if (files !== null && files.length > 0) {
const reader = new FileReader();
reader.onloadend = function () {
const img = document.createElement("img");
img.onload = () => {
const c = document.getElementById("canvas") as HTMLCanvasElement;
const ctx = c.getContext("2d")!;
c.width = img.naturalWidth;
c.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
};
img.onerror = () => {
alert("Unable to load image");
}
img.src = <string>reader.result;
}
reader.readAsDataURL(files[0]);
}
});

loadExample("imgSmall");

$("#btnProcess").click(async function() {
$("#btnProcess").click(async function () {
try {
await process();
} catch (err) {
Expand All @@ -22,15 +44,15 @@ $(document).ready(function() {
await updateOutput();
});

$("#btnDownloadSVG").click(function() {
$("#btnDownloadSVG").click(function () {
downloadSVG();
});

$("#btnDownloadPNG").click(function() {
$("#btnDownloadPNG").click(function () {
downloadPNG();
});

$("#btnDownloadPalettePNG").click(function() {
$("#btnDownloadPalettePNG").click(function () {
downloadPalettePng();
});

Expand Down
9 changes: 9 additions & 0 deletions src/structs/typedarrays.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,18 @@ export class Uint8Array2D {
public get(x: number, y: number) {
return this.arr[y * this.width + x];
}

public set(x: number, y: number, value: number) {
this.arr[y * this.width + x] = value;
}

public matchAllAround(x: number, y: number, value: number) {
const idx = y * this.width + x;
return (x - 1 >= 0 && this.arr[idx - 1] === value) &&
(y - 1 >= 0 && this.arr[idx - this.width] === value) &&
(x + 1 < this.width && this.arr[idx + 1] === value) &&
(y + 1 < this.height && this.arr[idx + this.width] === value);
}
}

export class BooleanArray2D {
Expand Down

0 comments on commit cd9ec35

Please sign in to comment.