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

init

Browse Source
This commit is contained in:
Jürg Hallenbarter
2026-04-01 11:28:05 +00:00
parent 10c9cad0a6
commit 3f9de9c266
13 changed files with 336 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Cubes.js
View File

@@ -1,18 +0,0 @@
function setup() {
createCanvas(500, 500);
background(255,255,255)
noFill();
for (i = 0; i < 30; i++){
circle(width/2 +random(-width/10, width/10), height/2 +random(-height/10, height/10), random(15)*i);
}
}
function draw() {
}
function mousePressed(){
}

1
assets/wallpaper Symbolic link
View File

@@ -0,0 +1 @@
/home/jgh/Dokumente/wallpaper/

144
devSide.html Normal file
View File

@@ -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>

147
index.html
View File

@@ -1,143 +1,12 @@
<!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>
<head>
<title>p5.js liberary</title>
</head>
<body>
<div id="liberary">
</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"
];
// 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 = 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>
</body>
<script type="module" src="index.js"></script>
</html>

35
index.js Normal file
View File

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

9
index2.html Normal file
View File

@@ -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>

41
sketches/2images.js Normal file
View File

@@ -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(){
}

29
sketches/Cubes.js Normal file
View File

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

0
RecursiveCubes.js → sketches/RecursiveCubes.js
View File

2
calmCircles.js → sketches/calmCircles.js
View File

@@ -1,5 +1,5 @@
function setup() {
createCanvas(1000, 1000);
createCanvas(500, 500);
}
function draw() {

30
sketches/image.js Normal file
View File

@@ -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(){
}

38
sketches/imageNoice.js Normal file
View File

@@ -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(){
}

0
labyrinth.js → sketches/labyrinth.js
View File