Generate procedural textures in GLSL-Shader way or use plain vanilla Canvas API's to create your textures.
At https://magnusthor.github.io/demolishedTexture/editor/ you can find a tiny editor that allows you to fiddle with demolishedTexture.
npm install demolishedtexture
Brief documentation of demolishedTexture. More to come thou.
Like in a "shader" the generator calles the "callback" function (fn) provided to the generator by createTexture(w,h,fn) or render(fn) for each pixel (x,y) of your texture. The callback fn must have the following signature (pixel, x, y, w, h) where the arguments are as follows, it must return an Array of RGB(a)
fn(pixel:Array, x:number, y:numer, w:number, h:number,v:Array):Array<number>
pixel is red, green and blue RGB channel for the current pixel (x,y) x,y is the current coordinate of the pixel. w,h is the with and hight of the texture. v Vector coorinate i.e -1,-1,0 for the current pixel
The function (fn) is inherited (bound) the the TextureBase descibed above, there you can find functions such as PerlinNoise ( noise)
var instance = DemolishedTextureGen.createTexture(512, 512, function (pixel, x, y, w, h,v) {
var n = this.noise(x / 45, y / 120, .89);
n = Math.cos(n * 15);
r = Math.round(n * 255);
b = 255 - r;
g = r - 255;
return [r, g, b];
});
In addition to the procedual textures you can use the HTML5 Canvas JavaScript API's to render textures / images.
fn(ctx,w,h):Array<number>
ctx is the CanvasRenderingContext2D to use for drawinig operations. w is the width of the texture. h is the width of the texture.
var instance = DemolishedCanvasTextureGen.createTexture(512, 512, (ctx, w, h) => {
ctx.save();
ctx.fillStyle = "#fff";
let dx = w / 2;
let dy = h / 2;
ctx.strokeStyle = "#fff";
ctx.lineWidth = 10;
var sx = Math.random() * 2;
var sy = Math.random() * 2;
ctx.translate(sx, sy);
ctx.strokeRect(20, 20, 512 - 40, 512 - 40);
ctx.stroke();
ctx.font = "120px 'Arial'";
ctx.fillText("SUPER", 40, 220, w);
ctx.font = "bold 154px 'Arial'";
ctx.fillText("HANNA", 35, 370, w);
ctx.restore();
return ctx;
});
toBase64():string
toBlob( (b:Blob) => {}): void
https://magnusthor.github.io/demolishedTexture/example/index.html
https://magnusthor.github.io/demolishedTexture/editor/index.html