init

2026-04-01 11:28:05 +00:00 · 2026-04-01 06:34:17 +00:00
15 changed files with 134588 additions and 0 deletions
--- a/assets/wallpaper
+++ b/assets/wallpaper
@@ -0,0 +1 @@
+/home/jgh/Dokumente/wallpaper/
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,13 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #f0f0f0;
+}
--- a/devSide.html
+++ b/devSide.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>p5.js Sketch Selector</title>
+	<link rel="stylesheet" href="css/style.css">
+	<script src="js/p5.js"></script>
+	<script src="js/addons/p5.sound.min.js"></script>
+	<style>
+		#sketch-selector {
+			position: fixed;
+			top: 10px;
+			right: 10px;
+			background: rgba(255, 255, 255, 0.9);
+			padding: 8px 12px;
+			border-radius: 8px;
+			box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+			font-family: sans-serif;
+			z-index: 1000;
+			font-size: 14px;
+		}
+		select, button {
+			margin-left: 5px;
+		}
+		#status {
+			position: fixed;
+			bottom: 10px;
+			right: 10px;
+			background: rgba(0,0,0,0.7);
+			color: white;
+			padding: 4px 8px;
+			border-radius: 4px;
+			font-family: monospace;
+			font-size: 12px;
+			z-index: 1000;
+		}
+	</style>
+</head>
+<body>
+	<div id="sketch-selector">
+		<label>Sketch: </label>
+		<select id="sketchSelect"></select>
+		<button id="loadBtn">Load</button>
+	</div>
+	<div id="status">No sketch loaded.</div>
+
+	<script>
+		// Helper: reload page with selected sketch
+		function reloadWithSketch(filename) {
+			if (filename) {
+				window.location.search = `?sketch=${encodeURIComponent(filename)}`;
+			} else {
+				window.location.search = ''; // clear
+			}
+		}
+
+		// Fallback list of sketch files (if auto-detection fails)
+		const FALLBACK_SKETCHES = [
+			"calmCircles.js",
+			"Cubes.js",
+			"labyrinth.js",
+			"RecursiveCubes.js",
+			"image.js"
+		];
+
+		// Auto-detect .js files in the same directory
+		async function detectSketches() {
+			try {
+				const response = await fetch(window.location.pathname);
+				const html = await response.text();
+				const parser = new DOMParser();
+				const doc = parser.parseFromString(html, 'text/html');
+				const links = doc.querySelectorAll('a');
+				const jsFiles = [];
+				for (let link of links) {
+					const href = link.getAttribute('href');
+					if (href && href.endsWith('.js') && !href.includes('/') && !href.includes('p5')) {
+						jsFiles.push(href);
+					}
+				}
+				if (jsFiles.length > 0) return jsFiles;
+			} catch (err) {
+				console.warn('Auto-detection failed, using fallback list:', err);
+			}
+			return FALLBACK_SKETCHES;
+		}
+
+		// Update dropdown with detected sketch files
+		function updateDropdown(selectElement, sketches, currentSketch) {
+			selectElement.innerHTML = '';
+			for (let sk of sketches) {
+				const option = document.createElement('option');
+				option.value = "sketches/"+sk;
+				option.textContent = sk;
+				if (sk === currentSketch) option.selected = true;
+				selectElement.appendChild(option);
+			}
+		}
+
+		// Main initialisation
+		(async function() {
+			const sketches = await detectSketches();
+			const currentSketch = new URLSearchParams(window.location.search).get('sketch');
+			const selectEl = document.getElementById('sketchSelect');
+			const loadBtn = document.getElementById('loadBtn');
+			const statusEl = document.getElementById('status');
+
+			// Fill dropdown
+			updateDropdown(selectEl, sketches, currentSketch);
+
+			// Show current sketch in status
+			if (currentSketch && sketches.includes(currentSketch)) {
+				statusEl.textContent = `Running: ${currentSketch}`;
+			} else {
+				statusEl.textContent = 'No sketch selected.';
+			}
+
+			// Handle load button: reload page with selected sketch
+			loadBtn.addEventListener('click', () => {
+				const selected = selectEl.value;
+				if (selected) {
+					reloadWithSketch(selected);
+				}
+			});
+		})();
+	</script>
+
+	<!-- 
+		Synchronously load the sketch specified in the URL parameter.
+		This must be placed after the selector UI but before any other dynamic scripts.
+		It ensures the sketch's setup() and draw() are defined before p5.js finishes loading.
+	-->
+	<script>
+		(function() {
+			const params = new URLSearchParams(window.location.search);
+			const sketchFile = params.get('sketch');
+			if (sketchFile) {
+				document.write('<script src="' + sketchFile + '"><\/script>');
+			}
+		})();
+	</script>
+</body>
+</html>
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>p5.js liberary</title>
+	</head>
+	<body>
+		<div id="liberary">
+
+		</div>
+	</body>
+	<script type="module" src="index.js"></script>
+</html>
--- a/index.js
+++ b/index.js
@@ -0,0 +1,35 @@
+console.log("test");
+/*
+var fs = require('fs');
+var files = fs.readdirSync('.');
+*/
+liberary = document.getElementById('liberary');
+liberary.innerHTML = "<p>title</p>";
+
+liberary.innerHTML += "<div class='item'></div>";
+
+// Source - https://stackoverflow.com/a/72205254
+// Posted by Mohammad Ali Rony
+// Retrieved 2026-04-01, License - CC BY-SA 4.0
+
+ function UrlExists(url)
+ {
+    var http = new XMLHttpRequest();
+    http.open('HEAD', url, false);
+    http.send();
+    return http.status!=404;
+ }
+
+var fileName = "";
+var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
+for (var i = 0; i < alphabet.length*15; i++){
+	fileName = "";
+	for (var i = 0; i < i/alphabet.length; i++){
+		fileName += alphabet[i];
+	}
+	fileName = alphabet[i] + ".js";
+	if (UrlExists("sketches/"+fileName)){
+		console.log(fileName);
+	}
+}
+
--- a/index2.html
+++ b/index2.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
+  </head>
+  <body>
+    <script src="sketches/imageNoice.js"></script>
+  </body>
+</html>
--- a/js/addons/p5.sound.min.js
+++ b/js/addons/p5.sound.min.js
--- a/js/p5.js
+++ b/js/p5.js
--- a/sketches/2images.js
+++ b/sketches/2images.js
@@ -0,0 +1,41 @@
+function preload() {
+	img1 = loadImage('assets/wallpaper/dear.png');
+	img2 = loadImage('assets/wallpaper/elphantJap.jpg');
+}
+
+function setup() {
+	createCanvas(img1.width, img1.height);
+	background(255,255,255)
+
+	//image(img1, 0, 0);
+
+	for (let col = 0; col < img1.width; col += 1) {
+		for (let row = 0; row < img1.height; row += 1) {
+			let c = img1.get(col, row);
+			if (col%2 == 0){
+				stroke(color(c));
+				strokeWeight(1);
+				point(col, row);
+			}
+		}
+	}
+	for (let col = 0; col < img2.width; col += 1) {
+		for (let row = 0; row < img2.height; row += 1) {
+			let c = img2.get(col, row);
+			if (col%2 == 1){
+				stroke(color(c));
+				strokeWeight(1);
+				point(col, row);
+			}
+		}
+	}
+}
+
+
+function draw() {
+
+}
+
+function mousePressed(){
+
+}
--- a/sketches/Cubes.js
+++ b/sketches/Cubes.js
@@ -0,0 +1,29 @@
+var size = 0
+var randomX = 0
+var randomY = 0
+var mouseIndex = 0
+
+function setup() {
+	createCanvas(500, 500);
+	background(255,255,255)
+	noFill();
+	for (i = 0; i < 30; i++){
+		size = random(0, 15)*i;
+		randomX = random(-width/10, width/10);
+		randomY = random(-height/10, height/10);
+		square(width/2 +randomX - size/2, height/2 +randomY- size/2, size);
+	}
+}
+
+
+function draw() {
+
+}
+
+function mousePressed(){
+	mouseIndex++
+	size = random(0, 15)*i;
+	randomX = random(-width/10, width/10);
+	randomY = random(-height/10, height/10);
+	square(width/2 +randomX - size/2, height/2 +randomY- size/2, size);
+}
--- a/sketches/RecursiveCubes.js
+++ b/sketches/RecursiveCubes.js
@@ -0,0 +1,11 @@
+var numberOfSquaresX = 4;
+var numberOfSquaresY = 4;
+
+function setup() {
+	createCanvas(500, 500);
+	background(255,255,255);
+}
+
+
+function draw() {
+}
--- a/sketches/calmCircles.js
+++ b/sketches/calmCircles.js
@@ -0,0 +1,33 @@
+function setup() {
+	createCanvas(500, 500);
+}
+
+function draw() {
+	background(random(100,200), 0, random(100,200));
+
+	for (let i = 0; i <= width * sqrt(2); i += 10){
+		stroke(random(255),random(255),random(255))
+		strokeWeight(2)
+		noFill()
+		circle(width/2 + random(0,30),height/2 + random(0,30),i)
+
+		const strokeValue = i%20 ? 100 : 0;
+		stroke(strokeValue)
+	}
+
+	for (let i = 0; i < 50; i++){
+		stroke(random(255),random(255),random(255))
+		let x = random(0, width)
+		let y = random(0, height)
+		line(width/2,height/2,x,y)
+	}
+}
+
+function mousePressed(){
+		for (let i = 0; i < 50; i++){
+			stroke(random(255),random(255),random(255))
+			let x = random(0, width)
+			let y = random(0, height)
+			line(mouseX,mouseY,x,y)
+		}
+}
--- a/sketches/image.js
+++ b/sketches/image.js
@@ -0,0 +1,30 @@
+function preload() {
+	img1 = loadImage('assets/wallpaper/dear.png');
+	img2 = loadImage('assets/wallpaper/elphantJap.jpg');
+}
+
+function setup() {
+	createCanvas(img1.width, img1.height);
+	background(255,255,255)
+
+	//image(img1, 0, 0);
+	var glithes= random(3, 10);
+
+	for (let col = 0; col < img1.width; col += 1) {
+		for (let row = 0; row < img1.height; row += 1) {
+			let c = img1.get(col, row);
+			stroke(color(c));
+			strokeWeight(1);
+			point(col, row);
+		}
+	}
+}
+
+
+function draw() {
+
+}
+
+function mousePressed(){
+
+}
--- a/sketches/imageNoice.js
+++ b/sketches/imageNoice.js
@@ -0,0 +1,38 @@
+function preload() {
+	img1 = loadImage('assets/wallpaper/elphantJap.jpg');
+}
+
+function setup() {
+	createCanvas(img1.width, img1.height);
+	background(255,255,55)
+
+	//image(img1, 0, 0);
+
+	for (let col = 0; col < img1.width; col += 1) {
+		for (let row = 0; row < img1.height; row += 1) {
+			let c = img1.get(col, row);
+
+			if (c[0] + c[1] + c[2] < random(0, 255)*3) {
+				c[0] = 0;
+				c[1] = 0;
+				c[2] = 0;
+			}else{
+				c[0] = 255;
+				c[1] = 255;
+				c[2] = 255;
+			}
+			stroke(color(c));
+			strokeWeight(1);
+			point(col, row);
+		}
+	}
+}
+
+
+function draw() {
+
+}
+
+function mousePressed(){
+
+}
--- a/sketches/labyrinth.js
+++ b/sketches/labyrinth.js
@@ -0,0 +1,296 @@
+var gridSize = 10;
+var labyrinth = [];
+var waterParticles = [];
+var gravity = 0.5;
+var damping = 0.98;
+var radius = gridSize / 4;
+var substeps = 4;
+var wallFriction = 0.99;
+
+var cohesionStrength = 0.1;
+var cohesionRadius = radius * 4;
+
+var wallGrid = [];
+var rows, cols;
+
+function setup() {
+	createCanvas(500, 500);
+	rows = ceil(height / gridSize);
+	cols = ceil(width / gridSize);
+
+	for (let i = 0; i < rows; i++) {
+		wallGrid[i] = [];
+		for (let j = 0; j < cols; j++) {
+			wallGrid[i][j] = [];
+		}
+	}
+
+	for (let i = 0; i < width; i += gridSize) {
+		for (let j = 0; j < height; j += gridSize) {
+			makeLabyrinth(i, j);
+		}
+	}
+}
+
+function makeLabyrinth(i, j) {
+	const directions = [
+		[i - gridSize, j + gridSize],
+		[i + gridSize, j + gridSize],
+		[i - gridSize, j - gridSize],
+		[i + gridSize, j - gridSize]
+	];
+	const [x, y] = directions[Math.floor(Math.random() * directions.length)];
+	const wall = [i, j, x, y];
+	labyrinth.push(wall);
+
+	// Sort directions to make wall detection easier
+	let minX = min(i, x);
+	let maxX = max(i, x);
+	let minY = min(j, y);
+	let maxY = max(j, y);
+	let startCol = floor(minX / gridSize);
+	let endCol = floor(maxX / gridSize);
+	let startRow = floor(minY / gridSize);
+	let endRow = floor(maxY / gridSize);
+	for (let r = startRow; r <= endRow; r++) {
+		for (let c = startCol; c <= endCol; c++) {
+			if (r >= 0 && r < rows && c >= 0 && c < cols) {
+				wallGrid[r][c].push(wall);
+			}
+		}
+	}
+}
+
+// ---------- AI generated: point‑to‑segment distance for wall collision ----------
+function pointToSegmentDistance(px, py, x1, y1, x2, y2) {
+	let ax = px - x1;
+	let ay = py - y1;
+	let bx = x2 - x1;
+	let by = y2 - y1;
+	let len2 = bx * bx + by * by;
+	if (len2 === 0) {
+		let dist = sqrt(ax * ax + ay * ay);
+		let nx = ax / (dist + 1e-8);
+		let ny = ay / (dist + 1e-8);
+		return { dist, nx, ny };
+	}
+	let t = (ax * bx + ay * by) / len2;
+	t = constrain(t, 0, 1);
+	let closestX = x1 + t * bx;
+	let closestY = y1 + t * by;
+	let dx = px - closestX;
+	let dy = py - closestY;
+	let dist = sqrt(dx * dx + dy * dy);
+	let nx = dx / (dist + 1e-8);
+	let ny = dy / (dist + 1e-8);
+	return { dist, nx, ny };
+}
+
+// ---------- AI generated: wall collision resolution (push out, reflect) ----------
+function resolveWallCollision(p, stepX, stepY) {
+	p.x += stepX;
+	p.y += stepY;
+
+	for (let iter = 0; iter < 3; iter++) {
+		let cellX = floor(p.x / gridSize);
+		let cellY = floor(p.y / gridSize);
+		let minDist = Infinity;
+		let bestNx = 0, bestNy = 0;
+
+		for (let dx = -1; dx <= 1; dx++) {
+			for (let dy = -1; dy <= 1; dy++) {
+				let nx = cellX + dx;
+				let ny = cellY + dy;
+				if (nx >= 0 && nx < cols && ny >= 0 && ny < rows) {
+					for (let w of wallGrid[ny][nx]) {
+						let { dist, nx: nX, ny: nY } = pointToSegmentDistance(p.x, p.y, w[0], w[1], w[2], w[3]);
+						if (dist < minDist) {
+							minDist = dist;
+							bestNx = nX;
+							bestNy = nY;
+						}
+					}
+				}
+			}
+		}
+
+		if (minDist < radius) {
+			let overlap = radius - minDist;
+			p.x += bestNx * overlap;
+			p.y += bestNy * overlap;
+			let dot = p.vx * bestNx + p.vy * bestNy;
+			if (dot < 0) {
+				p.vx -= dot * bestNx;
+				p.vy -= dot * bestNy;
+				p.vx *= wallFriction;
+				p.vy *= wallFriction;
+			}
+		} else {
+			break;
+		}
+	}
+}
+
+// ---------- AI generated: sticky particle‑particle collision ----------
+function handleParticleCollision(p1, p2) {
+	let dx = p2.x - p1.x;
+	let dy = p2.y - p1.y;
+	let dist = sqrt(dx * dx + dy * dy);
+	let minDist = radius * 2;
+	if (dist < minDist) {
+		let overlap = minDist - dist;
+		let nx = dx / dist;
+		let ny = dy / dist;
+		// Separate
+		p1.x -= nx * overlap * 0.5;
+		p1.y -= ny * overlap * 0.5;
+		p2.x += nx * overlap * 0.5;
+		p2.y += ny * overlap * 0.5;
+		// Velocity exchange (low restitution for stickiness)
+		let vrelx = p2.vx - p1.vx;
+		let vrely = p2.vy - p1.vy;
+		let dot = vrelx * nx + vrely * ny;
+		if (dot < 0) {
+			let e = 0.2;
+			let imp = (1 + e) * dot / 2;
+			p1.vx += imp * nx;
+			p1.vy += imp * ny;
+			p2.vx -= imp * nx;
+			p2.vy -= imp * ny;
+		}
+	}
+}
+
+// ---------- AI generated: cohesion (attraction between nearby particles) ----------
+function applyCohesion(p, particleGrid, cellX, cellY) {
+	let fx = 0, fy = 0;
+	for (let dx = -1; dx <= 1; dx++) {
+		for (let dy = -1; dy <= 1; dy++) {
+			let nx = cellX + dx;
+			let ny = cellY + dy;
+			if (nx >= 0 && nx < cols && ny >= 0 && ny < rows) {
+				for (let other of particleGrid[ny][nx]) {
+					if (other === p) continue;
+					let ddx = other.x - p.x;
+					let ddy = other.y - p.y;
+					let dist = sqrt(ddx*ddx + ddy*ddy);
+					if (dist > 0 && dist < cohesionRadius) {
+						let strength = cohesionStrength * (1 - dist / cohesionRadius);
+						fx += ddx * strength;
+						fy += ddy * strength;
+					}
+				}
+			}
+		}
+	}
+	p.vx += fx;
+	p.vy += fy;
+}
+
+function draw() {
+	background(255);
+
+	for (let w of labyrinth) {
+		stroke(0);
+		strokeWeight(1);
+		line(w[0], w[1], w[2], w[3]);
+	}
+
+	if (mouseIsPressed) {
+		waterParticles.push({
+			x: mouseX,
+			y: mouseY,
+			vx: random(-1, 1),
+			vy: random(-1, 1)
+		});
+	}
+
+	// ---------- AI generated: build particle grid for cohesion & collisions ----------
+	let particleGrid = [];
+	for (let i = 0; i < rows; i++) {
+		particleGrid[i] = [];
+		for (let j = 0; j < cols; j++) {
+			particleGrid[i][j] = [];
+		}
+	}
+	for (let p of waterParticles) {
+		let cellX = floor(p.x / gridSize);
+		let cellY = floor(p.y / gridSize);
+		if (cellX >= 0 && cellX < cols && cellY >= 0 && cellY < rows) {
+			particleGrid[cellY][cellX].push(p);
+		}
+	}
+
+	for (let p of waterParticles) {
+		let cellX = floor(p.x / gridSize);
+		let cellY = floor(p.y / gridSize);
+		applyCohesion(p, particleGrid, cellX, cellY);
+	}
+
+	for (let p of waterParticles) {
+		p.vy += gravity;
+		p.vx *= damping;
+		p.vy *= damping;
+	}
+
+	for (let p of waterParticles) {
+		let stepX = p.vx / substeps;
+		let stepY = p.vy / substeps;
+		for (let s = 0; s < substeps; s++) {
+			resolveWallCollision(p, stepX, stepY);
+		}
+		p.x = constrain(p.x, radius, width - radius);
+		p.y = constrain(p.y, radius, height - radius);
+		if (p.x <= radius || p.x >= width - radius) p.vx *= -0.9;
+		if (p.y <= radius || p.y >= height - radius) p.vy *= -0.9;
+	}
+
+	for (let i = waterParticles.length-1; i >= 0; i--) {
+		let p = waterParticles[i];
+		if (p.y + radius >= height) {
+			waterParticles.splice(i, 1);
+		}
+	}
+
+	for (let i = 0; i < rows; i++) {
+		for (let j = 0; j < cols; j++) {
+			particleGrid[i][j] = [];
+		}
+	}
+	for (let p of waterParticles) {
+		let cellX = floor(p.x / gridSize);
+		let cellY = floor(p.y / gridSize);
+		if (cellX >= 0 && cellX < cols && cellY >= 0 && cellY < rows) {
+			particleGrid[cellY][cellX].push(p);
+		}
+	}
+
+	let handled = new Array(waterParticles.length).fill(false);
+	for (let i = 0; i < waterParticles.length; i++) {
+		if (handled[i]) continue;
+		let p1 = waterParticles[i];
+		let cellX = floor(p1.x / gridSize);
+		let cellY = floor(p1.y / gridSize);
+		for (let dx = -1; dx <= 1; dx++) {
+			for (let dy = -1; dy <= 1; dy++) {
+				let nx = cellX + dx;
+				let ny = cellY + dy;
+				if (nx >= 0 && nx < cols && ny >= 0 && ny < rows) {
+					for (let p2 of particleGrid[ny][nx]) {
+						if (p2 === p1) continue;
+						let j = waterParticles.indexOf(p2);
+						if (j <= i) continue;
+						handleParticleCollision(p1, p2);
+					}
+				}
+			}
+		}
+		handled[i] = true;
+	}
+
+	fill(0, 0, 255);
+	noStroke();
+	for (let p of waterParticles) {
+		ellipse(p.x, p.y, radius * 2, radius * 2);
+	}
+}
Author	SHA1	Message	Date
Jürg Hallenbarter	3f9de9c266	init	2026-04-01 11:28:05 +00:00
Jürg Hallenbarter	10c9cad0a6	init	2026-04-01 06:34:17 +00:00