Giter VIP home page Giter VIP logo

simulating's Introduction

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

simulating's People

Contributors

antfu avatar ncase 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  avatar  avatar  avatar  avatar  avatar

simulating's Issues

Question: DOM manipulation vs Canvas

Hi!

SO I've been playing around with your simulation a bit, and wanted to do some considerable fun work using it. But I realized whenever I start up the page, my laptop fan starts to sound like a helicopter. Do you know if it's a better idea to implement the simulation board in canvas, vs using DOM? Not a feature request though, just curious. I might look into using stuff like p5js to implement it using canvas if there'd be performance gains. (I don't understand what calculations could be causing so much work anyway)

New Feature?

I was trying to make things more realistic by things creating things. but the thing is, I can only make something create something is using the move and leave behind thing, but sometime things weren't meant to be moving, so I was wondering if @ncase can add a feature which spawns an item in a neighboring [user choice] block

GitHub redirects iFrames to http

After you've merged #8, I wanted to check out the site. Unfortunately, I still get errors about mixed content.

However, the URLs in the iframes' src is correctly set to https. Instead, I discovered that GitHub redirects to the http version.

Unfortunately, a quick search for this issue only yielded an issue recommending adding trailing slashes. This didn't work in a quick test I did where I inserted an iFrame with a modified URL in the browser's HTML.

Repro

In Firefox's network tab (same thing happens in Chrome), I can see requests with status 304. E. g. the one to https://ncase.me/simulating/model?local=zoo/sick&edit=1.

Request headers:

Host: ncase.me
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: https://ncase.me/simulating/
Connection: keep-alive
Upgrade-Insecure-Requests: 1

Response headers:

HTTP/2.0 301 Moved Permanently
server: GitHub.com
content-type: text/html
location: http://ncase.me/simulating/model/?local=zoo/sick&edit=1
access-control-allow-origin: *
expires: Wed, 01 Aug 2018 09:58:05 GMT
cache-control: max-age=600
x-github-request-id: BDD8:79BD:1C33660:26EE5EE:5B6181D5
accept-ranges: bytes
date: Wed, 01 Aug 2018 09:48:05 GMT
via: 1.1 varnish
age: 0
x-served-by: cache-hhn1531-HHN
x-cache: MISS
x-cache-hits: 0
x-timer: S1533116886.768692,VS0,VE97
vary: Accept-Encoding
x-fastly-request-id: 143e6a617da1126baaaa8f3990da778f567380d2
content-length: 178
X-Firefox-Spdy: h2

Curiously, I can access that exact URL, https://ncase.me/simulating/model?local=zoo/sick&edit=1, just fine directly with the browser.

Both sharing and exporting seem broken

Chrome 66.0.3359.181/Windows 10

Symptoms

Clicking "save your model" changes "When you save your model, you'll get a link here:" label to "saving...", and the "and an embed code here:" label and two textboxes to just "...". After waiting a while, they don't change to actual links or embed codes.

Clicking the "export model" button opens a new tab to about:blank.

Probably explanation

I don't know if this is related to export not working correctly, but the linking is probably broken because Google is discontinuing goo.gl; see this blog post. When I try saving, I get this message in console:

FIREBASE WARNING: This Firebase project requires import into Google Cloud Platform to resume service. Visit the doc https://firebase.google.com/support/guides/firebase-web#import_your_project_to_the_firebase_console or reach out to Firebase support for help. Without action, this project will be permanently deleted on Tuesday, May 15th, 2018. (https://torrid-inferno-877.firebaseio.com)

You might note that it is now after May 15th, 2018. Fortunately, most of the application appears to have not been permanently deleted because most of it was not run from Google servers.

Firefox Play button broken

Hi, when i try this simulation in firefox, step button work, but play/pause switch visualy but nothing happen on the tree/fire playground.
In console, i only have a warning about scrolling :
Ce site semble utiliser un effet de positionnement lié au défilement. Cet effet pourrait ne pas fonctionner correctement avec le défilement asynchrone. Consultez https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects pour obtenir davantage de détails ou discuter des outils et des fonctionnalités liés.
no error.

I've tested it in chrome, it work fine.

Feature request: Plotting population graph of entities

Hi!

I've been wasting wayyy to much time with this simulator (if you've seen sessions that are several weeks long in your analytics software, that's me). I think a small addition of a feature would make it really incredible.

Would there be a way to possibly 'record' and/or plot the population change across generation of the various entities? That way, it would be extremely easy to see how a simulation progressed over time.

Updated: Request for a graph like the one you have for the 'Polygons' simulation, but for this project.

Thank you!

Feature request: add sphere, toroid, or infinite plane modes

Would it be possible/feasible to implement a wrapping plane mode(s), of some type?

That would help a lot at smaller screen sizes where the grid size can be limited, plus it's an elegant addition to any CGoL sim. :)

I'm not a dev, but there seem to be some related questions/answers in this google search, and include some simple hack ideas.

p.s. I love this tool (and spent a while investigating emoji fonts to enhance the visuals). Thank you!

Emoji Detection not working on Chrome OS

Emoji Support Detection is not working properly on Chrome OS [Version 59.0.3071.134 (Official Build) (64-bit)], is falling back to the black and white font when the browser does support colour emoji (colour emoji load before the detection script swaps them out for black and white).

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.