Materi Grafika Komputer tentang Pixel, Persepsi Visual, Jenis Grafika, dan Graphics API untuk Implementasi Grafika Komputer

1. Universitas 17 Agustus 1945 Surabaya
Program Studi Teknik Informatika
R&D Group:
|
Dasar Grafika Komputer
Pixel, Persepsi Visual, Jenis Grafika, & Graphics API
Komputer Grafik & Visualisasi Data
Agyl A. Rahmadi, S.Kom., M.A
Intelligent Mobile & Creative Computing
4616304

2. Topik & Capaian Pembelajaran
▪ Konsep pixel
Menjelaskan definisi dan konsep dasar piksel: istilah, sejarah, satuan
▪ Pixel dan Persepsi Manusia
Menjelaskan kenapa pixel representatif untuk persepsi manusia
▪ Grafika Raster vs Vektor
Menjelaskan perbedaan grafika raster vs vektor, kelebihan dan kekurangannya
▪ Graphics API
Menjelaskan bagaimana implementasi grafika komputer dilakukan
▪ Sekilas tentang P5.js
Menggunakan P5.js secara mendasar untuk implementasi grafika

3. Apa itu Pixel?
Konsep Pixel

4. Picture Element
• Pixel kependekan dari frasa Picture Element – Picture biasa disingkat dengan Pics,
ditambah Element yang disebutkan secara cepat El-ement
• Pics + El = Picsel – pengucapan c dan s digabung, terdengar sebagai x
• Pixel !
• Dalam bahasa Indonesia istilah pixel memiliki padanan piksel
• (pik.sel /piksêl) : elemen gambar berupa titik terkecil pada layar
• Istilah pixel juga tidak muncul secara langsung, tapi terdapat sejarahnya

5. Sekilas Sejarah Pixel
1927
Istilah Picture Element
dipakai kali pertama dalam
majalah Wireless Word
edisi Juni
1937
Istilah picture element
dianggap terlalu khayalan
dan tidak mungkin untuk
membentuk citra
1946
Definisi picture element
dikemukakan: “an element
area of arbitrary size”
1948
Definisi lain: “the
smallest detail... Which
can be resolved by an
imaging process”
Pertama kali
muncul
Dianggap fiksi
dan meredup
Makna ganda
(dual meaning)
1956
Dipakai oleh John R.
Pierce dari Bell Labs
untuk menjelaskan
teknologi penayangan
warna di televisi
1964
Prof. William F. S. dari
MIT mengusullkan
istilah pel sebagai
pengganti istilah BP
(Bildpunkt) dalam
Jerman
1965
Istilah pixel dipakai
Fred Billingsley dalam
dua papernya dalam
SPIE Meetings
1970
Istilah pix dipakai Fred
Billingsley dalam papernya
tentang penerapan
pengolahan citra digital –
sementara istilah pix
sebagai slang dari pics
sudah dipakai sejak 1921
dan dipopulerkan majalah
Australia PIX sejak 1938
1971
Kata pixel dipakai oleh
Peter M. Will et al dalam
sebuah paten IBM, seiring
dengan itu istilah pel juga
masih dipakai IBM. Sejak
ini juga istilah pixel sering
dipakai di kalangan ilmuan
1980 – 1990-an
Istilah pixel diadopsi
luas. Masih sempat
dianggal sebagai “pic
cell” kependekan dari
“picture cell”. Di akhir
80-an istilah pixel
mulai dipakai di
banyak buku dan judul
seni (pixel art)
Sekarang
istilah pixel jamak
dipakai untuk
menggambarkan
resolusi luaran dari
teknologi pencitraan
(TV, Kamera) dan
ukuran dari suatu file
citra
Dipakai secara
acak
Istilah pel Pix
Pixel dalam
paten
Pixel mulai
populer dan
diadopsi luas

6. Pixel sebagai Ukuran – Layar
Pixel sekarang jamak digunakan sebagai satuan
ukuran. Bagaimana maksudnya?
Layar
• Diukur berdasarkan vertikal. Beranjak dari kebiasaan
teknologi TV lama yang mengukur resolusi
berdasarkan banyaknya “scanlines” secara vertikal.
• Ukuran 1080p berarti secara vertikal 1080 pixel,
dengan lebar 1920 pixel untuk proporsi 16:9.
Proporsi 4:3, juga tetap diukur secara vertikal (e.g
480p = 640 x 480)
• Istilah baru yang sering dipakai adalah 2K, 4K, dan
8K. Ini dari kebiasaan teknologi sinema yang
mengukur berdasarkan lebar dari layar. Ini mulai
menyebabkan kebingungan istilah:
• Contoh: 4K bisa berarti dua: UHD 4K (3840 x
2160) juga disebut 2160p, atau yang benar-benar
4K yaitu DCI 4K (4096 x 2160)
Gambar diambil dari:
https://en.wikipedia.org/wiki/1080p#/media/File:Definitions_of_TV_standards.jpg dengan izin
Creative Commons Attribution-Share Alike 3.0 Unported

