[This is part 3 of a short, ongoing exploration of the 2-stage compilation technique, exemplified by the Forth Haiku code. For part 1 go here.]
The Forth Haiku code generator takes simple Forth-like expressions and turns them into GLSL shader code.
In this series, I’ve been using the “Primrose” example. It’s pretty simple, just two lines of Forth-like code, but it turns into about 118 lines of JavaScript. Then, that JavaScript code gets sent to a browser-based viewer that displays the result. Right now, renderer.html is using only HTML canvas and not GLSL. That’s perfect for showing static images.
I’m planning to add a GLSL converter to the renderer in a future part of this series. The code in Forth Haiku only needs to use regexs to convert Javascript to GLSL. Hence, I expect that I only need to modify the renderer to convert incoming JS to GLSL in the same way that the Forth Haiku codes does it. There will other changes to renderer.html to accommodate rendering GLSL (and falling back to canvas rendering in case of failure).
The code generation happens in several easy steps in a simple linear pipeline.
The first step just creates basic JavaScript code by using a JavaScript dictionary to map each Forth-like “word” to some simple JavaScript code.
The second step “optimizes” the basic code using simple JavaScript regular expressions.
The third step wraps the code with some Javascript boilerplate.
The next step simply sends the generated Javascript code to the renderer via a websocket.
The renderer code - renderer.html - is opened in a browser and runs code that arrives on the websocket. The Javascript code is eval’ed to create a function that is run once per pixel.
In this video, I walk through how the second step works on a simple example that just adds two numbers together.
I hope this shows how easy this technique is and gives any programmer who knows how to use dictionaries and regular expressions some ideas for creating their own notation compilers to make their work easier. Note that notations do not need to be “Turing complete” to be useful. I call such notations SCNs (Solution Centric Notations).
Github Repository
This code is WIP.
It is in github “as is”.
See README.md.
The main document in this video is OPTIMIZER.md in the “./attic/command line” directory.
The pipeline components and the run.bash script are in the main directory (see README.md).
See Also
Email: ptcomputingsimplicity@gmail.com
Substack: paultarvydas.substack.com
Videos: https://www.youtube.com/@programmingsimplicity2980
Discord: https://discord.gg/65YZUh6Jpq
Leanpub: [WIP] https://leanpub.com/u/paul-tarvydas
Twitter: @paul_tarvydas
Bluesky: @paultarvydas.bsky.social
Mastodon: @paultarvydas
(earlier) Blog: guitarvydas.github.io
References: https://guitarvydas.github.io/2024/01/06/References.html
