Kode Kreatif & Seni Komputasional Processing: Kode Kreatif & Seni Komputasional Hendro Subagyo hendro.subagyo@gmail.com

Processing

Agenda Apa dan Mengapa Processing? Mengapa bukan C? Matlab? Java? … Lisp? Pendeknya waktu  learning curve yang pendek OOP Internet Simple Short

Why Processing

Pemrograman Kreatif: proses analitik + proses kreatif

Pemrograman Kreatif: Algoritma? Siapa takut?

Pemrograman Kreatif: Algoritma? Siapa takut? Beli buku “Processing: A Programmer Handbook of Visual Designer Buka halaman 1 Mulai baca dari bagian teratas halaman 1 Berhenti baca pada halaman terakhir buku tsb Tulis review buku tsb di Amazon.com

Happy Coding Mistakes Mistakes ≠ Bugs Bugs = Sad Accidents  Anda frustasi Mistakes = Happy Accidents  Anda kreatif !

Pohon Algoritmik

Pohon Algoritmik Dari sebuah batang/cabang, gambarlah satu atau lebih cabang dengan arah berlawanan Di ujung akhir setiap cabang, gambarlah satu atau lebih cabang yang lebih kecil Ulangi langkah 1

Algoritma  Code

Pohon Algoritmik v0.1

Pohon Algoritmik v0.2: v0.1 += Randomness

Pohon Algoritmik v0.3: v0.2 += Thickness

Pohon Algoritmik v0.4: v0.3 += Waviness

Pohon Algoritmik v1.0: v0.4 += More

Processing Images

Program interaktif Fungsi setup () adalah tempat diman kita melakukan operasi-operasi yang dilakukan sekali saja saat program mulai Fungsi draw () dipanggil secara berulang (kecuali kita tentukan lain) noloop() menghentikan penggambaran berulang fungsi draw() loop() memulai kembali penggambaran berulang Fungsi-fungsi untuk memproses callback aksi dari pengguna mousePressed() , mouseReleased, mouseMoved(), mouseDragged() : Fungsi keyPressed() terpanggil saat keyboard ditekan. Kita dapat mengetahui tombol keyboard yang tertekan dari variabel global keyPressed Posisi mouse didapat dg mouseX, mouseY

Advanced Data: Images Image adalah kumpulan array pixel, masing-masing memiliki nilai RGB. Image memiliki: width, height, dan array RGB Dalam processing, PImage adalah data struktur untuk image Ia memiliki attribute Pixels[ ] //array of pixels width height Dan memiliki fungsi sbb get( x , y ) set( x, y, color )

Loading dan drawing image Deklarasi dg statement sbb: PImage img; Fungsi-fungsi lainnya: img = LoadImage ( “picture.gif”); image (img, 0, 0); img.set (10, 10, color ( 255, 0, 0) ); color c = img.get(20, 20); For more info: http://processing.org/reference/PImage.html

Iterasi thd image im.set (i,j, C ); // c is a color for (int i=0; i<im.width; i++) for (int j=0; j<im.height; j++) { im.set (i,j, C ); // c is a color }

Fungsi bit-copy sederhana Rotasi 90 derajat set(x, y, img.get(y, x)); Mirroring set(x, y, img.get(width-x, y)); Flipping set(x, y, img.get(x, height-y)); Perbersar image 2x set(x*2, y*2, img.get(x, y)); set(x*2+1, y*2, img.get(x, y)); set(x*2, y*2+1, img.get(x, y)); set(x*2+1, y*2+1, img.get(x, y)); (repeat these for all pixels in the image)

Processing Images Kita dapat merubah image dg mengaplikasikan prosedur pada beberapa atau semua pixel. Contoh: Greyscale the Image Clear Image Threshold Image Mirror the image Line Drawing Anti-aliasing Filters Colour Edge detect Blur/Smooth Don’t forget the difference between the algorithm and the syntax. But we’re going to use some simple syntax.

Operasi pada pixel: greyscale Rata-rata pada intensitas RGB Weighting tergantung kpd sensor, ttp biasanya green lebih besar cc = 0.3*R + 0.59*G + 0.11*B Pada processing: cc = color ( 0.3*red(c) + 0.59*green(c) + 0.11*blue(c) );

Negative image Jika 255 is intensitas penuh maka then nilai negative suatu nilai c adalah 255 – c Mis: lawan dari “red” (240, 0, 0) adalah (255-240, 255-0, 255-0) mis. (15, 255, 255) cyan Code: cc = color ( 255-red(c), 255-green(c), 255-blue(c) );

Low threshold: Semua level terang dikonversi mjd putih. Thresholding Secara tradisional adalah operasi yang mereduksi image menjadi 2 warna bitmap; Semua pixel yang kurang dari threshold suatu level terang tertentu digambar sebagai hitam. Sisanya digambar putih Kita dapat menaikan/menurunkan nilai threshold untuk menyoroti daerah kontras terang pada wilayah terang yang bervariasi, atau sebaliknya. Output Input High threshold: Kecuali level yang paling terang dirender sebagai hitam Low threshold: Semua level terang dikonversi mjd putih. “halfway” threshold.

