112 lines
3.2 KiB
JavaScript
112 lines
3.2 KiB
JavaScript
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] = loadSVG(`/assets/morphs/${i}.svg`);
|
||
}
|
||
|
||
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);
|
||
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');
|
||
} |