I made a video explainer about raycasting, using a new experimental environment for calculang

Nice! I love how you can follow how the code is working with the results of the calculations in the code itself and the visualisations. I wonder what's custom built for this example and what works for any use-case. Also, is this new environment somewhere available to try out?

Thanks Daniel! I use Observable Framework, and its reactive JS. It doesn't have many mechanisms to encapsulate its own reactive code but I can consolidate common bits like the layout, editor, devtools in a

TEMPLATE.md

file that I include in other ("custom") OF md files: in this case

raycasting.md

To show the workings like that we need to know values to use for every input, so there is a stateful 'cursor' object that custom code must set; also a stateful array of visible formulae that it can set if it wants to. The cursor object is handy anyways because custom code uses it to to make its visualizations/etc anyways.

raycasting.md

custom code is dense on code for the visualizations: basically everything on the right hand side, and that includes signal handlers on the visualizations which use setters for the cursor object to set inputs, visible formulas to select formulas, and button controls to set a key stream input to the cursor; also those options at the bottom right. That code includes approx 1k lines of visualization code (Vega-Lite for the scene visual at top, much denser Vega for different layers of the visualization below it) If the app (lets call the RHS an "app") wants to control the cursor (=> the workings) and navigate the formulas then it needs to tie the handling of that into signal/event listeners. That can be in a 'far less' elaborate way, for instance in this example: https://calculang-editables.netlify.app/savings (an earlier one where you can't see the workings on top of code, but they are calcd underneath) This has another feature that highlight the numbers (in the grid) used to calc a number also (just brush over them). And this is a bit more standard and I can facilitate a good co-operation in the views with less custom code. In the example in the video though - there's some code to manage the cursor and formulae we are navigating (but I think we need to expect it) There was a mash of experimentation in the codebase that gives it a poor structure and fragments work around calculang, so haven't released it yet but I'll think about it in the week