From d78ef16bff9be87536eda6c5c602f183f198274f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Hallenbarter?= <jurg.hallenbarter@edu.vs.ch>
Date: Mon, 20 Apr 2026 09:22:12 +0000
Subject: [PATCH] added an abstractAlgorithm.js

---
 index.html                    |  13 +++-
 index.js                      |  35 ----------
 loader.html                   |   4 +-
 sketches/AbstractAlgorithm.js | 128 ++++++++++++++++++++++++++++++++++
 sketches/RecursiveCubes.js    |  11 ---
 5 files changed, 142 insertions(+), 49 deletions(-)
 create mode 100644 sketches/AbstractAlgorithm.js
 delete mode 100644 sketches/RecursiveCubes.js
diff --git a/index.html b/index.html
index 1d3f1ab..281634b 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,20 @@
 		<title>p5.js liberary</title>
 	</head>
 	<body>
+		<h1>p5.js liberary by me</h1>
 		<div id="liberary">
-
+			<iframe
 		</div>
 	</body>
 	<script type="module" src="index.js"></script>
+	<style>
+		h1 {
+			text-align: center;
+			font-family: cursive, serif;
+		}
+		body {
+			background-color: beige;
+		}
+
+	</style>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 185e81b..e69de29 100644
--- a/index.js
+++ b/index.js
@@ -1,35 +0,0 @@
-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", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-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);
-	}
-}
-
diff --git a/loader.html b/loader.html
index e28d4a9..7ca46ba 100644
--- a/loader.html
+++ b/loader.html
@@ -1,9 +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>
+			<script src="js/p5.js"></script>
 		</head>
-		<body>
+		<body style="background-color: beige; margin: 0;">
 			<script id="sketch"></script>
 			<script>
 				const params = new URLSearchParams(window.location.search);
diff --git a/sketches/AbstractAlgorithm.js b/sketches/AbstractAlgorithm.js
new file mode 100644
index 0000000..3c5b5c4
--- /dev/null
+++ b/sketches/AbstractAlgorithm.js
@@ -0,0 +1,128 @@
+const circleMaxSize = 30;
+const circleMinSize = 5;
+const maxcircleAmount = 1000;
+const circleCords = [];
+let maxTries = 100;
+let area = [];
+let moveToNextSpotVariable= [];
+let x, y, diameter, circleCordsConst, isCircleCollided, tries, insideTry = 0;
+
+function setup() {
+	createCanvas(500, 500);
+	background(255, 255, 255);
+	//randomSeed(99);
+
+	generateCircleAlgorithm(0, width, 0, height , maxcircleAmount, maxTries);
+
+}
+
+/**
+ * Checks if two circles are colliding.
+ * @param {number} x - The x coordinate of the first circle.
+ * @param {number} y - The y coordinate of the first circle.
+ * @param {number} diameter - The diameter of the first circle.
+ * @param {Array<number>} circle - The coordinates and diameter of the second circle.
+ * @returns {boolean} True if the circles are colliding, false otherwise.
+ */
+function circleCollision(x, y, diameter, circle) {
+	if (dist(x, y, circle[0], circle[1]) <= (diameter + circle[2]) * 0.5) {
+		return true;
+	}
+	return false;
+}
+
+function moveToNextSpot(x, y, diameter, circle) {
+	if (circleCollision(x, y, diameter, circle)) {
+		if (x < circle[0]) {
+			x = circle[0] - ((diameter + circle[2]));
+		} else if (x > circle[0]) {
+			x = circle[0] + ((diameter + circle[2]));
+		}
+		if (y < circle[1]) {
+			y = circle[1] - ((diameter + circle[2]));
+		} else if (y > circle[1]) {
+			y = circle[1] + ((diameter + circle[2]));
+		}
+	}
+	return [x, y];
+}
+
+
+/**
+ * Generates circles within a given region.
+ * The generated circles are stored in the global circleCords array.
+ * This function will stop generating circles if it cannot find a non-colliding spot within maxTries attempts.
+ * @param {number} minWidth - The minimum width of the region.
+ * @param {number} maxWidth - The maximum width of the region.
+ * @param {number} minHeight - The minimum height of the region.
+ * @param {number} maxHeight - The maximum height of the region.
+ * @param {number} maxcircleAmount - The maximum number of circles to generate.
+ * @param {number} maxTries - The maximum number of attempts to find a non-colliding spot.
+*/
+function generateCircleAlgorithm(minWidth,maxWidth,minHeight,maxHeight, maxcircleAmount, maxTries) {
+	for (let i = 0; i < maxcircleAmount; i++) {
+		x = random(minWidth, maxWidth);
+		y = random(minHeight, maxHeight);
+		diameter = random(circleMinSize, circleMaxSize);
+
+		if (!circleCords.length) {
+			circleCords.push([x, y, diameter]);
+		}
+
+		circleCordsConst = circleCords.length;
+		isCircleCollided = 0;
+		insideTry = 0;
+		//check for collision
+		for (let j = 0; j < circleCordsConst; j++) {
+			moveToNextSpotVariable = moveToNextSpot(x, y, diameter, circleCords[j]);
+			if (moveToNextSpotVariable[0] !== x || moveToNextSpotVariable[1] !== y) {
+				j = 0;
+				insideTry++;
+				if (insideTry > 1) {
+					isCircleCollided = 1;
+					break;
+				}
+			}
+			x = moveToNextSpotVariable[0];
+			y = moveToNextSpotVariable[1];
+			if (circleCollision(x, y, diameter, circleCords[j])) {
+				isCircleCollided = 1;
+				break;
+			}
+		}
+		if (!isCircleCollided) {
+			circleCords.push([x, y, diameter]);
+		} else {
+			if (tries > maxTries) {
+				break;
+			}
+			tries++;
+			i--;
+		}
+	}
+
+	//draw
+	for (let i = 0; i < circleCords.length; i++) {
+		stroke(0);
+		strokeWeight(1);
+		noFill();
+		fill(random(0, 255), random(0, 255), random(0, 255), random(0, 255));
+		circle(circleCords[i][0], circleCords[i][1], circleCords[i][2]);
+	}
+}
+
+function draw() {
+
+}
+
+function mousePressed() {
+	for (let i = 0; i < circleCords.length; i++) {
+		if (circleCollision(mouseX, mouseY, 1, circleCords[i])) {
+			area = circleCords.splice(i, 1)[0];
+			background(255, 255, 255);
+			tries = 0;
+			maxTries = 1000;
+			generateCircleAlgorithm(area[0] - area[2], area[0] + area[2], area[1] - area[2], area[1] + area[2], maxcircleAmount / (width / area[2]), maxTries / (width / area[2]));
+		}
+	}
+}
diff --git a/sketches/RecursiveCubes.js b/sketches/RecursiveCubes.js
deleted file mode 100644
index 6347d71..0000000
--- a/sketches/RecursiveCubes.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var numberOfSquaresX = 4;
-var numberOfSquaresY = 4;
-
-function setup() {
-	createCanvas(500, 500);
-	background(255, 255, 255);
-}
-
-
-function draw() {
-}
