Goscha Graf's profile

Procedural Skyline

This is a skyline I made in an HTML5 canvas with JavaScript. Each layer is procedurally generated. The goal was to achieve an atmospheric scattering and a color perspective effect, therefore each layer decreases in its color intensity in the background. Each of the 50 layers was drawn seperately and thus it can be moved independently to achieve a parallax scrolling effect. This can be seen in action when moving your mouse around the canvas. 
As I was also experimenting with particle effects, I implemented that on click an explosion was triggered. The explosion has glitchy feel to it, which was intended.
This demo can be seen in action here: http://justgoscha.github.io/skyline/
 
On older PC's this might run quite choppy and laptops may run hot, like my MacBook Air, where I programmed it on. Also you may need a current browser, this was only tested on Firefox, Chrome and Safari.
 
Other projects in the series can be seen here:
Procedural Skyline
Published:

Owner

Procedural Skyline

A procedurally generated Skyline in Javascript on an HTML5 canvas with a parallax effect and some particle effects.

Published:

Creative Fields