Bagi pemrogram yang telah terbiasa bekerja di Visual Studio Code, Jupyter Notebook, atau lingkungan Python 3 modern, menggunakan aplikasi terpisah seperti Processing IDE mungkin terasa membatasi. Di era sekarang, kita ingin menggabungkan kemudahan seni visual Processing dengan kekuatan ekosistem data Python seperti NumPy, Pandas, dan OpenCV.

Di sinilah py5 hadir sebagai jembatan revolusioner. py5 adalah implementasi Processing resmi untuk CPython (Python 3.8+) yang memungkinkanmu membuat sketsa seni visual langsung di teks editor favoritmu!

Artikel ini adalah Bagian 3 (Penutup Serial) dari trilogi panduan Processing di Python:

• Bagian 1: Mengenal Processing di Python: Menggambar Interaktif dan Animasi dengan Python Mode (Aplikasi resmi Processing IDE, konsep setup/draw, koordinat, dan pantulan bola).
• Bagian 2: Seni Generatif dan Sistem Partikel di Python Processing (Perlin noise, trigonometri mandala, pohon fraktal, dan gravitasi partikel).
• Bagian 3 (Sedang Dibaca): Processing Modern di Python 3 Menggunakan py5: Seni Kreatif di VS Code dan Integrasi NumPy

1. Mengapa Memilih py5? (Evolusi Python 2 ke Python 3)

Modus Python bawaan di Processing IDE lama dibangun menggunakan Jython, yang sayangnya terhenti pada spesifikasi Python 2.7. Akibatnya, kamu tidak bisa memakai fitur modern seperti f-strings, type hinting, maupun pustaka sains data mutakhir.

Dengan py5:

• Berjalan asli di Python 3 modern (CPython).
• Bebas menggunakan editor kode apa pun: VS Code, PyCharm, Neovim, atau Terminal.
• Mendukung interaktivitas langsung di dalam Jupyter Notebook atau Google Colab.
• Terintegrasi erat dengan NumPy: transfer jutaan piksel dan koordinat vektor dengan kecepatan C/C++.

2. Langkah Instalasi py5

Pemasangan py5 sangat praktis melalui terminal atau command prompt standar Python:

pip install py5 numpy

(Catatan: py5 membutuhkan Java JDK 17 atau yang lebih baru terpasang di komputermu, yang biasanya akan dikonfigurasi secara otomatis).

3. Sketsa Pertama: Halo py5 di VS Code

Buka VS Code, buat berkas baru bernama 01-halo-py5.py, dan tulis kode berikut:

# 01-halo-py5.py
import py5

sudut = 0.0

def setup():
    py5.size(600, 400)
    py5.rect_mode(py5.CENTER)

def draw():
    global sudut
    py5.background(15, 23, 42)
    
    # Pindahkan titik pusat ke tengah kanvas
    py5.translate(py5.width / 2, py5.height / 2)
    py5.rotate(sudut)
    
    # Gambar cincin persegi futuristik
    py5.no_fill()
    py5.stroke_weight(3)
    
    for i in range(8):
        py5.push_matrix()
        py5.rotate(py5.TWO_PI / 8 * i)
        py5.stroke(56, 189, 248, 180)   # Cyan terang
        py5.rect(0, 0, 160, 160)
        py5.stroke(168, 85, 247, 180)  # Ungu neon
        py5.rect(0, 0, 100, 100)
        py5.pop_matrix()
        
    sudut += 0.02

# Menjalankan sketsa py5 langsung dari Python
if __name__ == "__main__":
    py5.run_sketch()

Cukup jalankan skrip ini dengan perintah python 01-halo-py5.py di terminal. Jendela animasi grafis 60 FPS akan langsung muncul di layarmu!

4. Efek Jejak Pudar (Fading Trail) & Interaksi Mouse

Salah satu trik visual favorit para pemrogram kreatif adalah efek jejak cahaya pudar (*motion blur / trail*). Alih-alih menghapus layar dengan warna pekat, kita melapisi layar dengan persegi hitam semi-transparan:

# 02-interaksi-mouse-trail.py
import py5

def setup():
    py5.size(600, 400)
    py5.no_stroke()
    py5.background(15, 23, 42)

def draw():
    # Kunci efek trail: gambar lapisan gelap semi-transparan (alpha: 25)
    py5.fill(15, 23, 42, 25)
    py5.rect(0, 0, py5.width, py5.height)
    
    # Lingkaran bercahaya di posisi mouse
    py5.fill(56, 189, 248)
    py5.ellipse(py5.mouse_x, py5.mouse_y, 30, 30)
    
    # Pancaran ornamen partikel kecil saat mouse diklik
    if py5.is_mouse_pressed:
        for _ in range(5):
            ox = py5.random_gaussian() * 15
            oy = py5.random_gaussian() * 15
            py5.fill(244, 114, 182, 200)
            py5.ellipse(py5.mouse_x + ox, py5.mouse_y + oy, 8, 8)

if __name__ == "__main__":
    py5.run_sketch()

