Fork me on GitHub

demolishedTexture - Example

Below you find two texture generated by demolishedTexture.

Kaliset

kaliset texture 

                    
(pixel, x, y, w, h)  =>  {
    var t = this,m = Math;
    var kaliset = function(p){
        var e=0, l=e;
        for(var i = 0;i < 13;i++) {
                var pl = l;
                l = t.length(p);
                var dot = t.dot(p,p);
                p[0] = m.abs(p[0]) / dot -.5; 
                p[1] = m.abs(p[1]) / dot -.5; 
                p[2] = m.abs(p[2]) / dot -.5;                   
                e +=  m.exp(-1/ m.abs(l-pl));  
        }  
        return e;
    }
    var k = kaliset([t.toScale(x),t.toScale(y),0]) *.18;              
    return [Math.abs((k*1.1)*255),Math.abs((k*k*1.3)*255),Math.abs((k*k*k)*255)];  
}

Perlin noise texture

Using built in Perlin noise generation 

                    
(pixel, x, y, w, h) => {
    x /= w; y /= h;
    s = 10; n = this.noise(s * x, s * y, .8);
    r = g = b = Math.round(255 * n);

    return [r, g, b]; // always return array of r,g,b      
}

Grass noise texture

Some kind of green thing, not much of grass.. 

                        
(pixel, x, y, w, h) => {
    x/=w;y/=h;sx=3;sy=44;
    n=this.noise(sx*x,sy*y,.1);

    x=(.2+Math.sin(3.14*x))/2;
    y=(1+Math.sin(n*4*y))/2;
    b=n*y*x*255; r = y*b;
    g=y*255;
}

Text elements using canvas-api

Use canvas javascript api's to render texture & images. 

                    
(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("SARA", 35, 370, w);
    ctx.restore();
    return ctx;
}