7. Pixel sebagai Ukuran – Kamera & Citra
• Pixel sebagai ukuran citra/foto dihitung berdasarkan hasil luaran citra yang dihasilkan
• Ukuran biasanya dihitung dalam Mega Pixels (MP) yang merupakan hasil lebar x tinggi
dari citra yang dihasilkan
• Contoh:
• Kamera 2 MP menghasilkan file foto/citra beresolusi 1920 x 1080 pixel
• Ukurannya: 1920 x 1080 = 2.073.600 ~ 2 mega pixel (mega = juta, giga = milyar,
dst)
• Semakin besar ukuran, semakin banyak detail yang bisa ditangkap. Untuk kualitas
tergantung dari sensor kameranya – kamera 5 MP belum tentu hasilnya bagus

8. Diagram resolusi sensor dan citra luaran.
Diambil dari https://commons.wikimedia.org/wiki/File:Sensoraufl%C3%B6sungen.svg

9. Pixel sebagai Ukuran – Kamera & Citra
Contoh foto-foto dalam ukuran Gigapixel (GP) yang mampu menangkap detail dari jauh
https://www.pcmag.com/news/10-jaw-dropping-gigapixel-photos. Saat ini cenderung memakai teknik
menggabungkan ribuan foto karena kamera dengan resolusi gigapixel masih terbatas

10. Pixel sebagai Satuan – Kepadatan Cetak DPI
• Pixel juga jamak digunakan sebagai satuan terkait percetakan: DPI
• DPI adalah Dots per Inch – dari teknologi printer lama yang cenderung menggunakan
bintik (dot) untuk mencetak
• Yang menunjukkan semakin tinggi nilainya, semakin baik hasil cetak citra/foto yang
dihasilkan, namun juga semakin besar ukuran filenya
• Sebuah file gambar bisa punya resolusi 1000 x 1000, tapi dengan DPI yang
berbeda ketika dicetak. Misal dicetak dengan 250 DPI, maka gambar secara ideal
dicetak dengan ukuran 4 inchi x 4 inchi
• Misal gambar di cetak dengan ukuran 8 x 8 inchi, kualitasnya akan menurun
• Untuk menghasilkan kualitas yang sama, maka gambar harus diperbesar menjadi 2
kali (1000 x 1000) atau satuan DPI diturunkan menjadi 125 DPI
• Karena itu jika mendesain untuk dicetak, perhatikan masalah DPI

11. Pixel sebagai Satuan – Kepadatan Pixel PPI
• Pixel juga bisa digunakan untuk menentukan kepadatan pixel di layar: PPI
• PPI adalah Pixel per Inch – jumlah pixel per inchi di layar. Semakin tinggi, semakin tajam dan
jelas gambar yang dihasilkan
• PPI biasa digunakan untuk menunjukan kepadatan pixel (pixel density) pada suatu teknologi
layar
• Contoh: Retina Display milik Apple yang diterapkan diproduknya memiliki 2x kepadatan,
bahkan 3x sejak iPhone 6 plus
• Resolusi layar bisa tetap (misal: 1920 x 1080), tapi kepadatan pixel bisa lebih tinggi
• Konsekuensinya seringkali desainer membuat aset aplikasi/web untuk versi retina display
agar tidak “pecah” ketika ditayangkan di peranti miliki Apple

12. Jadi, apa itu pixel?
• Secara istilah, sejarah, dan sebagai satuan ukuran layar atau citra bisa mudah
dipahami
• Tapi apa itu sebenarnya pixel? Kita kembali ke definisinya:
pik.sel /piksêl
elemen gambar berupa titik terkecil pada layar
• Sehingga perlu dipahami dahulu bahwa pixel adalah sebuah titik (point), bukan
bintik/bulatan (dot), atau bahkan kotak (square)
• Pixel adalah hasil sampling, dan merupakan sebuah point sample (titik contoh)

