SymbRaster/sketch.js

let img;

let morphs = [];
const orderedMorphs = [5,6,0,4,1,2,3];
let count = 7;
let size = 10;
let countH = 800;
let countV = 520;

// 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() {
  
  pixelDensity(1);

  // Display the image
  img.resize(0, countH);
  img.filter(GRAY);
  createCanvas(countV, countH);
  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();
  // 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 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;
    }
    j++;
    if (k%countV == 0 && k>0) {
      i++;
      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'
  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 < 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');
}