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 :)
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
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.
{
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
}First, install all necessary packages from npm:
$ npm install -l
Then, just run grunt to create dist/bckgrndfy.min.js.
- 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
Apache License Version 2.0
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)