Codeshop is a custom computational notebook like Jupyter or Observable for computational art using p5js. I recreate the basic computational format of a column of cells, and add in a canvas in line with each cell and extend the "New Cell" options to include cloning the previous cell to facilitate exploration of parallel ideas. Codeshop also improves computational notebook runtime capabilities with Stopify, an execution control library. The prototype was the basis for a CHI-style pilot study about parallel design affordances in software.
A workspace for programming based art.
Install the dependencies
cd codeshop
npm installthen start Rollup:
npm run devNavigate to localhost:5000. You should see your app running. Edit a component file in src/, save it, and reload the page to see your changes.
In src/:
Workspace.svelte
Collection.svelte
InstanceMenu.svelte
SideMenu.svelte
CodeMirror.svelte
Sketch.svelte
One Workspace contains many (0-n) Collections. Each Collection is primarily the pair (CodeMirror Sketch) which is the text editor and p5js rendering of that source code. Each Collection also has multiple menus. The side menu controls the execution of that code: play is run on keystroke, pause is not run. The bottom menu is a workspace interaction adding new Collections or copying the above Collection or deleting the above Collection.
This was built from the Svelte template for Svelte at https://github.com/sveltejs/template.