bckgrndfy

v1.2.0

Published

2 years ago

Backgroundify! (or bckgrndfy) is an attempt to create a pleasant, not-so-fancy-featured (but loosely coupled in some aspects) background generator for the browser.

Downloads

0High
0Medium
0Low

vltr

background svg canvas

Backgroundify!

Backgroundify! (or bckgrndfy) is an attempt to create a pleasant, not-so-fancy-featured (but loosely coupled in some aspects) background generator for the browser.

This project is a fork of closure-low-poly-background, which uses Google's Closure library aaaaaand I wanted something more lightweight, Vanilla JS (3,7Kb minified + gzipped).

There are many others (IMHO) out there, being Trianglify the best one. Yes, it's the best. I just couldn't use it (which led me to do Backgroundify!) because of its GPL license. Don't get me wrong, I love GPL. I use mostly GPL / free software in my Linux (GPL) box. If you won't have any trouble about using GPL, I strongly advise you to use Trianglify :)

Quick demo output

Using Delaunay

Using Voronoi without Lloyd's relaxation

Using Voronoi with Lloyd's relaxation

Installing

Use bower to install it.

$ bower install bckgrndfy --save

Well, you can install using npm too, but the main target is the browser (well ...).

$ npm install bckgrndfy --save

Usage

Your HTML file:

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <script src="../path/to/bower_componentes/dist/bckgrndfy.min.js"></script>
        <script src="demo.js"></script>
    </body>
</html>

Your demo.js file:

window.onload = function() {

    var body = document.getElementsByTagName('body')[0];
    var canvas = bckgrndfy({
        width: 800,
        height: 600,
        cellSize: 55,
        algorithm: 'delaunay', // or 'voronoi'
        variance: 0.75
    });
    canvas.style.left = '0px';
    canvas.style.top = '0px';
    canvas.style.position = 'absolute';
    canvas.style.overflow = 'hidden';
    body.appendChild(canvas);
};

Checkout the demo, which uses Please JS to generate color schemas on the fly! Oh, use bower before.

Options

{
    width: 400, // Width of the generated canvas
    height: 200, // Height of the generated canvas
    palette: /* from chroma */ DEFAULT_PALETTE, // Palette of the canvas, this directly influence the generated result, by default we use ColorBrewer for chroma.js
    shareColor: true, // If set to true, x and y will share the same palette. Recommend to keep it 'true', using different palette sometime will make the graph too messy.
    lineWidth: 1, // Line width of the triangles
    elementId: undefined, // Optional: an ID to be used in the generated canvas element
    algorithm: 'voronoi', // or 'delaunay'
    // only for voronoi
    distributed: true,
    maxSteps: 15,
    // only for delaunay
    cellSize: 40, // Expect size of triangle blocks, actual size will be randomized by variance parameter
    variance: 0.75, // Defined how much to randomize the block size
}

Build

First, install all necessary packages from npm:

$ npm install -l

Then, just run grunt to create dist/bckgrndfy.min.js.

Borrowed from (and original credits):

https://github.com/gorhill/Javascript-Voronoi
https://github.com/waythe/closure-low-poly-background
https://github.com/ironwallaby/delaunay
https://github.com/gka/chroma.js/blob/master/src/colors/colorbrewer.coffee

License

Apache License Version 2.0

Browser Compatibility

Tested in these browsers (which means an image have appear (and probably no JS warning was given)):

Chrom[e|ium] 47.0.2526.106 (under Arch Linux)
Firefox 43.0.1 (under Arch Linux)
Microsoft Edge[HTML?] 13.10586 (under Windows 10 - virtualized)
Opera 34.0.2036.25 (under Arch Linux)