13. Pixel sebagai Sample
• Bayangkan ada kisi seperti di samping:
bagian mana yang akan kita anggap sebagai
titik contoh dari kisi tersebut?
• Ada dua pertimbangan:
• Semua bintik abu-abu
• Semua kotak dengan 4 sudut bintik
• Tengah kotak
• Yang terbaik untuk titik contoh: di tengah
kotak-kotak tersebut – di dalam kotak banyak
posisi, tapi titik yang diambil yang di tengah
Gambar diambil dari: https://graphics.cs.wisc.edu/WP/cs559-fall2014/2014/08/29/what-is-a-pixel-and-what-is-a-point-sample/ dengan Fair Use

14. Pixel sebagai Sample
• Tengah kotak dianggap titik contoh yang
dikelilingi area kotak dan empat sudut
• Ketika kita ingin mengambil informasi warna
dari pixel misalkan, maka informasi itu
diambil dari titik contoh (point sample)
tersebut
• Bagaimana dengan: area di luar titik contoh?
• Kita hanya bisa memperkirakan berdasarkan
informasi di titik contoh – yaitu dengan proses
rekonstruksi
Gambar diambil dari: https://graphics.cs.wisc.edu/WP/cs559-fall2014/2014/08/29/what-is-a-pixel-and-what-is-a-point-sample/ dengan Fair Use

15. Rekonstruksi Pixel
• Pixel tidak harus ditampilkan dengan bentuk kotak atau bintik, tapi bisa dalam bentuk
lain tergantung dari filter yang dipakai dalam rekonstruksi
• Contoh gambar dibawah menggambarkan pixel sebagai bintik (dot), garis (line), atau
halus (smooth)
Gambar diambil dari: https://en.wikipedia.org/wiki/File:ReconstructionsFromPixels.png#/media/File:ReconstructionsFromPixels.png
dengan izin Public Domain

16. Kenapa susunan pixel bisa terlihat sebagai citra?
Pixel dan Persepsi Manusia

17. A Sunday Afternoon on the Island of La Grande Jatte –George Seurat (1884 – 1886)
Gambar diambil dari: https://upload.wikimedia.org/wikipedia/commons/7/7d/A_Sunday_on_La_Grande_Jatte%2C_Georges_Seurat%2C_1884.jpg
dengan izin Public Domain

18. Persepsi Warna Manusia
• Lukisan oleh George Seurat tersebut menggunakan
teknik yang disebut pointilism yang menitikkan warna-
warna yang berbeda dengan berdekatan
• “Kuning” di sebelah “Biru” menghasilkan “Hijau”
• George Seurat mempelajari bagaimana warna saling
berinteraksi, dan menemukan bahwa warna tidak harus
dicampur dahulu sebelum ditorehkan di kanvas
• Ini sama seperti bagaimana citra dibentuk oleh pixel:
terdiri dari banyak titik kecil yang saling berdekatan
• Dalam hal ini agak berbeda dengan warna alami

19. Persepsi Bentuk Manusia
• Warna dapat dipersepsikan, bagaimana dengan bentuk ?
• Persepsi terkait bentuk visual dipengaruhi oleh dua prinsip persepsi dari berbagai
prinsip dalam Gestalt Principle: Continuity & Closure
• Continuity : kecenderungan persepsi untuk “melengkapi” bagian yang kurang
• Closure: kencenderungan perspesi untuk “menutup” bagian yang terbuka
Contoh Continuity Contoh Closure

20. Persepsi Warna & Bentuk
• Persepsi terkait warna dan bentuk ini yang menjadi dasar pembentukan dua jenis
grafika yang berbeda: Raster dan Vektor
• Grafik raster memanfaatkan persepsi warna kita – juga disebut dengan image-based
graphic atau grafik berbasis citra.
• Memiliki sifat dasar kaya warna dan cenderung photo-realistic, warna sesuai dengan yang dilihat
manusia namun terbatas terkait bentuk
• Grafik vektor memanfaatkan perspesi bentuk kita – juga disebut dengan object-
based graphic atau grafik berbasis objek: dibentuk dengan berbagai objek grafik
dasar (e.g garis, bintik, dsb).
• Memiliki sifat dasar bentuk yang lebih bebas dan kompleks, namun dengan keterbatasan warna
yang cenderung satu objek satu warna

21. Apa beda keduanya?
Grafika Raster vs Vektor

