From 6978b642316800d1bbab34732be79151c47c64c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Hallenbarter?= <jurg.hallenbarter@edu.vs.ch>
Date: Wed, 3 Jun 2026 11:46:22 +0200
Subject: [PATCH] make image noise load better

---
 index.html             |  2 +-
 sketches/imageNoice.js | 63 +++++++++++++++++++++---------------------
 2 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/index.html b/index.html
index 8ec8a06..a8ecf62 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@
 		<div class="liberayDiv">
 			<h2>Images manipulation</h2>
 			<div class="liberay">
-				<iframe src="http://127.0.0.1:5501/liberay.html?sketches=2images.js,image.js,imageNoice.js,L-System.js&size=200" frameborder="0"></iframe>
+				<iframe src="http://127.0.0.1:5501/liberay.html?sketches=imageOverlap,2images.js,image.js,imageNoice.js,L-System.js&size=200" frameborder="0"></iframe>
 			</div>
 		</div>
 
diff --git a/sketches/imageNoice.js b/sketches/imageNoice.js
index 3ceb095..efd904f 100644
--- a/sketches/imageNoice.js
+++ b/sketches/imageNoice.js
@@ -1,27 +1,28 @@
-async function setup() {
-	img1 = await new Promise(resolve => loadImage('assets/wallpaper/lagrugru.jpg', resolve));
-	createCanvas(img1.width, img1.height);
-	background(255, 255, 55)
-	// performance enhancmend (from LLM)
-	img1.loadPixels();
-	for (let y = 0; y < img1.height; y++) {
-		for (let x = 0; x < img1.width; x++) {
-			let idx = (x + y * img1.width) * 4;
-			let r = img1.pixels[idx];
-			let g = img1.pixels[idx+1];
-			let b = img1.pixels[idx+2];
-			let sum = r + g + b;
-			let threshold = random(0, 255) * 3;
-			set(x, y, sum < threshold ? color(0) : color(255));
-		}
-	}
-	updatePixels();
+let img1;
 
-	//original code (works to but somettimes not good for bigger images)
-/*
-	for (let col = 0; col < img1.width; col += 1) {
-		for (let row = 0; row < img1.height; row += 1) {
-			let c = img1.get(col, row);
+let processing = true;
+let currentRow = 0;
+let currentCol = 0;
+
+async function setup() {
+	img1 = await new Promise(resolve => loadImage('assets/wallpaper/Bird_Pixel_art_1.png', resolve));
+	createCanvas(img1.width, img1.height);
+	background(255, 255, 255)
+}
+
+
+function draw() {
+
+	if (!processing){
+		return;
+	}
+
+
+	let imgWidth = img1.width;
+	let imgHeight = img1.height;
+	if (currentRow < imgHeight) {
+		for (let col = 0; col < imgWidth; col++) {
+			let c = img1.get(col, currentRow);
 
 			if (c[0] + c[1] + c[2] < random(0, 255) * 3) {
 				c[0] = 0;
@@ -32,18 +33,16 @@ async function setup() {
 				c[1] = 255;
 				c[2] = 255;
 			}
+
 			stroke(color(c));
-			strokeWeight(1);
-			point(col, row);
+			strokeWeight(2);
+			point(col, currentRow);
 		}
+		currentRow++;
+	} else {
+		processing = false;
+		console.log('finished');
 	}
-	console.log('finished');
-*/
-}
-
-
-function draw() {
-
 }
 
 function mousePressed() {