-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcompositor.json
More file actions
87 lines (87 loc) · 9.35 KB
/
compositor.json
File metadata and controls
87 lines (87 loc) · 9.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
{
"name": "nikolasklein/gloam.io",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "TestingSite",
"branch": "",
"style": {
"name": "Swiss",
"componentSet": {
"nav": "nav/BasicNav",
"header": "header/SwissHeader",
"article": "article/SwissArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
"heading": {
"fontWeight": 700,
"letterSpacing": "-0.01em"
},
"layout": {
"fluid": true
},
"colors": {
"text": "#000",
"background": "#fff",
"primary": "#05a",
"secondary": "#444",
"highlight": "#f30",
"border": "#ccc",
"muted": "#eee"
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "http://www.gloam.io",
"text": "Home"
},
{
"href": "https://github.com/nikolasklein/gloam.io",
"text": "GitHub"
}
]
},
{
"component": "header",
"heading": "gloam.io",
"subhead": "gloam.io is an interactive data visualization",
"children": [
{
"component": "ui/TweetButton",
"text": "gloam.io: gloam.io is an interactive data visualization",
"url": "http://www.gloam.io"
},
{
"component": "ui/GithubButton",
"user": "nikolasklein",
"repo": "gloam.io"
}
]
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "\n<p>gloam.io is an interactive data visualization, that calculates—based on given latitudes—the sunrise, sunset and twilight times and creates a mesmerizing and stunning experience.</p>\n<p><a href=\"http://www.nikolasklein.de/gloam\">Try it out online!</a></p>\n<p>Should work in every major browser and on a lot of smartphones. On iOS you have the best experience but Google Chrome renders the best.</p>\n<p><a href=\"http://www.gloam.io\">Watch the visualization video!</a></p>\n<h2>Technological keypoints of gloam.io</h2>\n<ul>\n<li>Analyzing the sunrise phases and creating parameterized spectra with RainbowVis-JS</li>\n<li>Getting the different sunrise/sunset- and twilight-times based on a user given latitude</li>\n<li>Connecting the one day sequence to the spectra</li>\n</ul>\n<p>Since the code (which is located in one .js file) is a little bit messy—sorry for that—I'm trying to describe the technological keypoints which make the whole thing come to life.</p>\n<h2>Analyzing the twilight and creating spectra with the help of RainbowVis-JS</h2>\n<h3>Abstracting the twilight subcategories</h3>\n<p>Very important for visualizing a sunrise and sunset are the different twilight phases. \nThere are four different twilight subcategories.</p>\n<ul>\n<li>Astronomical twilight</li>\n<li>Nautical twilight</li>\n<li>Civil twilight</li>\n</ul>\n<p>You can check the full information on <a href=\"http://en.wikipedia.org/wiki/Twilight\">Wikipedia</a>.</p>\n<p>I watched a lot of sunrise- and sunset timelapses to get a feeling for the colorchanges. For every twilight subcategory I abstracted 3 different keyframes out of a frame.</p>\n<p><strong>abstraction process</strong></p>\n<p><img src=\"http://nikolasklein.de/ideas/gloam/comparison.png\"></p>\n<p><strong>keyframes</strong></p>\n<p><img src=\"http://nikolasklein.de/ideas/gloam/twilight.png\"></p>\n<p>top row: Night, Astronomical twilight, Nautical twilight</p>\n<p>bottom row: Civil twilight, Sunrise/Sunset and Day</p>\n<h4>Every keyframe consist of a four color gradient.</h4>\n<h3>Creating spectra with RainbowVis-JS</h3>\n<p> Because every keyframe consists of a four color gradient, I can now seperate the colors and the positions of the two middle points of the gradient for every keyframe. I used <a href=\"https://github.com/anomal/RainbowVis-JS\">RainbowVis-JS</a> for an easy interpolation between the colors of the keyframes.</p>\n<p><strong>initialising the rainbows</strong></p>\n<pre> <span class=\"hljs-keyword\">var</span> night_am_top = <span class=\"hljs-keyword\">new</span> Rainbow();\n <span class=\"hljs-keyword\">var</span> night_am_firstQuart = <span class=\"hljs-keyword\">new</span> Rainbow();\n <span class=\"hljs-keyword\">var</span> night_am_secondQuart = <span class=\"hljs-keyword\">new</span> Rainbow();\n <span class=\"hljs-keyword\">var</span> night_am_bottom = <span class=\"hljs-keyword\">new</span> Rainbow();</pre><p><strong>setting the positions of the two middle points of a gradient</strong> </p>\n<pre> <span class=\"hljs-keyword\">var</span> night_am_firstQuartArr = [<span class=\"hljs-number\">89</span>, <span class=\"hljs-number\">57</span>, <span class=\"hljs-number\">20</span>, <span class=\"hljs-number\">42</span>];\n <span class=\"hljs-keyword\">var</span> night_am_secondQuartArr = [<span class=\"hljs-number\">97</span>, <span class=\"hljs-number\">81</span>, <span class=\"hljs-number\">58</span>, <span class=\"hljs-number\">73</span>];</pre><p><strong>setting the spectrum for the 4 gradient points</strong></p>\n<pre> night_am_top.setSpectrum(<span class=\"hljs-string\">"#050314"</span>, <span class=\"hljs-string\">"#050314"</span>, <span class=\"hljs-string\">"#050314"</span>, <span class=\"hljs-string\">"#050314"</span>);\n night_am_firstQuart.setSpectrum(<span class=\"hljs-string\">"#020109"</span>, <span class=\"hljs-string\">"#020109"</span>, <span class=\"hljs-string\">"#020109"</span>, <span class=\"hljs-string\">"#0a071b"</span>);\n night_am_secondQuart.setSpectrum(<span class=\"hljs-string\">"#02010a"</span>, <span class=\"hljs-string\">"#05051e"</span>, <span class=\"hljs-string\">"#060419"</span>, <span class=\"hljs-string\">"#0b081d"</span>);\n night_am_bottom.setSpectrum(<span class=\"hljs-string\">"#03031c"</span>, <span class=\"hljs-string\">"#080829"</span>, <span class=\"hljs-string\">"#080829"</span>, <span class=\"hljs-string\">"#09092c"</span>);</pre><h2>Getting the different sunrise/sunset- and twilight-times based on a user given latitude</h2>\n<h3>The core of the PHP-script</h3>\n<pre> […]\n $sunrise=date_sunrise($ctime, SUNFUNCS_RET_TIMESTAMP, $latitude, $longitude, $zenith);\n $sunset=date_sunset($ctime, SUNFUNCS_RET_TIMESTAMP, $latitude, $longitude, $zenith);\n […]</pre><p>Guido Gerding from <a href=\"http://www.sonnenaufgang-sonnenuntergang.de/\">sonnenaufgang-sonnenuntergang.de</a> gave me this script, which I adjusted a little bit to better fit my needs.</p>\n<p>The <code>$zenith</code>-variable is responsible for getting the values of the specific twilight time.</p>\n<h3>The AJAX-requests for the sunrise and twilight times</h3>\n<pre> <span class=\"hljs-keyword\">var</span> urlRise = <span class=\"hljs-string\">"api.php?client=5mQNicMv2c&longitude=0&latitude="</span> + latitude + <span class=\"hljs-string\">"&zenith=90.83333333333&year=2014&month=1&offsett=0&nodst=TRUE"</span>;\n <span class=\"hljs-keyword\">var</span> urlCivil = <span class=\"hljs-string\">"api.php?client=5mQNicMv2c&longitude=0&latitude="</span> + latitude + <span class=\"hljs-string\">"&zenith=96&year=2014&month=1&offsett=0&nodst=TRUE"</span>;\n <span class=\"hljs-keyword\">var</span> urlNaut = <span class=\"hljs-string\">"api.php?client=5mQNicMv2c&longitude=0&latitude="</span> + latitude + <span class=\"hljs-string\">"&zenith=102&year=2014&month=1&offsett=0&nodst=TRUE"</span>;\n <span class=\"hljs-keyword\">var</span> urlAstro = <span class=\"hljs-string\">"api.php?client=5mQNicMv2c&longitude=0&latitude="</span> + latitude + <span class=\"hljs-string\">"&zenith=108&year=2014&month=1&offsett=0&nodst=TRUE"</span>;</pre><ul>\n<li>The longitude stays the same. It does not affect the sunrise and sunset times very much.</li>\n<li>The latitude is given by the user.</li>\n<li>The zenith defines which times will be returned.</li>\n</ul>\n<p>For every phase this returns a csv file with 365 lines of the sunrise/sunset time for every day of the year.</p>\n<p><a href=\"http://gloam.io/api.php?client=5mQNicMv2c&longitude=0&latitude=0&zenith=90.933&year=2014&month=1&offsett=0&nodst=TRUE\">Get the sunrise and sunset times in a csv file for: 0N 0E </a></p>\n<p>Four of this csv files are used to calculate the day sequence and the duration for the sunrise, the sunset and for every twilight phase.</p>\n<h2>Connecting the one day sequence to the spectra</h2>\n<p>Based on the user given date and time gloam.io reads out the day sequence and checks in which phase it would be at that particular date and time. This is then used to specify which colors should be used in the gradient.</p>\n<hr>\n<p>If you have any questions - feel free to contact me!</p>\n<p>Niko – <a href=\"http://www.nikolasklein.de\">nikolasklein.de</a></p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/nikolasklein/gloam.io",
"text": "GitHub"
},
{
"href": "https://github.com/nikolasklein",
"text": "nikolasklein"
}
]
}
]
}