Blending dan

Anti Aliasing
Blending,

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.

Department of Informatics Universitas Islam Indonesia

Whats Blending

Blending : Menggabungkan nilai intensitas warna

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

Alpha 255

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)

sx

PImage: untuk menyatakan variabel gambar yang

mengacu pada gambar awal
int: koordinat x sudut kiri atas gambar awal

sy

int: koordinat y sudut kiri atas gambar awal

sw
sh
dx

int: lebar gambar awal

int: tinggi gambar awal
int: koordinat x sudut kiri atas gambar tujuan

dy

int: koordinat y sudut kiri atas gambar tujuan

dw
dh
mode

int: lebar gambar tujuan

int: tinggi gambar tujuan
BLEND, ADD, SUBTRACT, LIGHTEST, DARKEST,
DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY,
HARD_LIGHT, SOFT_LIGHT, DODGE, BURN

src

Lengkapi!!!
void setup()
{
noLoop();
PImage img = loadImage("b2.JPG");
img.width
img.height
size(___________,
___________);
img
image(________,
0, 0);
img = loadImage("b1.JPG");
img
blend(_______,
0, 0, img.width, img.height,
0, 0, __________,
___________,
OVERLAY );
img.height
img.width
}

Department of Informatics Universitas Islam Indonesia

Bagaimana Sketch Untuk Gambar di

Bawah ini?

Alpha 100

Department of Informatics Universitas Islam Indonesia

Alpha 255

Aliasing

Sebelum kita memasuki Subbab Anti Aliasing, terlebih

dahulu 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

Contoh Aliasing

Anti Aliasing
Anti Aliasing adalah teknik untuk mengurangi
jaggedness (aliasing)
Teknik ini digunakan untuk mengurangi tekstur
kasar pada suatu objek dengan menambahkan
piksel-piksel di sekitar pixel utamanya
Teknik antialiasing hampir serupa dengan teknik
penghalusan gambar
Umumnya dilakukan pada tepi objek.

Department of Informatics Universitas Islam Indonesia

Contoh Kasus Anti Aliasing

Contoh kasus :
Konversi data analog ke digital
Saat menampilkan gambar dari resolusi yang
tinggi ke resolusi yang lebih rendah
Pembuatan animasi
Pengkompresian data, dll.

Department of Informatics Universitas Islam Indonesia

Manakah gambar yang aliasing dan anti-aliasing?

Department of Informatics Universitas Islam Indonesia

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.

Department of Informatics Universitas Islam Indonesia

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

Anti Aliasing Dengan Processing

Lingkaran Kasar dan Halus

Department of Informatics Universitas Islam Indonesia

Anti Aliasing Dengan Processing

Huruf Kasar dan Halus
void setup() {

PFont myFont;
size(600, 500);
background(0);
myFont = createFont("Georgia", 200, true);

textFont(myFont);
Department of Informatics Universitas Islam Indonesia

Anti Aliasing Dengan Processing

Huruf Kasar dan Halus
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

Anti Aliasing Dengan Processing

Huruf Kasar dan Halus

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!

Department of Informatics Universitas Islam Indonesia

ADA
PERTANYAAN??

Department of Informatics Universitas Islam Indonesia