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

added an abstractAlgorithm.js

Browse Source
This commit is contained in:
Jürg Hallenbarter
2026-04-20 09:22:12 +00:00
parent f13cc6b27d
commit d78ef16bff
5 changed files with 142 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -4,9 +4,20 @@
<title>p5.js liberary</title> <title>p5.js liberary</title>
</head> </head>
<body> <body>
<h1>p5.js liberary by me</h1>
<div id="liberary"> <div id="liberary">
<iframe
</div> </div>
</body> </body>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>
<style>
h1 {
text-align: center;
font-family: cursive, serif;
}
body {
background-color: beige;
}
</style>
</html> </html>

35
index.js
View File

@@ -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);
}
}

4
loader.html
View File

@@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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> </head>
<body> <body style="background-color: beige; margin: 0;">
<script id="sketch"></script> <script id="sketch"></script>
<script> <script>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);

128
sketches/AbstractAlgorithm.js Normal file
View File

@@ -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]));
}
}
}

11
sketches/RecursiveCubes.js
View File

@@ -1,11 +0,0 @@
var numberOfSquaresX = 4;
var numberOfSquaresY = 4;
function setup() {
createCanvas(500, 500);
background(255, 255, 255);
}
function draw() {
}