Processing:

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

2. Processing

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

4. Why Processing

5. Pemrograman Kreatif:proses analitik + proses kreatif

6. Pemrograman Kreatif:Algoritma? Siapa takut?

7. 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

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

9. Pohon Algoritmik

10. 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

11. Algoritma  Code

12. Pohon Algoritmik v0.1

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

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

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

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

17. Processing Images

18. Program interaktif • Fungsisetup () 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

19. 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 )

20. 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

21. Iterasi thd image 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 }

22. 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)

23. 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

24. 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) );

25. 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) );

26. 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.

27. output input 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

28. Thresholding code • Thresholding sederhana • 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 • float g = 0.3*red(c) + 0.59*green(c) + 0.11*blue(c) ; • cc = color (0); • if (g>50) • cc = color (50); • if (g>100) • cc = color (100); • if (g >150) • cc = color (150); • //etc. ..

29. output output input input Koreksi Gamma Sederhana • 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 2. Pixel is rendered this level in final image. Gamma corrected curve: increasing brightness. 1. Original brightness of a sample pixel

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

31. 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)); } 0 1 2 3 4

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

33. 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.

34. 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 ) xError • b = b + ( 3/16 ) xError • c = c + ( 5/16 ) xError • d = d + ( 1/16 ) xError Image digambar dari kiri ke kanan, sehingga metode umumnya adalah men-diffuse error ke sebelah kanan dan bawah pixel saat itu

35. 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.

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

38. 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.

39. 5-point laplacian 9-point laplacian

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

41. 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

42. 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;