EffectHub.com: your best source for gaming

Recommendation

More Effects...

function Segment(x, y, angle, length, size, color) {
    var radians = angle * (Math.PI / 180);
    this.startX = x;
    this.startY = y;

this.endX = x + length * Math.cos(radians);
    this.endY = y + length * Math.sin(radians);

this.nsX = x + (length - (size / 2)) * Math.cos(radians);
    this.nsY = y + (length - (size / 2)) * Math.sin(radians);
    this.length = length;
    this.angle = angle;
    this.size = size;
    this.color = color;
}
Segment.prototype = {
    constructor: Segment,

render: function (context) {
        context.beginPath();
        context.moveTo(this.startX, this.startY);
        context.lineTo(this.endX, this.endY);
        context.lineWidth = this.size;
        context.strokeStyle = this.color;
        context.stroke();
        context.closePath();
    }
};

function Tree(x, y, size, gens) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.gens = gens;

this.bark = 'rgb(' + ~~ (Math.random() * 23 + 87) + ',' + ~~ (Math.random() * 8 + 59) + ',' + ~~ (Math.random() * 5 + 53) + ')';
    this.foliage1 = 'rgb(' + ~~ (Math.random() * 7 + 40) + ',' + ~~ (Math.random() * 23 + 85) + ',' + ~~ (Math.random() * 10 + 0) + ')';
    this.foliage2 = 'rgb(' + ~~ (Math.random() * 7 + 40) + ',' + ~~ (Math.random() * 45 + 68) + ',' + ~~ (Math.random() * 10 + 0) + ')';
    this.trunk = new Segment(x, y, -90, size, size / 9.5, this.bark);
}
Tree.prototype = {
    constructor: Tree,

grow: function (context) {
        this.trunk.render(context);

this.branch(this.trunk, this.gens, context);
    },
    branch: function (previous, gen, context) {
        var mod = (this.gens - gen);
        if (--gen < 0) {
            //this.foliage(previous, context);
            return;
        }

if (mod > 1 && Math.random() > .5) {
            this.branch(previous, gen - 1, context);
        }

var len = ~~ (Math.random() * 2 + 3) + mod,
            angleMod = (mod + 1) * 35;
        while (len--) {

var newAngle = ~~ (previous.angle + (Math.random() * angleMod * 2 - angleMod));
            var newLength = ~~ ((previous.length - mod) * (Math.random() * .4 + .5));
            var newSize = (previous.size * previous.length) / 100 + .5;
            var seg = new Segment(previous.nsX, previous.nsY, newAngle, newLength, newSize, previous.color);
            seg.render(context);
            this.branch(seg, gen, context);
        }
    },
    foliage: function (seg, context) {

context.beginPath();
        context.rect(seg.endX, seg.endY, 6, 3);
        context.fillStyle = Math.random() > .5 ? this.foliage1 : this.foliage2;
        context.fill();
        context.closePath();
    }
};

function Terrain2D(height, width, startY, spacing, max, jitter) {
    this.height = height;
    this.width = width;
    this.jitter = jitter;
    this.points = [];
    this.spacing = spacing;
    this.num_points = width / spacing | 0;
    this.scale_x = width / this.num_points;

this.tcanvas = document.createElement('canvas');
    var tcontext = this.tcanvas.getContext('2d');
    this.tcanvas.height = height;
    this.tcanvas.width = width;
    for (var i = 0; i <= this.num_points; i++) {
        this.points[i] = startY;
    }
    this.midpoint.call(this, 0, this.num_points, max);
    this.trees.call(this, tcontext, settings.tree_sparsity / 100);
}
Terrain2D.prototype = {
    constructor: Terrain2D,
    midpoint: function (p1, p2, max) {
        var mid = Math.round((p1 + p2) / 2);
        if (p2 - p1 <= 1 || p2 === mid || p1 === mid) {
            return;
        }
        this.points[mid] = ((this.points[p1] + this.points[p2]) / 2) + (max * (Math.random() * (this.jitter * 2) - this.jitter));
        this.midpoint.call(this, p1, mid, max / 2);
        this.midpoint.call(this, mid, p2, max / 2);
    },
    trees: function (context, sparsity) {
        for (var i = 0, l = this.points.length; i < l; i++) {
            if (Math.random() < sparsity && i > l * .15 && i < l * .85) {
                (new Tree((i + .5) * this.scale_x, this.points[i] + (Math.random() * (this.points[i] / 8)), Math.random() * (settings.tree_size*.2) + (settings.tree_size*.8), settings.tree_generations)).grow(context);
            }

}
    },
    render: function (context, x, y, color, opacity) {
        var i = 0;
        if (typeof opacity !== 'undefined') {
            context.globalAlpha = opacity;
        }
        context.save();
        context.translate(x, y);
        context.beginPath();
        context.moveTo(0, this.points[0]);
        for (; i < this.num_points - 1; i += 2) {
            context.lineTo(i * this.scale_x, this.points[i]);
            context.lineTo((i + 1) * this.scale_x, this.points[i + 1]);
        }
        context.lineTo(this.width, this.points[0]);
        context.lineTo(this.width, this.height);
        context.lineTo(0, this.height);
        if (typeof color !== 'undefined') {
            context.fillStyle = color;
        }
        context.fill();
        context.closePath(); // this caused lag in another demo where I was restoring
        context.restore();
        context.drawImage(this.tcanvas, x, y);
    }
};

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    tcanvas = document.createElement('canvas'),
    tcontext = tcanvas.getContext('2d'),
    height, width, slices, xoffset, changed,
    uspeed = 1000 / 60,
    settings = {
        xspeed: 25,
        slice_size: 0,
        height_deviation: 50,
        start_height: 0,
        tree_sparsity: 5,
        tree_size: 45,
        tree_generations: 4,
        cycle_background: true
    },
    gui = new dat.GUI(),
    grad_count = 23,
    gindex = 21,
    layer1 = document.createElement('div'),
    layer2 = document.createElement('div');

