Cara membuat animasi 3Blue1Brown [Video]

 (youtube.com)
2 poin oleh GN⁺ 2024-10-13 | 1 komentar | Bagikan ke WhatsApp
  • Visualisasi 3Blue1Brown dikodekan dengan library Python Manim yang dibuat oleh Grant Sanderson, dan videonya mengikuti alur produksi nyata bersama Ben Sparks
  • Manim terbagi antara lingkungan produksi pribadi Grant dan Manim Community yang diperkuat dalam dokumentasi, pengujian, dan penanganan issue; untuk pemula, versi komunitas biasanya lebih cocok
  • Pengerjaan ini mirip alur menghubungkan Sublime Text dan terminal Python untuk langsung menjalankan potongan kode, lalu memakai checkpoint paste untuk menyimpan status tengah dan bereksperimen berulang kali
  • Demonya menghitung Lorenz attractor dengan SciPy, lalu menggabungkan kurva, titik, updater, kamera 3D, dan efek jejak untuk menunjukkan proses kondisi awal yang berdekatan saling menyimpang
  • Adegan akhir dirender ke MP4 setelah pre-run untuk memeriksa error dan durasi, lalu dimasukkan ke alat editing untuk melanjutkan proses pembuatan video YouTube

Titik awal Manim dan dua cabang versinya

  • Alat inti animasi 3Blue1Brown adalah library Python Manim yang dibuat langsung oleh Grant Sanderson
  • Manim menyusun semua adegan secara terprogram, dan berkembang sebagai alat khusus yang disesuaikan dengan cara produksi 3Blue1Brown
  • Menjelang akhir masa kuliahnya, Grant membuat kode Python untuk memvisualisasikan fungsi matematika dengan lebih baik sebagai transformasi, dan kode ini dimulai bersama video pertama kanal tersebut
  • Seiring bertambahnya video, alatnya ikut membaik, dan alat yang membaik itu kembali memungkinkan video yang lebih kompleks
  • Efek visual pada video hologram terbaru akan jauh lebih sulit jika dikerjakan 2–3 tahun lalu, tetapi berkat perbaikan workflow selama beberapa tahun, tingkat kesulitan produksinya menurun

Manim Community dan versi pribadi Grant

  • Grant telah membuka kode yang dipakai dalam videonya dan Manim itu sendiri di GitHub
  • Namun, karena produksi video dan pengelolaan open source berjalan bersamaan, penanganan issue dan Pull Request tidak bisa dilakukan secara memadai
  • Komunitas mem-fork repositori tersebut untuk membuat alat yang lebih kokoh, dan versi ini adalah Manim Community
    • Penanganan issue dan Pull Request lebih aktif
    • Pengujian dan dokumentasi lebih lengkap
    • Secara umum direkomendasikan bagi orang yang baru mulai
  • Dalam demo video, yang dipakai adalah versi yang benar-benar digunakan Grant sendiri
    • Dalam beberapa tahun terakhir, versi ini ditingkatkan agar lebih interaktif dan bekerja lebih cepat
    • Bagi pengguna yang mengutamakan dokumentasi dan pengujian, versi komunitas lebih cocok

Cara produksi dengan menulis kode dan langsung mengeceknya

  • Setiap adegan di Manim ditulis sebagai class Python, dan kode yang akan dirender masuk ke dalam metode construct
  • Objek seperti lingkaran, persegi, dan teks ditambahkan ke layar, lalu animasi seperti Write dan Transform dijalankan dengan metode play
  • Sebagian besar objek secara default diletakkan di tengah layar, lalu posisinya diubah dengan operasi seperti to_edge dan shift
  • Lingkungan kerja Grant adalah memakai Sublime Text bersama terminal Python
    • Baris kode bisa disalin lalu dijalankan di terminal dan langsung tercermin pada adegan saat ini
    • Shortcut Sublime mengotomatiskan proses menyalin dan menjalankan kode yang dipilih
    • Terminal terhubung ke adegan saat ini sehingga hasil perubahan bisa langsung diperiksa
  • Pada adegan panjang, kemampuan untuk bereksperimen berulang hanya pada bagian tengah tanpa menjalankan seluruh kode setiap kali menjadi sangat penting
    • Contoh video hologram adalah kode Python panjang yang menghasilkan MP4 berdurasi 4 menit 30 detik
    • Adegan panjang berbagi banyak konteks dan variabel lokal, sehingga menyimpannya dalam satu file terasa berguna
    • checkpoint paste menyimpan status adegan pada posisi komentar tertentu, lalu kembali ke status itu dan menjalankan kode yang dipilih
    • Pendekatan ini lebih mirip workflow hibrida antara file teks murni dan Jupyter notebook

