Kode Kreatif & Seni Komputasional

Presentasi berjudul: "Kode Kreatif & Seni Komputasional"— Transcript presentasi:

1 Kode Kreatif & Seni Komputasional
Processing: Kode Kreatif & Seni Komputasional Hendro Subagyo

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

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:

21 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 }

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 Don’t forget the difference between the algorithm and the syntax. But we’re going to use some simple syntax.

24 Operasi pada pixel: greyscale
Rata-rata pada intensitas RGB Weighting tergantung kpd sensor, ttp biasanya green lebih besar cc = 0.3*R *G *B Pada processing: cc = color ( 0.3*red(c) *green(c) *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-0, 255-0) mis. (15, 255, 255) cyan Code: cc = color ( 255-red(c), 255-green(c), 255-blue(c) );

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

27 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

28 Thresholding code Thresholding sederhana Level-level
float g = 0.3*red(c) *green(c) *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. ..

29 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

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)); } 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 ) 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

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

37

38

39

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

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

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

43 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

44 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;