setTimeout(init, 10);

function init() {
    // setup variables
    height = canvas.height = tcanvas.height = document.body.offsetHeight;
    width = canvas.width = tcanvas.width = document.body.offsetWidth;
    settings.slice_size = (width/4>256?width / 4:256);
    settings.start_height = height / 4;
    var f0 = gui.addFolder('real time');
    var f1 = gui.addFolder('future generation');
    var f2 = gui.addFolder('resets');
    f0.add(settings, 'xspeed', 1, 50).step(.01);
    f0.add(settings, 'cycle_background').onFinishChange(fade);
    f1.add(settings, 'height_deviation', 15, (height/4>250?250:height/4));
    f1.add(settings, 'tree_sparsity', 1, 6);
    f1.add(settings, 'tree_size', 10, 50);
    f1.add(settings, 'tree_generations', 2, 5).step(1);
    f2.add(settings, 'start_height', 0, height - height / 4).onChange(changing).onFinishChange(play);;
    f2.add(settings, 'slice_size', 256, width).onChange(changing).onFinishChange(play);
    f0.open();
    f1.open();
    f2.open();
    cinit();
    play();
}

function play() {
    changed = false;
    slices = [];
    xoffset = 0;
    for (var i = 0; i < (width / settings.slice_size) + 2; i++) {
        generate();
    }
    update();
    render();
}

function changing() {
    changed = true;
}

function generate() {
    slices.push(new Terrain2D(height, settings.slice_size + 1, height - settings.start_height, 4, settings.height_deviation, 1));
}

function cinit() {
    layer1.className = 'sky-gradient-' + key(gindex);
    layer2.className = 'sky-gradient-' + key(gindex+1);
    apply_styles([layer1, layer2], {
        'position':'absolute',
        'top': '0px',
        'left': '0px',
        'bottom': '0px',
        'right': '0px'
    });
    layer2.style.opacity = 0;
    document.body.appendChild(layer1);
    document.body.appendChild(layer2);
    fade();
}

function key(n) {
    return n < 10 ? '0' + n : n;
}

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background: #11111c;
}
canvas {
    position: absolute;
    z-index: 99;
}
.dg {
    z-index: 99999 !important;
}
.sky-gradient-00 { background: #11111c; }
.sky-gradient-01 { background: linear-gradient(to bottom, #020111 85%,#191621 100%); }
.sky-gradient-02 { background: linear-gradient(to bottom, #020111 60%,#20202c 100%); }
.sky-gradient-03 { background: linear-gradient(to bottom, #020111 10%,#3a3a52 100%); }
.sky-gradient-04 { background: linear-gradient(to bottom, #20202c 0%,#515175 100%); }
.sky-gradient-05 { background: linear-gradient(to bottom, #40405c 0%,#6f71aa 80%,#8a76ab 100%); }
.sky-gradient-06 { background: linear-gradient(to bottom, #4a4969 0%,#7072ab 50%,#cd82a0 100%); }
.sky-gradient-07 { background: linear-gradient(to bottom, #757abf 0%,#8583be 60%,#eab0d1 100%); }
.sky-gradient-08 { background: linear-gradient(to bottom, #82addb 0%,#ebb2b1 100%); }
.sky-gradient-09 { background: linear-gradient(to bottom, #94c5f8 1%,#a6e6ff 70%,#b1b5ea 100%); }
.sky-gradient-10 { background: linear-gradient(to bottom, #b7eaff 0%,#94dfff 100%); }
.sky-gradient-11 { background: linear-gradient(to bottom, #9be2fe 0%,#67d1fb 100%); }
.sky-gradient-12 { background: linear-gradient(to bottom, #90dffe 0%,#38a3d1 100%); }
.sky-gradient-13 { background: linear-gradient(to bottom, #57c1eb 0%,#246fa8 100%); }
.sky-gradient-14 { background: linear-gradient(to bottom, #2d91c2 0%,#1e528e 100%); }
.sky-gradient-15 { background: linear-gradient(to bottom, #2473ab 0%,#1e528e 70%,#5b7983 100%); }
.sky-gradient-16 { background: linear-gradient(to bottom, #1e528e 0%,#265889 50%,#9da671 100%); }
.sky-gradient-17 { background: linear-gradient(to bottom, #1e528e 0%,#728a7c 50%,#e9ce5d 100%); }
.sky-gradient-18 { background: linear-gradient(to bottom, #154277 0%,#576e71 30%,#e1c45e 70%,#b26339 100%); }
.sky-gradient-19 { background: linear-gradient(to bottom, #163C52 0%,#4F4F47 30%,#C5752D 60%,#B7490F 80%, #2F1107 100%); }
.sky-gradient-20 { background: linear-gradient(to bottom, #071B26 0%,#071B26 30%,#8A3B12 80%,#240E03 100%); }
.sky-gradient-21 { background: linear-gradient(to bottom, #010A10 30%,#59230B 80%,#2F1107 100%); }
.sky-gradient-22 { background: linear-gradient(to bottom, #090401 50%,#4B1D06 100%); }
.sky-gradient-23 { background: linear-gradient(to bottom, #00000c 80%,#150800 100%); }
.sky-gradient-24 { background: #00000a; }

HTML

Recommendation

Join Effecthub.com