Forest was my project for the Full Stack Open Helsinki University course. It's a fullstack application using React, with 3D graphics powered by R3F. I really only wanted to try this kind of card-driven design, where you have to cycle through your card actions.

The game contains a simple, touch-friendly menu navigation, leading from scenario selection to setup confirmation. The main layout was done using MUI's Grid system. The nice thing about MUI grid is you can set a custom number of columns easily.

The game is based on an initiative system, with each action adding a varying amount of delay to a unit's turn. The player uses cards, with each card having multiple actions. The trick is, you have to cycle through all actions to use them again, adding to the strategy required.

The game features a scenario progression system. The system is entirely config-based. The progression is defined by adding prerequisites to scenarios, which makes adding new progression paths easy without modifying existing scenarios.

The game allows to disable the decorative elements to improve performance. The 3D scene is made declaratively with React Three Fiber, making it easy to conditionally render elements.

I got interested in differential equations after doing a basic course on the subject. I settled on an ecological simulation as I figured this would allow me to use differential equations but not require actually understanding anything.

At the heart of the application is the Lotka-Volterra ODE system, which is solved using Boost::odeint and compiled to WebAssembly by Emscripten. Learning something about ODE system analysis would allow to make the behaviour more interesting; now it settles on identical oscillations. Still, I learned some tricks to staying positive.

The state of the system is visualized using a chart, data tables and animated trend lines of sorts. A Web Worker is used to draw the animated trend lines to keep it off the main thread.

On the map plants are scaled up and animals come from off-screen to make things look a bit livelier. Convoluted configs define whether a species is dynamic, immigrating etc. A state machine system might soon be in order...

I suddenly realized I need a portfolio site. However, what is a portfolio site if you didn't make it yourself. A few days later I have this. Of course I'm very proud. Red, blue, rounded corners...

The main problem is always how to present the information, and what even is the information to present. I wanted to create a design that would work reasonably well on mobile and desktop.

One aspect I found very challenging is content navigation. I settled on CSS-powered snap scrolling, because with this you get the most uniform experience. On the mobile version I kind of rely on the user intuition to scroll every which way. On the desktop the scroll areas show additional content as a hint.

Often on sites like these you have similar or identical layouts with different content. I ended up with this inline-mini-CMS approach. Not ideal if you want to differentiate a piece of content, but on time constraints... For first version, only. Only for first.

I am also not ignorant of marketing realities. This is why my physics-based racing game Circles Roll in the Dark only contains good music that speaks to gamers young and old. The credits screen music and image bring to my mind vivid scenes of a mystical land that I could never visit.

Here, I explain how I tried going about creating physics-based gears in the Godot game engine. I don't know anything about gear design, I just used the circumference of a circle. It shows how you can have immediate feedback in the editor for level design, for example.

Alas, it wasn't to be. Metaphor for life? I don't think the Godot physics engine was meant for this use case.