Procedural Texture Generator in JavaScript
source link: https://blog.klipse.tech/javascript/2020/09/10/procedural-texture-generator-javascript.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Procedural Texture Generator in JavaScript
Sep 10, 2020 • Yehonathan Sharvit
The code snippets are powered by the Klipse plugin.
First, let’s load texgen.js - a Procedural Texture Generator javascript library - from github:
xxxxxxxxxx
Object.keys(TG).length;
the evaluation will appear here (soon)...
Now, let’s create a nice texture:
xxxxxxxxxx
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);
xxxxxxxxxx
the evaluation will appear here (soon)...
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:
xxxxxxxxxx
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);
xxxxxxxxxx
the evaluation will appear here (soon)...
Enjoy the code interactivity!
The code snippets are powered by the Klipse plugin.
Follow viebel to stay up-to-date with the coolest interactive articles around the world.
Discover more cool interactive articles about javascript, clojure[script], python, ruby, scheme, c++ and even brainfuck!
Give Klipse a Github star to express how much you appreciate Code Interactivity.
Subscribe to the Klipse newsletter:Feel free to email me [email protected] for getting practical tips and tricks in writing your first interactive blog post.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK