solar-system-of-js

solar-system-of-js copied to clipboard

>> View the "Solar System of JS"

I made this to visualize the current state of languages on the JS platform, because I am frankly overwhelmed by all the different activity happening in this space. It was originally motivated by a desire to bring ClojureScript into this view, as a language that I think has simple, fundamental solutions to a lot of the problems that are fragmenting JS.

Implementation

The code is written in * ClojureScript. It implements its own animated presentation architecture that hopefully serves as an example for interesting things that can be done with the language.

Some features:

• frames are drawn to a Canvas using the 2D api
• all animations tap a core.async channel to receive a delta-time dt value every frame.
• slide transitions are driven by an actions spec to animate state data
• the incremental actions spec allows us to jump ahead to specific slides (for URL routing)
• the drawing is a pure function of the application state (basically)

File Descriptions:

• core.cljs- entry point
• actions.cljs- slide transition state actions
• animate.cljs- animation utility (using core.async)
• canvas.cljs- canvas initialization and api wrapper
• caption.cljs- caption setter in markdown
• control.cljs- touch/key controls
• draw.cljs- all drawing functions
• math.cljs- math aliases
• nav.cljs- slide navigation and routing
• state.cljs- state of the application

* The logo is part of a branding effort for a proper ClojureScript website that we are building this year, with docs pages and tutorials.

Development Setup

1. Install leiningen

2. Run this to get a live-reload compiler, http server, and REPL:

   $ lein figwheel dev
   

3. Open http://localhost:3449

Contact

• email: [email protected]
• twitter: @shaunlebron

License

MIT