New site!

Its out!! Check out some of the stuff I put in the site:

Weather API

I retrieve local weather data by sending lat lon (using HTML5 Geolocation API) to OpenWeatherMap. This comes back with a bunch of cool stuff I use to change the header background color to represent the daylight and create weather animations.

Daylight

To figure out the daylight I use the local sunrise and sunset timestamps and the current time to figure out a percentage between the two sun times and use Math.sin() to create a smooth wave to apply to the opacity of the background-color, I also multiply this by 1.25 and cap the variable at 1 so that the header stays white between late morning and early afternoon.

Daylight sin wave

If the daylight falls below 0.5 the text color, brick color, the orange samurai and the turn white.

Weather Animations

Ofcourse the Weather API comes with weather conditions, I’ve catered for Rain, Snow and Clouds for now. In each case, the weather condition has more details of the condition.

Rain and Snow ?❄️

In the case of rain or snow, the Weather API supplies the last hour’s rainfall / snowfall (depending) volume, using this I determine how much rain or snow is animated. CoffeeScript class + extends came in handy here! ????

Rain
Day

Night

Snow

With the snow, it doesn’t fall perfectly in a line, each flake randomly moves left and right which I thought looked more natural.

Day

Night

Splashes and Setting/Floor Snow ?⛄️

As soon the falling weather hits the floor, it creates a floor version of itself, animates and then fades away (drys / melts ????):

Splash ?

Setting Snow ⛄️

Clouds ☁️

In the case of clouds, the Weather API supplies a percentage.


When the browser is resized the clouds fade away and a new set of randomly positioned clouds are generated and fade in.

Wind ?

All the weather conditions are affected by the direction and strength wind returned by the API, this only really takes affect if the wind is blowing east or west.

The Orange Samurai

The rectangle with eyes and a ponytail is controllable, he is controllable with the arrow keys, a gamepad or with a “virtual gamepad” for touch.

Movement, Ponytail Motion and Random Blinking

Gamepad Control Settings

To support weird and wonderful gamepads with non standard mapping, I’ve provided the ability to change the controls:

Touch Controls

I was toying around with different ways of showing the “Virtual Gamepad” without it being there all the time. What I came up with was to show it when menu is expanded.

Brick Navigation

Super Mario influenced brick navigation.

One of the bricks is intentionally a because of the Super Mario bricks. This will hopefully give users who play Mario a hint what to do to the bricks.

History API (no reload)

Page doesn’t reload (uses Ajax), but pushes the new page into your history meaning the back/forward buttons work, in the template, I do a simple check to see if its an AJAX request, so the template doesn’t render the header and footer if it the page is being loaded dynamically.

This also works with Google Analytics too just by notifying GA the page is now different.

I also added in some transitions for the navigating between bricks (left and right), or Older and Newer posts:

Stack

Using Git and GitLab