p5.js sketches that load external files require a local web server to avoid cross-origin errors

Browser security blocks JavaScript from loading files (images, data, fonts) from the local filesystem due to same-origin policy. A p5.js sketch that uses loadImage(), loadJSON(), or loadFont() will fail with a cross-origin error when opened directly as a file:// URL. The fix is to serve the folder through a local HTTP server — Python’s built-in http.server, Node’s live-server, or npm start in the generative-design package all work. This is a universal p5.js gotcha that trips up beginners who open index.html directly in their browser and see a blank canvas with console errors.

Examples

Run: python -m http.server 8000 then open localhost:8000. Or in the repo: npm start (launches live-reload server). Sketches that only draw shapes without loading data work fine without a server.

Assessment

Open a p5.js sketch that calls loadImage() directly as file:// and observe the error; then serve with python -m http.server and confirm it loads. Explain why the file:// version fails.