Compare commits
2 Commits
269f4afe11
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| cdace22607 | |||
| 317bca5f5c |
1
.gitignore
vendored
@ -1 +0,0 @@
|
|||||||
node_modules/
|
|
||||||
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 27 KiB |
@ -10,6 +10,7 @@
|
|||||||
|
|
||||||
<script src="libraries/p5.min.js"></script>
|
<script src="libraries/p5.min.js"></script>
|
||||||
<script src="libraries/p5.sound.min.js"></script>
|
<script src="libraries/p5.sound.min.js"></script>
|
||||||
|
<script src="libraries/p5.svg.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
2589
libraries/p5.svg.js
Normal file
54
sketch.js
@ -1,21 +1,21 @@
|
|||||||
let img;
|
let img;
|
||||||
|
|
||||||
let morphs = [];
|
let morphs = [];
|
||||||
|
// The order of the morphs, being mapped to the grayscale
|
||||||
const orderedMorphs = [5,6,0,4,1,2,3];
|
const orderedMorphs = [5,6,0,4,1,2,3];
|
||||||
let count = 7;
|
let count = 7;
|
||||||
let size = 10;
|
let size = 10;
|
||||||
let countH = 800;
|
let countH = 800;
|
||||||
let countV = 520;
|
let countV = 520;
|
||||||
|
|
||||||
// Load the image
|
// Load the image and symbols
|
||||||
function preload() {
|
function preload() {
|
||||||
img = loadImage('/assets/mona-lisa.jpg');
|
img = loadImage('/assets/mona-lisa.jpg');
|
||||||
for (let i = 0; i < count; i++)
|
for (let i = 0; i < count; i++)
|
||||||
morphs[i] = loadImage(`/assets/morphs/${i}.png`);
|
morphs[i] = loadSVG(`/assets/morphs/${i}.svg`);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setup() {
|
function setup() {
|
||||||
|
|
||||||
pixelDensity(1);
|
pixelDensity(1);
|
||||||
|
|
||||||
// Display the image
|
// Display the image
|
||||||
@ -23,23 +23,24 @@ function setup() {
|
|||||||
img.filter(GRAY);
|
img.filter(GRAY);
|
||||||
createCanvas(countV, countH);
|
createCanvas(countV, countH);
|
||||||
image(img, 0, 0);
|
image(img, 0, 0);
|
||||||
|
|
||||||
|
describe('Mona lisa - by Davincci');
|
||||||
|
|
||||||
// load the pixels of the canvas
|
// Load the pixels of the canvas
|
||||||
// this is a 1-dimensional integer array with the rgba values of
|
// This is a 1D array of integers with the rgba values of the pixels
|
||||||
// the pixels
|
|
||||||
loadPixels();
|
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 i = 0;
|
||||||
let j = 0;
|
let j = 0;
|
||||||
|
// Create an array containing only the grayscale of every pixel
|
||||||
let pixels1d = [];
|
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)
|
for (let i = 0; i < pixels.length; i += 4)
|
||||||
pixels1d.push(pixels[i]);
|
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);
|
let averages = new Array(countH);
|
||||||
for (let i = 0; i < averages.length; i++)
|
for (let i = 0; i < averages.length; i++)
|
||||||
averages[i] = new Array(countV/10);
|
averages[i] = new Array(countV/10);
|
||||||
@ -57,8 +58,9 @@ function setup() {
|
|||||||
j = 0;
|
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 sums = new Array(countV/10).fill(0);
|
||||||
let averages2 = new Array(countH/10);
|
let averages2 = new Array(countH/10);
|
||||||
for (let i = 0; i < averages2.length; i++)
|
for (let i = 0; i < averages2.length; i++)
|
||||||
@ -69,13 +71,12 @@ function setup() {
|
|||||||
sums[j] += averages[i][j];
|
sums[j] += averages[i][j];
|
||||||
if (i%10 == 0) {
|
if (i%10 == 0) {
|
||||||
averages2[i/10][j] = Math.round(sums[j]/10);
|
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;
|
sums[j] = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 1. Finde Min- und Max-Wert
|
|
||||||
|
// Find the min and max value in averages2
|
||||||
let minGray = Infinity;
|
let minGray = Infinity;
|
||||||
let maxGray = -Infinity;
|
let maxGray = -Infinity;
|
||||||
|
|
||||||
@ -87,24 +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 i = 0; i < averages2.length; i++) {
|
||||||
for (let j = 0; j < averages2[i].length; j++) {
|
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);
|
||||||
image(img, 0, 0);
|
svgCanvas.image(img, 0, 0);
|
||||||
|
|
||||||
imageMode(CORNER);
|
|
||||||
for (let i = 0; i < countH/10; i++) {
|
for (let i = 0; i < countH/10; i++) {
|
||||||
for (let j = 0; j < countV/10; j++) {
|
for (let j = 0; j < countV/10; j++) {
|
||||||
image(morphs[orderedMorphs[averages2[i][j]]], j*size+countV+size, i*size, size, size);
|
svgCanvas.image(morphs[orderedMorphs[averages2[i][j]]], j*size+countV+size, i*size, size, size);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
svgCanvas.save("morphed-mona-lisa.svg");
|
||||||
describe('Mona lisa - by Davincci');
|
|
||||||
}
|
}
|
||||||