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

added more algorithms

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Jürg Hallenbarter
2026-04-27 17:08:24 +00:00
parent d78ef16bff
commit 9a9080c155
10 changed files with 278 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -1,17 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>p5.js liberary</title> <title>p5.js liberay</title>
</head> </head>
<body> <body>
<h1>p5.js liberary by me</h1> <h1>p5.js liberay by me</h1>
<div id="liberary"> <div style="width: 470px;">
<iframe <h2 >AbstractAlgorithms</h2>
<div id="liberay">
<iframe src="http://127.0.0.1:5500/liberay.html?sketches=Cubes.js,calmCircles.js,labyrinth.js,AbstractAlgorithm.js&size=200" frameborder="0"></iframe>
</div>
</div> </div>
</body> </body>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>
<style> <style>
h1 { h1, h2 {
text-align: center; text-align: center;
font-family: cursive, serif; font-family: cursive, serif;
} }
@@ -19,5 +22,17 @@
background-color: beige; background-color: beige;
} }
#liberay {
height: 600px;
width: 600px;
}
iframe {
height: 100%;
width: 100%;
border: none;
margin: 0;
}
</style> </style>
</html> </html>

46
liberay.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<style>
body {
margin: 0;
}
iframe {
margin: 0;
margin: 10px;
padding: 0;
border-width: 5px;
border-color: rgb(67, 0, 67);
border-style:groove;
border-radius: 10%;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
</style>
<script>
const params = new URLSearchParams(window.location.search);
const sketchList = params.get('sketches'); // e.g. liberay.html?sketches=2images.js,calmCircles.js
const sketchSize = params.get('size'); // e.g. liberay.html?size=500
if (sketchList) {
const sketches = sketchList.split(',');
for (let sketch of sketches) {
const iframe = document.createElement('iframe');
iframe.src = `loader.html?sketch=${encodeURIComponent(sketch)}`;
// Apply size if provided
if (sketchSize) {
iframe.style.width = sketchSize + 'px';
iframe.style.height = sketchSize + 'px';
} else {
iframe.style.width = '500px';
iframe.style.height = '500px';
}
document.body.appendChild(iframe);
}
}
</script>
</html>

16
loader.html
View File

@@ -7,11 +7,25 @@
<script id="sketch"></script> <script id="sketch"></script>
<script> <script>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const sketchName = "sketches/" + params.get('sketch'); let sketchName = "sketches/" + params.get('sketch');
if (sketchName == "sketches/") {
sketchName = "sketches/" + params.get('sketches');
}
if (sketchName) { if (sketchName) {
console.log(sketchName+" found");
if (!sketchName.endsWith('.js')) {
sketchName += '.js';
}
const script = document.getElementById('sketch'); const script = document.getElementById('sketch');
script.src = sketchName; script.src = sketchName;
} }
</script> </script>
</body> </body>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</html> </html>

4
sketches/2images.js
View File

@@ -1,6 +1,6 @@
function preload() { function preload() {
img1 = loadImage('assets/wallpaper/dear.png'); img1 = loadImage('../assets/wallpaper/dear.png');
img2 = loadImage('assets/wallpaper/elphantJap.jpg'); img2 = loadImage('../assets/wallpaper/elphantJap.jpg');
} }
function setup() { function setup() {

7
sketches/AbstractAlgorithm.js
View File

@@ -1,6 +1,6 @@
const circleMaxSize = 30; const circleMaxSize = 30;
const circleMinSize = 5; const circleMinSize = 5;
const maxcircleAmount = 1000; let maxcircleAmount = 2;
const circleCords = []; const circleCords = [];
let maxTries = 100; let maxTries = 100;
let area = []; let area = [];
@@ -8,7 +8,10 @@ let moveToNextSpotVariable= [];
let x, y, diameter, circleCordsConst, isCircleCollided, tries, insideTry = 0; let x, y, diameter, circleCordsConst, isCircleCollided, tries, insideTry = 0;
function setup() { function setup() {
createCanvas(500, 500); createCanvas(windowWidth, windowHeight);
maxcircleAmount = maxTries = floor(width);
console.log(maxTries);
console.log(maxcircleAmount);
background(255, 255, 255); background(255, 255, 255);
//randomSeed(99); //randomSeed(99);

2
sketches/Cubes.js
View File

@@ -4,7 +4,7 @@ var randomY = 0
var mouseIndex = 0 var mouseIndex = 0
function setup() { function setup() {
createCanvas(500, 500); createCanvas(windowWidth, windowHeight);
background(255, 255, 255) background(255, 255, 255)
noFill(); noFill();
for (i = 0; i < 30; i++) { for (i = 0; i < 30; i++) {

184
sketches/L-System.js Normal file
View File

@@ -0,0 +1,184 @@
let angle = 3.141592653589*1.5;
let angleDecrement = 1;
let stepSize = 10;
let widthIncrement = 1;
let currentWidth = 1;
let currentPosition = [501 / 2, 500];
let fractalst = "FF+[+F-F-F]-[-F+F+F]";
let stackList = [];
let lineLenghtScaleFactor = 1.5;
let swapPlusMinusState = false;
let turningAngleIncrement = 0.1;
//FF+[+F-F-F]-[-F+F+F] fork
function setup() {
console.log("setup");
createCanvas(windowWidth, windowHeight);
background(255, 255, 255)
noFill();
stroke(0, 0, 0);
strokeWeight(1);
currentPosition = [width / 2, height];
generateFractal();
}
function generateFractal() {
for (let i = 0; i < fractalst.length; i++) {
let c = fractalst.charAt(i);
switch (c) {
case "F":
forward();
break;
case "+":
plus();
break;
case "-":
minus();
break;
case "f":
forwardNoLine();
break;
case "|":
reverseDirection();
break;
case "#":
lineWidthIncrement();
break;
case "!":
lineWidthDecrement();
break;
case "[":
pushStack(i);
break;
case "]":
popStack(i);
break;
case ">":
lineWidthMultiply();
break;
case "<":
lineWidthDivide();
break;
case "&":
swapPlusMinus();
break;
case "@":
drawDot();
break;
case ")":
angleIncrement();
break;
case "(":
angleDecrement();
break;
default:
console.log("unrecognized character",c);
break;
}
}
}
function minus() {
if (swapPlusMinusState) {
angle += angleDecrement;
return
}
angle -= angleDecrement;
}
function plus() {
if (swapPlusMinusState) {
angle -= angleDecrement;
return
}
angle += angleDecrement;
}
function lineWidthIncrement(){
currentWidth + widthIncrement;
strokeWeight(currentWidth);
}
function lineWidthDecrement(){
currentWidth - widthIncrement;
strokeWeight(currentWidth);
}
function forward() {
let x = currentPosition[0] + cos(angle) * stepSize;
let y = currentPosition[1] + sin(angle) * stepSize;
line(currentPosition[0], currentPosition[1], x, y);
currentPosition = [x, y];
}
function forwardNoLine(){
let x = currentPosition[0] + cos(angle) * stepSize;
let y = currentPosition[1] + sin(angle) * stepSize;
currentPosition = [x, y];
}
function backward() {
let x = currentPosition[0] - cos(angle) * stepSize;
let y = currentPosition[1] - sin(angle) * stepSize;
line(currentPosition[0], currentPosition[1], x, y);
currentPosition = [x, y];
}
function reverseDirection(){
angle - 3.14159265358979323;
}
function pushStack(i){
console.log(angle)
stackList.push([i,currentPosition[0],currentPosition[1],angle,currentWidth]);
}
function popStack(i){
stackToPop = stackList.length - 1;
console.log(stackList[stackToPop])
currentPosition = [stackList[stackToPop][1],stackList[stackToPop][2]];
angle = stackList[stackToPop][3];
strokeWeight[stackList[stackToPop][4]]
}
function lineWidthMultiply(){
currentWidth * lineLenghtScaleFactor;
strokeWeight(currentWidth);
}
function lineWidthDivide(){
currentWidth / lineLenghtScaleFactor;
strokeWeight(currentWidth);
}
function swapPlusMinus(){
if (swapPlusMinusState) {
swapPlusMinusState = false;
return
}
swapPlusMinusState = true;
}
function drawDot() {
let x = currentPosition[0];
let y = currentPosition[1];
strokeWeight(currentWidth);
point(x, y);
}
function angleIncrement() {
angle += turningAngleIncrement;
}
function angleDecrement() {
angle -= turningAngleIncrement;
}
function draw() {
}
function mousePressed() {
}

4
sketches/calmCircles.js
View File

@@ -1,5 +1,5 @@
function setup() { function setup() {
createCanvas(500, 500); createCanvas(windowWidth, windowHeight);
} }
function draw() { function draw() {
@@ -7,7 +7,7 @@ function draw() {
for (let i = 0; i <= width * sqrt(2); i += 10) { for (let i = 0; i <= width * sqrt(2); i += 10) {
stroke(random(255), random(255), random(255)) stroke(random(255), random(255), random(255))
strokeWeight(2) strokeWeight(width / 70)
noFill() noFill()
circle(width / 2 + random(0, 30), height / 2 + random(0, 30), i) circle(width / 2 + random(0, 30), height / 2 + random(0, 30), i)

2
sketches/labyrinth.js
View File

@@ -14,7 +14,7 @@ var wallGrid = [];
var rows, cols; var rows, cols;
function setup() { function setup() {
createCanvas(500, 500); createCanvas(windowWidth, windowHeight);
rows = ceil(height / gridSize); rows = ceil(height / gridSize);
cols = ceil(width / gridSize); cols = ceil(width / gridSize);

4
sketches/sketchList.txt
View File

@@ -1,2 +1,2 @@
2images.js, calmCircles.js, Cubes.js, image.js, imageNoice.js, labyrinth.js, 2images.js, AbstractAlgorithm.js, calmCircles.js, Cubes.js, image.js,
RecursiveCubes.js imageNoice.js, labyrinth.js, L-System.js