├── .gitignore
├── LICENSE
├── README.md
├── preview.gif
├── project.clj
├── publish.sh
├── resources
    └── public
    │   ├── cljs.svg
    │   ├── css
    │       ├── keys.css
    │       └── main.css
    │   ├── index.html
    │   ├── index_release.html
    │   └── js.svg
├── sketch.jpg
├── src-dev
    └── solar_system_of_js
    │   └── dev.cljs
├── src
    └── solar_system_of_js
    │   ├── actions.cljs
    │   ├── animate.cljs
    │   ├── canvas.cljs
    │   ├── caption.cljs
    │   ├── control.cljs
    │   ├── core.cljs
    │   ├── draw.cljs
    │   ├── math.cljs
    │   ├── nav.cljs
    │   └── state.cljs
└── title.png


/.gitignore:
--------------------------------------------------------------------------------
 1 | pom.xml
 2 | *jar
 3 | /lib/
 4 | /classes/
 5 | /out/
 6 | /target/
 7 | .lein-deps-sum
 8 | .lein-repl-history
 9 | .lein-plugins/
10 | figwheel_server.log
11 | 
12 | resources/public/js/out
13 | resources/public/js/out-adv
14 | resources/public/js/*.js
15 | 
16 | *.swp
17 | 
18 | hosted/
19 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011-2015 Shaun Williams
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
 7 | of the Software, and to permit persons to whom the Software is furnished to do
 8 | so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![title](title.png)](http://shaunlebron.github.io/solar-system-of-js/)
 2 | [![preview](preview.gif)](http://shaunlebron.github.io/solar-system-of-js/)
 3 | 
 4 | __[>> View the "Solar System of JS"](http://shaunlebron.github.io/solar-system-of-js/)__
 5 | 
 6 | I made this to visualize the __current state of languages on the JS platform__,
 7 | because I am frankly overwhelmed by all the different activity happening in
 8 | this space.  It was originally motivated by a desire to bring ClojureScript
 9 | into this view, as a language that I think has simple, fundamental solutions to
10 | a lot of the problems that are fragmenting JS.
11 | 
12 | ## Implementation
13 | 
14 | The code is written in <img
15 | src="http://shaunlebron.github.io/solar-system-of-js/cljs.svg" height="32px">\*
16 | ClojureScript. It implements its own animated presentation architecture that
17 | hopefully serves as an example for interesting things that can be done with the
18 | language.
19 | 
20 | ###### Some features:
21 | 
22 | - frames are drawn to a Canvas using the 2D api
23 | - all animations tap a `core.async` channel to receive a delta-time `dt` value every frame.
24 | - slide transitions are driven by an [actions spec] to animate [state data]
25 | - the incremental actions spec allows us to jump ahead to specific slides (for URL routing)
26 | - the [drawing] is a pure function of the application state (basically)
27 | 
28 | ###### File Descriptions:
29 | 
30 | - [`core.cljs`](src/solar_system_of_js/core.cljs)- entry point
31 | - [`actions.cljs`](src/solar_system_of_js/actions.cljs)- slide transition state actions
32 | - [`animate.cljs`](src/solar_system_of_js/animate.cljs)- animation utility (using core.async)
33 | - [`canvas.cljs`](src/solar_system_of_js/canvas.cljs)- canvas initialization and api wrapper
34 | - [`caption.cljs`](src/solar_system_of_js/caption.cljs)- caption setter in markdown
35 | - [`control.cljs`](src/solar_system_of_js/control.cljs)- touch/key controls
36 | - [`draw.cljs`](src/solar_system_of_js/draw.cljs)- all drawing functions
37 | - [`math.cljs`](src/solar_system_of_js/math.cljs)- math aliases
38 | - [`nav.cljs`](src/solar_system_of_js/nav.cljs)- slide navigation and routing
39 | - [`state.cljs`](src/solar_system_of_js/state.cljs)- state of the application
40 | 
41 | _\* The [logo] is part of a branding effort for a proper ClojureScript
42 | website that we are building this year, with docs pages and tutorials._
43 | 
44 | ## Development Setup
45 | 
46 | 1. Install [leiningen]
47 | 2. Run this to get a live-reload compiler, http server, and REPL:
48 | 
49 |     ```
50 |     $ lein figwheel dev
51 |     ```
52 | 
53 | 3. Open <http://localhost:3449>
54 | 
55 | ## Contact
56 | 
57 | - email: <shaun.e.williams@gmail.com>
58 | - twitter: [@shaunlebron](http://twitter.com/shaunlebron)
59 | 
60 | ## License
61 | 
62 | MIT
63 | 
64 | ----
65 | 
66 | [![sketch](sketch.jpg)](https://raw.githubusercontent.com/shaunlebron/solar-system-of-js/master/sketch.jpg)
67 | 
68 | [actions spec]:https://github.com/shaunlebron/solar-system-of-js/blob/master/src/solar_system_of_js/actions.cljs#L160
69 | [state data]:https://github.com/shaunlebron/solar-system-of-js/blob/master/src/solar_system_of_js/state.cljs#L5
70 | [drawing]:https://github.com/shaunlebron/solar-system-of-js/blob/master/src/solar_system_of_js/draw.cljs#L459
71 | [leiningen]:http://leiningen.org/
72 | [logo]:https://github.com/oakmac/cljs.info/blob/master/00-scrap/cljs_logo-01.svg
73 | 
74 | 


--------------------------------------------------------------------------------
/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shaunlebron/solar-system-of-js/a5c53c9727622ac023963766323b6eb5d03f5226/preview.gif


--------------------------------------------------------------------------------
/project.clj:
--------------------------------------------------------------------------------
 1 | (defproject solar-system-of-js "0.1.0-SNAPSHOT"
 2 |   :description "Visualizing the state of JS as a solar system"
 3 |   :url "https://github.com/shaunlebron/solar-system-of-js"
 4 | 
 5 |   :dependencies [[org.clojure/clojure "1.6.0"]
 6 |                  [org.clojure/clojurescript "0.0-3058"]
 7 |                  [org.clojure/core.async "0.1.346.0-17112a-alpha"]
 8 |                  [figwheel "0.2.5"]
 9 |                  [cljsjs/hammer "2.0.4-4"]
10 |                  [markdown-clj "0.9.65"]
11 |                  [hiccups "0.3.0"]]
12 | 
13 |   :node-dependencies [[source-map-support "0.2.8"]]
14 | 
15 |   :plugins [[lein-cljsbuild "1.0.4"]
16 |             [lein-npm "0.4.0"]
17 |             [lein-figwheel "0.2.5"]]
18 | 
19 |   :source-paths ["src" "target/classes"]
20 | 
21 |   :clean-targets ["resources/public/js/out"
22 |                   "resources/public/js/out-adv"]
23 | 
24 |   :figwheel {:http-server-root "public" ;; this will be in resources/
25 |              :server-port 3449          ;; default
26 |              :css-dirs ["resources/public/css"]
27 |              }
28 | 
29 |   :cljsbuild {
30 |     :builds [{:id "dev"
31 |               :source-paths ["src" "src-dev"]
32 |               :compiler {
33 |                 :output-to "resources/public/js/solar_system_of_js.js"
34 |                 :output-dir "resources/public/js/out"
35 |                 :optimizations :none
36 |                 :cache-analysis true
37 |                 :source-map true}}
38 |              {:id "release"
39 |               :source-paths ["src"]
40 |               :compiler {
41 |                 :output-to "resources/public/js/solar_system_of_js.min.js"
42 |                 :output-dir "resources/public/js/out-adv"
43 |                 :optimizations :advanced
44 |                 :pretty-print false}}]})
45 | 


--------------------------------------------------------------------------------
/publish.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | set -e
 4 | 
 5 | cd `dirname $0`
 6 | 
 7 | if [ ! -d hosted ]; then
 8 |   git clone git@github.com:shaunlebron/solar-system-of-js.git hosted
 9 | fi
10 | 
11 | cd hosted
12 | 
13 | # checkout gh-pages branch
14 | git checkout gh-pages
15 | 
16 | # make sure gh-pages is up-to-date
17 | git pull
18 | 
19 | # remove all files
20 | git rm -rf .
21 | 
22 | # add new report files
23 | lein cljsbuild once release
24 | cp -r ../resources/public/* .
25 | 
26 | # clean out unneeded
27 | rm -rf js/out-adv \
28 |        js/out \
29 |        js/solar_system_of_js.js
30 | 
31 | # choose production page
32 | mv index_release.html index.html
33 | 
34 | git add .
35 | git commit -m "auto-update"
36 | 
37 | # publish to website
38 | git push origin gh-pages
39 | 


--------------------------------------------------------------------------------
/resources/public/cljs.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 |    width="428px" height="426px"
 6 | 	 viewBox="0 0 428 426" enable-background="new 0 0 428 426" xml:space="preserve">
 7 | <g>
 8 | 	<path fill="#96CA4B" d="M122,266.6c-12.7,0-22.3-3.7-28.9-11.1c-6.6-7.4-9.9-18-9.9-31.8c0-14.1,3.4-24.9,10.3-32.5
 9 | 		s16.8-11.4,29.9-11.4c8.8,0,16.8,1.6,23.8,4.9l-5.4,14.3c-7.5-2.9-13.7-4.4-18.6-4.4c-14.5,0-21.7,9.6-21.7,28.8
10 | 		c0,9.4,1.8,16.4,5.4,21.2c3.6,4.7,8.9,7.1,15.9,7.1c7.9,0,15.4-2,22.5-5.9v15.5c-3.2,1.9-6.6,3.2-10.2,4
11 | 		C131.5,266.2,127.1,266.6,122,266.6z"/>
12 | 	<path fill="#96CA4B" d="M194.4,265.1h-17.8V147.3h17.8V265.1z"/>
13 | 	<path fill="#5F7FBF" d="M222.9,302.3c-5.3,0-9.8-0.6-13.3-1.9v-14.1c3.4,0.9,6.9,1.4,10.5,1.4c7.6,0,11.4-4.3,11.4-12.9v-93.5h17.8
14 | 		v94.7c0,8.6-2.3,15.2-6.8,19.6C237.9,300.1,231.4,302.3,222.9,302.3z M230.4,159.2c0-3.2,0.9-5.6,2.6-7.3c1.7-1.7,4.2-2.6,7.5-2.6
15 | 		c3.1,0,5.6,0.9,7.3,2.6c1.7,1.7,2.6,4.2,2.6,7.3c0,3-0.9,5.4-2.6,7.2c-1.7,1.7-4.2,2.6-7.3,2.6c-3.2,0-5.7-0.9-7.5-2.6
16 | 		C231.2,164.6,230.4,162.2,230.4,159.2z"/>
17 | 	<path fill="#5F7FBF" d="M342.5,241.3c0,8.2-3,14.4-8.9,18.8c-6,4.4-14.5,6.5-25.6,6.5c-11.2,0-20.1-1.7-26.9-5.1v-15.4
18 | 		c9.8,4.5,19,6.8,27.5,6.8c10.9,0,16.4-3.3,16.4-9.9c0-2.1-0.6-3.9-1.8-5.3c-1.2-1.4-3.2-2.9-6-4.4c-2.8-1.5-6.6-3.2-11.6-5.1
19 | 		c-9.6-3.7-16.2-7.5-19.6-11.2c-3.4-3.7-5.1-8.6-5.1-14.5c0-7.2,2.9-12.7,8.7-16.7c5.8-4,13.6-5.9,23.6-5.9c9.8,0,19.1,2,27.9,6
20 | 		l-5.8,13.4c-9-3.7-16.6-5.6-22.8-5.6c-9.4,0-14.1,2.7-14.1,8c0,2.6,1.2,4.8,3.7,6.7c2.4,1.8,7.8,4.3,16,7.5
21 | 		c6.9,2.7,11.9,5.1,15.1,7.3c3.1,2.2,5.4,4.8,7,7.7C341.7,233.7,342.5,237.2,342.5,241.3z"/>
22 | </g>
23 | <path fill="#96CA4B" stroke="#96CA4B" stroke-width="6" stroke-miterlimit="10" d="M197,392.7c-91.2-8.1-163-85-163-178.3
24 | 	S105.8,44.3,197,36.2V16.1c-102.3,8.2-183,94-183,198.4s80.7,190.2,183,198.4V392.7z"/>
25 | <path fill="#5F7FBF" stroke="#5F7FBF" stroke-width="6" stroke-miterlimit="10" d="M229,16.1v20.1c91.2,8.1,163,85,163,178.3
26 | 	s-71.8,170.2-163,178.3v20.1c102.3-8.2,183-94,183-198.4S331.3,24.3,229,16.1z"/>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/resources/public/css/keys.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * KEYS.css
 3 |  *
 4 |  * A simple stylesheet for rendering beautiful keyboard-style elements.
 5 |  *
 6 |  * Author:  Michael Hüneburg
 7 |  * Website: http://michaelhue.com/keyscss
 8 |  * License: MIT License (see LICENSE.txt)
 9 |  */
