refactoring

.gitignore

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

sketch.js

@@ -1,13 +1,14 @@
 let img;
 
 let morphs = [];
+// The order of the morphs, being mapped to the grayscale
 const orderedMorphs = [5,6,0,4,1,2,3];
 let count = 7;
 let size = 10;
 let countH = 800;
 let countV = 520;
 
-// Load the image
+// Load the image and symbols
 function preload() {
   img = loadImage('/assets/mona-lisa.jpg');
   for (let i = 0; i < count; i++)
@@ -15,7 +16,6 @@ function preload() {
 }
 
 function setup() {
-  
   pixelDensity(1);
 
   // Display the image
@@ -24,22 +24,23 @@ function setup() {
   createCanvas(countV, countH);
   image(img, 0, 0);
 
-  // load the pixels of the canvas
+  describe('Mona lisa - by Davincci');
-  // this is a 1-dimensional integer array with the rgba values of
+  
-  // the pixels
+  // Load the pixels of the canvas
+  // This is a 1D array of integers with the rgba values of the pixels
   loadPixels();
-  // 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;
+  // Create an array containing only the grayscale of every pixel
   let pixels1d = [];
+  // Since the picture is gray, the first 3 values (rgb) for every picture are similar
+  // We need the value at indexes 0,4,7,...
   for (let i = 0; i < pixels.length; i += 4) 
     pixels1d.push(pixels[i]);
   
-  // combine every 10 values into one by calculating their average
+  // 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
+  // Put the result in a 2D array, the rows are the pixel-rows of the image
-  // the columns are greyscale averages of every 10 pixelcolumns of the picture
+  // The columns are grayscale averages of every 10 pixel-columns of the picture
   let averages = new Array(countH);
   for (let i = 0; i < averages.length; i++)
     averages[i] = new Array(countV/10);
@@ -57,8 +58,9 @@ function setup() {
       j = 0;
     }
   }
-  // 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'
+  // 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++)
@@ -69,13 +71,12 @@ function setup() {
       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
+
+  // Find the min and max value in averages2
   let minGray = Infinity;
   let maxGray = -Infinity;
 
@@ -87,26 +88,23 @@ function setup() {
     }
   }
 
-  // 2. Skaliere die Werte basierend auf minGray und maxGray
+  // Scale all values of averages2 between minGray and 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
+      // Scale between 0.0 - 1.0
-      averages2[i][j] = Math.round(normalized * 6)%7; // auf 0–6 mappen
+      let normalized = (averages2[i][j] - minGray) / (maxGray - minGray);
+      // Map to 0 - 6 (the morph indexes)
+      averages2[i][j] = Math.round(normalized * 6)%7;
     }
   }
-  console.log(averages2);
 
-  //resizeCanvas(countV*2, countH);
   let svgCanvas = createGraphics(countV*2,countH,SVG);
   svgCanvas.image(img, 0, 0);
 
-
   for (let i = 0; i < countH/10; i++) {
     for (let j = 0; j < countV/10; j++) {
       svgCanvas.image(morphs[orderedMorphs[averages2[i][j]]], j*size+countV+size, i*size, size, size);
     }
   }
-  svgCanvas.save("mona-lisa.svg");
+  svgCanvas.save("morphed-mona-lisa.svg");
-
-  describe('Mona lisa - by Davincci');
 }