Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

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

Presentasi serupa


Presentasi berjudul: "Processing Agenda Apa dan Mengapa Processing? –Mengapa bukan C? Matlab? Java? … Lisp? Pendeknya waktu  learning curve yang pendek OOP Internet Simple."— Transcript presentasi:

1

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 1.Beli buku “Processing: A Programmer Handbook of Visual Designer 2.Buka halaman 1 3.Mulai baca dari bagian teratas halaman 1 4.Berhenti baca pada halaman terakhir buku tsb 5.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 1.Dari sebuah batang/cabang, gambarlah satu atau lebih cabang dengan arah berlawanan 2.Di ujung akhir setiap cabang, gambarlah satu atau lebih cabang yang lebih kecil 3.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 for (int i=0; i

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 *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 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. Input Output Low threshold: Semua level terang dikonversi mjd putih. “halfway” threshold. High threshold: Kecuali level yang paling terang dirender sebagai hitam

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 – float g = 0.3*red(c) *green(c) *blue(c) ; – if (g>128) cc = color (255) – Else cc = color (0) Level-level – float g = 0.3*red(c) *green(c) *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 Koreksi Gamma Sederhana Thresholding mirip kpd gamma correction. Gamma correction menaikkan/menurunkan intensitas warna secara smoothly (tidak ada level discrete threshold). input output input output Linear Gamma corrected curve: increasing brightness. 2. Pixel is rendered this level in final image. 1. Original brightness of a sample pixel Originally, input and output values are the same

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

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 4 8 5-point laplacian9-point laplacian

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 RectangularCircular 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 +  b – Perbedaan nilai variabel  akan meningkatkan penekanan pada imageA atau imageB Kita dapat melakukan smooth fade dari imageA ke imageB dg cara meningkatkan nilai  secara gradual float r = (1-  ) * red(imageA.get(x,y)) +  *  red(imageB.get(x,y)); float g = (1-  ) * green(imageA.get(x,y)) +  *  green(imageB.get(x,y)); float b = (1-  ) * blue(imageA.get(x,y)) +  * blue(imageB.get(x,y)); cc = color (r, g, b);  =  +0.01;


Download ppt "Processing Agenda Apa dan Mengapa Processing? –Mengapa bukan C? Matlab? Java? … Lisp? Pendeknya waktu  learning curve yang pendek OOP Internet Simple."

Presentasi serupa


Iklan oleh Google