Tiny humans is a weekend hack inspired by this Instagram post. It's an interactive little sandbox world with tiny people and their tiny conversations. Play with it at tinyhumans.vercel.app or check out the gallery below for some ideas.
Tiny humans is written entirely in Oak, my programming language that conveniently compiles to JavaScript — you can read the whole source here. It renders everything using basic HTML 2D Canvas, and uses a custom algorithm to generate humans and their shadows. The background texture is from @marjanblan's Unsplash.
Tiny humans is written in Oak. To develop or modify it, you'll need to install the oak tool from the latest release. With it installed:
- Tiny humas is a static single-page app. Use any web server (like
node-staticorpython -m http.Server) to serve the project directory. I usepython -m http.Server 10009and go tolocalhost:10009. You should see the app load! - The entire Oak source code for Tiny humans is in
main.oak. To compile it intobundle.jswhich the app loads, runThatoak build --entry main.oak --output bundle.js --web
--webtellsoakto compile our program to JavaScript. I usually run a variation of this while developing so that the code re-compiles on every change to my file. There's lots of ways to do this, but I useentr:ls *.oak | entr -cr oak build --entry main.oak -o bundle.js --web
- Oak has a code auto-formatter built in, called
oak fmt. To re-formatmain.oak, runTheoak fmt main.oak --fix # or oak fmt --fix -- main.oak--fixtellsoakto fix up the file in-place. Using--diffinstead won't change the file, but show any needed changes in your terminal.
Did you make something cool with Tiny humans? Do share it with me at @thesephist, I'd love to see :)
Tiny humans line up in formation, and a couple of leaders forge ahead into the unknown.
A tiny human battle is about to break out! Battlefronts form, and the first few brave souls make their moves.
A tiny human line forms for people waiting to join a tiny human circle. What for? That, I do not know.
