https://www.twine.net/signin

Step into a breathing, low-poly world where ancient history meets cutting-edge WebGPU technology. Procedural World Engine is not just a landscape; it is a high-fidelity biological and economic engine that runs entirely in your browser with zero dependencies.

Experience an endless procedural expanse that reacts to the passage of time.

Dynamic Seasons: Watch the world shift from the vibrant greens of Spring to the russet tones of Autumn. In Winter, witness procedural snow accumulate in real-time on terrain and rooftops.
Atmospheric Cycles: A full day/night cycle with reactive urban lighting. As dusk falls, the torches of the city light up, casting a warm glow over the simulated populace.
Kinetic Weather: From calm afternoons to howling gales, the engine features a state-machine driven weather system that affects lighting, fog density, and surface specularity (wetness). 

Deep Socio-Economic Simulation

Underneath the tilt-shift “macro-photography” aesthetic lies a tiered society driven by a complex economic graph.

Autonomous Caravans: Watch trade routes emerge. Caravans utilize A* pathfinding to navigate the terrain, transporting gold and goods between sovereign cities.
Agent-Based AI: Every city is a hub of activity. Workforce members—from Serfs and Specialists to the Liegelords—interact with an interwoven supply-and-demand marketplace.
Political Influence: Territorial boundaries are defined by a weighted Voronoi system, where city loyalty drifts based on trade volume and physical proximity.

WebGPU Native: Leveraging a custom instanced pipeline and WGSL shaders to render thousands of agents and complex lighting with zero frame-drops.

Total Configuration: Every parameter, from sea level and relief power to city spacing and day speed, is fully configurable. 

Controls

W A S D — Step through the world.
T / M — Open the full World Map & Fast Travel.
V — Toggle unit labels.
I — Toggle the Political Influence overlay (then open the map)
L — Toggle your player lantern

A playable game concept I built out over a few week span.

I first built out a basic V1 in a monolithic fashion, in a single file:
https://www.twine.net/signin

After dialling in the core concept and featureset, I then decided to begin my V2, with a rethink of the core systems and fleshing out of gameplay mechanics.

This was much more architecturally mature, and easily extensible and configurable.
https://www.twine.net/signin

https://www.twine.net/signin

A complex simulation leveraging advanced performance optimisation techniques for handling hundreds of individual cells in a petri dish, entirely self contained and lives in the web browser.

Fun two week project I created to push the limits of what’s possible in a web browser, and to test performance optimisation at high levels of complexity.

In this case I used a quadtree for spatial partioning, drastically decreasing the performance impact of each cell during sensing checks.

https://www.twine.net/signin

This site is a labour of love to showcase what can be done without the use of frameworks, images, libraries or npm packages, just plain HTML, CSS + JS, entirely self contained. Every page is 100/100 on lighthouse scores for accessibility, performance and a deep focus on striking visual design.

https://www.twine.net/signin

Here I showcase my approach to ensuring modular reusability in the design artifacts I create, using the term ‘Design Organism’ as a nod to Atomic Design principles.

The Koi fish animation is a parameterised tool I created from scratch, allowing this effect to be configured and dropped into any webpage in any framework, with no external considerations.

In fact, every animation and visual element on the page is created using this approach I pioneered.

https://www.twine.net/signin - Here’s the tool, export any configuration and drop it into any webpage.