アートのコーディング:デザインプロジェクトでグラフィックスとアニメーションを生成する方法

JetBrainsでは、実験が大好きです。 実験の結果は常に公開されているわけではありませんが、すぐに何かを共有する準備ができています。



新しいプロジェクトは、設計プロセスを自動化することから始まりました。 製品のリリースごとに、デザイナーは多数のマーケティング資料を準備する必要があります。 同時に、異なるメディアのグラフィックスを単純に増やすだけでは完全に不十分であり、各コピーで合理的で審美的に正当化された多様性を作成できる必要があります。



そのような目的のためにグラフィックスを生成するという考えは新しいものではありません。設計者は、生成構造を大幅に書き換えたり、コードライフサイクルのさまざまな段階でエラーを無限にトラップしたりすることなく、新しい視覚的な構成をすばやく変更して展開するために、画像を深く正確に制御することが重要です。

画像



この問題の解決策を模索する中で、プログラマーとデザイナーが組み合わさり、 昨年実証したグラフィックジェネレーターを入手しました。 ジェネレーターは、娯楽用だけでなく、スプラッシュスクリーン、バナー、Tシャツなどの見掛け倒しのプリントの作成にも使用しました。 初期のジェネレーターは静的な画像のみに対応しており、RPDライブラリーによって再生されるノードは制御インターフェースの役割を果たしました。



今年、私たちはビデオ、スクリーンセーバー、インタラクティブバナーのアニメーションを緊急に必要としていました。 Web上のアニメーションでは、前回使用したJavaScriptもエラーが発生しやすいように思われたため、非常に高速なJSにコンパイルされるElmを選択しました。



Elmは、静的型付けを使用したMLファミリの最も単純で使いやすい関数型言語であり、動作保証付きのコードを記述し、複雑さが増した型構造を記述することができます。 Elmは当初からWebグラフィックを対象としており、言語の最初のバージョンで提供されていたパッケージの中には美しいelm-collageがあり、少し後にelm-webglパッケージが登場し、ユーザーにWebGL APIの最小限のラッパーだけでなくコントロールも提供しましたシェーダーのユニフォーム/属性/変数のタイプ。



code2art.jetbrains.com-ここで、ジェネレーターを起動し、設計ドライブを発見したら、設定を移動できます。 好きなフレームを.pngでラップするか、必要なリソースを含むHTML5ページとしてアニメーションをダウンロードできます。



「幸運を感じる」ボタンを絶え間なく押すことにあなたが費やした時間については責任を負いません。 視覚的な「旅行」が好きなら、これは長い間掛けるのに適した場所です。



とりわけ、純粋に関数型の言語でインターフェイスを試すことができました。また、代わりに、TRONに近いインターフェイスを提供しています: code2art.jetbrains.com/#tron

画像



ジェネレータの作成者は、1月26日にミンスクで開催れたf(by)会議のレポートで、より詳細な技術的詳細を説明します。



ジェネレーターのソースコードは、 github.com / JetBrains / elmsfeuerにあります。



JetBrainsチーム

開発への意欲



All Articles