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

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>
</div>
<div id="status">No sketch loaded.</div>
<head>
<title>p5.js liberary</title>
</head>
<body>
<div id="liberary">
<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>
</div>
</body>
<script type="module" src="index.js"></script>
</html>