22. Grafika Raster & Vektor
Terdapat dua jenis grafika yang digunakan dalam
implementasi grafika komputer: Raster & Vektor
• Raster
berasal dari istilah teknologi TV lama yaitu pola
pindai. Grafika yang dibentuk oleh pola pixel
yang sudah tetap (bitmap)
• Vektor
dibentuk berdasarkan titik yang dihubungkan
garis dalam ruang kartesius. Titik dan garis ini
membentuk jalur vektor (vector path)
Gambar diambil dari: https://en.wikipedia.org/wiki/File:VectorBitmapExample.svg
dengan lisensi Creative Commons Attribution-Share Alike 3.0 Unported

23. Raster vs Vektor
Raster
• Berbasis citra: terdiri dari pixel
• Dibentuk melalui proses rasterisasi
• Tidak bisa diskala secara bebas, resolusi
mempengaruhi kualitas
• Tidak terpengaruh frekuensi layar, tidak bisa flickering
• Lebih hemat memori dalam pemrosesannya
• Lebih besar ketika disimpan tergantung kualitas dan
format
• Format: .bmp, .tiff, .gif, .jpg, .png, .webp
Vektor
• Berbasis objek: terdiri dari bentuk primitif (titik, garis,
lingkaran, dsb)
• Dibentuk melalui jalur vektor
• Bisa diskala secara bebas, resolusi tidak
mempengaruhi kualitas
• Mudah terjadi flickering jika terlalu banyak objek
• Lebih boros memori dalam pemrosesannya
• Lebih hemat ketika disimpan
• Format: .svg, .ai, .eps, .cdr, .pdf, file font (TTF, OTF)

24. Tools implementasi Grafika Komputer
Graphics API

25. Graphics Application Programming Interface (API)
• Graphics API pada dasarnya pustaka (library) atau paket (package) perangkat lunak
yang menyediakan fungsi atau luaran subrutin untuk melakukan implementasi grafika
komputer
• Terdapat banyak tingkatan implementasi, tapi yang paling mendasar adalah tingkat
rendah (low-level API) untuk 3D:
• Contoh: Direct3D (di dalam DirectX), OpenGL, WebGL, Vulkan, Metal (oleh Apple), Mantle
(oleh AMD), RenderMan (dibuat oleh Pixar)
• Selain low-level, ada yang tingkat tinggi (high-level API)
• Contoh: Java 3D, Processing, OpenSceneGraph, VTK, cinder, OpenFrameworks
• Game Engine biasanya juga menyediakan graphics API: Unity, Unreal, Cry Engine

