The code snippets are powered by the Klipse plugin.

First, let’s load texgen.js - a Procedural Texture Generator javascript library - from github:

Object.keys(TG).length;

function render(texture) {
  container.innerHTML = "";  
  container.appendChild(texture.toCanvas());
}

Now, let’s create a nice texture:

var texture = new TG.Texture( 256, 256 )
    .add( new TG.XOR().tint( 1, 0.5, 0.7 ) )
    .add( new TG.SinX().frequency( 0.004 ).tint( 0.5, 0, 0 ) )
    .mul( new TG.SinY().frequency( 0.004 ).tint( 0.5, 0, 0 ) )
    .add( new TG.SinX().frequency( 0.0065 ).tint( 0.1, 0.5, 0.2 ) )
    .add( new TG.SinY().frequency( 0.0065 ).tint( 0.5, 0.5, 0.5 ) )
    .add( new TG.Noise().tint( 0.1, 0.1, 0.2 ) );

render(texture);

Go ahead! Feel free to play with the code above and see how the texture is rendered as you modify the code.

The library is not well documented, but the function names are quite expressive…

And here is another texture:

var texture = new TG.Texture( 256, 256 )
					.add( new TG.SinX().offset( - 16 ).frequency( 0.03 ).tint( 0.1, 0.25, 0.5 ) )
					.add( new TG.SinY().offset( - 16 ).frequency( 0.03 ).tint( 0.1, 0.25, 0.5 ) )
					.add( new TG.Number().tint( 0.75, 0.5, 0.5 ) )
					.add( new TG.SinX().frequency( 0.03 ).tint( 0.2, 0.2, 0.2 ) )
					.add( new TG.SinY().frequency( 0.03 ).tint( 0.2, 0.2, 0.2 ) )
					.add( new TG.Noise().tint( 0.1, 0, 0 ) )
					.add( new TG.Noise().tint( 0, 0.1, 0 ) )
					.add( new TG.Noise().tint( 0, 0, 0.1 ) );

render(texture);

Enjoy the code interactivity!

The code snippets are powered by the Klipse plugin.