refactoring and better mapping concept

.gitignore

@@ -0,0 +1 @@
+node_modules/

sketch.js

@@ -1,10 +1,11 @@
 let img;
 
 let morphs = [];
+const orderedMorphs = [5,6,0,4,1,2,3];
 let count = 7;
 let size = 10;
-let countH = 400;
-let countV = 260;
+let countH = 800;
+let countV = 520;
 
 // Load the image
 function preload() {
@@ -14,14 +15,6 @@ function preload() {
 }
 
 function setup() {
-  /*
-  createCanvas(26*size, 40*size);
-  imageMode(CORNER);
-  for (let i = 0; i < 26; i++) {
-    for (let j = 0; j < 40; j++) {
-      image(morphs[1], i*size, j*size, size, size);
-    }
-  }*/
   
   pixelDensity(1);
 
@@ -29,41 +22,89 @@ function setup() {
   img.resize(0, countH);
   img.filter(GRAY);
   createCanvas(countV, countH);
-  //createCanvas(countV*size, countH*size);
   image(img, 0, 0);
   
+  // load the pixels of the canvas
+  // this is a 1-dimensional integer array with the rgba values of
+  // the pixels
   loadPixels();
-  let pixels2d = new Array(400);
-  for(let i = 0; i < 400; i++){
-    pixels2d[i] = new Array(260);
-  }
+  // create an array containing only the grayscale of every pixel
+  // sins the picture is gray, the first 3 values (rgb) for every picture are similar
+  // we need the value at indexes 0,4,7,...
   let i = 0;
   let j = 0;
-  let str1 = "";
-  for(let k = 0; k < pixels.length; k++) {
-    if (k%4 == 0) {
-      str1 += str(pixels[k]%7);
-      pixels2d[i][j] = pixels[k]%7;
-      j++;
+  let pixels1d = [];
+  for (let i = 0; i < pixels.length; i += 4) 
+    pixels1d.push(pixels[i]);
+  
+  // combine every 10 values into one by calculating their average
+  // put the result in a 2d array, the rows are the pixelrows of the image
+  // the columns are greyscale averages of every 10 pixelcolumns of the picture
+  let averages = new Array(countH);
+  for (let i = 0; i < averages.length; i++)
+    averages[i] = new Array(countV/10);
+
+  let sum = 0;
+  for(let k = 0; k < pixels1d.length; k++) {
+    sum += pixels1d[k];
+    if (j%10 == 0) {
+      averages[i][Math.floor(j/10)] = sum/10;
+      sum = 0;
     }
-    if (k/4%260 == 0 && k>0) {
-      str1 += '\n';
+    j++;
+    if (k%countV == 0 && k>0) {
       i++;
       j = 0;
     }
   }
-  
-  console.log(pixels);
-  console.log(pixels2d);
+  // combine every 10 rows into one row by calculating the average of the values of every column
+  // put the result into a new array 'average2'
+  let sums = new Array(countV/10).fill(0);
+  let averages2 = new Array(countH/10);
+  for (let i = 0; i < averages2.length; i++)
+    averages2[i] = new Array(countV/10);
 
-  //saveStrings(str1.split('\n'), 'data.txt');
-  //resizeCanvas(countV*10, countH*10)
-  /*imageMode(CORNER);
-  for (let i = 0; i < countH; i++) {
-    for (let j = 0; j < countV; j++) {
-      image(morphs[i], i*size, j*size, size, size);
+  for (let i = 0; i < averages.length; i++) {
+    for (let j = 0; j < averages2[0].length; j++) {
+      sums[j] += averages[i][j];
+      if (i%10 == 0) {
+        averages2[i/10][j] = Math.round(sums[j]/10);
+        // let maxVal = 255; // Da Graustufen 0-255 sind
+        // averages2[i/10][j] = Math.floor((averages2[i/10][j] / maxVal) * 6);
+        sums[j] = 0;
+      }
     }
-  }*/
+  }
+  // 1. Finde Min- und Max-Wert
+  let minGray = Infinity;
+  let maxGray = -Infinity;
+
+  for (let i = 0; i < averages2.length; i++) {
+    for (let j = 0; j < averages2[i].length; j++) {
+      let val = averages2[i][j];
+      if (val < minGray) minGray = val;
+      if (val > maxGray) maxGray = val;
+    }
+  }
+
+  // 2. Skaliere die Werte basierend auf minGray und maxGray
+  for (let i = 0; i < averages2.length; i++) {
+    for (let j = 0; j < averages2[i].length; j++) {
+      let normalized = (averages2[i][j] - minGray) / (maxGray - minGray); // auf 0–1 skalieren
+      averages2[i][j] = Math.round(normalized * 6)%7; // auf 0–6 mappen
+    }
+  }
+  console.log(averages2);
+
+  resizeCanvas(countV*2, countH);
+  image(img, 0, 0);
+
+  imageMode(CORNER);
+  for (let i = 0; i < countH/10; i++) {
+    for (let j = 0; j < countV/10; j++) {
+      image(morphs[orderedMorphs[averages2[i][j]]], j*size+countV+size, i*size, size, size);
+    }
+  }
 
   describe('Mona lisa - by Davincci');
 }