codeshop

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.

Documentation

A workspace for programming based art.

Get started

Install the dependencies

cd codeshop
npm install

then start Rollup:

npm run dev

Navigate 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.

Basic Code Organization

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.

Svelte

This was built from the Svelte template for Svelte at https://github.com/sveltejs/template.