A boilerplate project for a better p5js authoring experience. Basically it opens a Vue application in your browser and allows quick switching between sketches. New sketches (.vue files in the views
folder) are automatically added to the navigation bar in Vue.
Motivation: There are other boilerplates out there, but they necessitate to duplicate a whole new project for each sketch.
- Clone.
npm install
.- Accept to install the file watching extension VS Code is suggesting.
chmod u+x new_files.sh
.- Run Vite.
- You can create .vue and use the snippet "p5".
If you prefer global mode and its less verbose code, you can use it even with several sketches by executing globalInit()
. It prevents namespace collisions (detected so far).
function draw() {
background(220)
ellipse(50, 50, 80, 80)
}
globalInit(draw)
})
This a work in progress. Especially, the live-reloading may be not cross-platform.
Known limit: deletion of files is detected only if the deletion in done in the explorer sidebar in VS Code.