` whose dimensions are not explicitly set would yield no result. ### tesseraWidth `number`: The width of each mosaic tile in pixels. `default: 30` ### tesseraHeight `number`: The height of each mosaic tile in pixels. `default: 30` ```js var t = new Tesserae({ container: '#some-container', tesseraWidth: 40, tesseraHeight: 40 }); ``` ### randomcolor `object`: Options to be forwarded to the random color generator. `default`: ```js randomcolor = { hue: 'monochrome', luminosity: 'light' } ``` Tesserae uses the [Random Color](https://randomcolor.llllll.li/) generator by David Merfield to generate random colors for each mosaic tile. For more info on all the available options you can check the [project's github page](https://github.com/davidmerfield/randomColor#options). ```js // example 1: bright variations of purple-based colors var t1 = new Tesserae({ container: '#some-container', randomcolor = { hue: 'purple', luminosity: 'bright' } }); ``` Omitting the `randomcolor.hue` option will generate a truly random color: ```js // example 2: dark variations of truly random colors var t2 = new Tesserae({ container: '#some-other-container', randomcolor = { luminosity: 'dark' } }); ``` ### filter `object` or `false`: Controls the appearance of a filter (overlay) above the mosaic. When `false` disables the filter entirely. `default`: ```js filter = { color: '#000', opacity: 0.6 } ``` Filter is best used when bright colors are chosen and/or when text is to be displayed on top of the generated background. ```js // example: turquise filter with 80% opacity var t = new Tesserae({ container: '#some-container', filter = { color: '#16a085', opacity: 0.8 } }); ``` ### gradual `object` or `false`: Controls the draw behavior of the mosaic. When set to `false` all tiles will be drawn at once. When set to `object`, tiles will be gradually drawn in batches. Batch size is controlled by the `step` property. Each batch is drawn in a new animation frame. `default`: ```js gradual = { enable: true, step: 10 } ``` ```js // example: gradually draw mosaic in batches of 4 var t = new Tesserae({ container: '#some-container', gradual = { enable: true, step: 4 } }); ``` ### animate `object` or `false`: Controls the draw behavior of individual tiles. When set to `false` each tile will draw itself immediately, without animation. When set to `object`, each tile will animate-show itself. The speed of the animation is controlled by the `step` property. `default`: ```js animate = { enable: true, step: 2 } ``` ```js // example: animate tiles a little faster on show var t = new Tesserae({ container: '#some-container', animate = { enable: true, step: 4 } }); ``` ### live `object` or `false`: Enables "live mode" which forces random tiles to periodically change color. It creates a subtle effect which is barely visible in same-hue backgrounds with filter. The change interval is random within the range of `live.minInterval` and `live.maxInterval`. `default`: ```js live = { enable: true, minInterval: 50, maxInterval: 500 } ``` ```js // example: live backround with random hue and shorter change intervals var t = new Tesserae({ container: '#some-container', live: { // shorter intervals make effect more prominent minInterval: 10, maxInterval: 100 } }); ``` Methods ------------ By keeping a reference to the created Tesserae instance you may invoke the following methods: ### destroy() Destroys the canvas and unregisters all listeners. ```js // create a Tesserae instance var t = new Tesserae({ container: '#some-container' }); // destroy it t.destroy(); ``` ### draw() Draws the mosaic. It is automatically called upon the creation of a new instance. Manually calling it again will re-draw the mosaic. It is a good idea to manually call `draw` anytime the container size changes. **NOTE:** Tesserae listens for window resize events and re-draws automatically, so you need only worry about programatical size changes of the container (i.e. when you manually update its size) ```js // create a Tesserae instance var t = new Tesserae({ container: '#some-container' }); // re-draw t.draw(); ``` ## License [MIT](https://github.com/cvara/tesserae/blob/master/LICENSE) ## Author Christopher Varakliotis --- _Source: https://npm.io/package/tesserae · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._