10 | 
11 | /* Base style, essential for every key. */
12 | kbd, .key {
13 | 	display: inline;
14 | 	display: inline-block;
15 | 	min-width: 1em;
16 | 	padding: .2em .3em;
17 | 	font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
18 | 	text-align: center;
19 | 	text-decoration: none;
20 | 	-moz-border-radius: .3em;
21 | 	-webkit-border-radius: .3em;
22 | 	border-radius: .3em;
23 | 	border: none;
24 | 	cursor: default;
25 | 	-moz-user-select: none;
26 | 	-webkit-user-select: none;
27 | 	user-select: none;
28 | }
29 | kbd[title], .key[title] {
30 | 	cursor: help;
31 | }
32 | 
33 | /* Dark style for display on light background. This is the default style. */
34 | kbd, kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key {
35 | 	background: rgb(80, 80, 80);
36 | 	background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
37 | 	background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
38 | 	color: rgb(250, 250, 250);
39 | 	text-shadow: -1px -1px 0 rgb(70, 70, 70);
40 | 	-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
41 | 	-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
42 | 	box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
43 | }
44 | 
45 | /* Light style for display on dark background. */
46 | kbd.light, .light-keys kbd, .key.light, .light-keys .key {
47 | 	background: rgb(250, 250, 250);
48 | 	background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
49 | 	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
50 | 	color:  rgb(50, 50, 50);
51 | 	text-shadow: 0 0 2px rgb(255, 255, 255);
52 | 	-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
53 | 	-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
54 | 	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
55 | }
56 | 


--------------------------------------------------------------------------------
/resources/public/css/main.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background: #1a1a1a;
  3 |   margin: 0;
  4 |   font: 16px "Open Sans", Helvetica, sans-serif;
  5 | }
  6 | 
  7 | body, html {
  8 |   min-width: 1024px;
  9 |   min-height: 660px;
 10 |   height: 100%;
 11 | }
 12 | 
 13 | #jsLogo {
 14 |   display: none;
 15 | }
 16 | 
 17 | #cljsLogo {
 18 |   height: 40px;
 19 |   opacity: 0.5;
 20 |   vertical-align: middle;
 21 |   transition: opacity 0.2s linear;
 22 | }
 23 | 
 24 | #container {
 25 |   display: -webkit-box;
 26 |   display: -moz-box;
 27 |   display: -ms-flexbox;
 28 |   display: -webkit-flex;
 29 |   display: flex;
 30 | 
 31 |   flex-direction: column;
 32 |   justify-content: center;
 33 |   align-items: center;
 34 |   align-content: center;
 35 |   -webkit-flex-direction: column;
 36 |   -webkit-justify-content: center;
 37 |   -webkit-align-items: center;
 38 |   -webkit-align-content: center;
 39 | 
 40 |   width: 100%;
 41 |   height: 100%;
 42 | }
 43 | 
 44 | #canvas-container {
 45 |   width: 100%;
 46 |   height: 70%;
 47 |   text-align: center;
 48 | }
 49 | 
 50 | #canvas {
 51 |   width: auto;
 52 |   height: auto;
 53 |   max-width: 100%;
 54 |   max-height: 100%;
 55 |   border-radius: 5px;
 56 | }
 57 | 
 58 | #caption {
 59 |   transition: opacity 1s;
 60 |   opacity: 0;
 61 | 
 62 |   margin: 20px auto;
 63 |   padding: 20px 40px;
 64 |   max-width: 900px;
 65 |   color: #AAA;
 66 |   background: #2a2a2a;
 67 |   text-align: center;
 68 |   border-radius: 5px;
 69 | }
 70 | 
 71 | #canvas-footer {
 72 |   position: relative;
 73 |   height: 80px;
 74 |   opacity: 0;
 75 |   transition: opacity 1s;
 76 | }
 77 | 
 78 | #keys {
 79 |   color: #AAA;
 80 |   position: absolute;
 81 |   text-align: right;
 82 |   display: block;
 83 |   opacity: 0.2;
 84 |   right: 10px;
 85 |   top: 10px;
 86 |   transition: opacity 0.2s;
 87 |   cursor: default;
 88 | }
 89 | 
 90 | #keys:hover {
 91 |   opacity: 0.5;
 92 | }
 93 | 
 94 | #keys tr td:last-child {
 95 |   text-align: left;
 96 | }
 97 | 
 98 | #caption p {
 99 |   margin: 5px;
100 | }
101 | 
102 | #caption a {
103 |   color: #EEE;
104 |   text-decoration: none;
105 |   border-bottom: 2px solid #666;
106 | }
107 | 
108 | #caption i.fa {
109 |   font-size: 1.2em;
110 |   vertical-align: middle;
111 | }
112 | 
113 | #github {
114 |   padding: 20px;
115 |   color: #444;
116 |   display: block;
117 |   width: 260px;
118 |   margin: 0 auto;
119 |   text-align: center;
120 | }
121 | 
122 | a {
123 |   color: inherit;
124 |   text-decoration: none;
125 | }
126 | 
127 | #github:hover #cljsLogo {
128 |   opacity: 1;
129 | }
130 | 


--------------------------------------------------------------------------------
/resources/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <title>Solar System of JS</title>
 5 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 6 |     <link rel="stylesheet" href="css/keys.css" type="text/css">
 7 |     <link rel="stylesheet" href="css/main.css" type="text/css">
 8 |     <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
 9 |   </head>
10 |   <body>
11 |     <img id="jsLogo" src="js.svg">
12 |     <div id="container"></div>
13 |     <script src="js/out/goog/base.js"></script>
14 |     <script src="js/solar_system_of_js.js"></script>
15 |     <script>
16 |       goog.require("solar_system_of_js.dev");
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/resources/public/index_release.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>Solar System of JS</title>
 4 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 5 |     <link rel="stylesheet" href="css/keys.css" type="text/css">
 6 |     <link rel="stylesheet" href="css/main.css" type="text/css">
 7 |     <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <img id="jsLogo" src="js.svg">
11 |     <div id="container"></div>
12 |     <script src="js/solar_system_of_js.min.js" type="text/javascript"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/resources/public/js.svg:
--------------------------------------------------------------------------------
 1 | <svg width="630" height="630" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 630 630">
 2 | <!--
 3 | The MIT License (MIT)
 4 | 
 5 | Copyright (c) 2011 Christopher Williams <chris@iterativedesigns.com>,
 6 |                      Manuel Strehl <boldewyn@gmail.com>
 7 | 
 8 | Permission is hereby granted, free of charge, to any person obtaining a copy
 9 | of this software and associated documentation files (the "Software"), to deal
10 | in the Software without restriction, including without limitation the rights
11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
12 | copies of the Software, and to permit persons to whom the Software is
13 | furnished to do so, subject to the following conditions:
14 | 
15 | The above copyright notice and this permission notice shall be included in
16 | all copies or substantial portions of the Software.
17 | 
18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
24 | THE SOFTWARE.
25 | -->
26 | <g id="logo">
27 |   <!-- <rect id="background" x="0" y="0" width="630" height="630" fill="#f7df1e" /> -->
28 |   <path id="j" fill="#222" d="m 165.65,526.47375 48.2125,-29.1775 C 223.16375,513.7875 231.625,527.74 251.92,527.74 c 19.45375,0 31.71875,-7.60975 31.71875,-37.21 l 0,-201.3 59.20375,0 0,202.1375 c 0,61.32 -35.94375,89.23125 -88.385,89.23125 -47.36125,0 -74.8525,-24.52875 -88.8075,-54.13" />
29 |   <path id="s" fill="#222" d="m 375,520.13 48.20625,-27.91125 c 12.69,20.72375 29.1825,35.9475 58.36125,35.9475 24.53125,0 40.17375,-12.26475 40.17375,-29.18125 0,-20.29875 -16.06875,-27.48875 -43.135,-39.32625 l -14.7975,-6.3475 c -42.715,-18.18125 -71.05,-41.0175 -71.05,-89.2275 0,-44.40375 33.83125,-78.2375 86.695,-78.2375 37.6375,0 64.7025,13.11125 84.15375,47.36625 l -46.09625,29.60125 c -10.15,-18.1825 -21.1425,-25.37125 -38.0575,-25.37125 -17.33875,0 -28.335,10.995 -28.335,25.37125 0,17.7625 10.99625,24.9525 36.3675,35.94875 l 14.8,6.3425 c 50.325,21.56875 78.66,43.5575 78.66,93.03375 0,53.2875 -41.86625,82.465 -98.11,82.465 -54.97625,0 -90.5,-26.2175 -107.83625,-60.47375" />
30 | </g>
31 | </svg>
32 | 