Nuansa dasar animasi Manim

  • Salah satu filosofi penting Manim adalah bahwa “apa pun bisa diubah menjadi apa pun”
  • Misalnya, bisa dibuat adegan yang mengubah huruf pertama H dari teks hello world menjadi lingkaran
    • Lingkaran itu tidak perlu langsung ditambahkan ke adegan, cukup didefinisikan sebagai target transformasi
    • Teks adalah kelompok karakter sehingga huruf per huruf bisa diambil dan dimanipulasi
  • Transform secara default memakai rate function yang halus
    • Nilai default-nya adalah smooth, dan terlihat seperti gerakan halus berbasis cubic bezier
    • Jika memakai linear, awal dan akhir gerak terasa lebih kaku
    • Dalam kasus ketika perkembangan waktu matematis harus ditampilkan apa adanya, linear diperlukan
  • Penyesuaian detail seperti ini menciptakan perbedaan antara sekadar “adegan bergerak” dan “adegan yang enak dilihat”
  • Animasi yang familier di video 3Blue1Brown seperti Write juga bisa dipanggil sebagai fungsi bawaan Manim

Demo Lorenz attractor

  • Contoh utama dalam demo adalah Lorenz attractor
    • Ini adalah bentuk yang muncul dari persamaan diferensial tiga dimensi
    • Titik di ruang 3D ditentukan oleh aturan deterministik tentang bagaimana ia berubah seiring waktu
    • Jika kondisi awal diubah menjadi beberapa variasi, akan muncul hasil visual yang menarik
  • Saat membuat bagian perhitungan matematika, Grant meminta ChatGPT menulis fungsi Python
    • Dipakai integrate dari SciPy dan fungsi penyelesai masalah nilai awal
    • Kode yang dihasilkan awalnya mengacu pada rendering Matplotlib, lalu disesuaikan agar cocok untuk Manim
  • Keadaan persamaan Lorenz dinyatakan dengan koordinat x, y, z, dan direpresentasikan sebagai fungsi yang menghitung turunan di setiap saat
  • Hasil solusi numerik keluar sebagai nilai waktu serta nilai x, y, z, dan Grant menambahkan wrapper agar lebih mudah dipakai
    • Bentuk representasi dari SciPy agak membingungkan karena memperlakukan y seperti output
    • Array keadaan dan bentuk transposenya disesuaikan ke format yang lebih nyaman untuk dipakai
  • Ketika kondisi awal diatur ke (0, 0, 0), semua nilai menjadi 0 sehingga tidak cocok; setelah satu koordinat diubah menjadi 10, muncullah titik-titik yang menarik
  • Di Manim, set_points_as_corners dipakai untuk mengubah titik-titik hasil perhitungan menjadi kurva
  • Untuk mengubah koordinat sumbu ke sistem koordinat Manim, dipakai c2p, singkatan dari coords_to_point
  • Sintaks * di Python dipakai untuk membongkar iterable menjadi argumen fungsi
    • Pada contoh, daftar koordinat x, y, z dipisahkan lalu diteruskan ke fungsi

Adegan kondisi awal yang berdekatan lalu menyimpang

  • Inti visualisasi Lorenz attractor adalah kondisi-kondisi awal yang sangat berdekatan mula-mula bergerak mirip, lalu kemudian menyimpang
  • Grant membuat daftar kondisi awal dan menetapkan koordinat z berbeda sebesar epsilon kecil
    • Awalnya dimulai dengan 2 kondisi
    • Setelah itu diperluas menjadi 10 kondisi
  • VGroup dipakai untuk menampung beberapa kurva
    • Dengan memberi tahu bahwa ini adalah grup objek tervectorisasi, rendering bisa dibuat lebih cepat
  • Pada titik ujung tiap kurva dipasang glow dot
    • GlowDot adalah objek yang dibuat agar titik bergerak terlihat lebih menarik secara visual
    • Setiap titik dipasangi updater agar berpindah ke ujung kurva pada setiap frame
  • zip dipakai saat menelusuri daftar yang saling berpasangan secara paralel, seperti titik dan kurva, atau state dan warna
    • Jika panjang dua daftar berbeda, iterasi berhenti saat daftar yang lebih pendek habis
    • color_gradient dipakai untuk membuat jumlah warna yang sama dengan jumlah state agar panjangnya cocok
  • Saat menggambar kurva dengan ShowCreation, smoothing default bisa mendistorsikan perkembangan waktu yang sebenarnya, jadi untuk bagian yang ingin menunjukkan dinamika apa adanya dipakai linear rate function
  • Kondisi awal yang berdekatan hampir bergerak bersama pada awalnya, tetapi seiring waktu menyebar hingga tampak berada di posisi yang sepenuhnya berbeda
  • Lorenz attractor diperlakukan sebagai strange attractor yang tertarik ke bentuk tertentu alih-alih sekadar titik atau periode, tetapi posisi tepatnya sensitif terhadap kondisi awal

