Notebook

The Notebook UX pattern is fairly common these days for programming - jupyter, observable, Mathematica, and in a bit of a different pattern, shadertoy, jsfiddle, codepen and more provide nice ways of writing a little chunk of code and then immediately seeing what it does.

I didn't look very hard, but basically I wanted something like the above that was also easy to embed in this site, running the code entirely on the clientside, and enabled a few different options for quickly spinning together and editing web technologies into little demos, with some pre-written boilerplate:

• html/css/js for demo webpages or demos of parts of a webpage
• JS-controlled canvas with all the canvas setup code done for me with some helper functions available
• processing-controlled canvas
• JS-controlled charts/visualizations with some charting library
• WebGL shaders

WebGL

Every time I try something with webgl I end up relearning a bunch of boilerplate while most of the time when I try something with webgl I just want to do a quick experiment along the lines of: run this algorithm on each pixel and see what kind of image it produces. I set it up so that by default I can just write a simple fragment shader and get things working:

I can fiddle with this to get a few simple inputs working

TODO

• Replace highlightjs with code editor for dynamic notebooks - CodeMirror or Ace probably, although need to do a bit with either to ensure they import correctly (probably CodeMirror)
• General
  • parameterize inputs with auto-ui
  • Clean up styles, use tabs
• WebGL
  • mapped textures