--------------------------------------------------------------------------------
/sketch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shaunlebron/solar-system-of-js/a5c53c9727622ac023963766323b6eb5d03f5226/sketch.jpg


--------------------------------------------------------------------------------
/src-dev/solar_system_of_js/dev.cljs:
--------------------------------------------------------------------------------
1 | (ns solar-system-of-js.dev
2 |   (:require
3 |     solar-system-of-js.core
4 |     [figwheel.client :as fw]))
5 | 
6 | ;; start figwheel
7 | (fw/start {})
8 | 
9 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/actions.cljs:
--------------------------------------------------------------------------------
  1 | (ns solar-system-of-js.actions
  2 |   (:require-macros
  3 |     [cljs.core.async.macros :refer [go go-loop]])
  4 |   (:require
  5 |     [cljs.core.async :refer [<! timeout chan tap]]
  6 |     [solar-system-of-js.state :refer [state]]
  7 |     [solar-system-of-js.animate :refer [tick-tap multi-animate!]]
  8 |     [solar-system-of-js.math :refer [PI]]))
  9 | 
 10 | ;; When we change slides, there can be multiple actions to perform.
 11 | ;;
 12 | ;; For example:
 13 | ;;
 14 | ;;  Slide I:             <--- When I press the NEXT key, perform all of the following steps...
 15 | ;;
 16 | ;;    1. A, B, C, D      <--- animate A, B, C, D in parallel (then wait for all to finish)
 17 | ;;    2. E, F            <--- animate E, F in parallel       (then wait for all to finish)
 18 | ;;
 19 | ;;  Slide II:            <--- When I press the NEXT key, perform all of the following steps...
 20 | ;;
 21 | ;;    3. G, H, I         <--- animate G, H in parallel (then wait for all to finish)
 22 | ;;    4. J               <--- animate J (then wait for it to finish)
 23 | ;;
 24 | ;;
 25 | ;; DEFINITIONS:
 26 | ;; 
 27 | ;;  Slide:      a sequence of Actions to take after a single keypress of the NEXT key
 28 | ;;  Action:     a group of concurrent state setters (possibly animated)
 29 | ;;
 30 | ;; DETAILED DEFINITIONS:
 31 | ;;
 32 | ;;  An action is just a Map.
 33 | ;;  Let's look at possible example values in this _example-action map:
 34 | ;;
 35 | 
 36 | (def _example-action
 37 |   "An example action (state setters that are possible animated)"
 38 |   {
 39 |    ;;---------------------------------------------------------
 40 |    ;; IMMEDIATE SETTERS (no animation)
 41 |    ;;---------------------------------------------------------
 42 | 
 43 |    ;; set :foo key in our app state to 1
 44 |    :foo  1           
 45 | 
 46 |    ;; set [:bar :baz] key in our app state to 2
 47 |    [:bar :baz]  2    
 48 | 
 49 |    ;;---------------------------------------------------------
 50 |    ;; ANIMATED SETTERS
 51 |    ;;---------------------------------------------------------
 52 | 
 53 |    ;; animate :foo1 key in our app state from 0 to 1 over 2 seconds
 54 |    :foo1 {:a 0 :b 1 :duration 2}  
 55 | 
 56 |    ;; (same, but animate from whatever its current value is, indicated by ":_")
 57 |    :foo2 {:a :_ :b 1 :duration 2}
 58 | 
 59 |    ;;---------------------------------------------------------
 60 |    ;; CUSTOM ANIMATION
 61 |    ;;---------------------------------------------------------
 62 | 
 63 |    ;; use a core.async go-block to do a custom animation.
 64 |    ;; (Note that you must make this action SKIPPABLE by choosing the correct
 65 |    ;;  destination value "b" that our value will be set to when the go-block is finished.
 66 |    ;;  the source value "a" is ignored here.)
 67 |    :foo3 {:a :_ :b 3
 68 |          :go-block #(go (doseq [x [1 2 3]]
 69 |                           (<! (timeout 100))
 70 |                           (swap! state assoc :foo x)))}
 71 |    })
 72 | 
 73 | ;;----------------------------------------------------------------------
 74 | ;; Normalization of Action data
 75 | ;; (since action has some short-hand, we use these functions to expand it)
 76 | ;;----------------------------------------------------------------------
 77 | 
 78 | (defn normalize-path
 79 |   "A path is either a keyword or sequence of keywords, a state path."
 80 |   [path]
 81 |   (if (vector? path) path [path]))
 82 | 
 83 | (defn normalize-value
 84 |   "A value is either a scalar, or a map containing FROM(a) and TO(b) keys."
 85 |   [value]
 86 |   (if (map? value) value {:a :_ :b value}))
 87 | 
 88 | (defn normalize-step
 89 |   "Assuming a single action step. Return normalized step."
 90 |   [action]
 91 |   (zipmap (map normalize-path (keys action))
 92 |           (map normalize-value (vals action))))
 93 | 
 94 | (defn normalize-action
 95 |   "An action can have a single or multiple steps. Return normalized steps."
 96 |   [step-or-steps]
 97 |   (let [steps (if (sequential? step-or-steps) step-or-steps [step-or-steps])]
 98 |     (mapv normalize-step steps)))
 99 | 
