Jake Coxon

Hi I’m Jake and I write code a lot. Here’s some of my creative projects.

Futuristic User Interface

More to come on this soon

https://twitter.com/jkcxn/status/1359971541841289224

Maze generation

I was trying an algorithm to generate 3D mazes from a point of view where you can see all pathways. This means that no paths are generated behind a wall. Written in Python and rendered in Blender

Live editing experiments

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

https://www.youtube.com/watch?v=82wZHTlMqVQ

Here I made a dungeon generator using procedural generation combinators and live editing. See the video for more details

Tinysite builder

This website is also built using an editor I made :)

Jax programming language

Jax is my experimental language project to learn how to make a compiler and also design a language with some specific features. My aim is to design a language that is as close to ease-of-use and with metaprogramming abilities like Python but with the performance of a type-checked compiled language.

Python has a number of advantages that are attractive to developers over other languages. I will ignore syntactic differences because to me they don't make much difference.

The number one advantage is a minimal compile time. Python code is compiled at runtime into bytecode but it does it very fast. Comparitively, C++ can take up to 10 seconds for a basic program which in my opinion is simply unacceptable. I believe that the complexity of C++ as a language is the root cause of slow compile times, not the fact that it compiles to machine code. If you look at C it compiles faster and still has to do type-checking and compile to machine code. Even a non-optimized machine code program will be faster than Python. All we have to do is write a compiler for a language that's less complex than C++.

The second advantage is that Python has incredible metaprogramming abilities. Often you want to write some code that generalized a struct/data class in your program. With Python you can inspect any object at runtime and see what methods/fields it has. This means libraries can be written extremely easily that is generic for any class. It also means class definitions can be extension points for a library, for example in Marshmallow or Django ORM a class is a schema that the underlying library uses to generate functions, methods and other structures. This means to generate a JSON view of an object you can just pass it to a library function.

A lot of people assume that this is only possible using a dynamic language, or at least with a language with runtime type reflection like Java etc. Why should this be the case? I believe that almost all runtime type reflection that you want to do can be instead done at compile time. If the class is known at compile time then library code can run at compile time to generate functions, methods and other structures and be generated into machine code. This would mean the same ease-of-use as passing an object to a function to generate JSON, but the code would already be compiled at compile-time.

This requires that the programming language can interact with your code at compile time, in the same way that Python can inspect type information at runtime. One of the pain points of C and C++ is the infuriating macro system. This is the current mechanism that people have to use for your program to communicate with the compiler. Effectively its a really basic preprocessor that has nothing to do with your actual underlying code. It seems obvious to me that if we made a language with first class support for compile-time constructs in the exact same language as the regular program, we could have great metaprogramming abilities and completely replace any preprocessor magic.

Currently the language looks like this. The syntax is kinda like Go but it doesn't have a garbage collector. Its implementation is based off http://craftinginterpreters.com but with a lot of my own features (type-checking is the main one). It's almost a fully single-pass compiler - it compiles functions out of order so you don't have to forward declare anything. It tokenizes, parses, typechecks and generates AST in one pass. Currently the AST is then conerted into C code and compiled directly, because I don't want to mess with machine code yet.

You can run any code at compile time using a static block. You can then call add_code to add code to the executable. This code is executed using a bytecode VM.

Lambdas are NOT first class citizens at runtime, but they are at compile-time. That means you can construct a lambda (created using the block keyword) and pass it around as a first class object in a static block. Runtime functions can also accept a lambda as a parameter as long as the function is inlined. Because the function and lambda is inlined it means you can access the outer scope of the lambda like a closure, but without any heap allocations. It also means you can return early from within a lambda, the following is compiled to a single while loop. No magic.

GUI Libraries

I'm realy into trying to find a good GUI implementation. Desktop GUIs are hard to write because almost all APIs are really bad. All native APIs use retained mode which require a massive amount of boilerplate code. React is a better API but relies on the browser DOM which is a beast. Game GUIs can be a bit better but require reimplementing a lot. ImGUI is a fantastic library but it's hard to customise at the moment. Below are some implementations I've experimented with.

Python GUI

An experiment to see if it's possible to create native GUIs using Python and a React-like API. It has custom layout engine based off Flutter and a hooks state implementation based off React (but I'm not sure this works well with Python). However instead of constructing a VDOM like React it just does a diff as it runs the code, which I feel is a lot simpler. Also contrary to the browser DOM it uses a system like Flutter where padding, margin, and other layout mechanisms are their own components. This means there isn't one giant div implementation that does everything, it means any kind of layout can be written independently of the base library, and users can write their own layout components. It also has renderers for the terminal and Kivy.

https://github.com/JakeCoxon/py-gui

Klutter

Klutter is kinda like Flutter but for Kotlin, it uses a React-like API and custom layout engine, and renders using LibGDX.

Mobile games

Some mobile games I made in the past