the pixels of the monalisa picture are put into a 2d array of grayscales which are mapped to the number of the morphs

sketch.js

@@ -1,16 +1,69 @@
 let img;
 
+let morphs = [];
+let count = 7;
+let size = 10;
+let countH = 400;
+let countV = 260;
+
 // Load the image
 function preload() {
   img = loadImage('/assets/mona-lisa.jpg');
+  for (let i = 0; i < count; i++)
+    morphs[i] = loadImage(`/assets/morphs/${i}.png`);
 }
 
 function setup() {
-  createCanvas(400, 400);
+  /*
+  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);
 
   // Display the image
-  img.resize(0, 400);
+  img.resize(0, countH);
+  img.filter(GRAY);
+  createCanvas(countV, countH);
+  //createCanvas(countV*size, countH*size);
   image(img, 0, 0);
   
+  loadPixels();
+  let pixels2d = new Array(400);
+  for(let i = 0; i < 400; i++){
+    pixels2d[i] = new Array(260);
+  }
+  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++;
+    }
+    if (k/4%260 == 0 && k>0) {
+      str1 += '\n';
+      i++;
+      j = 0;
+    }
+  }
+  
+  console.log(pixels);
+  console.log(pixels2d);
+
+  //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);
+    }
+  }*/
+
   describe('Mona lisa - by Davincci');
 }