jgh/p5js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made the image Overlap for more images

Browse Source
This commit is contained in:
Jürg Hallenbarter
2026-06-03 10:35:15 +02:00
parent 173ac7807b
commit 26d982589a
1 changed files with 44 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
sketches/imageOverlap.js
View File

@@ -1,7 +1,8 @@
let img1, img2; let img1, img2;
let mode = [0,0,0]; //rgb each coloum says if 1 look for bigger if -1 look for smaller if 0 ignore in decition let mode = [0,0,0]; //rgb each coloum says if 1 look for bigger if -1 look for smaller if 0 ignore in decition
let imageList = ["assets/wallpaper/dear.png", "assets/wallpaper/elphantJap.jpg", "assets/wallpaper/lagrugru.jpg"]; let imageList = ["assets/wallpaper/dear.png", "assets/wallpaper/elphantJap.jpg"];
let loadedImages = []; let loadedImages = [];
let doubleContinue = false;
async function setup() { async function setup() {
makeRandomMode(); makeRandomMode();
console.log(mode); console.log(mode);
@@ -13,31 +14,27 @@ async function setup() {
console.error('Failed to load ' + imageList[i], err); console.error('Failed to load ' + imageList[i], err);
} }
} }
try { if (loadedImages.length == 0) {
img1 = await new Promise(resolve => loadImage('assets/wallpaper/dear.png', resolve)); throw new Error('No images loaded');
console.log('img1 loaded'); return;
} catch (err) {
console.error('Failed to load dear.png', err);
} }
try { createCanvas(loadedImages[0].width, loadedImages[0].height);
img2 = await new Promise(resolve => loadImage('assets/wallpaper/elphantJap.jpg', resolve));
console.log('img2 loaded');
} catch (err) {
console.error('Failed to load elphantJap.jpg', err);
}
createCanvas(img1.width, img1.height);
background(255, 255, 255) background(255, 255, 255)
for (let col = 0; col < img1.width; col += 1) { for (let col = 0; col < loadedImages[0].width; col += 1) {
for (let row = 0; row < img1.height; row += 1) { for (let row = 0; row < loadedImages[0].height; row += 1) {
if (img2.get(col, row) == null|| img2.get(col, row) == undefined) { for (let i = 0; i < loadedImages.length; i++) {
if (loadedImages[i].get(col, row) == null|| loadedImages[i].get(col, row) == undefined) {
doubleContinue = true;
continue; continue;
} }
let color1 = img1.get(col, row); }
let color2 = img2.get(col, row); if (doubleContinue){
stroke(color(checkWhatPixelToTake(color1, color2))); doubleContinue = false;
continue;
}
stroke(color(checkWhatPixelToTake(col, row)));
strokeWeight(2); strokeWeight(2);
point(col, row); point(col, row);
} }
@@ -47,41 +44,42 @@ async function setup() {
function makeRandomMode() { function makeRandomMode() {
mode = [round(random(-1, 1)), round(random(-1, 1)), round(random(-1, 1))]; mode = [round(random(-1, 1)), round(random(-1, 1)), round(random(-1, 1))];
if ([abs(mode[0]), abs(mode[1]), abs(mode[2])] == [0,0,0]) { if (abs(mode[0]) + abs(mode[1]) + abs(mode[2]) === 0) {
mode = [1,1,1]; mode = [1,1,1];
} }
console.log("arrarray",[abs(mode[0]), abs(mode[1]), abs(mode[2])]);
} }
function checkWhatPixelToTake(color1, color2) { function checkWhatPixelToTake(col, row) {
let sum1=0; let sumImage = [];
let sum2=0; for (let i = 0; i < loadedImages.length; i++) {
if (mode[0] == 1) { sumImage[i] = 0;
sum1 += color1[0];
sum2 += color2[0];
}else if (mode[0] == -1) {
sum1 += (255-color1[0]);
sum2 += (255-color2[0]);
} }
if (mode[1] == 1) { for (let i = 0; i <= 2; i++) {
sum1 += color1[1]; if(mode[i] == 1){
sum2 += color2[1]; for (let j = 0; j < loadedImages.length; j++) {
}else if (mode[1] == -1) { sumImage[j] += loadedImages[j].get(col, row)[i];
sum1 += (255-color1[1]);
sum2 += (255-color2[1]);
} }
if (mode[2] == 1) { }else if (mode[i] == -1) {
sum1 += color1[2]; for (let j = 0; j < loadedImages.length; j++) {
sum2 += color2[2]; sumImage[j] += (255 - loadedImages[j].get(col, row)[i]);
}else if (mode[2] == -1) {
sum1 += (255-color1[2]);
sum2 += (255-color2[2]);
} }
if (sum1 > sum2) {
return color1;
} else {
return color2;
} }
} }
let bestSum = 0;
let bestSumIndex = -1;
for (let i = 0; i < sumImage.length; i++) {
if (sumImage[i] >= bestSum) {
bestSum = sumImage[i];
bestSumIndex = i;
}
}
if (bestSumIndex == -1) {
console.error('best pixel not found');
return loadedImages[0].get(col, row);
}
return loadedImages[bestSumIndex].get(col, row);
}
function draw() { function draw() {