Multiple Thresholding Kemungkinkan lain, kita dapat menset sejumlah limit diskrit dan merender dg beberapa bayangan berbeda. Mis: 50, 100, 250, 200 Semua intensitas di-round-down ke nilai terdekat dari threshold tsb Berguna untuk aplikasi spt: mosaic effects, colour depth reduction input output

Thresholding code Thresholding sederhana Level-level float g = 0.3*red(c) + 0.59*green(c) + 0.11*blue(c) ; if (g>128) cc = color (255) Else cc = color (0) Level-level cc = color (0); if (g>50) cc = color (50); if (g>100) cc = color (100); if (g >150) cc = color (150); //etc. ..

Koreksi Gamma Sederhana input output Thresholding mirip kpd gamma correction. Gamma correction menaikkan/menurunkan intensitas warna secara smoothly (tidak ada level discrete threshold). Linear Originally, input and output values are the same input output 2. Pixel is rendered this level in final image. Gamma corrected curve: increasing brightness. 1. Original brightness of a sample pixel

Halftoning Metode untuk mensimpulasi range yang lebih besar dari warna menggunakan pola ink-spot yang konsentrasinya bervariasi. Awalnya digunakan untuk media tercetak..

Digital Halftones Pola halftone sederhana menggantikan pixel2 ter-threshold Code (hanya 2 level) secara efektif spt ini: if ( (g>100) && (g<150) ) { set(x*2, y*2, color(255)); set(x*2+1, y*2, color(0)); set(x*2, y*2+1, color(0); set(x*2+1, y*2+1, color(255)); } 1 2 3 4

Kita dapat juga memakai pola 3x3 untuk mendukung 9 nilai threshold yang berbeda

Error Diffusion Spt sebelumnya, pixel di-threshold Perbedaan antara intensitas aktula dg intensitas threshold adalah error dalam pixel. Mis: Ia di-render kurang terang dari aslinya Beberapa level terang hilang pada image secara keseluruhan Solusi dari error: mendistribusikannya pada pixel2 sekitarnya.

Error Diffusion Error = nilai pixel saat ini dikurangi nilai threshold terdekat Merubah nilai pixel dari pixel-pixel sekitarnya pada gambar asli sebelum diproses a = a + ( 7/16 ) x Error b = b + ( 3/16 ) x Error c = c + ( 5/16 ) x Error d = d + ( 1/16 ) x Error Image digambar dari kiri ke kanan, sehingga metode umumnya adalah men-diffuse error ke sebelah kanan dan bawah pixel saat itu

Dithering Patterns Cara yang lebih elegan dari halftoning Pola dither di kiri, besarnya 2 kali besar image asli Setiap pixel asli dibandingkan dengan blok pixel 2x2 dg nilai sbb: Jika nilai asli lebih besar dari nilai dither pixel, maka ia di-enabled.

Mosaics Nilai threshold dapat digunakan untuk memilih pola-pola atau image lain untuk menggantikan area kecil di image asli

Edge detection Bagaimana sebuah pixel dibandingkan dengan sekitarnya 5 point laplacian operator jika c (x, y) adalah color dari pixel pada x,y Maka kita mengkalkulasi: 4*c(x,y) – { c(x+1, y) + c(x-1,y) + c(x, y+1) + c(x, y-1)} i.e. 4 x warna sekarang – jumlah sekitarnya JIka warna pixel sama dg bit sekitarnya maka hasilnya adalah rendah atau mendekati 0. Jika tidak nilai mengindikasikan kecuraman perubahan.

5-point laplacian 9-point laplacian -1 4 -1 8

Image asli menampilkan level-level threshold Image terfilter, perhatikan nilai besar pada pixel-pixel edge yang kuat

Linear Smoothing Filter seragam (uniform) pada setiap pixel {x, y}, perhatikan pada setiap pixel “nearby” (terdekat) pada radius dan rata-rata tertentu Filter non-uniform mengambil esensi rata-rata weighted pada pixel sekitar Rectangular Circular Pyramidal Cone

Blending 2 Image Jika a dan b adalah warna pixel di ImageA dan ImageB Dan cc adalah warna image hasil blending Maka cc = (1-a)*a + a*b Perbedaan nilai variabel a akan meningkatkan penekanan pada imageA atau imageB Kita dapat melakukan smooth fade dari imageA ke imageB dg cara meningkatkan nilai a secara gradual float r = (1-a) * red(imageA.get(x,y)) + a * red(imageB.get(x,y)); float g = (1-a) * green(imageA.get(x,y)) + a * green(imageB.get(x,y)); float b = (1-a) * blue(imageA.get(x,y)) + a * blue(imageB.get(x,y)); cc = color (r, g, b); a = a+0.01;