sallar/SymbRaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sallar:37e86b0faf5e31f76fbc6c94dcfc2c5214103663
Branches Tags
sallar:main
...
compare: sallar:main
Branches Tags
sallar:main

4 Commits
37e86b0faf ... main

Author SHA1 Message Date
SallarShayegan
cdace22607 refactoring 2025-02-21 19:31:39 +01:00
SallarShayegan
317bca5f5c svg beste 2025-02-09 22:51:52 +01:00
SallarShayegan
269f4afe11 refactoring and better mapping concept 2025-02-09 21:00:53 +01:00
SallarShayegan
8dc9641ee0 the average grayscale of every 10x10 pixels block gets calculated and mapped to a morph. apparently it has a bug because the result does not seem to match the input image 2025-02-09 18:48:42 +01:00
13 changed files with 2668 additions and 37 deletions
Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
assets/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
assets/morphs/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
assets/morphs/0.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/morphs/1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
assets/morphs/2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/morphs/3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
assets/morphs/4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
assets/morphs/5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/morphs/6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

1
index.html
View File

@ -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
View File

File diff suppressed because it is too large Load Diff

113
sketch.js
View File

@ -1,69 +1,110 @@
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];
let count = 7; let count = 7;
let size = 10; let size = 10;
let countH = 400; let countH = 800;
let countV = 260; 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() {
/*
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); pixelDensity(1);
// Display the image // Display the image
img.resize(0, countH); img.resize(0, countH);
img.filter(GRAY); img.filter(GRAY);
createCanvas(countV, countH); createCanvas(countV, countH);
//createCanvas(countV*size, countH*size);
image(img, 0, 0); image(img, 0, 0);
describe('Mona lisa - by Davincci');
// Load the pixels of the canvas
// This is a 1D array of integers with the rgba values of the pixels
loadPixels(); loadPixels();
let pixels2d = new Array(400);
for(let i = 0; i < 400; i++){
pixels2d[i] = new Array(260);
}
let i = 0; let i = 0;
let j = 0; let j = 0;
let str1 = ""; // Create an array containing only the grayscale of every pixel
for(let k = 0; k < pixels.length; k++) { let pixels1d = [];
if (k%4 == 0) { // Since the picture is gray, the first 3 values (rgb) for every picture are similar
str1 += str(pixels[k]%7); // We need the value at indexes 0,4,7,...
pixels2d[i][j] = pixels[k]%7; for (let i = 0; i < pixels.length; i += 4)
j++; 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 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);
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;
} }
if (k/4%260 == 0 && k>0) { j++;
str1 += '\n'; if (k%countV == 0 && k>0) {
i++; i++;
j = 0; j = 0;
} }
} }
console.log(pixels); // Combine every 10 rows into one row by calculating the average of the values of every column
console.log(pixels2d); // 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);
//saveStrings(str1.split('\n'), 'data.txt'); for (let i = 0; i < averages.length; i++) {
//resizeCanvas(countV*10, countH*10) for (let j = 0; j < averages2[0].length; j++) {
/*imageMode(CORNER); sums[j] += averages[i][j];
for (let i = 0; i < countH; i++) { if (i%10 == 0) {
for (let j = 0; j < countV; j++) { averages2[i/10][j] = Math.round(sums[j]/10);
image(morphs[i], i*size, j*size, size, size); sums[j] = 0;
}
}
} }
}*/
describe('Mona lisa - by Davincci'); // Find the min and max value in averages2
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;
}
}
// 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++) {
// 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;
}
}
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("morphed-mona-lisa.svg");
} }