demolishedtexture/readme.md

Procedual texture generator for Demolished or what ever you want.Renders base64 strings and/or binary.

# demolishedTexture

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.


## Install using NPM

    npm install demolishedtexture

## Documentation
    
Brief documentation of demolishedTexture. More to come thou.   

## Create a texture using TextureBase

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)  
 
### Example ( Javascript )
****
    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];
        
    });


## Create a texture using Canvas API's

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;    
    });
        

## Get the rendered texture as Base64

    toBase64():string



## Get the rendered texture as a Blob

    toBlob( (b:Blob) => {}): void


# Links

https://magnusthor.github.io/demolishedTexture/example/index.html 

https://magnusthor.github.io/demolishedTexture/editor/index.html