();
+
+ imageElement.addEventListener("load", () => {
+ const { naturalWidth: width, naturalHeight: height } = imageElement;
+ [dataCanvas.width, dataCanvas.height] = [width, height];
+
+ dataCanvasContext?.drawImage(imageElement, 0, 0);
+
+ setImageData(dataCanvasContext?.getImageData(0, 0, width - 1, height - 1));
+ });
+
+ const context = () => canvasRef()?.getContext("2d");
+
+ const mosaicPixels = createMemo(() => {
+ const pixels = imageData();
+ const ctx = context();
+ const currentPixelSize = pixelSize();
+
+ if (currentPixelSize === 1) {
+ return pixels;
+ }
+
+ if (pixels && ctx) {
+ const mosaicPixelsImageData = ctx.createImageData(
+ pixels.width,
+ pixels.height
+ );
+
+ const lastRowHeight = pixels.height % currentPixelSize;
+ const rows = (pixels.height - lastRowHeight) / currentPixelSize + 1;
+
+ const lastColWidth = pixels.width % currentPixelSize;
+ const cols = (pixels.width - lastColWidth) / currentPixelSize + 1;
+
+ // advance the new rows
+ for (let row = 0; row < rows; row++) {
+ // advance the new cols
+ for (let col = 0; col < cols; col++) {
+ const affectedPixelStartPositions: number[] = [];
+ let redSum = 0,
+ greenSum = 0,
+ blueSum = 0,
+ alphaSum = 0;
+
+ let pixelWidth = currentPixelSize;
+
+ if (col === cols - 1) {
+ pixelWidth = lastColWidth;
+ }
+
+ let pixelHeight = currentPixelSize;
+
+ if (row === rows - 1) {
+ pixelHeight = lastRowHeight;
+ }
+
+ let divider = pixelWidth * pixelHeight;
+
+ // loop though the vertical pixels
+ for (let k = 0; k < pixelWidth * 4; k += 4) {
+ // for each vertical pixels we also get all the pixels we need below it
+ // each pixel consists of 4 values (r, g, b, a)
+ for (let l = 0; l < pixelHeight; l++) {
+ const pixelStartPosition =
+ row * currentPixelSize * (pixels.width * 4) +
+ col * currentPixelSize * 4 +
+ k +
+ l * (pixels.width * 4);
+
+ affectedPixelStartPositions.push(pixelStartPosition);
+
+ redSum += pixels.data[pixelStartPosition];
+ greenSum += pixels.data[pixelStartPosition + 1];
+ blueSum += pixels.data[pixelStartPosition + 2];
+ alphaSum += pixels.data[pixelStartPosition + 3];
+ }
+ }
+
+ const red = redSum / divider;
+ const green = greenSum / divider;
+ const blue = blueSum / divider;
+ const alpha = alphaSum / divider;
+
+ for (const startPosition of affectedPixelStartPositions) {
+ mosaicPixelsImageData.data[startPosition] = red;
+ mosaicPixelsImageData.data[startPosition + 1] = green;
+ mosaicPixelsImageData.data[startPosition + 2] = blue;
+ mosaicPixelsImageData.data[startPosition + 3] = alpha;
+ }
+ }
+ }
+
+ return mosaicPixelsImageData;
+ }
+ });
+
+ createEffect(() => {
+ const pixels = mosaicPixels();
+ const ctx = context();
+
+ if (pixels && ctx) {
+ canvasRef()!.width = pixels.width;
+ canvasRef()!.height = pixels.height;
+
+ ctx.putImageData(pixels, 0, 0);
+ }
+ });
+
+ const triggerPixelSizeChange = debounce(
+ (pixelSize: number) => setPixelSize(pixelSize),
+ 250
+ );
+
+ return (
+ <>
+
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..e209c16
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,4 @@
+* {
+ padding: 0;
+ margin: 0;
+}
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..23c1a3b
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,17 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+
+import App from "./App";
+
+import "./index.css";
+import "virtual:uno.css";
+
+const root = document.getElementById("root");
+
+if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
+ throw new Error(
+ "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
+ );
+}
+
+render(() => , root!);
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0aa8991
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "target": "ESNext",
+ "module": "ESNext",
+ "moduleResolution": "node",
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "types": ["vite/client"],
+ "noEmit": true,
+ "isolatedModules": true,
+ },
+}
diff --git a/uno.config.ts b/uno.config.ts
new file mode 100644
index 0000000..285b2a3
--- /dev/null
+++ b/uno.config.ts
@@ -0,0 +1,5 @@
+import { defineConfig, presetUno } from "unocss";
+
+defineConfig({
+ presets: [presetUno],
+});
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..0829123
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+// import devtools from 'solid-devtools/vite';
+import UnoCSS from "unocss/vite";
+
+export default defineConfig({
+ plugins: [
+ /*
+ Uncomment the following line to enable solid-devtools.
+ For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
+ */
+ // devtools(),
+ solidPlugin(),
+ UnoCSS(),
+ ],
+ server: {
+ port: 3000,
+ },
+ build: {
+ target: "esnext",
+ },
+});