• Home

The best way to experiment with code is to get the fastest feedback loop as possible. Visual scripting is one such way to do this, tools like Unreal's blueprints system, Houdini, Unity shader graph, Substance Designer and Bitwig music software all have node editing capabilties. I think node editing is good but it has the problem that there is state hidden away from the user. This is contrasted to writing actual code where everything is plaintext and in front of you. This means you can copy and paste lines of code and expect them to work exactly as it should. I've been attracted to trying to find the a good balance between visual scripting and code editing.

None of these programs have a download or preview link because they are mostly half-finished experiments that don't work properly or don't handle errors properly.

LogicGator

One of my earliest live editing projects (and actual working program) was a school assignment a long time ago. I build a node editor for logic-gates in VB.Net. It automatically calculates the logic flowing through wires that you can connect up. It also handles loops correctly which is difficult but necessary to construct logic latches. It also has a basic entry where you can write out boolean logic notation and it will generate a graph, and vice versa.

Garry's Mod visual scripting

Garry's Mod is a Source-based sandbox game that I used to play. In Garry's Mod there are a number of input/output devices that you could through your keyboard. For example there is a hydraulics system that you can assign to your keyboard numpad to push/pull to make doors and lifts etc. This was fun because it enabled you to control devices on the server you were playing using your own input. However it was limited to the numpad on your keyboard so there was only a certain number of things you could do, plus you could only toggle things on/off. I built upon an idea to have a node editor to build up logic to fire events and control more than boolean logic.

Calculators

Back when I was at university I often needed to calculate quick expressions, The built in Windows calculator wouldn't allow you to write full expression so it was kind of useless. My calculator app lets you assign variables and functions and reevalates as you type. I also built a simple expression expander with a custom layout engine.

Javascript Pad

Building upon the idea of code on the left, and output on the right I built this JavaScript app. Here you can write code and as you type it automatically reevaluates to show the content of the expression on the right. However, the interesting thing here is that it is interactive two-ways. It uses React under the hood so if the expression resolves to a React element then that element it rendered. the element is automatically positioned and resized next to the relevant lines of code. These elements can also contain event handlers to interact back with the code.

Below you can see the intergration with MobX, a transparently observable object library. Here the event listener updates an observable value with the mouse position, the observable recalculates some style information, and the autorun function automatically reevaluates the expression containing the red div. This creates a feedback loop that means you can easily write small interactive applications to visualise data.

One notable problem I had with this approach is that while it's nice that you can write code and modify it's properties in the GUI, as soon as you edit the code again the whole state of the app has to be reset. This is because the code still flows top-to-bottom as if it was real code.

Shortly after building this https://observablehq.com/ came out which does this general idea in a much cleaner way IMO.

Spreadsheet

Another experiment I had was using a spreadsheet layout where each cell is a React component that can consume user input a produce values. You can refer to other cells using their cell names as if they are JavaScript variables, and everything automatically reevaluates automatically. Some built-in components include the Range slider that produces a value based on a slider input. There is also a special canvas function that can create a canvas which redraws itself when its dependencies change. You can also interact with HTTP apis using fetch and it will correctly track the promise result.

GLSL editor

This is a simple clone of shadertoy.com - a web based GLSL renderer - with a slight twist. If you click on any number literal some sliders appear which let you drag the values and update in real time. It does this without recompiling your code so its very fast. It works by preprocessing your code to replace all literals with variables, and sending the values for each frame. There is some other preprocessing magic so also display the value preview for whatever line you click on. An interesting UX improvement is the fact I use multiple sliders, since the code doesn't know the possible range of the number literals it offers up four different sliders with different ranges. You can then just mouse over and see the output. When your mouse leaves the slider it resets the value back to what it was unless you click it. This lets you quickly scan different values and see the output without commiting to anything.

Tailwind editor

Tailwind is a CSS utility framework which forces you to use atomic CSS which is nice to use but no editors actually support it. I built a basic editor here which lets you preview different styles as you hover over the items. The plan was to also show your HTML on the side that can be edited.

Unity node graph

I also developed my own node editor in unity to work with procedurally generating textures and tilemaps. Nowadays Unity has many node based options that do a lot better job than I did.

Dungeon generator

Here I made a dungeon generator using procedural generation combinators and live editing. It uses websockets to communicate with the game from a webpage

See the video for more details

Tinysite builder

Here's a website builder I made