Spaces:
Running
Running
| <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,[email protected],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> | |