Kode workaround di mode interaktif dan efek adegan

  • Dalam demo muncul kode “terkutuk” seperti globals().update(locals())
  • Ini adalah workaround sementara untuk menghindari masalah di lingkungan embed IPython Manim, tempat fungsi tidak bisa melihat variabel dari scope luar
    • Dalam skrip Python biasa, kode yang sama berjalan normal
    • Di lingkungan interaktif tersemat Manim, bisa muncul NameError
    • Variabel lokal dimasukkan ke dictionary variabel global untuk menghindari masalah itu
  • Untuk kode library sungguhan, cara seperti ini tidak tepat, tetapi dalam sesi interaktif sementara untuk pengembangan adegan risikonya relatif kecil
  • Cara yang lebih baik adalah membuat fungsi menerima variabel yang dibutuhkan secara eksplisit sebagai argumen
  • Untuk membuat kurva menghilang seiring waktu, FadeOut bisa dipakai
    • Jika run_time pada play disesuaikan dengan evolution time, kurva akan perlahan menjadi transparan selama waktu tersebut
  • Efek meninggalkan jejak di belakang titik diimplementasikan dengan TracingTail
    • Bisa membuat ekor yang mengikuti satu titik
    • Jika time_traced dinaikkan dari 1 detik menjadi 3 detik, jejak yang terlihat akan mencakup waktu lebih panjang
    • Jika tiap satu dari 10 titik diberi ekor, penyebaran beberapa lintasan menjadi terlihat jauh lebih jelas

Kamera 3D dan pemrosesan rumus

  • Adegan Manim pada dasarnya bisa memiliki koordinat 3D, tetapi sebagian besar adegan 3Blue1Brown dibuat agar tampak seperti papan tulis 2D demi alasan edukatif
  • Lorenz attractor membutuhkan 3D, jadi sumbu 3D ditambahkan
  • Di layar 3D, efek kamera yang berputar atau bergerak perlahan berguna untuk menjaga kesan kedalaman
    • Grant memakai shortcut yang menyimpan posisi kamera saat ini ke clipboard
    • Kamera dianimasikan ke posisi tertentu dalam bentuk frame.animate.reorient(...)
  • Rumus bisa ditambahkan ke adegan sebagai objek LaTeX
    • Dengan MathPix, persamaan di layar bisa dibaca lewat OCR untuk mendapatkan LaTeX atau SVG
    • Untuk menjaga rumus tetap menempel pada layar di adegan 3D, digunakan fix_in_frame
  • Variabel tertentu dalam rumus LaTeX bisa diberi warna
    • Dalam contoh, x, y, z masing-masing ditetapkan dengan warna berbeda
    • Kemampuan memisahkan teks menjadi komponen matematis untuk ditekankan atau ditransformasikan berguna dalam penjelasan matematika
  • Manim juga memiliki transform khusus yang mencocokkan string
    • Suku seperti A^2 dan B^2 bisa berpindah secara alami ke posisi string yang sama pada baris berikutnya
    • Pencocokan berbasis string juga bisa membuat efek seperti animasi anagram yang memindahkan huruf ke posisi yang bersesuaian
  • Animasi seperti flash around dan indicate bisa dipakai untuk menonjolkan karakter atau suku tertentu dalam rumus

