antfu / simulating

An interactive guide to thinking in systems!

Home Page:http://ncase.me/simulating

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

An interactive guide to thinking in systems. READ/PLAY HERE

Made by Nicky Case: @ncasenmare | ncase.me

Dedicated to the public domain with Creative Commons Zero! I'm giving away all my art/code/words, so that you teachers, scientists, hobbyists, activists, and emoji-lovers can use them however you like! This is for you. 💜

How To Run This On Your Own Computertron

Yeah basically just download this github repository, and host it on some local server. I use the minimalist http-server, but you can also use MAMP. (Simulating The World is just a bunch of static files, but it needs to be on a server because of some weird browser security issues with XMLHttpRequests)

###Saving your own sims locally:

  1. Get it running on your own computertron (see above). For the sake of this example, let's assume it's running on http://localhost:8080/. (which it will by default, if you use http-server)
  2. Go to http://localhost:8080/model, and make your own sim!
  3. Click "export model". Your simulation's data should pop up in a new tab.
  4. Save it locally to [your local folder]/model/models, as [your sim name].json. (NOTE: the ".json" extension is important!)
  5. Finally, to see your own sim in action, go to http://localhost:8080/model?local=[your sim name]! Voilà! And you can keep editing and exporting from there, just copy-paste the new data to [your sim name].json.

Other Peeps' Stuff I Used

They're all open source! Except for Firebase. Oh well.

Code Stuff:

  • MinPubSub - A tiny publish/subscribe library.
  • Perfect Scrollbar - Custom scrollbars. Mostly because Mac OS X Lion is silly and hides all the scrollbars because 'minimalism'.
  • requestAnimationFrame shim - A requestAnimationFrame polyfill.
  • reqwest - A tiny XMLHttpRequest library.
  • Firebase - To save & load models from ☁️The Cloud☁️
  • Platform.js - To test browser/OS, because there is no good emoji feature detection arrrgghhhhhhhh

Font Stuff:

  • Sniglet - For the title splash.
  • OpenSansEmoji - Fallback font if your browser doesn't support emoji.

A Narcisstic List of Press This Thing Got

About

An interactive guide to thinking in systems!

http://ncase.me/simulating


Languages

Language:JavaScript 68.3%Language:HTML 24.0%Language:CSS 7.7%