100 | ;;----------------------------------------------------------------------
101 | ;; Converting actions to animations or skippers
102 | ;;----------------------------------------------------------------------
103 | 
104 | ;; Determine action type:
105 | ;;
106 | ;;   immediate? (set state immediately to b)
107 | ;;   animation? (simple tween from a to b over duration)
108 | ;;   custom?    (use go-block for custom animation)
109 | ;;
110 | (defn animation? [[path value]] (:duration value))
111 | (defn custom?    [[path value]] (:go-block value))
112 | (defn immediate? [kv] (and (not (animation? kv))
113 |                            (not (custom? kv))))
114 | 
115 | ;; Every action is skippable since they have a destination "b".
116 | ;; We can ignore the extra animation information if given.
117 | 
118 | (defn skip-step!
119 |   [step]
120 |   (doseq [[path value] step]
121 |     (swap! state assoc-in path (:b value))))
122 | 
123 | (defn skip-action!
124 |   [action]
125 |   (doseq [step action]
126 |     (skip-step! step)))
127 | 
128 | ;; We gather all the animation info from a step map and evaluate them
129 | ;; to a) start the animations and to b) get a channel for notification
130 | ;; when they are complete.
131 | 
132 | (defn animate-step!
133 |   "Animate the given step concurrently."
134 |   [step-map]
135 |   (let [_              (->> (filter immediate? step-map) (skip-step!))
136 |         anim-chan      (->> (filter animation? step-map) (multi-animate!))
137 |         go-block-chans (->> (filter custom? step-map) (map second) (map :go-block) (mapv #(%)))
138 |         wait-chans     (cons anim-chan go-block-chans)]
139 |     (go
140 |       (doseq [c wait-chans]
141 |         (<! c)))))
142 | 
143 | (defn animate-action!
144 |   "Animate the given action steps in sequence."
145 |   [action]
146 |   (go
147 |     (doseq [step action]
148 |       (<! (animate-step! step)))))
149 | 
150 | ;;----------------------------------------------------------------------
151 | ;; Slide action definitions
152 | ;;----------------------------------------------------------------------
153 | 
154 | ;; some constants
155 | (def static-num-arcs 4)
156 | (def static-low-alpha 0.2)
157 | (def arc-speed 0.7)
158 | 
159 | (def other-high 1)
160 | (def other-low 0.4)
161 | (def other-high-delay 0.1)
162 | (def other-low-delay 0.1)
163 | 
164 | (def slide-actions
165 |   "Actions to take for each slide."
166 |   (mapv normalize-action
167 |   [;; title slide
168 |    {:caption
169 |     (str "Hello, I'm [@shaunlebron](http://twitter.com/shaunlebron)"
170 |          " and I made this for [#spacecityjs](http://spacecityjs.com/)"
171 |          " to visualize the current state of languages on the JS platform.")}
172 | 
173 |    ;; slide in the JS logo
174 |    {:caption
175 |     "This is JavaScript, the one and only programming language that today's browsers understand."
176 |     [:js-face :x]   {:a :_ :b 0 :duration 1}
177 |     [:title :alpha] {:a :_ :b 0 :duration 0.4}}
178 | 
179 |    ;; peel back JS logo to see its layers
180 |    {:caption
181 |     "If we look inside JavaScript, we find that it is a multi-layered, growing language."
182 |     [:cam :x]         {:a :_ :b 400 :duration 2}
183 |     [:cam :y]         {:a :_ :b -100 :duration 2}
184 |     [:js-face :y]     {:a :_ :b -600 :duration 2}
185 |     [:js-face :x]     {:a :_ :b 600 :duration 2}
186 |     [:js-face :angle] {:a :_ :b (* 2 PI) :duration 2}
187 |     [:js-face :alpha] {:a :_ :b 0 :duration 2}
188 |     [:js-core :alpha] {:a :_ :b 1 :duration 1}
189 |     [:cam :zoom]      {:a :_ :b 2 :duration 2}}
190 | 
191 |    ;; ES3
192 |    {:caption
193 |     "At its core is ES3, which we consider the base version of JS supported by legacy browsers."
194 |     [:es-captions :es3 :alpha] 1}
195 | 
196 |    ;; ES5
197 |    {:caption
198 |     (str "ES4 was abandoned, but ES5 was a conservative addition with new functions and a "
199 |          "[\"use strict\"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) mode.")
200 |     [:es-captions :es3 :alpha] 0
201 |     [:es-captions :es5 :alpha] 1}
202 | 
203 |    ;; ES6
204 |    {:caption
205 |     (str "ES6 is the current version, with a [rather huge](https://github.com/lukehoban/es6features)"
206 |          " addition of syntax and concepts.")
207 |     [:es-captions :es5 :alpha] 0
208 |     [:es-captions :es6 :alpha] 1}
209 | 
210 |    ;; ES7
211 |    {:caption
212 |     (str "ES7 is the next version which will include"
213 |          " [Object.observe](http://www.html5rocks.com/en/tutorials/es7/observe/),"
214 |          " [async](http://code.tutsplus.com/tutorials/a-primer-on-es7-async-functions--cms-22367),"
215 |          " [comprehensions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions),"
216 |          " and [guards](http://wiki.ecmascript.org/doku.php?id=strawman:guards).")
217 |     [:es-captions :es6 :alpha] 0
218 |     [:es-captions :es7 :alpha] 1}
219 | 
220 |    ;; ES8
221 |    {:caption
222 |     (str "ES8 is even further away, but it may bring [macros](http://www.2ality.com/2011/09/es6-8.html),"
223 |          " a powerful way to grow JS syntax yourself.")
224 |     [:es-captions :es7 :alpha] 0
225 |     [:es-captions :es8 :alpha] 1}
226 | 
227 |    ;; flash all layers and show transpiler
228 |    {:caption
229 |     (str "But current/future JS features are not yet available in Browsers."
230 |          " [Babel](https://babeljs.io/) or [Traceur](https://github.com/google/traceur-compiler)"
231 |          " help alleviate this by transpiling to ES5.")
232 |     [:transpiler :highlight] true
233 |     [:es-captions :es8 :alpha] 0
234 |     [:cam :x]                  {:a :_ :b 200 :duration 1}
235 |     [:cam :y]                  {:a :_ :b 0 :duration 1}
236 |     [:cam :zoom]               {:a :_ :b 1.3 :duration 1}
237 |     [:transpiler :x]           {:a :_ :b 450 :duration 0.2}
238 |     [:transpiler :alpha]       {:a :_ :b 1 :duration 0.2}
239 |     [:transpiler :font-alpha]  {:a :_ :b 1 :duration 0.1}
240 | 
241 |     :highlight-layer
242 |     {:a :_ :b nil
243 |      :go-block #(go
244 |                   (<! (timeout 50))
245 |                   (doseq [i [1 2 3 4 3 2 1 2 3 4 3 2 1 2 3 4 nil]]
246 |                     (swap! state assoc :highlight-layer i)
247 |                     (<! (timeout 70))))}}
248 | 
249 |    ;; show linter
250 |    {:caption
251 |     (str "Also, to catch common JS language gotchas in our code, we rely on linters like"
252 |          " [JSHint](http://jshint.com/about/) or [ESLint](http://eslint.org/).")
253 | 
254 |     [:transpiler :highlight] false
255 |     [:linter :highlight] true
256 |     [:linter :alpha]      {:a :_ :b 1 :duration 0.2}
257 |     [:linter :font-alpha] {:a :_ :b 1 :duration 0.1}
258 |     [:linter :x]          {:a :_ :b 450 :duration 0.2}}
259 | 
260 |    ;; show module sys
261 |    {:caption
262 |     (str "And for proper dependency loading, we must choose a module tool like"
263 |          " [Browserify](http://browserify.org/),"
264 |          " [webpack](http://webpack.github.io/),"
265 |          " [SystemJS](https://github.com/systemjs/systemjs),"
266 |          " [RequireJS](http://requirejs.org/), etc.")
267 | 
268 |     [:linter :highlight] false
269 |     [:modulesys :highlight] true
270 | 
271 |     [:modulesys :alpha]      {:a :_ :b 1 :duration 0.2}
272 |     [:modulesys :font-alpha] {:a :_ :b 1 :duration 0.1}
273 |     [:modulesys :x]          {:a :_ :b 450 :duration 0.2}}
274 | 
275 |    ;; put JS back together, showing it required tools
276 |    {:caption
277 |     "Thus, anyone using JS directly today must use some combination of these tools as foundation for the language."
278 |     [:modulesys :highlight] false
279 |     [:transpiler :font-alpha] {:a :_ :b 0   :duration 2}
280 |     [:linter :font-alpha]     {:a :_ :b 0   :duration 2}
281 |     [:modulesys :font-alpha]  {:a :_ :b 0   :duration 2}
282 |     [:transpiler :x]          {:a :_ :b 220 :duration 2}
283 |     [:linter :x]              {:a :_ :b 220 :duration 2}
284 |     [:modulesys :x]           {:a :_ :b 220 :duration 2}
285 |     [:js-face :y]             {:a :_ :b 0   :duration 2}
286 |     [:js-face :x]             {:a :_ :b 0   :duration 2}
287 |     [:js-face :angle]         {:a :_ :b 0   :duration 2}
288 |     [:js-face :alpha]         {:a 1 :b 1    :duration 2}
289 |     [:cam :zoom]              {:a :_ :b 1   :duration 2}
290 |     [:cam :x]                 {:a :_ :b 0   :duration 2}
291 |     [:cam :y]                 {:a :_ :b 0   :duration 2}}
292 | 
293 |    ;; show staticsphere
294 |    [{:caption
295 |      "There are even several attempts to extend JS for extra type safety and optimization."
296 |      [:transpiler :alpha] {:a :_ :b 0 :duration 1}
297 |      [:linter :alpha]     {:a :_ :b 0 :duration 1}
298 |      [:modulesys :alpha]  {:a :_ :b 0 :duration 1}
299 |      [:cam :zoom]         {:a :_ :b 0.5 :duration 1}
300 |      [:cam :y]            {:a :_ :b -50 :duration 1}}
301 | 
302 |     {[:static :title :alpha]  {:a :_ :b 1 :duration 1}
303 |      [:static :sphere :alpha] {:a :_ :b 1 :duration 1}
304 |      [:static :sphere :r]     {:a :_ :b 400 :duration 1}}]
305 | 
306 |    ;; show typescript
307 |    {:caption
308 |     (str "Microsoft's [TypeScript](http://www.typescriptlang.org/)"
309 |          " extends ES6 with optional type annotation syntax and interfaces, and extra editor support.")
310 |     [:cam :x]                    {:a :_ :b 300 :duration 1}
311 |     [:static :typescript :alpha] {:a :_ :b 1 :duration 1}
312 |     [:static :sphere :arcs]      {:a :_ :b 1 :duration arc-speed}}
313 | 
314 |    ;; show flow
315 |    {:caption
316 |     (str "Facebook's [Flow](http://flowtype.org/) will check for type safety as well,"
317 |          " even for plain JS without type annotations.")
318 | 
319 |     [:static :typescript :alpha] static-low-alpha
320 |     [:static :flow :alpha]   {:a :_ :b 1 :duration 1}
321 |     [:static :sphere :arcs]  {:a :_ :b 2 :duration arc-speed}}
322 | 
323 |    ;; show closure
324 |    {:caption
325 |     (str "Google makes heavy usage of its own [Closure Tools](Closure Tools),"
326 |          " supporting [jsdoc tags](https://developers.google.com/closure/compiler/docs/js-for-compiler)"
327 |          " for aggressive type optimization.")
328 |     [:static :flow :alpha] static-low-alpha
329 | 
330 |     [:static :closure :alpha] {:a :_ :b 1 :duration 1}
331 |     [:static :sphere :arcs]   {:a :_ :b 3 :duration arc-speed}}
332 | 
333 |    ;; show soundscript
334 |    {:caption
335 |     (str "Google is also experimenting with [SoundScript](https://developers.google.com/v8/experiments),"
336 |          " a new \"use stricter+types\" mode for VM-level optimizations.")
337 |     [:static :closure :alpha] static-low-alpha
338 |     [:static :soundscript :alpha] {:a :_ :b 1 :duration 1}
339 |     [:static :sphere :arcs]       {:a :_ :b 4 :duration arc-speed}}
340 | 
341 |    ;; fade out staticsphere details
342 |    {:caption
343 |     "There are also languages that are completely separate from JS, but still compile to it."
344 |     [:static :typescript :alpha]  {:a :_ :b 0 :duration 1}
345 |     [:static :flow :alpha]        {:a :_ :b 0 :duration 1}
346 |     [:static :closure :alpha]     {:a :_ :b 0 :duration 1}
347 |     [:static :soundscript :alpha] {:a static-low-alpha :b 0 :duration 1}
348 |     [:cam :x]                     {:a :_ :b 0 :duration 1}
349 |     [:static :sphere :arcs]       {:a :_ :b 0 :duration arc-speed}
350 |     [:static :title :alpha]       {:a :_ :b 0 :duration 1}
351 |     [:cam :zoom]                  {:a :_ :b 0.2 :duration 2}}
352 | 
353 |    ;; show coffeescript
354 |    {:caption
355 |     "[CoffeeScript](http://coffeescript.org/) is separate from JS but remains close.  Its simpler syntax and idioms have influenced features in ES6."
356 |     :enable-orbits? true
357 |     [:radar :orbit] :coffeescript
358 |     [:coffeescript :highlight] true
359 |     [:coffeescript :alpha] {:a :_ :b 1 :duration 1}}
360 | 
361 |    ;; show dart
362 |    {:caption
363 |     "[Dart](https://www.dartlang.org/) is larger. It embraces OOP with optional typing, a large core library, and development tools."
364 |     [:coffeescript :highlight] false
365 |     [:dart :highlight] true
366 |     [:radar :orbit] :dart
367 |     [:dart :alpha] {:a :_ :b 1 :duration 1}}
368 | 
369 |    ;; show clojurescript
370 |    {:caption
371 |     "[ClojureScript](http://clojurescript.org) eschews imperative/OO in favor of immutability, plain data, and a more expressive syntax."
372 |     [:dart :highlight] false
373 |     [:clojurescript :highlight] true
374 |     [:clojurescript :angle] (- (/ PI 10))
375 |     [:radar :orbit] :clojurescript
376 | 
377 |     [:clojurescript :alpha] {:a :_ :b 1 :duration 1}
378 |     [:cam :y]               {:a :_ :b 0 :duration 1}
379 |     [:cam :x]               {:a :_ :b 300 :duration 1}
380 |     [:cam :zoom]            {:a :_ :b 0.15 :duration 1}}
381 | 
382 |    ;; show other languages
383 |    [{:caption
384 |     "There are many other active & mature languages/tool suites that build upon JavaScript's foundation."
385 |     [:clojurescript :highlight] false
386 |     [:radar :orbit] nil
387 |     [:cam :zoom] {:a :_ :b 0.1 :duration 1}
388 |     [:cam :x] {:a :_ :b 600 :duration 1}
389 |     }
390 | 
391 |     {[:gwt :alpha] {:a :_ :b other-high :duration other-high-delay}}
392 | 
393 |     {[:gwt :alpha] {:a :_ :b other-low :duration other-low-delay}
394 |      [:websharper :alpha] {:a :_ :b other-high :duration other-high-delay}}
395 | 
396 |     {[:websharper :alpha] {:a :_ :b other-low :duration other-low-delay}
397 |      [:objective-j :alpha] {:a :_ :b other-high :duration other-high-delay}}
398 | 
399 |     {[:objective-j :alpha] {:a :_ :b other-low :duration other-low-delay}
400 |      [:scala.js :alpha] {:a :_ :b other-high :duration other-high-delay}}
401 | 
402 |     {[:scala.js :alpha] {:a :_ :b other-low :duration other-low-delay}
403 |      [:elm :alpha] {:a :_ :b other-high :duration other-high-delay}}
404 | 
405 |     {[:elm :alpha] {:a :_ :b other-low :duration other-low-delay}
406 |      [:purescript :alpha] {:a :_ :b other-high :duration other-high-delay}}
407 | 
408 |     {[:purescript :alpha] {:a :_ :b other-low :duration other-low-delay}
409 |      [:js_of_ocaml :alpha] {:a :_ :b other-high :duration other-high-delay}}
410 | 
411 |     {[:js_of_ocaml :alpha] {:a :_ :b other-low :duration other-low-delay}
412 |      [:asm :alpha] {:a :_ :b other-high :duration other-high-delay}}
413 | 
414 |     {[:asm :alpha] {:a :_ :b other-low :duration other-low-delay}}]
415 | 
416 |    {:caption
417 |     (str "I hope that this has added some visual order to the overwhelming space of JS. Happy travels!"
418 |          " -- (((<i class='fa fa-space-shuttle'></i>")
419 |     [:cam :x] {:a :_ :b 0 :duration 2}
420 |     }
421 | 
422 | ]))
423 | 
424 | ;;----------------------------------------------------------------------
425 | ;; Action Loops
426 | ;;----------------------------------------------------------------------
427 | 
428 | (defn update-orbit!
429 |   [name- dt]
430 |   (let [v (* dt (get-in @state [name- :angle-speed]))]
431 |     (swap! state update-in [name- :angle] + v)))
432 | 
433 | (defn tick-orbits!
434 |   [dt]
435 |   (when (:enable-orbits? @state)
436 |     (update-orbit! :coffeescript dt)
437 |     (update-orbit! :dart dt)
438 |     (update-orbit! :clojurescript dt)))
439 | 
440 | (defn tick-radar!
441 |   [dt]
442 |   (when (:enable-orbits? @state)
443 |     (swap! state update-in [:radar :offset] + (* dt 400))))
444 | 
445 | (defn start-loops!
446 |   "These are looping animations that cannot be represented as slide transitions.
447 |   (Slide transitions have to end at some point.)"
448 |   []
449 |   (let [c (chan)]
450 |     (tap tick-tap c)
451 |     (go-loop []
452 |       (let [dt (<! c)]
453 |         (tick-orbits! dt)
454 |         (tick-radar! dt))
455 |       (recur))))
456 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/animate.cljs:
--------------------------------------------------------------------------------
 1 | (ns solar-system-of-js.animate
 2 |   (:require-macros
 3 |     [cljs.core.async.macros :refer [go go-loop]])
 4 |   (:require
 5 |     [cljs.core.async :refer [put! <! chan tap untap mult]]
 6 |     [solar-system-of-js.state :refer [state]]
 7 |     [solar-system-of-js.math :refer [PI cos]]))
 8 | 
 9 | ;;----------------------------------------------------------------------
10 | ;; Heartbeat
11 | ;;----------------------------------------------------------------------
12 | 
13 | (def tick-chan
14 |   "This channel receives dt (delta time from last frame) in milliseconds."
15 |   (chan))
16 | 
17 | (def tick-tap
18 |   "Allows anything to tap the tick channel (e.g. for animation)."
19 |   (mult tick-chan))
20 | 
21 | (def prev-time
22 |   "Timestamp of the last tick."
23 |   nil)
24 | 
25 | (defn tick!
26 |   "Creates heartbeat by hooking requestAnimationFrame to tick-chan."
27 |   [curr-time]
28 |   (let [delta-ms (if prev-time
29 |                    (- curr-time prev-time)
30 |                    (/ 1000 60))
31 |         dt (/ delta-ms 1000)]
32 |     (set! prev-time curr-time)
33 |     (put! tick-chan dt))
34 |   (.requestAnimationFrame js/window tick!))
35 | 
36 | (defn start-ticking!
37 |   []
38 |   (.requestAnimationFrame js/window tick!))
39 | 
40 | ;;----------------------------------------------------------------------
41 | ;; Animation
42 | ;;----------------------------------------------------------------------
43 | 
44 | (def tweens
45 |   "In-betweening animation functions."
46 |   {:linear identity
47 |    :swing #(- 0.5 (/ (cos (* % PI)) 2)) ;; from jquery
48 | 
49 |    ;; find more: https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
50 | 
51 |    })
52 | 
53 | (defn resolve-tween
54 |   "Resolve the tween to a function if it's a name."
55 |   [tween]
56 |   (cond-> tween
57 |     (keyword? tween) tweens))
58 | 
59 | (defn animate!
60 |   "Pass given animation values to the given callback.
61 |    Returns a channel that closes when done."
62 |   [state-path {:keys [a b duration tween] :or {tween :swing} :as opts}]
63 |   (let [tween (resolve-tween tween)
64 |         c (chan)
65 |         resolve-var #(if (= % :_) (get-in @state state-path) %)
66 |         a (resolve-var a)
67 |         dv (- b a)]
68 |     (tap tick-tap c)
69 |     (go-loop [t 0]
70 |       (let [dt (<! c)
71 |             t (+ t dt)
72 |             percent (-> (/ t duration)
73 |                         (min 1)
74 |                         (tween))
75 |             v (+ a (* percent dv))]
76 |         (swap! state assoc-in state-path v)
77 |         (when (< t duration)
78 |           (recur t)))
79 |       (untap tick-tap c))))
80 | 
81 | (defn multi-animate!
82 |   "Helper for concurrent animations with `animate!`.
83 |    Returns a channel that closes when all are done."
84 |   [pairs]
85 |   (let [anims (mapv #(apply animate! %) pairs)]
86 |     (go
87 |       (doseq [a anims]
88 |         (<! a)))))
89 | 
90 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/canvas.cljs:
--------------------------------------------------------------------------------
 1 | (ns solar-system-of-js.canvas
 2 |   (:require
 3 |     [solar-system-of-js.math :refer [PI]]))
 4 | 
 5 | (defonce canvas nil)
 6 | (defonce ctx nil)
 7 | 
 8 | (def width 1280)
 9 | (def height 720)
10 | 
11 | (defn resize-canvas-footer!
12 |   []
13 |   (let [w (aget canvas "offsetWidth")]
14 |     (.log js/console canvas (aget canvas "style") w)
15 |     (doto (.getElementById js/document "canvas-footer")
16 |         (aset "style" "width" (str w "px"))
17 |         (aset "style" "opacity" 1))))
18 | 
19 | (defn init-canvas!
20 |   []
21 |   (set! canvas (.getElementById js/document "canvas"))
22 |   (set! ctx    (.getContext canvas "2d"))
23 | 
24 |   (aset canvas "width" width)
25 |   (aset canvas "height" height)
26 |   
27 |   (resize-canvas-footer!)
28 |   (.addEventListener js/window "resize" resize-canvas-footer!))
29 | 
30 | ;; wrapping Canvas2D functions for convenience
31 | 
32 | (defn fill-style! [x] (aset ctx "fillStyle" x))
33 | (defn stroke-style! [x] (aset ctx "strokeStyle" x))
34 | (defn begin-path! [] (.beginPath ctx))
35 | (defn close-path! [] (.closePath ctx))
36 | (defn translate! [x y] (.translate ctx x y))
37 | (defn scale! [x y] (.scale ctx x y))
38 | (defn rotate! [x] (.rotate ctx x))
39 | (defn save! [] (.save ctx))
40 | (defn restore! [] (.restore ctx))
41 | (defn fill-rect! [x y w h] (.fillRect ctx x y w h))
42 | (defn stroke-rect! [x y w h] (.strokeRect ctx x y w h))
43 | (defn arc! [x y r a0 a1 cc] (.arc ctx x y r a0 a1 cc))
44 | (defn fill! [] (.fill ctx))
45 | (defn stroke! [] (.stroke ctx))
46 | (defn circle! [x y r] (begin-path!) (arc! x y r 0 (* 2 PI) false))
47 | (defn move-to! [x y] (.moveTo ctx x y))
48 | (defn line-to! [x y] (.lineTo ctx x y))
49 | (defn stroke-line! [x0 y0 x1 y1] (begin-path!) (move-to! x0 y0) (line-to! x1 y1) (stroke!))
50 | (defn get-global-alpha [] (aget ctx "globalAlpha"))
51 | (defn set-global-alpha [x] (aset ctx "globalAlpha" x))
52 | (defn global-alpha! [x] (set-global-alpha (* x (get-global-alpha))))
53 | (defn font! [x] (aset ctx "font" x))
54 | (defn fill-text! [text x y] (.fillText ctx text x y))
55 | (defn stroke-text! [text x y] (.strokeText ctx text x y))
56 | (defn text-align! [x] (aset ctx "textAlign" x))
57 | (defn text-baseline! [x] (aset ctx "textBaseline" x))
58 | (defn line-width! [x] (aset ctx "lineWidth" x))
59 | (defn line-cap! [x] (aset ctx "lineCap" x))
60 | (defn draw-image!
61 |   ([img dx dy] (.drawImage ctx img dx dy))
62 |   ([img dx dy dWidth dHeight] (.drawImage ctx img dx dy dWidth dHeight))
63 |   ([img sx sy sWidth sHeight dx dy dWidth dHeight] (.drawImage ctx img sx sy sWidth sHeight dx dy dWidth dHeight)))
64 | 
65 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/caption.cljs:
--------------------------------------------------------------------------------
 1 | (ns solar-system-of-js.caption
 2 |   (:require
 3 |     [solar-system-of-js.state :refer [state]]
 4 |     [markdown.core :refer [md->html]]))
 5 | 
 6 | (defn set-caption!
 7 |   [caption]
 8 |   (let [el (.getElementById js/document "caption")]
 9 | 
10 |     (let [html (md->html caption)]
11 |       (aset el "style" "opacity" "1")
12 |       (aset el "innerHTML" html))
13 | 
14 |     ;; make all links open in new tab
15 |     (let [elements (.querySelectorAll el "a")]
16 |       (dotimes [i (aget elements "length")]
17 |         (let [el (aget elements i)]
18 |           (.setAttribute el "target" "_blank"))))))
19 | 
20 | (defn on-caption-change
21 |   [_key _atom {old-caption :caption} {new-caption :caption}]
22 |   (when (not= old-caption new-caption)
23 |     (set-caption! new-caption)))
24 | 
25 | (add-watch state :caption-watcher on-caption-change)
26 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/control.cljs:
--------------------------------------------------------------------------------
 1 | (ns solar-system-of-js.control
 2 |   (:require
 3 |     [solar-system-of-js.actions :refer [slide-actions]]
 4 |     [solar-system-of-js.nav :refer [skip-slide! next-slide! prev-slide!]]
 5 |     [solar-system-of-js.canvas :refer [canvas]]
 6 |     cljsjs.hammer))
 7 | 
 8 | (def key-names
 9 |   {37 :left
10 |    38 :up
11 |    39 :right
12 |    40 :down
13 |    32 :space})
14 | 
15 | (def key-name #(-> % .-keyCode key-names))
16 | 
17 | (defn key-down [e]
18 |   (let [kname (key-name e)
19 |         shift (.-shiftKey e)]
20 |     (case kname
21 |       :space (do
22 |                (next-slide!)
23 |                (.preventDefault e))
24 |       :left  (do
25 |                (prev-slide!)
26 |                (.preventDefault e))
27 |       :right (do
28 |                (if shift
29 |                  (skip-slide!)
30 |                  (next-slide!))
31 |                (.preventDefault e))
32 |       nil)))
33 | 
34 | (defn on-swipe!
35 |   [type-]
36 |   (case type-
37 |     "tap" (next-slide!)
38 |     "swipeleft" (next-slide!)
39 |     "swiperight" (prev-slide!)
40 |     nil))
41 | 
42 | (defn init-touch!
43 |   []
44 |   (doto (js/Hammer. canvas)
45 |     (.on "swipeleft swiperight tap"
46 |       #(on-swipe! (aget % "type")))))
47 | 
48 | (defn init-controls!
49 |   []
50 |   (init-touch!)
51 |   (.addEventListener js/window "keydown" key-down))
52 | 
53 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/core.cljs:
--------------------------------------------------------------------------------
 1 | (ns solar-system-of-js.core
 2 |   (:require-macros
 3 |     [cljs.core.async.macros :refer [go go-loop]]
 4 |     [hiccups.core :refer [html]])
 5 |   (:require
 6 |     hiccups.runtime
 7 |     [cljs.core.async :refer [<! chan tap close!]]
 8 |     [solar-system-of-js.canvas :refer [init-canvas!]]
 9 |     [solar-system-of-js.control :refer [init-controls!]]
10 |     [solar-system-of-js.actions :refer [start-loops!]]
11 |     [solar-system-of-js.nav :refer [init-first-slide! sync-slide-to-hash!]]
12 |     [solar-system-of-js.animate :refer [start-ticking!]]
13 |     [solar-system-of-js.draw :refer [draw!]]
14 |     solar-system-of-js.caption
15 |     ))
16 | 
17 | (enable-console-print!)
18 | 
19 | (def page
20 |   (html
21 |     [:div#container
22 |       [:div#caption "Insert slide captions here"]
23 |       [:div#canvas-container
24 |         [:canvas#canvas]]
25 |       [:div#canvas-footer
26 |         [:table#keys
27 |          [:tr [:td [:kbd "&#8594;"]] [:td "= next"]]
28 |          [:tr [:td [:kbd "SHIFT"] " + " [:kbd "&#8594;"]] [:td "= hurry"]]]
29 |         [:a {:href "https://github.com/shaunlebron/solar-system-of-js" :target "_blank"}
30 |          [:div#github "Made with " [:img#cljsLogo {:src "cljs.svg"}] " ClojureScript"]]]]))
31 | 
32 | (defn init-page!
33 |   []
34 |   (doto (.getElementById js/document "container")
35 |     (aset "outerHTML" page)))
36 | 
37 | (defn load-fonts!
38 |   [families]
39 |   (let [c (chan)]
40 |     (.load js/WebFont (clj->js {:google {:families families} :active #(close! c)}))
41 |     c))
42 | 
43 | (defn main
44 |   []
45 | 
46 |   (let [loading-fonts (load-fonts! ["Roboto:100,300,400,700" "Open Sans"])]
47 |     (init-page!)
48 | 
49 |     ;; initialize drawing canvas
50 |     (init-canvas!)
51 | 
52 |     ;; initialize touch and key controls
53 |     (init-controls!)
54 | 
55 |     ;; start animation heartbeat
56 |     (start-ticking!)
57 | 
58 |     ;; do some state setup for the first slide
59 |     (init-first-slide!)
60 | 
61 |     ;; go to slide listed in the url hash
62 |     (sync-slide-to-hash!)
63 | 
64 |     ;; start any animation loops
65 |     (start-loops!)
66 | 
67 |     ;; wait until fonts have loaded to start drawing (self-schedules after first draw)
68 |     (go
69 |       (<! loading-fonts)
70 |       (draw!))))
71 | 
72 | ;; start when ready
73 | (.addEventListener js/window "load" main)
74 | 
75 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/draw.cljs:
--------------------------------------------------------------------------------
  1 | (ns solar-system-of-js.draw
  2 |   (:require
  3 |     [clojure.string :refer [upper-case]]
  4 |     [solar-system-of-js.state :refer [state]]
  5 |     [solar-system-of-js.nav :refer [num-slides]]
  6 |     [solar-system-of-js.canvas :refer [width height
  7 |                                        fill-style!
  8 |                                        stroke-style!
  9 |                                        begin-path!
 10 |                                        close-path!
 11 |                                        translate!
 12 |                                        scale!
 13 |                                        rotate!
 14 |                                        save!
 15 |                                        restore!
 16 |                                        fill-rect!
 17 |                                        stroke-rect!
 18 |                                        arc!
 19 |                                        fill!
 20 |                                        stroke!
 21 |                                        circle!
 22 |                                        move-to!
 23 |                                        line-to!
 24 |                                        stroke-line!
 25 |                                        get-global-alpha
 26 |                                        set-global-alpha
 27 |                                        global-alpha!
 28 |                                        font!
 29 |                                        fill-text!
 30 |                                        stroke-text!
 31 |                                        text-align!
 32 |                                        text-baseline!
 33 |                                        line-width!
 34 |                                        line-cap!
 35 |                                        draw-image!]]
 36 |     [solar-system-of-js.math :refer [PI cos sin]]))
 37 | 
 38 | 
 39 | ;;--------------------------------------------------------------------------------
 40 | ;; Drawing Specific Objects
 41 | ;;--------------------------------------------------------------------------------
 42 | 
 43 | (defn draw-title!
 44 |   [{:keys [x y alpha]}]
 45 |   (save!)
 46 |   (global-alpha! alpha)
 47 |   (font! "100 100px Roboto")
 48 |   (text-align! "center")
 49 |   (text-baseline! "middle")
 50 |   (fill-style! "#DDD")
 51 |   (fill-text! "Solar System of JS" x y)
 52 | 
 53 |   (fill-style! "#566")
 54 |   (font! "300 40px Roboto")
 55 |   (fill-text! "Space City JS - 28 March 2015" x (+ 120 y))
 56 | 
 57 |   (restore!)
 58 |   )
 59 | 
 60 | (def js-logo (.getElementById js/document "jsLogo"))
 61 | 
 62 | (defn draw-js-face!
 63 |   [{:keys [x y r angle alpha]}]
 64 |   (save!)
 65 |   (global-alpha! alpha)
 66 |   (translate! x y)
 67 |   (rotate! angle)
 68 |   (circle! 0 0 r)
 69 |   (fill-style! "#f7df1e")
 70 |   (fill!)
 71 | 
 72 |   (let [off -100
 73 |         size 240]
 74 |     (draw-image! js-logo off off size size))
 75 | 
 76 |   ;; (font! "bold 150px Neutra Text")
 77 |   ;; (text-align! "center")
 78 |   ;; (text-baseline! "middle")
 79 |   ;; (fill-style! "#222")
 80 |   ;; (let [off 60]
 81 |   ;;   (fill-text! "JS" off off))
 82 | 
 83 |   (restore!))
 84 | 
 85 | (def core-layers
 86 |   "colors of js-core layers"
 87 |   [{:name "ES3"
 88 |     :desc "core features"
 89 |     :color "#DDD"
 90 |     }
 91 |    {:name "ES5"
 92 |     :desc "new functions and strict mode"
 93 |     :color "#BBB"
 94 |     }
 95 |    {:name "ES6"
 96 |     :desc "new syntax, concepts, etc."
 97 |     :color "#999"
 98 |     }
 99 |    {:name "ES7"
100 |     :desc "observe, async, comprehensions, guards"
101 |     :color "#777"
102 |     }
103 |    {:name "ES8"
104 |     :desc "macros?"
105 |     :color "#555"
106 |     }
107 |    ])
108 | 
109 | (defn get-core-dr
110 |   "Get core layer delta radius."
111 |   [r]
112 |   (/ r (count core-layers)))
113 | 
114 | (defn get-core-radius
115 |   "Get radius of the given core layer index and outer radius."
116 |   [i r]
117 |   (* (inc i) (get-core-dr r)))
118 | 
119 | (defn draw-js-core!
120 |   [{:keys [x y r alpha]}]
121 |   (save!)
122 |   (global-alpha! alpha)
123 |   (stroke-style! "#EEE")
124 |   (doseq [[i layer] (reverse (map-indexed vector core-layers))]
125 |     (let [cr (get-core-radius i r)]
126 |       (circle! x y cr)
127 |       (fill-style! (:color layer))
128 |       (fill!)))
129 |   (circle! x y r)
130 |   (stroke-style! "#f7df1e")
131 |   (line-width! 10)
132 |   (stroke!)
133 |   (restore!)
134 |   )
135 | 
136 | (defn draw-highlight-layer!
137 |   [i]
138 |   (when i
139 |     (let [r (-> @state :js-face :r)
140 |           dr (get-core-dr r)
141 |           cr (- (get-core-radius i r) (/ dr 2))]
142 | 
143 |       ;; highlight the layer
144 |       (line-width! dr)
145 |       (circle! 0 0 cr)
146 |       (stroke-style! "#1EA")
147 |       (stroke!))))
148 | 
149 | (defn draw-es-captions!
150 |   [{:keys [es3 es5 es6 es7 es8]}]
151 |   (save!)
152 |   (doseq [[i es] (map-indexed vector [es3 es5 es6 es7 es8])]
153 |     (when-not (zero? (:alpha es))
154 |       (save!)
155 |       (global-alpha! (:alpha es))
156 |       (let [angle (/ PI 4)
157 |             dx (cos angle)
158 |             dy (sin angle)
159 |             r (-> @state :js-face :r)
160 |             dr (get-core-dr r)
161 |             cr (- (get-core-radius i r) (/ dr 2))
162 |             y (- (* dy cr))
163 |             x0 (* dx cr)
164 |             x1 250
165 |             a 10
166 |             at (/ a 3)]
167 | 
168 |         ;; highlight the layer
169 |         (draw-highlight-layer! i)
170 | 
171 |         ;; point at layer
172 |         (line-width! 5)
173 |         (line-cap! "round")
174 |         (stroke-line! x0 y x1 y)
175 |         (stroke!)
176 | 
177 |         ;; draw caption
178 |         (let [layer (get core-layers i)]
179 |           (text-baseline! "middle")
180 |           (text-align! "left")
181 |           (fill-style! "#EEE")
182 |           (font! "100 40px Roboto")
183 |           (fill-text! (:name layer) (+ 10 x1) y)
184 |           (fill-style! "#AAA")
185 |           (font! "300 14px Roboto")
186 |           (fill-text! (:desc layer) (+ 15 x1) (+ 30 y)))
187 | 
188 |         )
189 |       (restore!)
190 |       ))
191 |   (restore!))
192 | 
193 | (defn draw-sign!
194 |   [{:keys [x y alpha font-alpha highlight]} caption offset]
195 |   (when-not (zero? alpha)
196 |     (save!)
197 |     (translate! x y)
198 |     (let [a 10
199 |           w 100
200 |           h 30]
201 |       (translate! (- (* 2 a (* 1.2 offset))) 0)
202 | 
203 |       (save!)
204 |       (global-alpha! alpha)
205 |       (begin-path!)
206 |       (move-to! (- a w) (- h))
207 |       (line-to! (+ a w) (- h))
208 |       (line-to! (- w a) (+ h))
209 |       (line-to! (- (+ w a)) (+ h))
210 |       (fill-style! (if highlight "#1EA" "#EEE"))
211 |       (fill!)
212 |       (restore!)
213 | 
214 |       (global-alpha! font-alpha)
215 |       (text-baseline! "middle")
216 |       (text-align! "center")
217 |       (font! "300 24px Roboto")
218 |       (fill-style! "#222")
219 |       (fill-style! (if highlight "#222" "#222"))
220 |       (fill-text! caption 0 0))
221 |     (restore!)))
222 | 
223 | (defn draw-transpiler!
224 |   [opts]
225 |   (draw-sign! opts "TRANSPILER" 0))
226 | 
227 | (defn draw-linter!
228 |   [opts]
229 |   (draw-sign! opts "LINTER" 1))
230 | 
231 | (defn draw-modulesys!
232 |   [opts]
233 |   (draw-sign! opts "MODULE SYS" 2))
234 | 
235 | (defn draw-static-arc!
236 |   [start-a da r-percent color]
237 |   (save!)
238 | 
239 |   (let [max-r (- (-> @state :static :sphere :r) 24)
240 |         min-r (-> @state :js-face :r)
241 |         dr (- max-r min-r)
242 |         r (+ min-r (* r-percent dr))]
243 | 
244 |     (fill-style! color)
245 |     (begin-path!)
246 |     (move-to! 0 0)
247 |     (arc! 0 0 r start-a (+ start-a da) false)
248 |     (close-path!)
249 |     (fill!)
250 |     )
251 |   (restore!))
252 | 
253 | (defn draw-static-text!
254 |   [{:keys [alpha]} text y]
255 |   (when-not (zero? alpha)
256 |     (save!)
257 |     (global-alpha! alpha)
258 |     (text-baseline! "middle")
259 |     (text-align! "left")
260 |     (font! "300 100px Roboto")
261 |     (fill-style! "#FFF")
262 |     (fill-text! text 800 y)
263 |     (restore!)))
264 | 
265 | (defn draw-typescript!
266 |   [opts]
267 |   (draw-static-text! opts "TYPESCRIPT" -100))
268 | 
269 | (defn draw-flow!
270 |   [opts]
271 |   (draw-static-text! opts "FLOW" 0))
272 | 
273 | (defn draw-closure!
274 |   [opts]
275 |   (draw-static-text! opts "CLOSURE" 100))
276 | 
277 | (defn draw-soundscript!
278 |   [opts]
279 |   (draw-static-text! opts "SOUNDSCRIPT" 200))
280 | 
281 | 
282 | (defn draw-staticsphere!
283 |   [{:keys [arcs alpha r]}]
284 |   (save!)
285 |   (when-not (zero? alpha)
286 |     (global-alpha! alpha)
287 |     (circle! 0 0 r)
288 |     (fill-style! "#BCC")
289 |     (fill!)
290 | 
291 |     (let [max-arcs 4
292 |           full-arcs (Math/floor arcs)
293 |           partial-arc (- arcs full-arcs)
294 |           top-a (/ PI -2)
295 |           da (/ (* 2 PI) max-arcs)
296 |           num-greyed-arcs (cond-> full-arcs
297 |                             (and (pos? full-arcs)
298 |                                  (zero? partial-arc)) dec)
299 |           ]
300 | 
301 |       ;; draw full arcs
302 |       (doseq [i (range full-arcs)]
303 |         (let [color (if (< i num-greyed-arcs) "#CDD" "#FFF")]
304 |           (draw-static-arc! (+ top-a (* i da)) da 1 color)))
305 | 
306 |       ;; draw partial arc
307 |       (when (pos? partial-arc)
308 |         (draw-static-arc! (+ top-a (* full-arcs da)) da partial-arc "#FFF"))
309 | 
310 |       (when (= 1 alpha)
311 |         (line-width! 24)
312 |         (stroke-style! "#BCC")
313 |         (let [r (-> @state :static :sphere :r)]
314 |           (dotimes [i max-arcs]
315 |             (stroke-line! 0 0 0 r)
316 |             (rotate! da))))
317 |       )
318 |     )
319 |   (restore!))
320 | 
321 | (defn draw-static!
322 |   [{:keys [title sphere angle typescript soundscript flow closure]}]
323 |   (when-not (zero? (:alpha sphere))
324 |     (save!)
325 | 
326 |     (save!)
327 |     (global-alpha! (:alpha title))
328 |     (font! "300 90px Roboto")
329 |     (text-baseline! "middle")
330 |     (text-align! "center")
331 |     (fill-style! "#677")
332 |     (fill-text! "STATIC TYPING" 0 -600)
333 |     (restore!)
334 | 
335 |     (draw-staticsphere! sphere)
336 |     (draw-typescript! typescript)
337 |     (draw-soundscript! soundscript)
338 |     (draw-flow! flow)
339 |     (draw-closure! closure)
340 | 
341 |     (restore!)))
342 | 
343 | (defn draw-orbit!
344 |   [{:keys [r]}]
345 |   (line-width! 10)
346 |   (circle! 0 0 r)
347 |   (stroke-style! "#566")
348 |   (stroke!))
349 | 
350 | (defn draw-radar!
351 |   [{:keys [orbit offset]}]
352 |   (when orbit
353 |     (save!)
354 |     (let [o (-> @state orbit)
355 |           r (:r o)
356 |           dx (cos (:angle o))
357 |           dy (sin (:angle o))
358 |           gap 40
359 |           offset (mod offset (* 2 gap))
360 |           x (* (:r o) dx)
361 |           y (* (:r o) dy)
362 |           lx (- dy)
363 |           ly dx
364 |           rx dy
365 |           ry (- dx)
366 |           ]
367 |       (global-alpha! (/ (:alpha o) 2))
368 |       (line-width! 20)
369 |       (stroke-style! "#f7df1e")
370 | 
371 |       (loop [i 0]
372 |         (let [r0 (+ offset (* i gap))
373 |               w (* (+ 0.2 (/ r0 r)) gap)
374 |               x0 (+ (- x (* dx r0)) (* lx w))
375 |               y0 (+ (- y (* dy r0)) (* ly w))
376 |               x1 (+ (- x (* dx r0)) (* rx w))
377 |               y1 (+ (- y (* dy r0)) (* ry w))]
378 |           (when (<= r0 r)
379 |             (stroke-line! x0 y0 x1 y1)
380 |             (recur (+ i 1)))))
381 |       )
382 |     (restore!)))
383 | 
384 | (defn draw-planet!
385 |   [{:keys [size angle r highlight]}]
386 |   (let [x (* r (cos angle))
387 |         y (* r (sin angle))]
388 | 
389 |     (circle! x y size)
390 |     (fill-style! (if highlight "#FFF" "#566"))
391 |     (fill!)
392 |     ))
393 | 
394 | (defn draw-coffeescript!
395 |   [{:keys [alpha highlight] :as opts}]
396 |   (when-not (zero? alpha)
397 |     (save!)
398 |     (global-alpha! alpha)
399 |     (draw-orbit! opts)
400 |     (draw-planet! opts)
401 |     (when highlight
402 |       (font! "100 200px Roboto")
403 |       (text-baseline! "middle")
404 |       (text-align! "center")
405 |       (fill-style! "#566")
406 |       (fill-text! "COFFEESCRIPT" 0 -1400))
407 |     (restore!)))
408 | 
409 | (defn draw-dart!
410 |   [{:keys [alpha highlight] :as opts}]
411 |   (when-not (zero? alpha)
412 |     (save!)
413 |     (global-alpha! alpha)
414 |     (draw-orbit! opts)
415 |     (draw-planet! opts)
416 |     (when highlight
417 |       (font! "100 200px Roboto")
418 |       (text-baseline! "middle")
419 |       (text-align! "center")
420 |       (fill-style! "#566")
421 |       (fill-text! "DART" 0 -1700))
422 |     (restore!)))
423 | 
424 | (defn draw-clojurescript!
425 |   [{:keys [alpha highlight] :as opts}]
426 |   (when-not (zero? alpha)
427 |     (save!)
428 |     (global-alpha! alpha)
429 |     (draw-orbit! opts)
430 |     (draw-planet! opts)
431 |     (when highlight
432 |       (font! "100 300px Roboto")
433 |       (text-baseline! "middle")
434 |       (text-align! "center")
435 |       (fill-style! "#566")
436 |       (fill-text! "CLOJURESCRIPT" 3800 0))
437 |     (restore!)))
438 | 
439 | (defn draw-other-langs!
440 |   [opts]
441 |   (save!)
442 |   (font! "100 400px Roboto")
443 |   (fill-style! "#DEE")
444 |   (let [names [[:gwt "GWT"]
445 |                [:websharper "WebSharper"]
446 |                [:objective-j "Objective-J"]
447 |                [:scala.js "Scala.js"]
448 |                [:elm "Elm"]
449 |                [:purescript "PureScript"]
450 |                [:js_of_ocaml "Js_of_ocaml"]
451 |                [:asm "Emscripten -> asm.js"]]
452 |         rs (iterate (partial + 600) 2800)
453 |         ys (iterate (partial + 600) -1800)]
454 |     (doseq [[[name- text] r y] (map vector names rs ys)]
455 |       (save!)
456 |       (let [obj (get opts name-)
457 |             alpha (:alpha obj)]
458 |         (global-alpha! alpha))
459 |       (draw-orbit! {:r r})
460 |       (fill-text! text 7600 y)
461 |       (restore!))
462 |   (restore!)))
463 | 
464 | ;;--------------------------------------------------------------------------------
465 | ;; Drawing Dispatch
466 | ;;--------------------------------------------------------------------------------
467 | 
468 | (defn set-cam!
469 |   "Set camera's position, zoom, and rotation."
470 |   [{:keys [x y zoom angle]}]
471 |   (translate! (/ width 2) (/ height 2))
472 |   (translate! (- x) (- y))
473 |   (scale! zoom zoom)
474 |   (rotate! angle))
475 | 
476 | (defn draw-progress!
477 |   []
478 |   (save!)
479 |   (let [i (:slide @state)
480 |         end-i (dec num-slides)
481 |         len (* width (/ i end-i))]
482 | 
483 |     (begin-path!)
484 |     (move-to! 0 0)
485 |     (line-to! len 0)
486 |     (line-width! 10)
487 |     (stroke-style! "#ACC")
488 |     (stroke!))
489 |   (restore!))
490 | 
491 | (def prev-state nil)
492 | 
493 | (defn draw!
494 |   "Draw the current state of the application."
495 |   []
496 |   (when (not= prev-state @state)
497 |     (set! prev-state @state)
498 |     (save!)
499 |     (fill-style! "#222")
500 |     (fill-rect! 0 0 width height)
501 |     (set-cam! (:cam @state))
502 | 
503 |     (draw-title! (:title @state))
504 |     (draw-js-core! (:js-core @state))
505 |     (draw-es-captions! (:es-captions @state))
506 |     (draw-highlight-layer! (:highlight-layer @state))
507 | 
508 |     (draw-transpiler! (:transpiler @state))
509 |     (draw-linter! (:linter @state))
510 |     (draw-modulesys! (:modulesys @state))
511 | 
512 |     (draw-static! (:static @state))
513 | 
514 |     (draw-radar! (:radar @state))
515 | 
516 |     (draw-js-face! (:js-face @state))
517 | 
518 |     (draw-coffeescript! (:coffeescript @state))
519 |     (draw-dart! (:dart @state))
520 |     (draw-clojurescript! (:clojurescript @state))
521 | 
522 |     (draw-other-langs! @state)
523 | 
524 |     (restore!)
525 |     (draw-progress!))
526 | 
527 |   ;; self-schedule the next frame to draw
528 |   (.requestAnimationFrame js/window draw!))
529 | 
530 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/math.cljs:
--------------------------------------------------------------------------------
1 | (ns solar-system-of-js.math)
2 | 
3 | (def PI (aget js/Math "PI"))
4 | (def sin (aget js/Math "sin"))
5 | (def cos (aget js/Math "cos"))
6 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/nav.cljs:
--------------------------------------------------------------------------------
  1 | (ns solar-system-of-js.nav
  2 |   (:require-macros
  3 |     [cljs.core.async.macros :refer [go]])
  4 |   (:require
  5 |     [cljs.core.async :refer [<!]]
  6 |     [solar-system-of-js.actions :refer [slide-actions animate-action! skip-action!]]
  7 |     [solar-system-of-js.state :refer [state]]))
  8 | 
  9 | (def num-slides
 10 |   (count slide-actions))
 11 | 
 12 | ;; Saved slide states, so we can revisit previous slides.
 13 | (defonce slide-states
 14 |   (atom []))
 15 | 
 16 | (defn save-slide-state!
 17 |   "Save the current application state as the current slide's initial state."
 18 |   []
 19 |   (let [i (:slide @state)]
 20 |     (swap! slide-states assoc i @state)))
 21 | 
 22 | (defn hash-slide
 23 |   "Get the current url hash slide number (if valid)."
 24 |   []
 25 |   (let [i (-> (aget js/location "hash") (subs 1) (js/parseInt))]
 26 |     (when (<= 0 i (dec num-slides))
 27 |       i)))
 28 | 
 29 | (defn init-first-slide!
 30 |   "Do some setup that the first slide requires."
 31 |   []
 32 |   ;; execute first slide action
 33 |   (let [action (first slide-actions)]
 34 |     (skip-action! action))
 35 | 
 36 |   ;; save state of first slide
 37 |   (save-slide-state!)
 38 | 
 39 |   ;; set initial hash
 40 |   (when-not (hash-slide)
 41 |     (aset js/location "hash" 0)))
 42 | 
 43 | (def in-transition?
 44 |   "True if we are in the middle of a slide's actions (i.e. animation)"
 45 |   (atom false))
 46 | 
 47 | (defn sync-hash-to-slide!
 48 |   "Make url hash equal to current slide"
 49 |   []
 50 |   (aset js/location "hash" (:slide @state)))
 51 | 
 52 | (defn next-slide!
 53 |   "Go to next slide if we can."
 54 |   []
 55 |   (when-not @in-transition?
 56 |     (when-let [action (get slide-actions (inc (:slide @state)))]
 57 |       (save-slide-state!)
 58 |       (swap! state update-in [:slide] inc)
 59 |       (sync-hash-to-slide!)
 60 |       (reset! in-transition? true)
 61 |       (go
 62 |         (<! (animate-action! action))
 63 |         (reset! in-transition? false)
 64 |         ))))
 65 | 
 66 | (defn prev-slide!
 67 |   "Go to previous slide if we can."
 68 |   []
 69 |   (when-not @in-transition?
 70 |     (when-let [s (get @slide-states (dec (:slide @state)))]
 71 |       (reset! state s)
 72 |       (sync-hash-to-slide!))))
 73 | 
 74 | (defn skip-slide!
 75 |   "Go to next slide, skipping any transitions."
 76 |   ([] (skip-slide! true))
 77 |   ([sync-hash?]
 78 |    (when-not @in-transition?
 79 |      (when-let [action (get slide-actions (inc (:slide @state)))]
 80 |        (save-slide-state!)
 81 |        (swap! state update-in [:slide] inc)
 82 |        (when sync-hash?
 83 |          (sync-hash-to-slide!))
 84 |        (skip-action! action)))))
 85 | 
 86 | (defn seek-slide!
 87 |   "Instantly go to the given slide."
 88 |   [i]
 89 |   (let [cur (:slide @state)]
 90 |     (when (and (not= cur i) (not @in-transition?))
 91 |       (if-let [s (get @slide-states i)]
 92 |         (reset! state s)
 93 |         (when (> i cur)
 94 |           (dotimes [_ (- i cur)]
 95 |             (skip-slide! false))))
 96 |       (sync-hash-to-slide!))))
 97 | 
 98 | (defn sync-slide-to-hash!
 99 |   "Make sure the slide reflects the current url hash."
100 |   []
101 |   (when-let [i (hash-slide)]
102 |     (seek-slide! i)))
103 | 
104 | (.addEventListener js/window "hashchange" sync-slide-to-hash!)
105 | 
106 | 
107 | 


--------------------------------------------------------------------------------
/src/solar_system_of_js/state.cljs:
--------------------------------------------------------------------------------
 1 | (ns solar-system-of-js.state
 2 |   (:require
 3 |     [solar-system-of-js.math :refer [PI]]))
 4 | 
 5 | (def initial-state
 6 |   "Initial state of the application."
 7 |   {:slide 0
 8 |    :caption ""
 9 |    :title {:x 0
10 |            :y -100
11 |            :alpha 1}
12 |    :cam {:x 0
13 |          :y 0
14 |          :zoom 1
15 |          :angle 0}
16 |    :js-face {:x 900
17 |              :y 0
18 |              :r 200
19 |              :alpha 1
20 |              :angle 0}
21 |    :js-core {:x 0
22 |              :y 0
23 |              :r 200
24 |              :alpha 0}
25 |    :es-captions {:es3 {:alpha 0}
26 |                  :es5 {:alpha 0}
27 |                  :es6 {:alpha 0}
28 |                  :es7 {:alpha 0}
29 |                  :es8 {:alpha 0}}
30 |    :highlight-layer nil
31 |    :transpiler {:x 900
32 |                 :y 0
33 |                 :alpha 0
34 |                 :font-alpha 0}
35 |    :linter {:x 900
36 |             :y 70
37 |             :alpha 0
38 |             :font-alpha 0}
39 |    :modulesys {:x 900
40 |                :y 140
41 |                :alpha 0
42 |                :font-alpha 0}
43 |    :static {:title {:alpha 0}
44 |             :sphere {:alpha 0
45 |                      :r 200
46 |                      :arcs 0}
47 |             :typescript {:alpha 0}
48 |             :soundscript {:alpha 0}
49 |             :closure {:alpha 0}
50 |             :flow {:alpha 0}}
51 |    :coffeescript {:alpha 0
52 |                   :size 50
53 |                   :highlight false
54 |                   :angle 0
55 |                   :angle-speed (/ PI 5)
56 |                   :r 900
57 |                   }
58 |    :dart {:alpha 0
59 |           :size 100
60 |           :highlight false
61 |           :angle 0
62 |           :angle-speed (/ PI 10)
63 |           :r 1400
64 |                   }
65 |    :clojurescript {:alpha 0
66 |                    :size 100
67 |                    :highlight false
68 |                    :angle 0
69 |                    :angle-speed (/ PI 15)
70 |                    :r 2100
71 |                   }
72 |    :radar {:orbit nil
73 |            :offset 0}
74 |    :gwt {:alpha 0}
75 |    :websharper {:alpha 0}
76 |    :objective-j {:alpha 0}
77 |    :scala.js {:alpha 0}
78 |    :elm {:alpha 0}
79 |    :purescript {:alpha 0}
80 |    :js_of_ocaml {:alpha 0}
81 |    :asm {:alpha 0}})
82 | 
83 | ;; Current state of the application.
84 | (defonce state
85 |   (atom initial-state))
86 | 
87 | 


--------------------------------------------------------------------------------
/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shaunlebron/solar-system-of-js/a5c53c9727622ac023963766323b6eb5d03f5226/title.png


--------------------------------------------------------------------------------