Nilai alpha 25 pada py5.fill(15, 23, 42, 25) membuat gambar sebelumnya memudar secara perlahan setelah beberapa frame, menghasilkan sensasi pergerakan yang sangat mulus.

5. Kekuatan Super: Integrasi NumPy Berkecepatan Tinggi

Jika kamu mencoba menggerakkan 1.000 partikel menggunakan loop for standar di Python, program seringkali mulai melambat (*lag*). Namun dengan NumPy, seluruh posisi dan pantulan partikel dapat dihitung secara paralel dalam hitungan milidetik:

# 03-partikel-vektor-numpy.py
import py5
import numpy as np

JUMLAH_PARTIKEL = 500
posisi = None
kecepatan = None
warna = None

def setup():
    global posisi, kecepatan, warna
    py5.size(600, 400)
    
    # Inisialisasi matriks posisi & kecepatan NumPy 2D (500 partikel x 2 sumbu)
    posisi = np.random.uniform(low=[0, 0], high=[600, 400], size=(JUMLAH_PARTIKEL, 2))
    kecepatan = np.random.uniform(low=[-2, -2], high=[2, 2], size=(JUMLAH_PARTIKEL, 2))
    warna = np.random.randint(low=100, high=255, size=(JUMLAH_PARTIKEL, 3))

def draw():
    global posisi, kecepatan
    py5.background(15, 23, 42)
    
    # Komputasi NumPy vektor: perbarui SEMUA posisi dalam satu baris operasi array!
    posisi += kecepatan
    
    # Pantulan dinding kanvas secara vektorized (tanpa for-loop!)
    pantul_x = (posisi[:, 0] < 0) | (posisi[:, 0] > py5.width)
    kecepatan[pantul_x, 0] *= -1
    
    pantul_y = (posisi[:, 1] < 0) | (posisi[:, 1] > py5.height)
    kecepatan[pantul_y, 1] *= -1
    
    # Render semua partikel
    py5.no_stroke()
    for i in range(JUMLAH_PARTIKEL):
        py5.fill(warna[i, 0], warna[i, 1], warna[i, 2], 220)
        py5.ellipse(posisi[i, 0], posisi[i, 1], 6, 6)

if __name__ == "__main__":
    py5.run_sketch()

6. Visualisasi Spektrum Gelombang Audio Futuristik

NumPy menyediakan fungsi matematika array seperti np.linspace() dan np.sin() yang mempermudah perancangan visualisator musik dan gelombang Fourier:

# 04-audio-wave-visualizer.py
import py5
import numpy as np

fase = 0.0

def setup():
    py5.size(600, 400)

def draw():
    global fase
    py5.background(10, 15, 30)
    
    # 60 bar spektrum dihitung sekaligus dengan NumPy
    x_indices = np.linspace(20, py5.width - 20, 50)
    
    # Menghitung amplitudo gelombang interferensi ganda
    sinus_1 = np.sin(x_indices * 0.02 + fase)
    sinus_2 = np.sin(x_indices * 0.05 - fase * 1.5)
    amplitudo = (sinus_1 + sinus_2) * 55 + 70
    
    # Gambar bar spektrum audio dengan palet warna gradasi neon
    py5.stroke_weight(6)
    for i, x in enumerate(x_indices):
        tinggi_bar = amplitudo[i]
        
        # Gradasi warna dari cyan ke magenta
        r = int(56 + (i / 50.0) * 188)
        g = int(189 - (i / 50.0) * 100)
        b = 248
        py5.stroke(r, g, b, 220)
        
        y_tengah = py5.height / 2
        py5.line(x, y_tengah - tinggi_bar, x, y_tengah + tinggi_bar)
        
    fase += 0.05

if __name__ == "__main__":
    py5.run_sketch()

Perbandingan: Processing IDE vs py5

Kategori	Processing IDE (Python Mode)	py5 (Python 3 Standar Modern)
Versi Python	Python 2.7 (Jython)	Python 3.8 – 3.12+ (CPython)
Editor	Khusus Processing IDE	VS Code, PyCharm, Jupyter, Terminal
Pustaka Eksternal	Terbatas pada modul Java/Jython	Semua paket PyPI (NumPy, SciPy, OpenCV)
Performa Data	Standar Python loop	Sangat kencang dengan komputasi matriks
Target Pengguna	Pemula & pelajar seni visual dasar	Developer Python, data artist, desainer profesional

Kesimpulan Trilogi Processing di Python

Selamat! Kamu telah menyelesaikan seluruh rangkaian trilogi pembelajaran Processing di Python:

1. Dari dasar kanvas, sistem koordinat, dan interaktivitas mouse di Processing IDE…
2. Meningkat ke seni generatif, pola matematika alami (Perlin noise), fraktal rekursif, dan simulasi gaya gravitasi…
3. Hingga menguasai pemrograman visual modern berkecepatan tinggi dengan py5 dan NumPy di VS Code.

Kini batasnya hanyalah imajinasimu. Mulailah bereksperimen dengan memadukan formula matematikamu sendiri, musik, atau data dunia nyata ke dalam kanvas digital!