diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 40b878d..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules/ \ No newline at end of file diff --git a/assets/morphs/0.png b/assets/morphs/0.png deleted file mode 100644 index d823dff..0000000 Binary files a/assets/morphs/0.png and /dev/null differ diff --git a/assets/morphs/1.png b/assets/morphs/1.png deleted file mode 100644 index 42ab49a..0000000 Binary files a/assets/morphs/1.png and /dev/null differ diff --git a/assets/morphs/2.png b/assets/morphs/2.png deleted file mode 100644 index 327d69c..0000000 Binary files a/assets/morphs/2.png and /dev/null differ diff --git a/assets/morphs/3.png b/assets/morphs/3.png deleted file mode 100644 index d5aa550..0000000 Binary files a/assets/morphs/3.png and /dev/null differ diff --git a/assets/morphs/4.png b/assets/morphs/4.png deleted file mode 100644 index c5b830a..0000000 Binary files a/assets/morphs/4.png and /dev/null differ diff --git a/assets/morphs/5.png b/assets/morphs/5.png deleted file mode 100644 index 222285b..0000000 Binary files a/assets/morphs/5.png and /dev/null differ diff --git a/assets/morphs/6.png b/assets/morphs/6.png deleted file mode 100644 index e2dd86f..0000000 Binary files a/assets/morphs/6.png and /dev/null differ diff --git a/assets/morphs/Artboard 79 copy 2.png b/assets/morphs/Artboard 79 copy 2.png deleted file mode 100644 index d5aa550..0000000 Binary files a/assets/morphs/Artboard 79 copy 2.png and /dev/null differ diff --git a/assets/morphs/Artboard 79 copy 3.png b/assets/morphs/Artboard 79 copy 3.png deleted file mode 100644 index 327d69c..0000000 Binary files a/assets/morphs/Artboard 79 copy 3.png and /dev/null differ diff --git a/assets/morphs/Artboard 79 copy 4.png b/assets/morphs/Artboard 79 copy 4.png deleted file mode 100644 index 42ab49a..0000000 Binary files a/assets/morphs/Artboard 79 copy 4.png and /dev/null differ diff --git a/assets/morphs/Artboard 79 copy 5.png b/assets/morphs/Artboard 79 copy 5.png deleted file mode 100644 index d823dff..0000000 Binary files a/assets/morphs/Artboard 79 copy 5.png and /dev/null differ diff --git a/assets/morphs/Artboard 79 copy 6.png b/assets/morphs/Artboard 79 copy 6.png deleted file mode 100644 index e2dd86f..0000000 Binary files a/assets/morphs/Artboard 79 copy 6.png and /dev/null differ diff --git a/assets/morphs/Artboard 79 copy 7.png b/assets/morphs/Artboard 79 copy 7.png deleted file mode 100644 index 222285b..0000000 Binary files a/assets/morphs/Artboard 79 copy 7.png and /dev/null differ diff --git a/assets/morphs/Artboard 79 copy 8.png b/assets/morphs/Artboard 79 copy 8.png deleted file mode 100644 index c5b830a..0000000 Binary files a/assets/morphs/Artboard 79 copy 8.png and /dev/null differ diff --git a/sketch.js b/sketch.js index 7719c46..1cbda46 100644 --- a/sketch.js +++ b/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 @@ -23,23 +23,24 @@ function setup() { img.filter(GRAY); createCanvas(countV, countH); image(img, 0, 0); + + describe('Mona lisa - by Davincci'); - // load the pixels of the canvas - // 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 - // 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 + // Combine every 10 values into one by calculating their average + // Put the result in a 2D array, the rows are the pixel-rows of the image + // 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 - averages2[i][j] = Math.round(normalized * 6)%7; // auf 0–6 mappen + // Scale between 0.0 - 1.0 + 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"); - - describe('Mona lisa - by Davincci'); + svgCanvas.save("morphed-mona-lisa.svg"); } \ No newline at end of file