Psychedelic Graphics 0: Pengantar

Psychedelic Graphics 0: Pengantar

• Seri ini memperkenalkan cara membuat visual psychedelic untuk animasi dan game. Materinya disusun agar tetap mudah dipahami meskipun tidak memiliki pengetahuan awal tentang grafis atau pemrograman. Pengetahuan dasar tentang trigonometri dan pemrograman akan membantu.
• Melalui seri ini, diharapkan pembaca dapat memahami dasar-dasar grafis psychedelic yang digunakan dalam video. Sebagian besar video dibuat menggunakan Blender, tetapi teknik yang diajarkan dalam seri ini mudah dipindahkan ke alat lain, dan nantinya Blender akan dibahas lebih mendalam.

Apa itu UV?

Model 3D

• Grafis komputer sering terlihat seperti 3D, tetapi saat menulis kode grafis kita sering perlu berpikir dalam 2D. Jika Anda telah membuat bentuk yang indah di program pemodelan 3D, sebenarnya yang dibuat adalah titik-titik yang melayang di ruang (vertex), lalu beberapa di antaranya dihubungkan untuk membentuk bentuk padat (face).
• Sebagian besar model 3D itu kosong, dan kita hanya dapat melihat permukaannya. Cara standar untuk memberi warna pada model 3D adalah UV mapping/texturing. Sama seperti proyeksi 2D bumi yang terlihat sedikit meregang dan terkompresi, warna pada model 3D juga akan tampak serupa saat diproyeksikan ke 2D.

Texture Painting

• Saat texture dicat, hasilnya akan muncul pada model 3D. Sebagian besar software memungkinkan pengguna melukis langsung pada model 3D untuk mewarnai image texture.

Koordinat UV

• UV dapat dipahami sebagai posisi, yaitu koordinat 2D. Koordinat UV didefinisikan menggunakan ruang dari (0, 0) hingga (1, 1). UV map adalah data yang menghubungkan image texture berwarna dengan face pada model 3D.

Cara kerja kode grafis

Warna dalam grafis

• Warna grafis komputer sering dinyatakan sebagai RGB. Dengan mencampurkan merah, hijau, dan biru, hampir semua warna yang dapat dikenali manusia bisa dibuat. Dalam grafis komputer, jumlah merah, hijau, dan biru biasanya berada dalam rentang 0.0 hingga 1.0.

Warna dari UV

• Koordinat UV diubah menjadi warna untuk membantu visualisasi dan pemecahan masalah. Nilai pertama UV (nilai X) digunakan sebagai merah, dan nilai kedua (nilai Y) digunakan sebagai hijau.

Floating point dan vektor vec2, vec3

• float adalah angka desimal tunggal. vec berarti vektor; vec2 terdiri dari dua angka desimal, dan vec3 terdiri dari tiga angka desimal.

Struktur program grafis

• Grafis harus diproses dengan cara yang terdistribusi. Kodenya tidak dijalankan sekali untuk menghasilkan semua warna, melainkan dijalankan jutaan kali untuk setiap bagian kecil di layar. Jika Anda punya pengalaman pemrograman, ini adalah cara berpikir yang sangat berbeda.

• Kini Anda siap memulai Bagian 1. Di Bagian 1, Anda akan melihat cara membuat visual yang menarik meskipun ada berbagai batasan ini.

[GN⁺]

Komentar Hacker News

• David Tristram adalah anggota pendiri Raster Masters, grup pertunjukan grafis komputer pada 1990-an, dan membuat citra sintetis yang diselaraskan dengan musik live dari Grateful Dead, Herbie Hancock, Graham Nash, dan lainnya menggunakan workstation Silicon Graphics

  • Saat ini ia terutama bekerja di lingkungan pemrosesan video 2D dengan Resolume Avenue dan TouchDesigner
  • Hydra adalah lingkungan live-coding berbasis JavaScript yang keren untuk bereksperimen dengan grafis psikedelik tanpa harus masuk ke level rendah

• Di masa lalu, ia meneliti cara memodifikasi koordinat tekstur UV, dan sekarang menggunakan fragment shader seperti ShaderToy

  • Proses menggeser koordinat tekstur mengikuti flow field terasa menarik
  • Ada juga cara sederhana untuk menerapkan gaya "pemulihan" agar koordinat kembali ke posisi semula
  • Dengan menggabungkan umpan balik dan efek displacement, ia menciptakan gerakan seperti aliran fluida

• Menulis shader untuk memproses gambar di HTML itu menyenangkan karena mudah dilakukan

  • Bahkan hanya dengan pendekatan sederhana terhadap depth map pun bisa menghasilkan hasil yang menarik
  • Ia pernah mengerjakan proyek yang menggunakan WebGL untuk memperhalus crossfade antar gambar

• Ia sangat tertarik untuk mereproduksi pengalaman psikedelik secara visual

  • Artikel Rolling Hills menjelaskan cara mereproduksi halusinasi visual
  • Ada seniman yang sangat baik dalam mewujudkan visual psikedelik dengan teknologi modern

• Pada awal 1990-an, Todd Rundgren mengembangkan aplikasi Mac bernama Flowfazer, yang membantu pengguna mendapatkan inspirasi untuk berkarya

• Pertunjukan Tipper dan Fractaled Visions merupakan salah satu penggambaran visual psikedelik yang paling akurat

  • Visual dari Fractaled Vision begitu kompleks dan kaya hingga terasa menakjubkan

• Saat menulis shader WebGL, ia berusaha menerapkan efek kamera fisik

  • Ini membantu meningkatkan pemahaman tentang grafis, matematika, GPU, memori, CPU, animasi, dan pengolahan waktu

• Penelitian Jim Crutchfield tentang sistem video feedback menyediakan sistem eksperimental yang berguna untuk mempelajari dinamika spasial dan temporal yang kompleks