11. Blending - Antialiasing

8/19/2019 11. Blending - Antialiasing

http://slidepdf.com/reader/full/11-blending-antialiasing 1/29

Blending dan

Anti AliasingBlending,

Anti Aliasing

Department of Informatics – Universitas Islam Indonesia



Tujuan Perkuliahan

Mahasiswa mengerti apa dan bagaimana teknik Blending

Mahasiswa mengerti macam-macam teknik Blending seperti

Blend, Add, Subtract, Lightest, Darkest, Difference, Exclusion,

Multiply, Screen, Overlay, Hard Light, Soft Light, Dodge, dan

Burn

Mahasiswa dapat mengimplementasikan teknik Blending dengan

software Processing Mahasiswa mengerti apa yang dimaksud dengan Aliasing

Mahasiswa mengerti bagaimana teknik Anti Aliasing dilakukan

Mahasiswa dapat mengimplementasikan teknik Anti Aliasing

dengan software Processing.Department of Informatics – Universitas Islam Indonesia



Blending

Merupakan pencampuran satu objek dengan objek lainnya

melalui perubahan bentuk atau warna

Teknik blending banyak digunakan untuk pencampuran

beberapa gambar menjadi suatu gambar baru yang

biasanya sulit didapatkan melalui gambar biasa

Efek akhir yang diperoleh adalah bahwa bagian-bagian

dari percampuran terlihat tembus atau transparan

teknik yang digunakan adalah teknik alpha blending.




What’s Blending

Blending : Menggabungkan nilai intensitas warnadari sumber (source) dan tujuan

(destination/object) atau mengkombinasikan

warna output fragment dengan warna output

fragment yang dirender sebelumnya ke frame

buffer.



Alpha Channel of RGBA

Contoh Penggunaan nilai Alpha

Alpha 100

Alpha 0-255

fill(255,255,0,70)

fill(20,255,255,70);



Blending dalam Processing

Fungsi : blendMode(mode)Memadukan pixel sesuai dengan mode yang ditetapkan.

Ada pilihan mode berikut untuk berbaur piksel sumber (A)

dengan piksel tujuan (B). Warna akhir Sebuah pixel

adalah hasil dari penerapan salah satu mode yang dipilih

Mode yang disediakan dalam processing :

BLEND, ADD, SUBTRACT, DARKEST,LIGHTEST, DIFFERENCE , EXCLUSION , MULTIPLY , SCREEN, REPLACE



Menampilkan dua garis :

line(50, 50, 550, 550);

line(550, 50, 50, 550);



Blending dalam Processing

Fungsi : blend() Syntax :

blend(sx, sy, sw, sh, dx, dy, dw, dh, mode)

blend(src, sx, sy, sw, sh, dx, dy, dw, dh, mode



src PImage: untuk menyatakan variabel gambar yang

mengacu pada gambar awal

sx int: koordinat x sudut kiri atas gambar awal

sy int: koordinat y sudut kiri atas gambar awal

sw int: lebar gambar awal

sh int: tinggi gambar awal

dx int: koordinat x sudut kiri atas gambar tujuan

dy int: koordinat y sudut kiri atas gambar tujuan

dw int: lebar gambar tujuandh int: tinggi gambar tujuan

mode BLEND, ADD, SUBTRACT, LIGHTEST, DARKEST,

DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY,

HARD_LIGHT, SOFT_LIGHT, DODGE, BURN



void setup()

{

noLoop();

PImage img = loadImage("b2.JPG");

size(___________, ___________);

image(________, 0, 0);

img = loadImage("b1.JPG");

blend(_______, 0, 0, img.width, img.height,0, 0, __________, ___________, OVERLAY );

}

Lengkapi!!!

img.width

img

img.height

img

img.width img.height



Bagaimana Sketch Untuk Gambar di

Bawah ini?


Alpha 255Alpha 100



Sebelum kita memasuki Subbab Anti Aliasing, terlebihdahulu kita akan mempelajari tentang Aliasing

Bentuk primitif yang ditampilkan di layar memiliki

kekurangan : jaggies/staircasing

Hasil konversi scan dengan nilai 0 atau 1

Kekurangan tersebutlah yang disebut dengan Aliasing

Sehingga teknik mengurangi atau menghilangkan

jaggies disebut dengan ANTI-aliasing

Aliasing



Aliasing



Contoh Aliasing



Anti Aliasing

Anti Aliasing adalah teknik untuk mengurangi jaggedness (aliasing)

Teknik ini digunakan untuk mengurangi teksturkasar pada suatu objek dengan menambahkanpiksel-piksel di sekitar pixel utamanya

Teknik antialiasing hampir serupa dengan teknikpenghalusan gambar

Umumnya dilakukan pada tepi objek.




Contoh Kasus Anti Aliasing

Contoh kasus :

Konversi data analog ke digital

Saat menampilkan gambar dari resolusi yangtinggi ke resolusi yang lebih rendah

Pembuatan animasi Pengkompresian data, dll.




Manakah gambar yang aliasing dan anti-aliasing?



Contoh Anti Aliasing



Aliasing vs Antialiasing



Kekurangan Anti Aliasing

Meskipun dapat menghasilkan kualitas tampilan yang lebih

baik, namun antialiasing juga memiliki kekurangan seperti :

Memperlambat gerakan animasi

Menambah ukuran file (karena adanya penambahan pixel

dan warna)

Jika kasus pada teks, maka efek blur dari proses

antialiasing akan menyebabkan sulitnya teks untuk dapat

dibaca.




Anti Aliasing Dengan Processing

Lingkaran Kasar dan Halus

size(1000,500);

background(0);

noStroke();

smooth();

ellipse(250, 250, 300, 300);

noSmooth();

ellipse(750, 250, 300, 300);




Lingkaran Kasar dan Halus





Huruf Kasar dan Halus

void setup() {

PFont myFont;

size(600, 500);

background(0);

myFont = createFont("Georgia", 200, true);

textFont(myFont);






textAlign(CENTER, TOP);

noSmooth();

text("A - O", width/2, height/2);

textAlign(CENTER, BOTTOM);

smooth();

text("A - 1", width/2, height/2);

}Department of Informatics – Universitas Islam Indonesia



Buatlah Program dari tema atau topik yang sudah

kelompok anda tentukan. Sempurnakan dengan

teknik-teknik yang sudah dipelajari sesuai dengan

alur cerita/pesan yang akan anda sampaikan!


11. Blending - Antialiasing

Documents

Transcript of 11. Blending - Antialiasing