26. API Low-Level
Terdapat banyak graphics API yang bisa digunakan,
yang jamak dipakai antara lain:
• OpenGL (https://www.opengl.org): dipakai banyak
di industri, penelitian, dan cross platform.
memiliki versi sendiri yang dioptimalkan untuk
peranti bergerak (OpenGL ES) dan web (WebGL)
• Direct3D (DirectX): dipakai banyak di perangkat
lunak berbasis platform Windows, banyak
digunakan untuk membuat game dan simulasi
• Vulkan: penerus OpenGL yang dianggap memiliki
performa yang kurang. Menawarkan tingkat
operasi yang lebih rendah, mampu memanipulasi
CPU/GPU dengan lebih detail
• Metal (https://developer.apple.com/metal): API
berbasis objek yang dibuat Apple untuk
implementasi grafika di platform milik Apple (iOS,
iPadOS, MacOS) – terdapat fitur paralelisme
bawaan

27. API berbasis Web
• Selain yang berbasis desktop, dalam 10 tahun
terakhir bermunculan implementasi untuk
berbasis web dengan JavaScript, yaitu melalui
HTML Canvas dan WebGL
• Low-Level seperti WebGL memang mengizinkan
manipulasi yang lebih leluasa, namun juga
mengharuskan memahami banyak konsep
dasar dahulu
• Untuk implementasi praktis, seringkali yang
high-level dipakai agar bisa lebih cepat
mendapatkan hasil kreatif tanpa disulitkan oleh
setting dan pemahaman API tingkat rendah
• Contoh API berbasis web tingkat tinggi: HTML
Canvas, Three.js, Two.js, Rune.js, P5.js, Pixi.js,
Babylon.js, dsb.

28. P5.js untuk Implementasi Grafika Komputer
• Untuk mata kuliah ini kita memakai P5.js (https://www.p5js.org) yang mengizinkan
pemakaian HTML Canvas dan WebGL melalui satu pustaka JavaScript
• Implementasi berbasis web dipilih karena pemanfaatan grafik di web semakin perfasif
(dimana-mana) – sehingga mempelajari implementasi P5.js bisa membantu sebagai
dasar pemahaman pemrograman grafika (graphics programming)

29. Mengenal Processing dan P5.js
Sekilas tentang P5.js

30. Apa itu P5.js?
• Dari situs resminya (https://www.p5js.org)
“p5.js is a JavaScript library for creative coding,
with a focus on making coding accessible and
inclusive for artists, designers, educators,
beginners, and anyone else!”
• Dibalik tujuannya tersebut (pemrograman kreatif)
terdapat implementasi dari graphics API di baliknya
• P5.js adalah implementasi Processing
(https://processing.org/) versi web
• Processing sendiri adalah creative coding tools
yang merupakan: bahasa pemrograman dialek
Java, sebuah graphic library, dan lingkungan
pengembangan (Development Environment)

31. Sekilas tentang Processing
• Pertama kali dikembangkan tahun 2001 di MIT
oleh Aesthetic Computation Group
• Sudah memiliki banyak fitur terkait
implementasi komputer grafik:
• Grafik primitif
• Grafik interaktif
• Pilihan Rendering Graphic Library :Java 2D,
OpenGL(P2D, P3D)
• Mendukung pemrograman dasar,
prosedural, atau berorientasi objek (OOP)
• Implementasi berbagai bidang Komputer
Grafik
• Processing sangat mudah untuk dipelajari
• Karena memang didesain untuk para
artist/seniman yang minim kemampuan
pemrograman

32. P5.js vs Processing
• Keduanya hampir sama, hanya ada
beberapa fitur di Processing belum
diimplementasikan di P5.js – namun
P5.js juga memiliki fitur yang tidak ada
di Processing
• P5.js punya fleksibilitas sebagai
berbasis web, dan ada editor online-nya
(https://editor.p5js.org) yang akan
sangat membantu proses kuliah online

33. Mulai Menggunakan P5.js
Terdapat tiga cara untuk bisa menggunakan P5.js
1. Menggunakan penyunting daring (online editor) dari P5.js (https://editor.p5js.org) –
Anda tidak perlu membuat akun untuk mencoba tapi untuk menyimpan dan
membuat tautan yang bisa dibagi harus membuat akun
2. Mengunduh file P5.js dari https://p5js.org/download/ dan memanggilnya ke dalam
file HTML melalui tag <script>. Dimungkinkan juga menggunakan CDN agar tidak
perlu mengunduh (https://p5js.org/get-started/#settingUp)
3. Mengunduh Processing (https://processing.org/download), dan menginstall P5.js
Mode melalui Sketch > Import Library... > Add Library... > Modes > P5js.
Setelah itu bisa memprogram dalam JavaScript langsung, nanti server lokal dan
browser akan dibuka ketika program dijalankan

34. Pemrograman JavaScript (JS) di P5.js
Hal-hal berikut perlu diperhatikan dalam pemrograman JavaScript dibandingkan
dengan bahasa pemrograman lain
• Variablel tidak memiliki deklarasi tipe seperti di Java atau C++ (int, float, dsb)
karena memakai dynamic typing, bukan static
• Praktik terbaik setelah versi ES2015 (EcmaScript 2016) menyarankan menggunakan
inisiasi variabel dengan let atau const
• Array di JS lebih fleksibel dan berperilaku seperti linked list yang bisa ditambah
dengan push() atau pop()
• Pemrograman objek di JS menggunakan sistem prototype yang sama dengan seperti
class dalam Java – penggunaan kata “class” baru ada sejak ES2015

35. Tipe Data di Processing & P5.js
Berikut tipe data di Processing yang sebagai gambaran juga bisa dipakai di P5.js
Name Description Range of values
int Integers (whole numbers) -2,147,483,648 to 2,147,483,647
float Floating-point values -3.40282347E+38 to 3.40282347E+38
boolean Logical value true or false
char Single character A-z, 0-9, and symbols
String Sequence of characters Any letter, word, sentence, and so on
PImage PNG, JPG, or GIF image N/A
PFont VLW font; use the Create Font tool to make N/A
PShape SVG file N/A

36. API Reference untuk P5.js
Referensi implementasi P5.js bisa dilihat di https://p5js.org/reference/ yang berisi
fungsi-fungsi, parameter yang bisa digunakan untuk implementasi P5.js terkait grafika
komputer seperti Math, Lights, Camera, Rendering, Shape, dsb.