Coding the Art: Wie wir Grafiken und Animationen in Designprojekten generieren

Bei JetBrains experimentieren wir gerne. Die Ergebnisse unserer Experimente werden nicht immer veröffentlicht, aber wir sind bereit, Ihnen jetzt etwas mitzuteilen.

Unser neues Projekt begann mit dem Wunsch, Designprozesse zu automatisieren. Für jede Veröffentlichung des Produkts muss der Designer eine große Anzahl von Marketingmaterialien vorbereiten. Gleichzeitig ist es völlig unzureichend, die Grafiken einfach auf verschiedenen Medien zu multiplizieren. Sie müssen in der Lage sein, in jeder Kopie eine vernünftige und ästhetisch gerechtfertigte Auswahl zu treffen.

Die Idee, Grafiken für solche Zwecke zu generieren, ist nicht neu. Für den Designer ist es wichtig, eine tiefe und präzise Kontrolle über das Bild zu haben, um schnell zu variieren und neue visuelle Konfigurationen bereitzustellen, ohne die generierende Struktur neu zu schreiben und Fehler in verschiedenen Phasen des Codelebenszyklus endlos einzufangen.
Bild

Auf der Suche nach einer Lösung für dieses Problem hat sich der Programmierer mit dem Designer zusammengetan und wir haben den Grafikgenerator erhalten, den wir letztes Jahr demonstriert haben. Der Generator wurde nicht nur zur Unterhaltung entwickelt: Wir haben damit Begrüßungsbildschirme, Banner, Drucke auf T-Shirts und anderes Lametta erstellt. Der anfängliche Generator konnte nur statische Bilder aufnehmen, die von der RPD-Bibliothek gespielten Knoten spielten die Rolle der Steuerschnittstelle.

In diesem Jahr brauchten wir dringend Animationen für Videos, Bildschirmschoner und interaktive Banner. Für die Animation im Web schien das JavaScript, das wir das letzte Mal verwendet haben, ebenfalls zu fehleranfällig zu sein, und wir haben Elm ausgewählt, das sich zu sehr schnellem JS kompilieren lässt.

Elm ist die einfachste und freundlichste funktionale Sprache aus der ML-Familie mit statischer Typisierung, die es ermöglicht, garantiert funktionierenden Code zu schreiben und Typstrukturen mit erhöhter Komplexität zu beschreiben. Seit seiner Gründung hat Elm Webgrafiken ins Visier genommen. Unter den Paketen, die in den ersten Versionen der Sprache angeboten wurden, befand sich eine wunderschöne Elm-Collage . Etwas später erschien das Elm-Webgl- Paket, das dem Benutzer nicht nur einen minimalistischen Wrapper um die WebGL-API bietet, sondern auch Kontrolle über Arten von Uniformen / Attributen / Variablen in Shadern.

code2art.jetbrains.com - Hier können Sie den Generator starten und die Einstellungen verschieben, nachdem Sie das Design-Laufwerk entdeckt haben. Sie können den gewünschten Frame in .png umschließen oder die Animation als HTML5-Seite mit den erforderlichen Ressourcen herunterladen.

Wir sind nicht verantwortlich für Ihre Zeit, die Sie ununterbrochen damit verbringen, den Knopf „Ich fühle mich glücklich“ zu drücken. Wenn Sie visuelle „Ausflüge“ mögen, dann ist dies ein guter Ort, um lange Zeit zu hängen.

Unter anderem haben wir uns wieder erlaubt, mit einer Schnittstelle in einer rein funktionalen Sprache zu experimentieren und bieten Ihnen alternativ eine Schnittstelle a la TRON an: code2art.jetbrains.com/#tron
Bild

Die Autoren des Generators werden in einem Bericht auf der f (by) -Konferenz in Minsk am 26. Januar tiefere technische Details beschreiben.

Den Quellcode des Generators finden Sie hier: github.com/JetBrains/elmsfeuer .

Ihr JetBrains-Team
Der Antrieb zur Entwicklung

Source: https://habr.com/ru/post/de434796/


All Articles