201526Jan

Texgen.js: Prozeduraler Texturen-Generator

Wer schnell und unkompliziert mit JavaScript prozedurale Texturen erzeugen will, kann dazu jetzt die Bibliothek Texgen.js von Mr. doob nutzen. Dabei handelt es sich um ein einfaches Canvas-Skript, das mit wenigen Methoden komplexe Muster ermöglicht. Zu den Grundfunktionalitäten gehören Rechtecke, Sinus-Funktionen, Schachbrettmuster, Rauschen und OR-/XOR-Verknüpfungen. Die Textur wird schließlich durch das Aneinanderreihen verschiedener Funktionen generiert, wobei die entsprechenden Ebenen durch Überlagerungen der einzelnen RGB-Pixel-Informationen (Addieren, Subtrahieren, Multiplizieren, Dividieren) zusammengefügt werden.

Texgen.js - Procedural Texture Generator

Der folgende Code ist aus dem "Waves"-Beispiel der GitHub-Seite von Texgen.js entnommen.

  • var texture = new TG.Texture( 493, 200 )
  • .add( new TG.SinX().frequency( 0.004 + 0.002*Math.sin(1/100)) )
  • .mul( new TG.SinY().frequency( 0.004 + 0.002*Math.sin(1/100)) )
  • .mul( new TG.SinX().offset( 16 ).frequency( 0.04 + 0.02*Math.sin(1/100) ) )
  • .mul( new TG.SinY().offset( 16 ).frequency( 0.04 + 0.02*Math.sin(1/100) ) )
  • .div( new TG.SinX().frequency( 0.02 ).color( 2, 4, 3 ) )
  • .mul( new TG.SinX().frequency( 0.003 ).color( 0.2, 0, 0 ) )
  • .toCanvas();

Eine Dokumentation gibt es in der Hinsicht nicht, wobei der Quellcode des Skripts überschaubar ist und sich daraus die jeweiligen Methoden ablesen lassen.