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

made a loading animation

Browse Source
This commit is contained in:
Jürg Hallenbarter
2026-06-03 10:59:48 +02:00
parent 26d982589a
commit 0787e9dde2
1 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
sketches/imageOverlap.js
View File

@@ -1,8 +1,13 @@
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"]; let imageList = ["assets/wallpaper/dear.png", "assets/wallpaper/elphantJap.jpg"];
let loadedImages = []; let loadedImages = [];
let doubleContinue = false; let doubleContinue = false;
let processing = false;
let currentRow = 0;
let currentCol = 0;
async function setup() { async function setup() {
makeRandomMode(); makeRandomMode();
console.log(mode); console.log(mode);
@@ -20,34 +25,50 @@ async function setup() {
} }
createCanvas(loadedImages[0].width, loadedImages[0].height); createCanvas(loadedImages[0].width, loadedImages[0].height);
background(255, 255, 255) background(255, 255, 255);
strokeWeight(2);
for (let col = 0; col < loadedImages[0].width; col += 1) { processing = true;
for (let row = 0; row < loadedImages[0].height; row += 1) { currentRow = 0;
currentCol = 0;
}
function draw() {
if (!processing) return;
// Process one row per frame
let imgWidth = loadedImages[0].width;
let imgHeight = loadedImages[0].height;
if (currentRow < imgHeight) {
for (let col = 0; col < imgWidth; col++) {
// Check if pixel eixsts
let pixelValid = true;
for (let i = 0; i < loadedImages.length; i++) { for (let i = 0; i < loadedImages.length; i++) {
if (loadedImages[i].get(col, row) == null|| loadedImages[i].get(col, row) == undefined) { if (loadedImages[i].get(col, currentRow) == null || loadedImages[i].get(col, currentRow) == undefined) {
doubleContinue = true; pixelValid = false;
continue; break;
} }
} }
if (doubleContinue){ if (!pixelValid) {
doubleContinue = false;
continue; continue;
} }
stroke(color(checkWhatPixelToTake(col, row)));
strokeWeight(2); stroke(color(checkWhatPixelToTake(col, currentRow)));
point(col, row); point(col, currentRow);
} }
currentRow++;
} else {
processing = false;
console.log('finished');
} }
console.log('finished');
} }
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) { 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(col, row) { function checkWhatPixelToTake(col, row) {
@@ -56,11 +77,11 @@ function checkWhatPixelToTake(col, row) {
sumImage[i] = 0; sumImage[i] = 0;
} }
for (let i = 0; i <= 2; i++) { for (let i = 0; i <= 2; i++) {
if(mode[i] == 1){ if (mode[i] == 1) {
for (let j = 0; j < loadedImages.length; j++) { for (let j = 0; j < loadedImages.length; j++) {
sumImage[j] += loadedImages[j].get(col, row)[i]; sumImage[j] += loadedImages[j].get(col, row)[i];
} }
}else if (mode[i] == -1) { } else if (mode[i] == -1) {
for (let j = 0; j < loadedImages.length; j++) { for (let j = 0; j < loadedImages.length; j++) {
sumImage[j] += (255 - loadedImages[j].get(col, row)[i]); sumImage[j] += (255 - loadedImages[j].get(col, row)[i]);
} }
@@ -81,10 +102,6 @@ function checkWhatPixelToTake(col, row) {
return loadedImages[bestSumIndex].get(col, row); return loadedImages[bestSumIndex].get(col, row);
} }
function draw() {
}
function mousePressed() { function mousePressed() {
} }