add shear

mwdchang · Dec 21, 2023 · 7bf3738 · 7bf3738
1 parent b779ae8
commit 7bf3738
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 7 deletions.
diff --git a/examples/src/index.ts b/examples/src/index.ts
@@ -6,6 +6,7 @@ import {
   kodakChromeFilter, polaroidfilter, sepiaFilter, vintageFilter
 } from '../../src/colours';
 import { SLIC } from '../../src/slic';
+import { shearAll } from '../../src/shear';
 
 const createCanvas = (img: ImageData) => {
   const canvas = document.createElement('canvas');
@@ -26,7 +27,9 @@ const runExample = async () => {
   const rose = await loadImage('example.png', { width: 180, height: 170 });
   const fern = await loadImage('example2.png', { width: 180, height: 130 });
   const tree = await loadImage('example3.jpg', { width: 180, height: 130 });
+  const boat = await loadImage('example4.jpeg', { width: 180, height: 160 });
 
+  // First row
   addExample(rose);
 
   const d = dodge(
@@ -45,6 +48,7 @@ const runExample = async () => {
   addExample(hatch);
 
 
+  // Second row
   document.body.append(document.createElement('br'));
   addExample(fern);
 
@@ -61,8 +65,7 @@ const runExample = async () => {
   addExample(kodak);
 
 
-
-
+  // Third row
   document.body.append(document.createElement('br'));
   addExample(tree);
 
@@ -79,16 +82,19 @@ const runExample = async () => {
   addExample(sobel);
 
 
-  // const test = findLocalMinimum(rose, 20, 10);
-  // console.log('findLocalMinimum', test);
 
+  // Fourth row
   document.body.append(document.createElement('br'));
 
-  const slic1 = SLIC(rose, 15, 5, 3, 15);
-  addExample(slic1);
+  addExample(boat);
 
-  const slic2 = SLIC(tree, 25, 8, 3, 50);
+  const slic2 = SLIC(boat, 12, 18, 4, 80);
   addExample(slic2);
+
+  const shift = shearAll(boat, 2, 10, 2, 10);
+  addExample(shift);
+
+
 };
 
 runExample();

diff --git a/examples/static/example4.jpeg b/examples/static/example4.jpeg
diff --git a/src/shear.ts b/src/shear.ts
@@ -0,0 +1,126 @@
+export const vshear = (img: ImageData, chunk: number, maxSize: number) => {
+  const width = img.width;
+  const height = img.height;
+
+  const shifted = new ImageData( new Uint8ClampedArray(img.data), width, height);
+
+  let offset = Math.floor(Math.random() * maxSize);
+
+  let counter = 0;
+  let flag = false;
+  for (let i = 0; i < width; i++) {
+    counter ++;
+
+    if (flag) {
+      for (let j = 0; j < height - offset; j++) {
+        const idx = 4 * (j * width + i);
+        const ridx = 4 * ((j + offset) * width + i);
+
+        shifted.data[idx] = img.data[ridx];
+        shifted.data[idx + 1] = img.data[ridx + 1];
+        shifted.data[idx + 2] = img.data[ridx + 2];
+        shifted.data[idx + 3] = img.data[ridx + 3];
+      }
+      for (let j = height - offset; j < height; j++) {
+        const idx = 4 * (j * width + i);
+        shifted.data[idx] = 255;
+        shifted.data[idx + 1] = 255;
+        shifted.data[idx + 2] = 255;
+        shifted.data[idx + 3] = 255;
+      }
+    } else {
+      for (let j = 0; j < offset; j++) {
+        const idx = 4 * (j * width + i);
+        shifted.data[idx] = 255;
+        shifted.data[idx + 1] = 255;
+        shifted.data[idx + 2] = 255;
+        shifted.data[idx + 3] = 255;
+      }
+      for (let j = offset; j < height; j++) {
+        const idx = 4 * (j * width + i);
+        const ridx = 4 * ((j - offset) * width + i);
+
+        shifted.data[idx] = img.data[ridx];
+        shifted.data[idx + 1] = img.data[ridx + 1];
+        shifted.data[idx + 2] = img.data[ridx + 2];
+        shifted.data[idx + 3] = img.data[ridx + 3];
+      }
+    }
+
+    if (counter == chunk) {
+      offset = Math.floor(Math.random() * maxSize);
+      flag = !flag;
+      counter = 0;
+    }
+  }
+
+  return shifted;
+}
+
+
+export const hshear = (img: ImageData, chunk: number, maxSize: number) => {
+  const width = img.width;
+  const height = img.height;
+
+  const shifted = new ImageData( new Uint8ClampedArray(img.data), width, height);
+
+  let offset = Math.floor(Math.random() * maxSize);
+
+  let counter = 0;
+  let flag = false;
+  for (let i = 0; i < height; i++) {
+    counter ++;
+
+    if (flag) {
+      for (let j = 0; j < width - offset; j++) {
+        const idx = 4 * (i * width + j);
+        const ridx = 4 * (i * width + j + offset);
+
+        shifted.data[idx] = img.data[ridx];
+        shifted.data[idx + 1] = img.data[ridx + 1];
+        shifted.data[idx + 2] = img.data[ridx + 2];
+        shifted.data[idx + 3] = img.data[ridx + 3];
+      }
+
+      for (let j = width - offset; j < width; j++) {
+        const idx = 4 * (i * width + j);
+        shifted.data[idx] = 255;
+        shifted.data[idx + 1] = 255;
+        shifted.data[idx + 2] = 255;
+        shifted.data[idx + 3] = 255;
+      }
+    } else {
+      for (let j = offset; j < width; j++) {
+        const idx = 4 * (i * width + j);
+        const ridx = 4 * (i * width + j - offset);
+
+        shifted.data[idx] = img.data[ridx];
+        shifted.data[idx + 1] = img.data[ridx + 1];
+        shifted.data[idx + 2] = img.data[ridx + 2];
+        shifted.data[idx + 3] = img.data[ridx + 3];
+      }
+
+
+      for (let j = 0; j < offset; j++) {
+        const idx = 4 * (i * width + j);
+        shifted.data[idx] = 255;
+        shifted.data[idx + 1] = 255;
+        shifted.data[idx + 2] = 255;
+        shifted.data[idx + 3] = 255;
+      }
+    }
+
+    if (counter == chunk) {
+      offset = Math.floor(Math.random() * maxSize);
+      flag = !flag;
+      counter = 0;
+    }
+  }
+
+  return shifted;
+}
+
+export const shearAll = (img: ImageData, hChunk: number, hSize: number, vChunk: number, vSize: number) => {
+  let res = hshear(img, hChunk, hSize);
+  return vshear(res, vChunk, vSize);
+}