texgen-example.js

// texgen.js - http://github.com/mrdoob/texgen.js
let TG={OP:{SET:function(a,b){return b},ADD:function(a,b){return a+b},SUB:function(a,b){return a-b},MUL:function(a,b){return a*b},DIV:function(a,b){return a/b},AND:function(a,b){return a&b},XOR:function(a,b){return a^b},MIN:function(a,b){return Math.min(a,b)},MAX:function(a,b){return Math.max(a,b)}},Texture:function(a,b){this.color=new Float32Array(4);this.buffer=new TG.Buffer(a,b);this.bufferCopy=new TG.Buffer(a,b)}};
TG.Texture.prototype={constructor:TG.Texture,set:function(a,b){void 0===b&&(b=TG.OP.SET);this.bufferCopy.copy(this.buffer);var c=["var x = 0, y = 0;\nvar array = dst.array;\nvar width = dst.width, height = dst.height;\nfor ( var i = 0, il = array.length; i < il; i += 4 ) {","\t"+a.getSource(),"\tarray[ i     ] = op( array[ i     ], color[ 0 ] * tint[ 0 ] );\n\tarray[ i + 1 ] = op( array[ i + 1 ], color[ 1 ] * tint[ 1 ] );\n\tarray[ i + 2 ] = op( array[ i + 2 ], color[ 2 ] * tint[ 2 ] );\n\tif ( ++x === width ) { x = 0; y ++; }\n}"].join("\n");
(new Function("op, dst, src, color, params, tint",c))(b,this.buffer,this.bufferCopy,this.color,a.getParams(),a.getTint());return this},add:function(a){return this.set(a,TG.OP.ADD)},sub:function(a){return this.set(a,TG.OP.SUB)},mul:function(a){return this.set(a,TG.OP.MUL)},div:function(a){return this.set(a,TG.OP.DIV)},and:function(a){return this.set(a,TG.OP.AND)},xor:function(a){return this.set(a,TG.OP.XOR)},min:function(a){return this.set(a,TG.OP.MIN)},max:function(a){return this.set(a,TG.OP.MAX)},
toImageData:function(a){var b=this.buffer,c=b.array;a=a.createImageData(b.width,b.height);for(var b=a.data,d=0,e=c.length;d<e;d+=4)b[d]=255*c[d],b[d+1]=255*c[d+1],b[d+2]=255*c[d+2],b[d+3]=255;return a},toCanvas:function(a){void 0===a&&(a=document.createElement("canvas"));a.width=this.buffer.width;a.height=this.buffer.height;var b=a.getContext("2d"),c=this.toImageData(b);b.putImageData(c,0,0);return a}};
TG.Program=function(a){var b=new Float32Array([1,1,1]);a.tint=function(a,d,e){b[0]=a;b[1]=d;b[2]=e;return this};a.getTint=function(){return b};return a};TG.Number=function(){return new TG.Program({getParams:function(){},getSource:function(){return"color[ 0 ] = 1;\ncolor[ 1 ] = 1;\ncolor[ 2 ] = 1;"}})};
TG.SinX=function(){var a={frequency:1,offset:0};return new TG.Program({frequency:function(b){a.frequency=b*Math.PI;return this},offset:function(b){a.offset=b;return this},getParams:function(){return a},getSource:function(){return"var value = Math.sin( ( x + params.offset ) * params.frequency );\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.SinY=function(){var a={frequency:1,offset:0};return new TG.Program({frequency:function(b){a.frequency=b*Math.PI;return this},offset:function(b){a.offset=b;return this},getParams:function(){return a},getSource:function(){return"var value = Math.sin( ( y + params.offset ) * params.frequency );\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};TG.OR=function(){return new TG.Program({getParams:function(){},getSource:function(){return"var value = ( x | y ) / width;\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.XOR=function(){return new TG.Program({getParams:function(){},getSource:function(){return"var value = ( x ^ y ) / width;\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};TG.Noise=function(){var a={seed:Date.now()};return new TG.Program({seed:function(b){a.seed=b;return this},getParams:function(){return a},getSource:function(){return"var value = TG.Utils.hashRNG( params.seed, x, y );\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.FractalNoise=function(){var a={interpolator:new TG.ColorInterpolator(TG.ColorInterpolatorMethod.STEP),seed:Date.now(),baseFrequency:.03125,amplitude:.4,persistence:.72,octaves:4,step:4};return new TG.Program({seed:function(b){a.seed=b;return this},baseFrequency:function(b){a.baseFrequency=1/b;return this},amplitude:function(b){a.amplitude=b;return this},persistence:function(b){a.persistence=b;return this},octaves:function(b){a.octaves=Math.max(1,b);return this},step:function(b){a.step=Math.max(1,
b);return this},interpolation:function(b){a.interpolator.setInterpolation(b);return this},getParams:function(){return a},getSource:function(){return"var value = 0;\nvar amp = params.amplitude;\nvar freq = params.baseFrequency;\nvar x1, y1, dx, dy;\nvar v1, v2, v3, v4;\nvar i1, i2;\nfor ( var j = 1; j <= params.octaves; j++ ) {\nx1 = Math.floor( x * freq ), y1 = Math.floor( y * freq );\nif ( params.interpolator.interpolation == TG.ColorInterpolatorMethod.STEP ) {\nvalue += TG.Utils.hashRNG( params.seed * j, x1, y1 ) * amp;\n} else {\ndx = ( x * freq ) - x1, dy = ( y * freq ) - y1;\nv1 = TG.Utils.hashRNG( params.seed * j, x1    , y1     );\nv2 = TG.Utils.hashRNG( params.seed * j, x1 + 1, y1     );\nv3 = TG.Utils.hashRNG( params.seed * j, x1    , y1 + 1 );\nv4 = TG.Utils.hashRNG( params.seed * j, x1 + 1, y1 + 1 );\nparams.interpolator.set( [\n{ pos: 0, color: [ v1 ] },\n{ pos: 1, color: [ v2 ] }\n] );\ni1 = params.interpolator.getColorAt( dx );\nparams.interpolator.set( [\n{ pos: 0, color: [ v3 ] },\n{ pos: 1, color: [ v4 ] }\n] );\ni2 = params.interpolator.getColorAt( dx );\nparams.interpolator.set( [\n{ pos: 0, color: [ i1[ 0 ] ] },\n{ pos: 1, color: [ i2[ 0 ] ] }\n] );\nvalue += params.interpolator.getColorAt( dy )[ 0 ] * amp;\n}\nfreq *= params.step;\namp *= params.persistence;\n}\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.CellularNoise=function(){var a={seed:Date.now(),density:32,weightRange:0};return new TG.Program({seed:function(b){a.seed=b;return this},density:function(b){a.density=b;return this},weightRange:function(b){a.weightRange=Math.max(0,b);return this},getParams:function(){return a},getSource:function(){return"var p = TG.Utils.cellNoiseBase( x, y, params.seed, params.density, params.weightRange );\nvar value = 1 - ( p.dist / params.density );\nif ( params.density < 0 ) value -= 1;\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.VoronoiNoise=function(){var a={seed:Date.now(),density:32,weightRange:0};return new TG.Program({seed:function(b){a.seed=b;return this},density:function(b){a.density=b;return this},weightRange:function(b){a.weightRange=Math.max(0,b);return this},getParams:function(){return a},getSource:function(){return"var p = TG.Utils.cellNoiseBase( x, y, params.seed, params.density, params.weightRange );\ncolor[ 0 ] = p.value;\ncolor[ 1 ] = p.value;\ncolor[ 2 ] = p.value;"}})};
TG.CellularFractal=function(){var a={seed:Date.now(),weightRange:0,baseDensity:64,amplitude:.7,persistence:.45,octaves:4,step:2};return new TG.Program({seed:function(b){a.seed=b;return this},baseDensity:function(b){a.baseDensity=b;return this},weightRange:function(b){a.weightRange=Math.max(0,b);return this},amplitude:function(b){a.amplitude=b;return this},persistence:function(b){a.persistence=b;return this},octaves:function(b){a.octaves=Math.max(1,b);return this},step:function(b){a.step=Math.max(1,
b);return this},getParams:function(){return a},getSource:function(){return"var p;\nvar value = 0;\nvar amp = params.amplitude;\nvar dens = params.baseDensity;\nfor ( var j = 1; j <= params.octaves; j++ ) {\np = TG.Utils.cellNoiseBase( x, y, params.seed * j, dens, params.weightRange );\np.dist = 1 - ( p.dist / dens );\nif ( dens < 0 ) p.dist -= 1;\nvalue += p.dist * amp;\ndens /= params.step;\namp *= params.persistence;\n}\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.VoronoiFractal=function(){var a={seed:Date.now(),weightRange:0,baseDensity:64,amplitude:.6,persistence:.6,octaves:4,step:2};return new TG.Program({seed:function(b){a.seed=b;return this},baseDensity:function(b){a.baseDensity=b;return this},weightRange:function(b){a.weightRange=Math.max(0,b);return this},amplitude:function(b){a.amplitude=b;return this},persistence:function(b){a.persistence=b;return this},octaves:function(b){a.octaves=Math.max(1,b);return this},step:function(b){a.step=Math.max(1,
b);return this},getParams:function(){return a},getSource:function(){return"var p;\nvar value = 0;\nvar amp = params.amplitude;\nvar dens = params.baseDensity;\nfor ( var j = 1; j <= params.octaves; j++ ) {\np = TG.Utils.cellNoiseBase( x, y, params.seed * j, dens, params.weightRange );\nvalue += p.value * amp;\ndens /= params.step;\namp *= params.persistence;\n}\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.CheckerBoard=function(){var a={size:[32,32],offset:[0,0],rowShift:0};return new TG.Program({size:function(b,c){a.size=[b,c];return this},offset:function(b,c){a.offset=[b,c];return this},rowShift:function(b){a.rowShift=b;return this},getParams:function(){return a},getSource:function(){return"var value = ( ( ( y + params.offset[ 1 ] ) / params.size[ 1 ] ) & 1 ) ^ ( ( ( x + params.offset[ 0 ] + parseInt( y / params.size[ 1 ] ) * params.rowShift ) / params.size[ 0 ] ) & 1 ) ? 0 : 1\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.Rect=function(){var a={position:[0,0],size:[32,32]};return new TG.Program({position:function(b,c){a.position=[b,c];return this},size:function(b,c){a.size=[b,c];return this},getParams:function(){return a},getSource:function(){return"var value = ( x >= params.position[ 0 ] && x <= ( params.position[ 0 ] + params.size[ 0 ] ) && y <= ( params.position[ 1 ] + params.size[ 1 ] ) && y >= params.position[ 1 ] ) ? 1 : 0;\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.Circle=function(){var a={position:[0,0],radius:50,delta:1};return new TG.Program({delta:function(b){a.delta=b;return this},position:function(b,c){a.position=[b,c];return this},radius:function(b){a.radius=b;return this},getParams:function(){return a},getSource:function(){return"var dist = TG.Utils.distance( x, y, params.position[ 0 ], params.position[ 1 ] );\nvar value = 1 - TG.Utils.smoothStep( params.radius - params.delta, params.radius, dist );\ncolor[ 0 ] = value;\ncolor[ 1 ] = value;\ncolor[ 2 ] = value;"}})};
TG.PutTexture=function(a){var b={offset:[0,0],repeat:!1,srcTex:a.buffer};return new TG.Program({offset:function(a,d){b.offset=[a,d];return this},repeat:function(a){b.repeat=a;return this},getParams:function(){return b},getSource:function(){return"var texWidth = params.srcTex.width;\nvar texHeight = params.srcTex.height;\nvar texX = Math.floor( x - params.offset[ 0 ] );\nvar texY = Math.floor( y - params.offset[ 1 ] );\nif ( texX >= texWidth || texY >= texHeight || texX < 0 || texY < 0 ) {\nif ( params.repeat ) {\nvar nx, ny;\nvar rangeX = texWidth - 1;\nvar rangeY = texHeight - 1;\nif ( params.repeat == 1 ) {\nnx = TG.Utils.wrap( texX, 0, texWidth );\nny = TG.Utils.wrap( texY, 0, texHeight );\n} else if ( params.repeat == 2 ) {\nnx = TG.Utils.mirroredWrap( texX, 0, rangeX );\nny = TG.Utils.mirroredWrap( texY, 0, rangeY );\n} else if ( params.repeat == 3 ) {\nnx = TG.Utils.clamp( texX, 0, rangeX );\nny = TG.Utils.clamp( texY, 0, rangeY );\n}\ncolor = params.srcTex.getPixelNearest( nx, ny );\n} else {\ncolor[ 0 ] = 0;\ncolor[ 1 ] = 0;\ncolor[ 2 ] = 0;\n}\n} else color = params.srcTex.getPixelNearest( texX, texY );"}})};
TG.SineDistort=function(){var a={sines:[4,4],offset:[0,0],amplitude:[16,16]};return new TG.Program({sines:function(b,c){a.sines=[b,c];return this},offset:function(b,c){a.offset=[b,c];return this},amplitude:function(b,c){a.amplitude=[b,c];return this},getParams:function(){return a},getSource:function(){return"var s = Math.sin( params.sines[ 0 ] / 100 * y + params.offset[ 0 ] ) * params.amplitude[ 0 ] + x;\nvar t = Math.sin( params.sines[ 1 ] / 100 * x + params.offset[ 1 ] ) * params.amplitude[ 1 ] + y;\ncolor.set( src.getPixelBilinear( s, t ) );"}})};
TG.Twirl=function(){var a={strength:0,radius:120,position:[128,128]};return new TG.Program({strength:function(b){a.strength=b/100;return this},radius:function(b){a.radius=b;return this},position:function(b,c){a.position=[b,c];return this},getParams:function(){return a},getSource:function(){return"var dist = TG.Utils.distance( x, y, params.position[ 0 ], params.position[ 1 ] );\nif (dist < params.radius) {\ndist = Math.pow(params.radius - dist, 2) / params.radius;\nvar angle = 2.0 * Math.PI * (dist / (params.radius / params.strength));\nvar s = (((x - params.position[ 0 ]) * Math.cos(angle)) - ((y - params.position[ 0 ]) * Math.sin(angle)) + params.position[ 0 ] + 0.5);\nvar t = (((y - params.position[ 1 ]) * Math.cos(angle)) + ((x - params.position[ 1 ]) * Math.sin(angle)) + params.position[ 1 ] + 0.5);\n} else {\nvar s = x;\nvar t = y;\n}\ncolor.set( src.getPixelBilinear( s, t ) );"}})};
TG.Transform=function(){var a={offset:[0,0],angle:0,scale:[1,1]};return new TG.Program({offset:function(b,c){a.offset=[b,c];return this},angle:function(b){a.angle=TG.Utils.deg2rad(b);return this},scale:function(b,c){if(0!==b&&0!==c)return a.scale=[b,c],this},getParams:function(){return a},getSource:function(){return"var x2 = x - width / 2;\nvar y2 = y - height / 2;\nvar s = x2 * ( Math.cos( params.angle ) / params.scale[ 0 ] ) + y2 * -( Math.sin( params.angle ) / params.scale[ 0 ] );\nvar t = x2 * ( Math.sin( params.angle ) / params.scale[ 1 ] ) + y2 *  ( Math.cos( params.angle ) / params.scale[ 1 ] );\ns += params.offset[ 0 ] + width / 2;\nt += params.offset[ 1 ] + height / 2;\ncolor.set( src.getPixelBilinear( s, t ) );"}})};
TG.Pixelate=function(){var a={size:[1,1]};return new TG.Program({size:function(b,c){a.size=[b,c];return this},getParams:function(){return a},getSource:function(){return"var s = params.size[ 0 ] * Math.floor(x/params.size[ 0 ]);\nvar t = params.size[ 1 ] * Math.floor(y/params.size[ 1 ]);\ncolor.set( src.getPixelNearest( s, t ) );"}})};
TG.GradientMap=function(){var a={gradient:new TG.ColorInterpolator(TG.ColorInterpolatorMethod.LINEAR)};return new TG.Program({repeat:function(b){a.gradient.setRepeat(b);return this},interpolation:function(b){a.gradient.setInterpolation(b);return this},point:function(b,c){a.gradient.addPoint(b,c);return this},getParams:function(){return a},getSource:function(){return"var v = src.getPixelNearest( x, y );\nvar r = params.gradient.getColorAt( v[ 0 ] )[ 0 ];\nvar g = params.gradient.getColorAt( v[ 1 ] )[ 1 ];\nvar b = params.gradient.getColorAt( v[ 2 ] )[ 2 ];\ncolor[ 0 ] = r;\ncolor[ 1 ] = g;\ncolor[ 2 ] = b;"}})};
TG.Normalize=function(){var a={multiplier:0,offset:0};return new TG.Program({getParams:function(){return a},getSource:function(){return"if ( !params.init ) {\nvar high = -Infinity;\nvar low = Infinity;\nfor ( var j = 0, len = src.array.length; j < len; j++ ) {\nif ( j % 4 == 3 ) continue;\nhigh = ( src.array[ j ] > high ) ? src.array[ j ] : high;\nlow  = ( src.array[ j ] < low  ) ? src.array[ j ] : low;\n}\nparams.offset = -low;\nparams.multiplier = 1 / ( high - low );\nparams.init = true;\n}\nvar v = src.getPixelNearest( x, y );\ncolor[ 0 ] = ( v[ 0 ] + params.offset ) * params.multiplier;\ncolor[ 1 ] = ( v[ 1 ] + params.offset ) * params.multiplier;\ncolor[ 2 ] = ( v[ 2 ] + params.offset ) * params.multiplier;"}})};
TG.Posterize=function(){var a={step:2};return new TG.Program({step:function(b){a.step=Math.max(b,2);return this},getParams:function(){return a},getSource:function(){return"var v = src.getPixelNearest( x, y );\ncolor[ 0 ] = Math.floor( Math.floor( v[ 0 ] * 255 / ( 255 / params.step ) ) * 255 / ( params.step - 1 ) ) / 255;\ncolor[ 1 ] = Math.floor( Math.floor( v[ 1 ] * 255 / ( 255 / params.step ) ) * 255 / ( params.step - 1 ) ) / 255;\ncolor[ 2 ] = Math.floor( Math.floor( v[ 2 ] * 255 / ( 255 / params.step ) ) * 255 / ( params.step - 1 ) ) / 255;"}})};
TG.Buffer=function(a,b){this.width=a;this.height=b;this.array=new Float32Array(a*b*4);this.color=new Float32Array(4)};
TG.Buffer.prototype={constructor:TG.Buffer,copy:function(a){this.array.set(a.array)},getPixelNearest:function(a,b){b>=this.height&&(b-=this.height);0>b&&(b+=this.height);a>=this.width&&(a-=this.width);0>a&&(a+=this.width);var c=this.array,d=this.color,e=Math.round(b)*this.width*4+4*Math.round(a);d[0]=c[e];d[1]=c[e+1];d[2]=c[e+2];return this.color},getPixelBilinear:function(a,b){var c=Math.floor(a),d=Math.floor(b),e=c+d*this.width,f=this.array,k=this.color,p=a-c,g=b-d,m=1-p,c=1-g,d=m*c,c=p*c,m=m*g,
p=p*g,g=4*e,n=4*(1+e),l=4*(1*this.width+e),e=4*(1+1*this.width+e),h=this.width*this.height*4;g>=h&&(g-=h);0>g&&(g+=h);n>=h&&(n-=h);0>n&&(n+=h);l>=h&&(l-=h);0>l&&(l+=h);e>=h&&(e-=h);0>e&&(e+=h);k[0]=f[g+0]*d+f[n+0]*c+f[l+0]*m+f[e+0]*p;k[1]=f[g+1]*d+f[n+1]*c+f[l+1]*m+f[e+1]*p;k[2]=f[g+2]*d+f[n+2]*c+f[l+2]*m+f[e+2]*p;k[3]=f[g+3]*d+f[n+3]*c+f[l+3]*m+f[e+3]*p;return this.color},getPixelOffset:function(a){var b=this.array,c=this.color;a=parseInt(4*a);c[0]=b[a];c[1]=b[a+1];c[2]=b[a+2];c[3]=b[a+3];return this.color}};
TG.ColorInterpolatorMethod={STEP:0,LINEAR:1,SPLINE:2};TG.ColorInterpolator=function(a){this.points=[];this.high=this.low=0;this.interpolation="undefined"==typeof a?TG.ColorInterpolatorMethod.LINEAR:a;this.repeat=!1;return this};
TG.ColorInterpolator.prototype={set:function(a){this.points=a;this.points.sort(function(a,c){return a.pos-c.pos});this.low=this.points[0].pos;this.high=this.points[this.points.length-1].pos;return this},addPoint:function(a,b){this.points.push({pos:a,color:b});this.points.sort(function(a,b){return a.pos-b.pos});this.low=this.points[0].pos;this.high=this.points[this.points.length-1].pos;return this},setRepeat:function(a){this.repeat=a;return this},setInterpolation:function(a){this.interpolation=a;return this},
getColorAt:function(a){a=2==this.repeat?TG.Utils.mirroredWrap(a,this.low,this.high):this.repeat?TG.Utils.wrap(a,this.low,this.high):TG.Utils.clamp(a,this.low,this.high);for(var b=0,c=this.points;c[b+1].pos<a;)b++;var d=c[b],b=c[b+1],c=(a-d.pos)/(b.pos-d.pos);if(this.interpolation==TG.ColorInterpolatorMethod.STEP)return d.color;if(this.interpolation==TG.ColorInterpolatorMethod.LINEAR)return TG.Utils.mixColors(d.color,b.color,c);if(this.interpolation==TG.ColorInterpolatorMethod.SPLINE)return a=c*c,
c*=a,[(2*d.color[0]-2*b.color[0])*c+(-3*d.color[0]+3*b.color[0])*a+d.color[0],(2*d.color[1]-2*b.color[1])*c+(-3*d.color[1]+3*b.color[1])*a+d.color[1],(2*d.color[2]-2*b.color[2])*c+(-3*d.color[2]+3*b.color[2])*a+d.color[2]]}};
TG.RadialGradient=function(){var a={gradient:new TG.ColorInterpolator(TG.ColorInterpolatorMethod.LINEAR),radius:255,center:[128,128]};return new TG.Program({repeat:function(b){a.gradient.setRepeat(b);return this},radius:function(b){a.radius=b;return this},interpolation:function(b){a.gradient.setInterpolation(b);return this},center:function(b,c){a.center=[b,c];return this},getParams:function(){return a},point:function(b,c){a.gradient.addPoint(b,c);return this},getSource:function(){return"var dist = TG.Utils.distance( x, y, params.center[ 0 ], params.center[ 1 ] );\ncolor = params.gradient.getColorAt( dist / params.radius );"}})};
TG.LinearGradient=function(){var a={gradient:new TG.ColorInterpolator(TG.ColorInterpolatorMethod.LINEAR)};return new TG.Program({repeat:function(b){a.gradient.setRepeat(b);return this},interpolation:function(b){a.gradient.setInterpolation(b);return this},getParams:function(){return a},point:function(b,c){a.gradient.addPoint(b,c);return this},getSource:function(){return"color = params.gradient.getColorAt( x / width );"}})};
TG.Utils={smoothStep:function(a,b,c){c=TG.Utils.clamp((c-a)/(b-a),0,1);return c*c*(3-2*c)},mixColors:function(a,b,c){return[a[0]*(1-c)+b[0]*c,a[1]*(1-c)+b[1]*c,a[2]*(1-c)+b[2]*c,a[3]*(1-c)+b[3]*c]},distance:function(a,b,c,d){a=c-a;b=d-b;return Math.sqrt(a*a+b*b)},clamp:function(a,b,c){return Math.min(Math.max(a,b),c)},wrap:function(a,b,c){c-=b;return(c+(a-b)%c)%c+b},mirroredWrap:function(a,b,c){var d=2*(c-b);a=(d+(a-b)%d)%d;return a>c-b?d-a+b:a+b},deg2rad:function(a){return a*Math.PI/180},hashRNG:function(a,
b,c){a=0==Math.abs(a%2147483648)?1:a;a=(a*(b+1)*777^a*(c+1)*123)%2147483647;a=a^61^a>>16;a+=a<<3;a=668265261*(a^a>>4);a^=a>>15;return a/=2147483647},cellNoiseBase:function(a,b,c,d,e){var f,k,p,g,m,n,l=Infinity;d=Math.abs(d);for(var h=-2;2>=h;h++)for(var q=-2;2>=q;q++)f=Math.ceil(a/d)+h,k=Math.ceil(b/d)+q,p=TG.Utils.hashRNG(c,f,k),g=TG.Utils.hashRNG(2*c,f,k),m=0<e?1+TG.Utils.hashRNG(3*c,f,k)*e:1,f=(p+f)*d,k=(g+k)*d,g=Math.abs(f-a),k=Math.abs(k-b),m*=g*g+k*k,m<l&&(l=m,n=p);return{dist:Math.sqrt(l),
value:n}}};
window.TG = TG;

class Texture extends React.Component {
  componentDidMount() {
    const canvas = this.props.texture.toCanvas();
    this.refs.x.appendChild(canvas);
  }
  render() {
    return <span style={{margin:4}} ref='x' />
  }
}



const size = 128;

const makePalette = () => {
  const r = Math.random();
  const a = r < 0.5 ?
        [[ 250, 230, 210 ], [ 255, 92, 103 ], [ 200, 15, 17 ], [ 140, 49, 59 ], [ 35, 10, 12 ], [0,0,0]]
        : [[ 251, 255, 228 ], [ 130, 198, 184 ], [ 42, 166, 137 ], [ 58, 131, 114 ], [ 4, 46, 27 ], [0,0,0]];
  return a.map(x => x.map(y => y / 255));
}

const func = (seed) => {
  var subDim = Math.floor( size / 4 );        // generate a smaller image so it can be mirrored later

  const pal = makePalette();
  var pixel = new TG.Texture( subDim, subDim )
      .set( new TG.FractalNoise().seed(seed).baseFrequency( subDim / 8 ).octaves( 1 ).amplitude( 1 ) )        // generating a noise pattern with 15 pixels per length
      .set( new TG.GradientMap().interpolation( 0 )        // divide the generated values into defined colors
          .point( 0.0, pal[0] )
          .point( 0.2, pal[1] )
          .point( 0.4, pal[2] )
          .point( 0.6, pal[3] )
          .point( 0.8, pal[4] )
          .point( 1.0, pal[5] ) );
  

  var mirrored = new TG.Texture( size, size )
      .add( new TG.PutTexture( pixel ).repeat( 1 ) )        // repeat the texture to get a cool mirrored pattern effect
      //.mul( new TG.PutTexture( vignette ).tint( 1.2, 1.2, 1.2 ) );        // adding the vignette from the example above
  ;
  return mirrored;
};

<div>
  {_.range(1,19).map(x => 
    <Texture texture={func(x)} />
  )}
</div>