Skip to content

A little interactive sandbox for tiny people, tiny thoughts, and their tiny stories

License

Notifications You must be signed in to change notification settings

thesephist/tinyhumans

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tiny humans 🌏

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 2D Canvas APIs, and uses a custom algorithm to generate humans and their shadows. The background texture is from @marjanblan's Unsplash.

Tiny human

Build and deploy

Tiny humans is written in Oak. To develop or modify it, you'll need to install the oak tool from the repository. With it installed:

  • Run a server. Tiny humans is a static single-page app. Use any web server (like node-static or python -m http.Server) to serve the project directory. I use python -m http.Server 10009 and go to localhost:10009.
  • Build the program. The entire Oak source code for Tiny humans is in main.oak. To compile it into bundle.js which the app loads, run
     oak build --entry main.oak --output bundle.js --web
    That --web tells oak to 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 are lots of ways to do this, but I use entr:
     ls *.oak | entr -cr oak build --entry main.oak -o bundle.js --web
  • Auto-format code. Oak has a code auto-formatter built in, called oak fmt. To re-format main.oak, run
     oak fmt main.oak --fix
     # or
     oak fmt --fix -- main.oak
    The --fix tells oak to fix up the file in-place. Using --diff instead won't change the file, but instead show any needed changes in your terminal.

Tiny humans gallery

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 scene of tiny humans

A tiny human battle is about to break out! Battlefronts form, and the first few brave souls make their moves.

A scene of tiny humans

A tiny human line forms for people waiting to join a tiny human circle. What for? That, I do not know.

A scene of tiny humans

About

A little interactive sandbox for tiny people, tiny thoughts, and their tiny stories

Topics

Resources

License

Stars

Watchers

Forks

Languages