Parallax Mountains

by Jack Rugile

by Bacher

HTML

<script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.min.js"></script>
<div></div>

CSS

canvas {
  background: linear-gradient(#B3D5E6 0%, #EEF4F6 75%);
  display: block;
}

div {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url(http://jackrugile.com/images/misc/skyline-texture.png);
}

JavaScript

(function() {
    var Mountain, MountainRange, dt, mountainRanges, sketch;
    sketch = Sketch.create();
    sketch.mouse.x = sketch.width / 10;
    sketch.mouse.y = sketch.height;
    mountainRanges = [];
    dt = 1;

    Mountain = function(config) {
        return this.reset(config);
    };

    Mountain.prototype.reset = function(config) {
        this.layer = config.layer;
        this.x = config.x;
        this.y = config.y;
        this.width = config.width;
        this.height = config.height;
        return this.color = config.color;
    };

    MountainRange = function(config) {
        this.x = 0;
        this.mountains = [];
        this.layer = config.layer;
        this.width = {
            min: config.width.min,
            max: config.width.max
        };
        this.height = {
            min: config.height.min,
            max: config.height.max
        };
        this.speed = config.speed;
        this.color = config.color;
        this.populate();
        return this;
    };

    MountainRange.prototype.populate = function() {
        var newHeight, newWidth, totalWidth, _results;
        totalWidth = 0;
        _results = [];
        while (totalWidth <= sketch.width + (this.width.max * 4)) {
            newWidth = round(random(this.width.min, this.width.max));
            newHeight = round(random(this.height.min, this.height.max));
            this.mountains.push(new Mountain({
                layer: this.layer,
                x: this.mountains.length === 0 ? 0 : this.mountains[this.mountains.length - 1].x + this.mountains[this.mountains.length - 1].width,
                y: sketch.height - newHeight,
                width: newWidth,
                height: newHeight,
                color: this.color
            }));
            _results.push(totalWidth += newWidth);
        }
        return _results;
    };

    MountainRange.prototype.update = function() {
        var firstMountain, lastMountain, newHeight, newWidth;
        this.x -=...