How this Timeline was Created

It’s about time we learned how the timeline was made.

We wanted a timeline of events for the launch of SA9. 13 timelines, that all converge to create on event, Seasons Advance 9.  We all do separate little events, workshops, media, and create things in our own way.  This timeline?  This is my creation.

The background of this page, uses a lot of math, perspective, and artwork to determine where your mouse is, and how the background should look.  The numbers below in the matrix change entirely based on mouse position.

 <div id="background" class="mouse-bg" style="transform: matrix(1.2, 0, 0, 1.2, 24.75, 16.55);"></div>
 <div id="clouds1" class="mouse-bg" style="transform: matrix(1.2, 0, 0, 1.2, -82.5, -55.1667);"></div>
 <div id="clouds2" class="mouse-bg" style="transform: matrix(1.2, 0, 0, 1.2, -41.25, -27.5833);"></div>
 <div id="clouds3" class="mouse-bg" style="transform: matrix(1.2, 0, 0, 1.2, -27.5, -18.3889);"></div>
 <div id="crest" class="mouse-bg" style="transform: matrix(1.2, 0, 0, 1.2, -123.75, -82.75);"></div>
 <div id="crest2" class="mouse-bg" style="transform: matrix(1.2, 0, 0, 1.2, 49.5, 33.1);"></div> 
 <div id="tree" class="mouse-bg" style="transform: matrix(1.2, 0, 0, 1.2, -7.07143, -4.72857);"></div>

It’s pretty neat.

 

 

Finding the Time(line)

How are timelines made?  1 day out of 365 days, placed relative to the other 364 days. Society uses month separators normally (see your standard calendar), and weeks inside of that, but if you were to string them out into a year long line, that’s what we wanted.

So, 80% of the width of the screen was what we had to work with.  width: 80vw  (80% viewport width), would make each timeline.

Let’s convert each day to a percentage of that horizontal line across the screen now.   For that, we need a common date.  You can’t divide June 1, 2016 by August 13, 2016.  Math doesn’t work with human readable dates.  But computers do math.  Computers do math with dates.  Time to change the dates to mathable (yes, it’s a word now) numbers.

Enter Epoch Time.

 

WTF is epoch time?

The Unix epoch (or Unix time or POSIX time or Unix timestamp) is the number of seconds that have elapsed since January 1, 1970 (midnight UTC/GMT), not counting leap seconds (in ISO 8601: 1970-01-01T00:00:00Z). Literally speaking the epoch is Unix time 0 (midnight 1/1/1970), but ‘epoch’ is often used as a synonym for ‘Unix time’. Many Unix systems store epoch dates as a signed 32-bit integer, which might cause problems on January 19, 2038 (known as the Year 2038 problem or Y2038).

Human readable time Seconds
1 hour 3600 seconds
1 day 86400 seconds
1 week 604800 seconds
1 month (30.44 days) 2629743 seconds
1 year (365.24 days)  31556926 seconds


We now have mathable timestamps!

The date we conceived this plan was Wednesday, 23 Sep 2015 21:22:01 GMT .  Yes, I was visiting family in Edmonton at the time.  That converts to 1443043321.  The date of the full moon in September 2016 is 1474059900.

 

Line Up the Dots

Ok.  Now we have a fun layout, a common time to work from.  Let’s put the posts on a timeline!

$startDate = 1443043321; // this Wed, 23 Sep 2015 21:22:01 GMT @ alberta
$finishDate = 1474059900; //full moon sept 2016 (seasonsAdvance)
$dateRange = $finishDate – $startDate; // this is 100% of the date line

$postDateinEpoch = get_the_time(‘U’); // date the post was created on the website
$postPostion = $postDateinEpoch – $startDate; // position of the dot relative to the start date

$dateLinePercentage = $postPostion / $dateRange * 100;  // throw it on the line as a percentage

 

So there you have it.  A timeline for Seasons Advance 9, based entirely on midnight 1/1/1970.