Code Monkey home page Code Monkey logo

tinyhumans's Introduction

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

tinyhumans's People

Contributors

thesephist avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.