Rendering dan alur produksi nyata

  • Setelah adegan dirasa memuaskan, rendering dilakukan dengan perintah Manim yang menentukan file Python dan nama adegan
  • pre-run adalah tahap meninjau seluruh animasi sebelum benar-benar digunakan
    • Membantu memperkirakan durasi total
    • Berguna untuk menangkap error lebih awal, bukan di tengah proses rendering
  • W adalah opsi untuk menulis ke file, dan opsi terkait Finder dipakai untuk menampilkan file hasil di macOS Finder
  • Hasil akhir dirender sebagai file MP4
    • Grant biasanya merender dalam 4K sehingga bisa memakan waktu lebih lama
    • File hasil render kemudian dimasukkan ke alat editing untuk diedit lebih lanjut
  • Cara lama memakai Manim terutama berupa siklus merender adegan lewat command line lalu memeriksa MP4
  • Setelah muncul workflow berbasis shell interaktif, kurang lebih bersamaan dengan masa perpindahan ke implementasi OpenGL, prosesnya berubah menjadi menyorot kode dan langsung melihat hasilnya
  • Workflow spesifik Grant bergantung pada skrip Sublime Text dan ekstensi Terminus
    • Perilaku serupa bisa ditiru di editor teks lain
    • Lingkungan keluarga Visual Studio juga bisa membuat alur kerja serupa
  • Saat mencari fitur, bisa memanfaatkan contoh adegan, folder animation di library, dan repositori GitHub 3b1b/videos yang berisi kode video lama
  • Grant lebih menyukai autocomplete yang lebih sederhana dibanding Copilot
    • Dalam Manim, sering kali ia sudah tahu perilaku yang diinginkannya
    • Menyatakan permintaan dalam bentuk kode terasa lebih alami baginya daripada dalam bahasa Inggris

Bacaan terkait

