made a loading animation

sketches/imageOverlap.js

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