Coding the Art: bagaimana kita menghasilkan grafik dan animasi dalam proyek desain

Di JetBrains, kami senang bereksperimen. Hasil percobaan kami tidak selalu dipublikasikan, tetapi kami siap berbagi sesuatu dengan Anda sekarang.

Proyek baru kami dimulai dengan keinginan untuk mengotomatisasi proses desain. Untuk setiap rilis produk, perancang perlu menyiapkan sejumlah besar materi pemasaran. Pada saat yang sama, itu sama sekali tidak cukup hanya dengan melipatgandakan grafik pada media yang berbeda, Anda harus dapat membuat variasi yang masuk akal dan dibenarkan secara estetika di setiap salinan.

Gagasan menghasilkan grafik untuk keperluan seperti itu bukanlah hal baru, penting bagi perancang untuk memiliki kontrol yang mendalam dan tepat atas gambar agar dapat dengan cepat bervariasi dan menggunakan konfigurasi visual baru tanpa penulisan ulang yang signifikan dari struktur pembangkit dan penjebakan kesalahan yang tak berkesudahan pada berbagai tahap siklus hidup kode.
gambar

Dalam mencari solusi untuk masalah ini, programmer bergabung dengan desainer, dan kami mendapatkan generator grafis yang kami tunjukkan tahun lalu . Generator dibuat tidak hanya untuk hiburan: kami menggunakannya untuk membuat splash screen, spanduk, cetakan pada T-shirt dan perada lainnya. Generator awal hanya mampu gambar statis, node yang dimainkan oleh perpustakaan RPD memainkan peran antarmuka kontrol.

Tahun ini, kami sangat membutuhkan animasi untuk video, screensaver dan spanduk interaktif. Untuk animasi di web, JavaScript yang kami gunakan terakhir kali juga cenderung rawan kesalahan, dan kami memilih Elm, yang mengkompilasi ke dalam JS yang sangat cepat.

Elm adalah bahasa fungsional paling sederhana dan ramah dari keluarga ML dengan pengetikan statis, yang memungkinkan untuk menulis kode yang dijamin-bekerja dan menggambarkan struktur tipe dari kompleksitas yang meningkat. Sejak awal, Elm telah menargetkan grafis web, dan di antara paket yang ditawarkan dalam versi pertama bahasa adalah elm-collage yang indah , dan sedikit kemudian paket elm-webgl muncul, memberikan pengguna tidak hanya pembungkus minimalis di sekitar WebGL API, tetapi juga kontrol lebih dari jenis Seragam / Atribut / Variabel dalam shader.

code2art.jetbrains.com - di sini Anda dapat memulai generator dan, setelah menemukan drive desain, pindahkan pengaturan. Anda dapat membungkus bingkai yang Anda suka di .png atau mengunduh animasi sebagai halaman HTML5 dengan sumber daya yang diperlukan.

Kami tidak bertanggung jawab atas waktu yang Anda habiskan tanpa henti menekan tombol "Saya merasa beruntung". Jika Anda suka visual "perjalanan", maka ini adalah tempat yang bagus untuk menggantung untuk waktu yang lama.

Di antara hal-hal lain, kami sekali lagi membiarkan diri kami bereksperimen dengan antarmuka dalam bahasa yang murni fungsional dan, sebagai alternatif, kami menawarkan Anda antarmuka ala TRON: code2art.jetbrains.com/#tron
gambar

Penulis generator akan menjelaskan detail teknis yang lebih dalam dalam sebuah laporan pada konferensi f di Minsk pada 26 Januari.

Kode sumber generator dapat ditemukan di sini: github.com/JetBrains/elmsfeuer .

Tim JetBrains Anda
Dorongan untuk berkembang

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


All Articles