1 komentar

 
GN⁺ 2024-10-13
Opini Hacker News

  • 3B1B benar-benar melakukan pekerjaan yang luar biasa
    Secara pribadi, saya sangat terbantu oleh video-video YouTube-nya, dan saya berharap matematika diajarkan seperti ini di SMA atau fakultas teknik

    • Saya juga merasakan hal serupa. Hanya saja, bagi banyak orang, matematika baru benar-benar bisa diapresiasi setelah agak lebih dewasa, dan saat itulah mereka mungkin tertarik ke kanal seperti ini

  • https://sinerider.com/ juga layak dilihat
    Ini gim yang dibuat oleh seorang teman yang kadang membantu pekerjaan 3B1B Grant Sanderson; gim edukasi matematika yang bagus, mirip LineRider dalam membuat lintasan, tetapi dibuat dengan persamaan
    Baik 3B1B maupun SineRider punya pengaruh paling besar terhadap pemahaman intuitif saya tentang komposisi fungsi

  • Adegan saat ia menemukan bug di mesin rendering secara real time dan bahkan menemukan workaround-nya terasa mengesankan
    https://youtu.be/rbu7Zu5X1zI?feature=shared&t=693

    • Dari tampilannya, lebih seperti ia sudah mengetahui keterbatasan logika rendering baru yang sedang dikerjakan di backend, dan juga sudah tahu workaround sederhana di level yang lebih tinggi
      Meski begitu, tetap pekerjaan yang mengesankan
    • Di perusahaan besar, engineer bergaya pembakar-kebakaran-sekaligus-pemadam seperti ini kadang bisa tampak menonjol. Karena mereka memperbaiki bug yang mereka buat sendiri di tempat yang sangat terlihat
    • Ia memang tahu bug itu, tetapi pengembangan software ini bukan pekerjaan utamanya; pekerjaan utamanya adalah membuat video
      Fakta bahwa ia tahu lokasi dan penyebabnya lalu bisa memikirkan workaround secara live berarti ia menginvestasikan waktu untuk memperbaiki alatnya sendiri, dan bukan sesekali saja melainkan secara aktif
      Menurut saya tetap keren

  • Saya penasaran bagaimana REPL interaktif Python di kanan bawah itu bekerja
    Edit: sepertinya ini workflow yang sepenuhnya kustom: https://github.com/3b1b/videos?tab=readme-ov-file#workflow

    • Menurut saya ia salah satu dari sedikit kreator hebat di YouTube yang belum sepenuhnya terkomersialisasi. Saya jadi teringat Mark Rober

  • Lucu juga, setelah bertahun-tahun hanya mendengar suaranya tanpa melihat wajahnya, begitu melihat wajahnya rasanya tiba-tiba masuk tepat ke tengah uncanny valley

    • Cukup banyak kreator yang saya tonton tampaknya belakangan mulai menampilkan wajah mereka. Contoh besar yang langsung teringat adalah presenter Real Engineering
      Dalam beberapa video terbaru, ia bertindak seperti pembawa acara, pewawancara, dan narator
      Rasanya juga agak aneh ketika kreator lain menggantikan beberapa video, seperti di veratasium
      Kalau pengungkapan yang benar-benar besar, mungkin AvE
    • Pidato kelulusannya mungkin akan lebih mengejutkan. Contoh: https://youtu.be/z7GVHB2wiyg
    • Ia mulai menampilkan wajahnya pada 2020 untuk membantu orang menjaga rasa keterhubungan manusiawi selama lockdown
      Saat itu, banyak komentar video membahas nama kanal dan ikonnya, dan memang salah satu matanya benar-benar terlihat seperti itu
    • Dulu ia juga beberapa kali muncul di video Matt Parker dan Brady Haran (Numberphile), jadi agak mengejutkan kalau belum pernah melihatnya
      Meski begitu, bahkan di antara kanal-kanal niche seperti ini pun selera tampaknya cukup terbagi
    • Terutama karena suara narasi biasanya memiliki kualitas audio yang lebih baik daripada suara orang yang direkam secara kasual, perbedaan kecil itu bisa terasa cukup aneh

  • Suaranya benar-benar bagus. Tenang dan nyaman, jadi bisa diputar di samping saat mengerjakan pekerjaan rumah dan tetap belajar sesuatu
    Kreator seperti ini pantas mendapat pengakuan

    • Saya rasa suara seperti itu punya pengaruh besar terhadap keberhasilan. Baik di YouTube maupun podcast
    • Orang ini adalah pendidik alami. Istilah kreator konten saja tidak cukup untuk menangkap nilai sosialnya
    • Untuk selera saya, suaranya terlalu sengau. Entah bagaimana, rasanya itu sedikit mengurangi ketelitian yang ada di dalamnya

  • Video hologram terbarunya termasuk salah satu video YouTube dengan kualitas terbaik yang pernah saya lihat

  • Akan sangat bagus kalau alat ini dipakai untuk membuat video penjelasan tentang algoritma bridging[1]
    Sejak 2016 saya menyukai cara algoritma ini digunakan dalam proses demokrasi partisipatif dengan alat seperti Pol.is, dan saya ingin berkontribusi meningkatkan pemahaman tentang matematika di baliknya
    Kalau saya tahu Manim saat Summer of Math Exposition[2] berlangsung, saya pasti akan ikut terjun
    [1]: https://bridging.systems/
    [2]: https://some.3b1b.co/

    • Saya tidak tahu ada hal seperti ini. Terima kasih untuk tautannya, sekarang saya sedang membaca makalahnya dan kalau ada video penjelasan dibuat, saya pasti ingin menontonnya
      Situs web saya ada di profil, jadi kalau suatu hari membuatnya, tolong kirim tautannya lewat media sosial
    • Saya penasaran matematika apa yang sebenarnya terlibat. Saya mengikuti tautan [1], tetapi hampir tidak menemukan konten matematis
    • Kalau dibuat, sepertinya saya akan menontonnya. Saya penggemar pol.is

  • Tautan Manim: https://github.com/3b1b/manim

  • Saya kagum dengan besarnya jumlah produksi yang masuk ke setiap videonya. Ia memang pantas mendapat YouTube Play Button

    • Itulah juga salah satu sisi mengecewakan YouTube. Untuk membuat video berkualitas tinggi, dibutuhkan usaha yang tidak masuk akal besarnya, beberapa orde magnitudo lebih besar daripada membuat satu tulisan blog yang bagus
      Sama seperti blog, tanpa keberuntungan, sebagian besar usaha itu bisa terbuang. Namun blog setidaknya punya beberapa kesempatan untuk terekspos. Bisa naik ke halaman atas HN, atau menyebar di X maupun tempat lain. Bahkan dalam satu platform pun biasanya ada beberapa kesempatan
      Sebaliknya, di YouTube, algoritme pada dasarnya memutuskan sekali saja. Kalau belum punya jumlah subscriber yang sangat besar, video akan ditampilkan hampir secara acak kepada beberapa orang, dan kalau mereka tidak merespons, selesai sampai di situ