<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<title>Self-modifying P5.js Sketch</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
let mySketch;
// Function to remove existing sketch instance
window.removeSketch = function() {
if (mySketch) {
mySketch.remove();
mySketch = null;
}
};
// Function to update the sketch with new code
window.updateSketch = function(sketchCode, container) {
console.log("Updating sketch with new code");
try {
// Remove existing sketch if any
window.removeSketch();
// Create new sketch instance
mySketch = new p5((p) => {
// Add the sketch code to p5 instance scope
const sketchFunction = new Function('p', `
with (p) {
${sketchCode}
// If setup/draw weren't defined, provide defaults
if (typeof setup !== 'function') {
setup = function() {
createCanvas(window.innerWidth, window.innerHeight);
}
}
if (typeof draw !== 'function') {
draw = function() {
background(0);
}
}
// Always ensure we have window resize handling
if (typeof windowResized !== 'function') {
windowResized = function() {
resizeCanvas(window.innerWidth, window.innerHeight);
}
}
return { setup, draw, windowResized };
}
`);
// Get the sketch functions
const functions = sketchFunction(p);
// Assign the functions to p5 instance
p.setup = () => {
functions.setup.call(p);
// Ensure canvas is in container
if (container) {
container.innerHTML = "";
container.appendChild(p._renderer.canvas);
}
};
p.draw = functions.draw.bind(p);
p.windowResized = functions.windowResized.bind(p);
});
console.log("Successfully created new sketch");
return true;
} catch (error) {
console.error("Error creating sketch:", error);
return false;
}
};
window.initSketch = function (container) {
console.log("Initialize empty sketch");
if (mySketch) {
return;
}
// Create initial empty sketch
window.updateSketch(`
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
}
`, container);
};
</script>
</body>
</html>