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.

201521Jan

JavaScript: Nützliche Einführungen und Tipps für ES6

Die Spezifikationen der sechsten Edition von JavaScript (ECMA-262) wurden im Dezember 2014 aktualisiert und der Webstandard rückt der Fertigstellung ein Stück näher. Im Node.js-Bereich wird ES6 durch io.js noch mehr Beliebtheit erlangen und auch Angular 2.0 wird komplett auf ES6 aufgebaut sein. Wer die zukünftigen Funktionen der Skriptsprache nutzen will, kann dazu schon seit geraumer Zeit den Traceur-Compiler verwenden.
Kürzlich wurden einige interessante Artikel und Hilfestellungen veröffentlicht, die verschiedene Bereiche des Standards beleuchten.

Count Up to Version 6 of JavaScript

So handelt es sich beispielsweise bei count-to-6 um ein Node.js-Modul, mit dem eine interaktive Einführung in die Bereiche von ES6 zur Verfügung steht. Weiterhin empfiehlt sich ein Blick in die folgende Beiträge, die in den letzten Wochen entstanden sind:

Viel Spaß beim Ausprobieren!

201519Jan

io.js: Version 1.0.0 des Node.js-Forks mit ES6-Features

Wer mit Node.js arbeitet, wird womöglich schon von io.js gehört haben: Dabei handelt es sich um einen Fork der Node.js-Plattform, der im Juli 2014 begonnen wurde und seit einigen Tagen in der Version 1.0.0 bereitsteht. Der io.js-Code basiert auf Semver, wodurch sich die Versionsnummer in Form von "MAJOR.MINOR.PATCH" zusammensetzt. Der Blog-Beitrag der Entwickler gibt Aufschluss über die Details. Der Node.js-Fork erlaubt die Verwendung von ES6-Features, ohne dass explizit das --harmony-Flag gesetzt werden muss.

io.js - JavaScript I/O

Zu den ES6-Funktionen, die ohne Flags genutzt werden können, zählen also unter Anderem Block Scoping, Collections (Map, WeakMap, Set, WeakSet), Generators, Promises, Symbole, Template-Strings sowie neue String-Methoden. Welche Version der V8-Engine benutzt wird, kann über den Befehl

  • iojs -p process.versions.v8

abgerufen werden. Die Entwickler rufen dazu auf, Module mit io.js zu testen und eventuelle Bugs bei GitHub einzutragen. Das io.js-Projekt versteht sich als Weiterentwicklung von Node.js und auf lange Sicht sollen io.js und Node.js zusammengeführt werden.

201416Nov

Update: Englische Version der Website geht online

Heute ist es endlich soweit: Obwohl Design und Programmierung schon seit längerer Zeit fertiggestellt sind, hat die englische Version der Website noch etwas auf sich warten lassen. Zuvor mussten noch andere Projekte beendet werden, die jetzt zeitgleich veröffentlicht werden. Es handelt sich dabei um zwei weitere Ressourcen für Webentwickler, die aus unterschiedlichen Bereichen stammen. Ersteres stellt ein Starter-Kit für 3D-WebGL-Spiele dar, die auf THREE.js und Cannon.js basieren. Das Micro-Framework trägt den Namen THREE.BasicThirdPersonGame und ist ab sofort bei GitHub verfügbar. Weiterhin habe ich das Skript CustomScrollbar.js entwickelt, mit dem sich per CSS eigene Stile für Scrollbars auf Websites festlegen lassen. Das Skript kommt bei der englischen Version der Website sowie auf der Seite von THREE.BasicThirdPersonGame bereits zum Einsatz. Zu den beiden Projekten werden morgen noch eigene Artikel folgen.

MatthiasSchuetz.com - Englische Version der Website geht online

Ab sofort steht auch mein 3D-WebGL-Spiel Platforms zur Verfügung, das zusammen mit THREE.BasicThirdPersonGame entwickelt wurde und auf dem Micro-Framework basiert. Eine öffentliche Highscore-Funktion steht noch aus, ist aber in Planung.
Die englischsprachige Website ist ab sofort über einen Schalter oben rechts erreichbar und dort werden sich lediglich eigene Artikel und Anleitungen rund um JavaScript, HTML5 und AngularJS finden. Diese Seite wird weiterhin allgemeine Neuigkeiten aus der Welt der Webentwicklung enthalten.

Tags: