Λ-2D: Eksplorasi Menggambar sebagai Bahasa Pemrograman
(media.mit.edu)- λ-2D adalah eksperimen bahasa yang menjadikan gambar itu sendiri sebagai kode, dengan tujuan sekaligus menangani ekspresi visual yang sulit ditampung bahasa teks dan bentuk estetis program
- Kerangka bahasa ini adalah kalkulus lambda, berangkat dari gagasan bahwa struktur yang lebih dekat ke evaluasi daripada urutan eksekusi tetap mirip dengan cara kita memandang gambar
- Untuk memudahkan digambar dengan tangan sekaligus bisa ditafsirkan mesin, bahasa ini memakai simbol berbasis kisi dan kabel untuk mengekspresikan aliran data
- Karena kalkulus lambda murni saja kurang praktis, ditambahkan gula sintaksis dan elemen interaktif seperti angka, operator matematika, frame, dan slider
- Implementasi saat ini menjalankan program λ-2D dengan mengubahnya menjadi satu ekspresi JavaScript, tetapi masih ada keterbatasan karena tampilannya mirip diagram rangkaian serta tantangan pembelajaran dan pemindaian
Eksperimen bahasa untuk coding lewat gambar
- λ-2D adalah eksperimen bahasa pemrograman nonverbal yang berangkat dari pertanyaan, “apakah kita bisa melakukan coding melalui gambar?”
- Bahasa yang tidak berbasis teks sudah ada dalam beberapa cabang
- Tujuan desainnya diringkas menjadi tiga hal
- Memanfaatkan fakta bahwa program digambar untuk memasukkan kemampuan yang sulit diwujudkan dalam bahasa berbasis teks
- Menghindari situasi ketika jumlah perintah terlalu sedikit sehingga program sederhana pun sulit dibuat, atau terlalu banyak sehingga tidak lagi minimalis dan sulit diproses dengan computer vision
- Menjadikan program itu sendiri cukup menarik secara visual hingga layak menjadi sebuah gambar yang ingin dibingkai dan dipajang
Kalkulus lambda dan representasi berbasis kisi
- λ-2D memakai kalkulus lambda sebagai fondasi bahasa, alih-alih pendekatan imperatif atau tingkat rendah
- Kalkulus lambda lebih dekat ke “evaluasi” daripada “eksekusi”, dan ini bersinggungan dengan cara mata mengikuti titik, garis, bentuk, dan komposisi dalam gambar tanpa urutan tertentu
- Struktur awalnya adalah sistem berbasis kisi
- Pengguna dapat menggambar garis kontinu yang melintasi beberapa kisi
- Tiap kisi pada akhirnya ditafsirkan sebagai salah satu dari himpunan simbol hingga
- Ini adalah kompromi yang mudah digambar manusia dan mudah di-parse komputer
Simbol fungsi dan aliran data pada kabel
- Perintah dasar kalkulus lambda hanya ada dua
- aplikasi fungsi
- definisi fungsi
- λ-2D merepresentasikan aplikasi fungsi dengan simbol berbentuk cangkir, dan definisi fungsi dengan huruf Yunani λ
- Seperti pada kalkulus lambda dasar, fungsi selalu menerima satu argumen dan menghasilkan satu keluaran
- Untuk menangani banyak argumen, digunakan pendekatan currying, yaitu menghubungkan beberapa fungsi
- Kabel di antara simbol berperan sebagai jalur aliran data
- Pada tahap ini bahasanya secara teknis sudah Turing-complete, tetapi sangat merepotkan untuk dipakai, sehingga ditambahkan simbol tambahan seperti angka dan operator matematika
- Simbol tambahan ini adalah gula sintaksis
- Jika diinginkan, pengguna tetap bisa memakai struktur kalkulus lambda murni seperti Church numeral
Frame, data gambar, dan slider
- λ-2D berupaya memperluas secara lebih alami pengalaman seperti di Scratch, di mana sprite digambar dan langsung dipakai dalam editor yang sama
- Frame dibuat dengan mengelilingi area tertentu di kanvas menggunakan kabel lalu menempatkan simbol penanda di kiri atas
- Coretan di dalam area itu bisa dipakai sebagai data
- Bentuk fungsi matematika bisa langsung disketsa untuk dipakai dalam animasi dan sebagainya
- Bentuk diperlakukan sebagai data tanpa perlu tahap terpisah untuk mencari persamaan secara langsung
- Slider yang bisa diseret saat runtime juga diperkenalkan
- Fungsinya untuk mengontrol program secara parametrik
- Elemen GUI lain juga dipertimbangkan untuk masa depan
Editor dan simbol 5×5
- Ide awalnya berangkat dari contoh program yang digambar tangan di buku bertitik
- Karena bagian computer vision untuk memindai program di atas kertas belum siap, pertama-tama dibuat editor sederhana untuk menggambar program secara digital
- Setiap simbol dibuat dalam ukuran 5×5 piksel agar mudah ditempatkan pada kanvas kisi
- Pengguna juga bisa membuat gambar bebas seperti memakai alat pensil
- Editor yang awalnya sekadar solusi sementara itu perlahan berkembang mendekati editor dengan berbagai fitur
Masalah output dalam bahasa fungsional murni
- Karena λ-2D bersifat fungsional murni dan tidak memiliki state, implementasi pernyataan
printbiasa sulit dilakukan - Output adalah perubahan state, dan jika kita mengharapkan output muncul dalam urutan tertentu, kita juga harus mengasumsikan urutan evaluasi ekspresi
- Solusi yang dipakai adalah mendefinisikan ulang “output” secara fungsional
- Kanvas kosong diberikan ke sebuah fungsi
- Fungsi mengembalikan kanvas baru yang pikselnya telah berubah sehingga tampak seperti teks atau coretan yang diinginkan
- Bahasa ini dirancang dengan kanvas dan piksel sebagai pusatnya, bukan string dan karakter
Konversi ke JavaScript dan visualisasi eksekusi
- Parser dasar mengubah seluruh program λ-2D menjadi ekspresi JavaScript yang ekuivalen
- Hasil JavaScript adalah satu ekspresi raksasa penuh tanda kurung, tidak efisien tetapi berfungsi
- Karena parser saat ini menghasilkan JavaScript dan eksekusinya diserahkan ke mesin JavaScript browser, proses eksekusi sebenarnya sulit divisualisasikan
- Sebagai gantinya, proses parsing mudah divisualisasikan, dan dapat terlihat mirip jalur yang dilewati tree-walk interpreter saat menjalankan program
- Jika animasi parsing diberi suara untuk tiap simbol, eksekusi program bisa “didengar” seperti lagu
- Hasilnya lebih mirip suara gim komputer aneh dari era 8-bit
- Bisa dilihat di demo online pada
Menu > Program > Animated Run
Keterbatasan yang tersisa dan langkah berikutnya
- λ-2D awalnya dimulai sebagai bagian dari riset yang lebih besar tentang menggambar program dengan pena dan kertas lalu menerima umpan balik interaktif lewat augmented reality
- Seiring proyek ini makin menarik, ia berkembang menjadi proyek mandiri
- Tujuan awalnya belum sepenuhnya terpenuhi
- Program cenderung terlihat lebih seperti diagram rangkaian daripada gambar
- Belum pasti apakah bahasa ini mudah dipelajari orang pada umumnya
- Sistem computer vision juga mungkin tidak mudah memindai tanpa kesalahan
- Setelah λ-2D lebih dimatangkan, ada rencana merancang bahasa pemrograman lain yang bisa diintegrasikan ke sistem yang memperlakukan gambar sebagai komputasi
- Versi beta λ-2D dapat dicoba secara online, dan kode sumber parser serta editor akan segera dipublikasikan di GitHub
1 komentar
Komentar Hacker News
Jika menyukai hal semacam ini, pekerjaan sebagai insinyur proyek otomasi mungkin terasa menarik, atau setidaknya familier
Function Block Diagram (FBD) cukup mirip: blok-blok fungsi dihubungkan dengan garis, dan urutan operasi didefinisikan oleh urutan blok. Bloknya sendiri bisa seperti fungsi bawaan mesin, atau bisa juga blok komposit. Diagram dijalankan sekali setiap siklus kontrol, dan biasanya, jika tidak ada blok jump, tiap blok dijalankan tepat sekali pada setiap siklus kontrol, terlepas dari apakah input berubah atau tidak
Logika kontrol dari pabrik bir hingga pabrik petrokimia diimplementasikan dengan cara seperti ini. Saya bekerja di sisi UI sistem kontrol berbasis FBD, jadi melihat hal-hal seperti ini setiap hari
Mirip dengan BitGrid[1], tetapi tidak sama. Bayangkan bentuk FPGA yang disederhanakan secara ekstrem, dengan bit-bit yang berbaris paralel melintasi kisi
Ide ini mungkin punya kegunaan luar biasa—petaflops untuk khalayak luas—atau mungkin juga tidak; pada akhirnya tergantung berapa banyak energi yang dikonsumsi satu DFF dalam ASIC. Angka yang sudah lama saya cari adalah daya statis dan energi untuk memuat satu bit
Model pemrogramannya juga menjadi masalah. Tidak ada yang ingin menempatkan logika langsung di atas kisi, dan semua orang ingin secepat mungkin membuat abstraksi. Saya tidak punya fokus yang cukup untuk menyelesaikan bagian itu
Saat mengeksplorasi ini, saya menemukan otomaton seluler Von Neumann[2] dan otomata seluler Nobili[3], yang baru pertama kali saya lihat meski sudah puluhan tahun tertarik pada ide serupa. Wilayah ilmu komputer ini sangat sulit ditemukan, sampai membuat frustrasi
Keduanya berbagi fondasi konyol yang sama. Sekumpulan FSA mendefinisikan ruang sel berukuran tak hingga, dan semua FSA memiliki fungsi transisi status atau himpunan aturan yang identik. Rasanya hanya karena satu “penyederhanaan” itu, ia terdorong ke ranah code golf
[1] https://github.com/mikewarot/Bitgrid
[2] https://en.wikipedia.org/wiki/Von_Neumann_cellular_automaton
[3] https://en.wikipedia.org/wiki/Nobili_cellular_automata
Jika ada yang ingin melanjutkan ide BitGrid, saya akan berterima kasih
Pada bagian “secara teknis, pada titik ini bahasanya sudah Turing-complete, tetapi sangat menyakitkan untuk digunakan sehingga melanggar aturan desain saya #2”, Lambda Diagrams[1] saya berhenti di tahap 1
Di bagian bawah halaman itu ada tautan ke semua notasi kalkulus lambda grafis lain yang saya ketahui, dan saya baru saja menambahkan yang ini juga
[1] https://tromp.github.io/cl/diagrams.html
Sekarang bisa diklaim sebagai bahasa yang membuat browser berkata, “Ini semua bahasa Yunani buat saya!”, jadi menurut saya itu pencapaian yang cukup keren
Pada era 90-an, ketika layar beresolusi tinggi muncul, hal-hal seperti itu sudah kita tinggalkan
https://worrydream.com/AlligatorEggs/
Hal-hal seperti ini juga sudah dicoba di LabVIEW, dan terlihat bahwa sulit untuk melangkah terlalu jauh. Ini juga sudah dilakukan dalam program pembuat suara/musik, dengan Max [max] sebagai semacam pelopornya
Memang bisa membuat sesuatu, tetapi cepat sekali menjadi berantakan. Kalau ditanya apakah enak dilihat, menurut saya tidak
[max] https://en.wikipedia.org/wiki/Max_(software)
Aliran sinyal yang kompleks jauh lebih mudah diikuti dalam tata letak visual—terutama diagram dengan angka real-time yang dianimasikan—dibanding blok teks statis
Max/MSP terbaru juga memiliki
mc, yang menyediakan koneksi multichannel sehingga tidak perlu membuat kabel/node terpisah untuk banyak sinyal identik, dan~genserta JavaScript memungkinkan node pemrograman berbasis teks“Bahasa pemrograman blok” seperti ini terlihat menjanjikan karena melakukan abstraksi lewat black-boxing dan membuat kotak di dalam kotak. Saya penasaran apakah implementasinya yang buruk, penggunanya yang tidak bisa memakainya, atau paradigmanya sendiri yang memang tidak jalan
Hal yang perlu dipertimbangkan adalah biasanya alat seperti ini dipakai oleh orang-orang yang tidak memahami pemrograman dan abstraksi. Orang yang pandai memprogram mungkin bisa membuatnya tidak berantakan, tetapi kalau begitu ya sekalian saja menulis kode, jadi posisinya agak ambigu
Saya setuju bahwa LabVIEW itu mengerikan. Bukan cuma karena masalah ini; pembaruannya merusak semuanya, lisensinya juga, dan secara umum cuma jadi sumber masalah
Dulu ada komunitas kecil pengembang LabVIEW profesional, dan secara umum mereka menulis kode yang sangat mudah dibaca dan bagus. Berbeda dari cara yang akrab bagi kebanyakan orang, tetapi tetap bagus
Namun saya meninggalkan dunia itu beberapa tahun lalu. Karena tanda-tandanya jelas bahwa apa pun yang bisa dilakukan, LabVIEW pada akhirnya akan mati
Sejak pertama kali mendengar tentang Petri net sekitar 10 tahun lalu, saya tertarik pada spesifikasi formal berbentuk grafis
Saya selalu merasa bahwa jika ada representasi grafis alih-alih notasi dan bahasa matematika yang menakutkan, para engineer akan lebih mampu memanfaatkan teknik formal. Sayangnya, setiap kali saya menunjukkan Petri net kepada engineer lain, mereka hampir seketika kehilangan minat
Sebelum berhenti dari program doktoral di University of York, saya sempat mengerjakan sesuatu bernama RoboChart dan RoboSim[1], yang menurut saya sebenarnya bisa jadi lebih mudah diakses. Namun, keduanya cukup terikat pada semantik robotika. Sebagai proyek pribadi, saya telah mencoba menyesuaikan dan memperluas RoboSim agar lebih berguna untuk dunia jaringan dan server
[1] https://robostar.cs.york.ac.uk/robotool/
Saya sangat suka ini. Terutama karena diimplementasikan dengan JavaScript
Kaum puris mungkin akan jungkir balik di tempat tidur atau kubur mereka, tetapi setidaknya tahap lanjutan visualisasi dan audio jelas jadi lebih mudah. Visualnya keren sekali, dan langkah berikutnya tampaknya adalah menerjemahkan struktur tingkat atas dari program yang sudah ada ke format ini dengan suatu cara. Sepertinya ada cukup banyak geek yang mau membayar untuk menggantung algoritma Dijkstra atau algoritma backpropagation jaringan saraf tiruan di dinding
Bagian yang menarik adalah bahwa bahasanya terlalu fungsional murni dan sepenuhnya tanpa state, sehingga tidak bisa mengimplementasikan pernyataan
print. Output adalah tindakan mengubah state, dan mengharapkan output muncul dalam urutan tertentu berarti mengasumsikan ekspresi dievaluasi dalam urutan tertentuBukankah ini hanya berarti “bukan imperatif”? Tetap saja, saya penasaran bagaimana state akan dienkode. Mungkin bisa memperkenalkan variabel, misalnya ikon+warna, dan menyusun kalimat-kalimat individual berdasarkan satu sumbu atau kedua sumbu
“Ranah bahasa pemrograman non-linguistik bukannya belum pernah dieksplorasi”
Baru kalimat kedua sudah dimulai dengan triple negative yang agresif
Ini mengingatkan saya pada Wireworld dari tahun 1987. Tentu saja ada artikel Wikipedia-nya juga [1]
Saya pernah melihat counter 8-bit yang diimplementasikan dengan Wireworld, dan itu cukup luar biasa. Namun, yang ini tampaknya lebih ringkas
[1]: https://en.wikipedia.org/wiki/Wireworld
Namun, sekarang sulit dimainkan. Halaman web[1] dan versi Steam bergantung pada Flash, jadi harus mengutak-atik implementasi ulang Flash pihak ketiga
Tetap saja, menurut saya implementasi cara kerja semikonduktornya jauh lebih baik daripada Wireworld
[1] https://www.zachtronics.com/kohctpyktop-engineer-of-the-peop...
Tautan langsung demo online: https://l-2d.glitch.me/
Berikut beberapa lingkungan/bahasa pemrograman lain yang sangat visual yang saya temukan. Berbeda dari pemrograman visual lain yang menghubungkan node dengan garis
Mungkin bisa diklasifikasikan secara berbeda, tetapi saya tidak tahu harus menyebutnya apa
Piet https://www.dangermouse.net/esoteric/piet.html
Turnstyle https://jaspervdj.be/turnstyle/ https://github.com/jaspervdj/turnstyle
Markovjunior https://github.com/mxgmn/MarkovJunior
Cellpond https://cellpond.cool/ https://github.com/TodePond/CellPond https://www.youtube.com/watch?v=xvlsJ3FqNYU
Imagegram https://zaratustra.itch.io/imagegram
Color Code http://colorcode.bananabanana.me/ https://www.youtube.com/watch?v=5M5hy9xsqKc Color Code 2 http://colorcode2.bananabanana.me/ https://www.youtube.com/watch?v=tTvvX4sjZWw Splaty Code http://splatycode.bananabanana.me/ https://www.youtube.com/watch?v=gd_e85lAKOs (dibuat oleh Muril Polese https://github.com/murilopolese/ http://gallery.bananabanana.me/)
Alchemy Online https://maxbittker.github.io/alchemy-online/ https://github.com/MaxBittker/alchemy-online