Map readable only outdoors, at night, during a full moon. Based on http://tingletech.github.io/moon-phase/. Inspired by The Hobbit.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 19 commits ahead, 7 commits behind tingletech:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE.md
README.md
background.jpg
background.license.txt
cache.manifest
index.html
moon-phase.js
riset.js
test.html
zodiac.js

README.md

Moon-Phase

This map is readable only outdoors, at night, during a full moon!

It does not use Elvish magic, just JavaScript

Calculating a full moon

Code from http://tingletech.github.com/moon-phase/ calculates times for sunrise, sunset, moonrise, and moonset for your location.

If you access the map between sunrise and sunset, it will display an error.

If you access the map before moonrise or after moonset, it will display an error.

The same http://tingletech.github.com/moon-phase/ code calculates and displays the phase of the moon (this is explained in greater detail below). If the moon is not full, it will display an error.

Calculating when you are outdoors

You must share your location for the map to calculate sunrise, sunset, moonrise, and moonset. These coordinates and their accuracy are then fed into a Node.js server.

The master branch of this repo is a Node.js server which runs on Heroku. It receives your coordinates and their accuracy, and uses the MapBox Static API to retrieve a small map of that area. It then uses node-canvas / node-canvas-heroku to count green and blue pixels. If the server counts enough green and blue pixels (from parks, forests, lakes, or oceans) in your area, then the map will display on the client side. Otherwise you will see an error message.

If you are not outside or want to test which areas will work, use a geolocation spoofer such as Manual Geolocation plugin for Chrome. You can also change the clock on your computer to a day and time where the full moon would be visible.

My Android phone gives an accuracy of one kilometer. I would need to be near a park and perhaps 0.5km inside to guarantee my location was suitably 'outside'.

My laptop gives a location based on WiFi, but that location does not change as I move away from the WiFi. Only a few WiFi routers would allow this map to appear on my laptop.

πŸŒ‘ πŸŒ’ πŸŒ“ πŸŒ” πŸŒ• πŸŒ– πŸŒ— 🌘 πŸŒ‘

This HTML page and javascript draw an svg picture of the moon that tries to match the current actual phase of the moon. Also uses unicode emoji moons in the <title> element. A new svg will be calculated every day; but there are only 8 emoji moons.

Phase of the moon

Ben Daglish

"A little while ago the task of calculating lunar phases came to mind. After investigating the various algorithms out there, I collected together this little bunch, (mainly wrapped inside complete 'show all the phases for a year' programs), and hacked them about a bit to work nicely with Javascript . They are presented here for your edification, delight and ripping off."

This javascript was modified into a function that returns a number between 0 and 1 representing how far through the lunar cycle we are. 0 and 1 are both new moons, 0.5 is the full moon.

Moon Rise and Moon Set

Keith Burnett

This is a translation of a set of routines from Montenbruck and Pfleger's Astonomy on the Computer 2nd english ed - see chapter 3.8 the sunset progrm

Background image of stars

Β© StarFields [1] 1998 - 2012. All Rights Reserved. You are very welcome to use my background images on your website or blog free of charge. All other uses, please contact StarFields [2] for permission.

Julian date

SVG

uses the A command in <path> http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

<svg width="98%" height="98%" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <svg id="moon" viewBox="0 0 200 200">
            <!-- black background of moon is path class="moonback" -->
            <path class="moonback" d="m100,0 a20,20 0 1,1 0,150 a20,20 0 1,1 0,-150"></path>
            <path class="moon" d="m100,0 a0.40078440694886197,20 0 1,1 0,150 a20,20 0 1,1 0,-150"></path>
            <!--                             ^                       ^                  ^
               this cycles between 0 and 20 -+                       |                  |
                            4 times a month                          +------------------+
                                                                     |
                                                                     these arc-sweep options cycle
                                                                     1,0 --  0,0 --  1,1 -- 0,0 
            -->
      </svg>
</svg>

Logic notes

Here is where I was figuring out the logic of the program https://gist.github.com/3680124#file_phase_notes.txt

jsfiddle