refactoring and better mapping concept

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,80 +22,87 @@ 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(countH);
-  for(let i = 0; i < countH; i++){
-    pixels2d[i] = new Array(countV);
-  }
+  // 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 = "";
   let pixels1d = [];
   for (let i = 0; i < pixels.length; i += 4) 
-    pixels1d[i/4] = pixels[i];
-  /*
-  let averages = [];
-  let sum = 0;
-  for (let i = 0; i < pixels1d.length; i++) {
-    sum += pixels1d[i];
-    if (i%10 == 0) {
-      averages[i/10] = sum/10;
-      sum = 0;
-    }
-  }
-*/
+    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;
-  let sum2 = [];
   for(let k = 0; k < pixels1d.length; k++) {
-    //str1 += str(pixels1d[k]%count);
     sum += pixels1d[k];
     if (j%10 == 0) {
-      averages[i][j/10] = sum/10;
+      averages[i][Math.floor(j/10)] = sum/10;
       sum = 0;
     }
-    pixels2d[i][j] = pixels1d[k]%count;
     j++;
     if (k%countV == 0 && k>0) {
-      //str1 += '\n';
       i++;
       j = 0;
     }
   }
-  let sums = []
+  // 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);
+
   for (let i = 0; i < averages.length; i++) {
-    for (let j = 0; j < averages[0].length; j++) {
+    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);
-        if (!averages2[i/10][j]) averages2[i/10][j] = 0;
-        averages2[i/10][j] %= 7;
+        // let maxVal = 255; // Da Graustufen 0-255 sind
+        // averages2[i/10][j] = Math.floor((averages2[i/10][j] / maxVal) * 6);
         sums[j] = 0;
       }
     }
   }
-  console.log(averages2);
-  console.log(pixels1d);
-  console.log(pixels2d);
+  // 1. Finde Min- und Max-Wert
+  let minGray = Infinity;
+  let maxGray = -Infinity;
 
-  //saveStrings(str1.split('\n'), 'data.txt');
-  //resizeCanvas(countV*10, countH*10)
-  fill(255);
-  //rect(0,0,countV,countH);
+  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 < countV/10; i++) {
-    for (let j = 0; j < countH/10; j++) {
-      image(morphs[averages2[j][i]], i*size, j*size, size, size);
+  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);
     }
   }