[This is part 4 of a short, ongoing exploration of the 2-stage compilation technique, exemplified by Brad Nelson’s Forth Haiku code. There are other parts in this series part 1, part 2, part 3.]
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.
This video describes two pipelines that run on a terminal command line and display output in browser based viewers. One pipeline is for GPU shaders and another is for CPU based canvas viewing.
Both pipelines share the same main code. The two pipelines differ in the kind of boilerplate code that the viewers need.
The pipelines run on a command line and form a REPL. You can edit the main file ‘test.forth’ and see updates immediately, after saving, in the browser.
Key points
the Forth-to-Javascript and Forth-to-GLSL code is fairly small and understandable
the code demonstrates the ease with which one can build small DSLs using multi-stage techniques using concatenation. This technique gives any programmer who knows how to use dictionaries and regular expressions the ability to create 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).
21st century computers are good enough to make this kind of pipeline-based “IDE” a usable workflow for software development, even though fairly heavy-weight techniques, like processes and websockets, are used.
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 depends on the intended target
for CPU rendering, the third stage wraps the code with some Javascript boilerplate
for GPU rendering, the third stage uses REGEXs to convert the generated Javascript to GLSL.
The next step simply sends the generated code via a websocket to the appropriate renderer running in a browser.
Github Repository
This code is WIP.
It is in github “as is”.
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
