Compare commits
4 Commits
37e86b0faf
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| cdace22607 | |||
| 317bca5f5c | |||
| 269f4afe11 | |||
| 8dc9641ee0 |
BIN
assets/.DS_Store
vendored
Normal file
BIN
assets/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
assets/morphs/.DS_Store
vendored
Normal file
BIN
assets/morphs/.DS_Store
vendored
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
@ -10,6 +10,7 @@
|
||||
|
||||
<script src="libraries/p5.min.js"></script>
|
||||
<script src="libraries/p5.sound.min.js"></script>
|
||||
<script src="libraries/p5.svg.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
2589
libraries/p5.svg.js
Normal file
2589
libraries/p5.svg.js
Normal file
File diff suppressed because it is too large
Load Diff
115
sketch.js
115
sketch.js
@ -1,69 +1,110 @@
|
||||
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 = 400;
|
||||
let countV = 260;
|
||||
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++)
|
||||
morphs[i] = loadImage(`/assets/morphs/${i}.png`);
|
||||
morphs[i] = loadSVG(`/assets/morphs/${i}.svg`);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
// Display the image
|
||||
img.resize(0, countH);
|
||||
img.filter(GRAY);
|
||||
createCanvas(countV, countH);
|
||||
//createCanvas(countV*size, countH*size);
|
||||
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();
|
||||
let pixels2d = new Array(400);
|
||||
for(let i = 0; i < 400; i++){
|
||||
pixels2d[i] = new Array(260);
|
||||
}
|
||||
let i = 0;
|
||||
let j = 0;
|
||||
let str1 = "";
|
||||
for(let k = 0; k < pixels.length; k++) {
|
||||
if (k%4 == 0) {
|
||||
str1 += str(pixels[k]%7);
|
||||
pixels2d[i][j] = pixels[k]%7;
|
||||
j++;
|
||||
// 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 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) {
|
||||
str1 += '\n';
|
||||
j++;
|
||||
if (k%countV == 0 && k>0) {
|
||||
i++;
|
||||
j = 0;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(pixels);
|
||||
console.log(pixels2d);
|
||||
|
||||
//saveStrings(str1.split('\n'), 'data.txt');
|
||||
//resizeCanvas(countV*10, countH*10)
|
||||
/*imageMode(CORNER);
|
||||
for (let i = 0; i < countH; i++) {
|
||||
for (let j = 0; j < countV; j++) {
|
||||
image(morphs[i], i*size, j*size, size, size);
|
||||
// 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);
|
||||
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");
|
||||
}
|
||||
Reference in New Issue
Block a user