Klicken oder berühren Sie die schwarze Fläche, um neue weiße Punkte hinzuzufügen. JavaZ zeichnet sofort die glatteste Kurve durch all diese Punkte!! [1] |
Play/Pause |
Reset |
- JavaZ
- JavaZ ist eine browserbasierte Zeichenapp, die grapfische Webtechnologien nutzt. JavaZ zeichnet dynamische Bilder und interaktive Illustrationen, die in Webseiten eingebettet werden können.
\ˈdʒɑ.vəz\
Das JavaZ Projekt
Wie der Künstler mit Pinsel und Öl auf eine Leinwand malt, zeichnet der Webdesigner mit Code in HTML-Seiten [2]. Möglich wurde dies durch die Grafiktechnologien moderner Browser. Der Code bietet ihm die Möglichkeit, seine eigenen kreativen Werkzeuge zu erstellen. Der Hauptzweck von JavaZ besteht darin, diese cleveren und genialen browserbasierten Grafikfunktionen zu nutzen.
Wie in der obigen Abbildung im Ansatz gezeigt, ist die aus dem JavaZ Projekt resultierende Zeichenapp:
interaktiv | selbstanimiert | ||
responsiv | offen für Opendatas |
Ein JavaZ-Bild sagt mehr als tausend Worte
JavaZ ist objektorientiert, sein Code verwendet JS-Objekte, um Erstellungstools zu erstellen. Die JavaZ-Architektur wird durch die Auswahl der richtigen Objekte und die Organisation der Interaktion zwischen ihnen bestimmt.
Diese Website hat einen speziellen Abschnitt, um Schritt für Schritt die Erstellungstools von JavaZ zu veranschaulichen [3]:
Erstellungstool | ||
Zeichnen mit Schwerkraft | massPoint | |
Halten & Pendeln * | massPoint | |
Anschub geben * | massPoint | |
Dynamische Maskierung * | massPoint | |
Geometrisches Zeichnen | -----mathPoint -------------- | |
Technisches Zeichnen | /\/\/\/\/\/junction /\/\/\/\/\/ | |
Dynamischer Rahmen | environment | |
Schwingen | engine | |
Dynamische Bildsynthese |
render | |
* Erscheint in Kürze |
JavaZ kann diese Erstellungstools
kombinieren, um individuelle Grafiken zu generieren.
Browser sind Zeichenmaschinen
In modernen Webseiten kann ein zeichenbarer Bereich über das HTML5-Element <canvas>
(Leinwand) deklariert werden. Dieser Bereich wird von HTML5, der neuesten HTML-Version, bereitgestellt. Das HTML5 <canvas>
Element ist eine API [4], eine Programmierschnittstelle. Es kann nur über eine Skriptsprache voller Zeichenfunktionen aufgerufen werden: Javascript.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
JavaScript (JS) ist die drittbeliebteste Programmiersprache und wurde ursprünglich entwickelt, um „Webseiten lebendig zu machen“. JS-Programme werden scripts (Skripte) genannt. Sie können direkt in den HTML-Code einer Webseite geschrieben und beim Laden der Seite automatisch ausgeführt werden.
JavaZ genießt, wie jede HTML5-Canvas-Anwendung, eine allgegenwärtige Browser- und Plattformunterstützung zusätzlich zur weit verbreiteten Unterstützung von Webseiten, da fast 90 % der Websites auf HTML5 aktualisiert wurden [5].
Was ist unter der Haube?
JavaZ erbt die Spezifikationen von Javascript und dem HTML5-Canvas-Element:
Vielseitig und einsteigerfreundlich. Javascript ist die weltweit beliebteste Skriptsprache für Front-End-Webentwickler. | Open source. JavaZ verwendet ausschließlich kostenlose Basisressourcen und arbeitet systemfrei und mobilfreundlich. | ||
Allgegenwärtig. JavaZ kann seine Grafiken in jedem Browser bearbeiten, ohne spezielles proprietäres Softwareprogramm. | Vektorbasiert. Egal wie groß, JavaZ-Grafiken sehen immer schön und knackig aus, da die Algorithmen die Formen im Bild permanent neu berechnen und mit zunehmender Größe skalieren. |
JavaZ implementiert darüber hinaus folgende spezifische Funktionen:
Javaz ist interaktiv und selbstanimiert. JavaZ verfügt über eine eingebaute Animationsschleife und eignet sich gut für die interaktive Nutzung und physikalisch basierte Modellierung. | Wie jede moderne Zeichenapp verwendet JavaZ Multi-Layered-Rendering. | ||
JavaZ verwendet JSON, ein Textformat zum Speichern und Senden von Daten über ein Netzwerk. JSON ist selbstbeschreibend und leicht verständlich. JSON-Daten können problemlos zwischen Computern gesendet und von jeder Programmiersprache verwendet werden. | JavaZ kann einfache geometrische Formen zeichnen, wie sie von der grundlegenden Canvas-API bereitgestellt werden, aber auch Kurven und komplexe Formen erstellen. Es kann zum Beispiel Kurven durch Punkte anpassen. | ||
JavaZ ist reines JS. Das bedeutet, es ist frei von JS-Bibliotheken, jQuery-frei und nicht modular, um mit älteren Browsern kompatibel zu bleiben. | JavaZ ist vollständig web responsive, um verschiedenen Bildschirmbreiten und Auflösungen gerecht zu werden. |
Dennoch:
JavaZ ist kein „leicht zu implementierendes“ Framework und kann nicht wirklich als Bibliothek betrachtet werden, vor allem, weil es keine bereits konsistente und saubere Programmierschnittstelle hat. | |
Canvas-Logik und Rendering erfolgen im selben Thread wie die Benutzerinteraktion. Die (manchmal schweren) Berechnungen bei Animationen können die tatsächliche und wahrgenommene Leistung der App beeinträchtigen. |
JavaZ, eine App für « CODesigner » or « JAVArtist »
Don’t design and code, make code to new design.
Die häufigsten und beliebtesten Bilder, die von Designern oder Illustratoren im Internet veröffentlicht werden, sind Rastergrafiken. Diese Grafiken, die am besten zum Erstellen von Fotos verwendet werden, werden als zweidimensionales Raster aus farbigen, quadratischen Pixeln in Rastergrafikformaten gespeichert: JPEG, GIF, PNG. Sie sind nicht interaktiv, nur ansatzweise selbstanimiert.
Eine viel weniger beliebte Alternative bietet mehr Vielseitigkeit: Skriptgrafiken oder Vektorgrafiken. Diese bestehen nicht aus einer bestimmten Anzahl von Punkten. Bilder werden als ein Satz geometrischer Formen (z.B. Punkte, Linien, Kurven und Polygone) und Anweisungen gespeichert [6]. Ein Skriptdesign ist digitale Kunst, die von einem Computer mithilfe einer mathematischen Formel dargestellt wird.
Im HTML5-Element <canvas>
nutzt Vektorgrafiken und die enorme Vielseitigkeit von JavaScript und ermöglicht interaktive und dynamisch generierte Grafiken, Graphen, Animationen, Spiele und Bildkompositionen.
Jeder Illustrator, Zeichner, Cartoonist oder Designer, der sich mit dem Programmieren auskennt, kann diese Webtechnologien nutzen. Mit Code und Skripten kann er seiner Grafik neue Dimensionen hinzufügen, wie Physiksimulation, feine reaktive Animation, Interaktivität mit Betrachtern, Webseiten oder Open Data… Es ist nicht nur Zeichnen, es ist auch Design-Engineering.
Das obige Beispiel zeigt, wie eine selbstanimierte Grafik auf direkte Berührungs- oder Mauseingaben des Betrachters oder Tasteneingaben innerhalb der Webseite reagieren kann. Es passt sich an, um die glatteste Kurve durch aufeinanderfolgende gezeichnete Punkte zu berechnen. Auch wenn die Größe im Handumdrehen geändert wird, bleibt die Grafik scharf und ordentlich.
Ein CODesigner lässt aus seinen beiden Standbeinen Code und Grafik eine neue, übergreifende Doppelkompetenz erwachsen: Das Finden neuer grafischer Anwendungen von mathematisch basierten Webtechnologien. Ein einfaches Beispiel ist die Konstruktion einer Kurve mittels „Spline-Interpolation“: Diese Methode kann personalisiert werden, um eigene Kurven in Form von Wolken, geschweiften Klammern, Zöpfen ... zu kreieren. Das Ergebnis sind neue, vielfältige und komplexe Formen.
Aus der Sicht des CODesigners ist ganz klar, dass die Popularisierung der Werkzeuge durch die teilweise monopolistische Situation proprietärer, aber unvermeidlicher Anwendungen im Bereich des Grafikdesigns sowohl zu einer gewissen mathematischen Schlichtheit als auch zu einer Standardisierung gestalterischer Methoden geführt hat. Die Arbeit als CODesigner macht es möglich, sich von diesem Rahmen zu befreien und neue grafische Horizonte zu entdecken.
Abstrakte Ideen, rein mathematische Konzepte, Formen, Farben und Zeit gehören zu den Zutaten, mit denen ein CODEsigner arbeitet. Design bedeutet, Beziehungen zwischen diesen Zutaten zu entdecken und immer wieder zu variieren.
Kann ich einen JavaZ-Canvas in meine Website einbetten?
Ja,
Jedes Mal, wenn der Canvas verfügbar ist, wird ein HTML-Code mit dem script-Tag veröffentlicht.
- Kopieren Sie den entsprechenden HTML-Code mit dem
<script>
Element. - Fügen Sie das Element
<script>
am unteren Rand Ihrer HTML-Datei ein, beispielsweise am Ende des body-Elements.
Standardmäßig wird der Canvas dann als erstes untergeordnetes Element direkt in das body-Element eingefügt, es sei denn, Sie haben über ein <div id="javaz"></div>
hinzugefügt, wo der Canvas eingebettet sein soll.
<!DOCTYPE html>
<html>
<head></head>
<body>
/*
your HTML code
*/
<div id="javaz"></div>
/*
your HTML code
*/
<script type="text/javascript" src="https://javaz.graphics/squelettes/js/javaz.js?jsonSrc=squelettes/json/json_autoCurve.txt;renderSrc=squelettes/render/render_autoCurve.js;CrossOrigin=true" defer>
</body>
</html>
Der JavaZ-Canvas ist responsiv, d.h., er passt sich dem im DOM verbleibenden Raum an.
Just one more thing…
Beim Programmieren von JavaZ war ich überrascht, dass ich unterwegs auf eine Reihe französischer Mathematiker gestoßen bin:
- Loup Verlet und seine Verlet-Integration für stabile Animationen
- Pierre Béziers und die Bezier-Kurven. Diese parametrische Kurve ist für die Computergrafik von wesentlicher Bedeutung. Pierre Béziers verwendete sie in den 1960er Jahren, um Kurven für die Karosserie von Renault-Fahrzeugen zu entwerfen.
- Jean-Baptiste Joseph Fourier und seine Fourier-Transformation…
Ohne diese Franzosen wäre es einfach unmöglich gewesen… « Tous mes respects et merci! ».
Was kommt als nächstes?
Zukünftige JavaZ-Projekte:
-
massPoint
Partikelkollision. - mit
arc.tan()
auf den Mauszeiger zeigen - Bewegungspfad-Animation (Animieren eines Elements relativ zu den x-, y- und Winkelwerten eines Kurven-/Pfad-Elements).
- Strichzeichnungsanimation mit der Eigenschaft ’stroke-dashoffset’.
- Strichzeichnung mit Fourier-Transformationen
- SVG-Parsing-Funktionen
… und viele andere mathematische Wunder!
Aber schon jetzt gilt:
Goodbye JPEG! Au revoir GIF! Aufwiedersehen PNG!
[1] In dieser Abbildung sind auch andere Javaz-Funktionen verfügbar, aber Sie können sie selbst herausfinden.
[2] HTML steht fürHypertext Markup Language, ist das Dokumentformat, das für Webseiten verwendet wird.
[3] Technische mathematische Erklärungen und Begriffe sind auf ein Minimum beschränkt, wenn nicht sogar entscheidend für das Verständnis des Themas.
[4] Eine API ist ein Satz von Funktionen und Regeln, die innerhalb eines Softwareprogramms (der Anwendung) vorhanden sind und die Interaktion damit über Software ermöglichen – im Gegensatz zu einer menschlichen Benutzeroberfläche. Die API kann als einfacher Vertrag (die Schnittstelle) zwischen der sie anbietenden Anwendung und anderen Gegenständen wie Software oder Hardware von Drittanbietern angesehen werden.
[5] Auf HTML5 Canvas kann von Desktops , Tablets und Smartphones aus zugegriffen werden.
[6] Skriptgrafiken sind ideal für Logos. Eine typische Skript- oder Vektordatei ist ein druckbarer Text, der sowohl gerade als auch gekrümmte Pfade beschreibt.