This package is now called anti:texture
.
This simple snipped is intended for ease image generation when designing a web page.
For Meteor.js projects, simply use
meteor add anti:texture
For other applications, download texture.js
file from this repo and add it to your project.
Notice that this script currently depend on jQuery.
Texture(element, options, drawer);
-
element
- DOM element that will receive generated image asbackground-image
property. Notice that background images can stack, so you can use this to add random noise to existing image or gradient, or just stack several generated images. -
options
- object with optional settings:name
- name of the texture, used to ensure that the same image isn't added twice (so that you can safely use this inrender
method)width
- width of the generated image (512 by default)height
- height of the generated image (512 by default)
-
drawer
- object used for drawing texture. Has 3 optional methods:-
init(ctx, w, h)
- if present, runs on the beginning and can be used to generate data to be used in later functions -
pixel(ctx, data, x, y, w, h)
- if present, runs once for each image pixel -
post(ctx, data, w, h)
- if present, runs after the pixels are drawn -
arguments:
ctx
- 2d canvas context to be drawn ondata
- results ofinit
functionx
,y
- current pixel coordinatesw
,h
- image dimensions
-
Template.sidebar.rendered = function() {
Texture(this.find('.sidebar'), {name: 'mesh', width: 200, height: 200}, {
pixel: function(ctx, data, x, y) {
if(x % 4 === 0 || y % 4 === 0) {
ctx.fillStyle = "rgba(0,0,0," + (0.125 + 0.125 * Math.random())+ ")";
ctx.fillRect( x, y, 1, 1 );
}
}
});
}