3D Animation Editor

For my latest project I wanted to look at the recent..ish full-stack technologies that I haven’t had the opportunity to use in my full time job. Next.js 13.4+ with its new router app pattern, Tailwind, and Vercel’s new storage API. I needed a project that would engage me and I figured a 3D animation editor would be ideal. I studied animation at university but haven’t been able to stretch that muscle for quite a while. Would it be possible to build a 3D animation tool in the browser that’s comparable to the early animation tools I used just over twenty years ago… Where did the time go!!!

The go to library here was Three.js and the trick would be to use a nested object approach, so when for example a shoulder moves the upper arm the forearm and the hand all move too. It’s a huge time saver when animating. I’d seen the react-flow library and figured that would be a good UI solution for describing the animation hierarchy. A bit of customisation and I had a convenient way to create nodes and enter positional and rotational info. Once an animation was added I could then save that to a postgres database.

Ok there was a lot more to it but essentially that’s the big picture. Here’s a screenshot of the editor.

And here’s a short video of the output.

Choose your own adventure

I’ve just completed a new personal project.
A “Choose your own adventure” style game.
I’ve built adventure games before, but this time I wanted more control over the story, guiding the player through a narrative as opposed to a more sandboxed world.
From experience I know that editing these type of games is a lot harder and more time consuming than writing a player, so to improve the workflow I decided to build a fully featured editor. I settled on using NextJS connected to a mongoDB database. Hosted by vercel the editor builds automatically when I push to github.

The story point editor looks like this.

And the story can be tested online in preview mode.

Once I’m happy with the game I need a way to distribute. I chose to build the player using Dart and Flutter. I can embed any game json in the app and publish as a native app to IOS, Android, Windows, MacOS and Linux. Web support is also available via the flutter beta channel and has been helpful for sharing the game and gaining feedback from play testers.

Interactive Fiction : React – Redux

Rebuilt the Interactive Fiction Player in React + Redux .

The Shivers

[Update 25/September/2019]
Refactored everything to Functional Components and made Hook based. Have added Jest Testing, and optimised with lighthouse.

[Update 16/March/2019]
Crossed my mind that the game engine might be more interesting if it could add some random elements. Maybe take it in a direction where it could run games similar to those from the series of Fighting Fantasy adventure books . I’m not sure if it will but I have added a dice roll to the game engine and also dealt with 10 months of technical debt so I’ve bumped up to the latest react version, migrated from CSS to styled-components and moved from JavaScript to TypeScript.

I decided to rebuild the Interactive Fiction Player using React and Redux. It still uses the same data structure so the same games can be played in the Angular version.

Previous post about Version 1 which was built with Angular / Typescript https://www.markhorsell.com/2017/03/interactive-fiction-angular-typescript/

Squirrel or Chicken – ReactJS & Clarifai

Ever wondered if you look more like a Chicken or are you a little more Squirrely? Can’t say I had until I came across Clarifai whilst thinking about a new ReactJS project.

Turns out it was incredibly easy to build an App to do this. Clarifai has a super simple dashboard where you can train it to identify almost anything. In fact I just had to show it three pictures of Chickens and three of Squirrels and it was pretty much there. I grabbed my free API which gives me a limited number of requests, created a single page React app, added some Progressive Web powers so I can run it App like on my phone and I was there.

I’m sorry this isn’t public as I can’t afford the unlimited request licence but here are the results.

Pretty definitively it knows that’s a Squirrel.

And clearly it knows that’s a Chicken…. but what happens if you give it a bigger challenge , say a ferret!

Seems about right to me. And of course the inevitable and something I’ve been trying out on any of my friends who are curious.