Dokumen ini membahas tentang pewarnaan objek dalam Grafika Komputer menggunakan bahasa pemrograman p5.js. Terdapat penjelasan tentang fungsi background(), fill(), dan stroke() untuk memberi warna latar belakang, isi, dan garis objek. Disertai contoh kode untuk menerapkan ketiga fungsi tersebut dalam mewarnai lingkaran, persegi panjang, dan elips.

1. Grafika Komputer
Mewarnai Object
Mohammad Faried Rahmat., S.ST., M.Tr.T
Teknik Informatika
Universitas Islam Balitar

2. Kita akan Mempelajari
• Fungsi Backgroud
• Fungsi Fill
• Fungsi Stroke
• Contoh Kasus

3. Background
• Untuk memberikan warna pada background
• Struktur – RGB
• Background(125) = background Abu abu
• Background(0) = Hitam
• Background(255) = putih

4. Referensi Warna
• Untuk mencari referensi warna silahkan cari di google dengan kata
kunci : color picker

5. Link Referensi Warna
• https://www.niagahoster.co.id/blog/daftar-kode-warna-pada-html/
• https://qwords.com/blog/kode-warna-html-lengkap/

6. Praktek 1 - Background
function setup() {
createCanvas(200, 200);
}
function draw() {
background(0);
}

7. Praktek 2 - Background RGB
function setup() {
createCanvas(200, 200);
}
function draw() {
background(252, 61, 224);
}

8. Fungsi Fill
• Untuk mewarnai isi dari objek bisa menggunakan fungsi dari p5.js
dengan menggunakan fill().

9. Ingat !
• Untuk catatan nilai integer yang digunakan adalah 0
hingga 255
 fill(255) = putih
 fill(0) = hitam
 fill(255,0,0) = merah
 fill(0,255,0) = hijau
 fill(0,0,255) = biru

10. • fill(0,0,255,10) = biru transparan / nilai yang keempat, semakin
mendekati 0 semakin transparant dan semakin mendekati 255
semakin opaque ( Buram )
• Jika tidak menginginkan ada warna didalam objek ??? Gunakan fungsi
noFill()

11. Praktek 3 - fill
function setup() {
createCanvas(200, 200);
}
function draw() {
background(220);
fill(255,255,0);
circle(100,100,50);
}

12. Praktek 4 – fill beberapa object
function setup() {
createCanvas(200, 200);
}
function draw() {
background(220);
fill(255, 255, 0);
circle(100, 100, 50);
rect(0, 0, 100, 50);
ellipse(50, 70, 30, 30);
}

13. Praktek 5 – No fill
function setup() {
createCanvas(200, 200);
}
function draw() {
background(220);
fill(255, 255, 0);
circle(100, 100, 50);
rect(0, 0, 100, 50);
noFill();
ellipse(50, 70, 30, 30);
}

14. Praktek 6 – No fill - Transparan
function setup() {
createCanvas(200, 200);
}
function draw() {
background(220);
fill(255, 255, 0, 50);
circle(100, 100, 50);
rect(0, 0, 100, 50);
noFill();
ellipse(50, 70, 30, 30);
}

15. Fungsi Stroke
• Memberikan Warna pada garis Object
 stroke(0) = garis berwarna hitam
 stroke(255) = garis berwarna putih
 stroke(255,0,0) = garis berwarna merah
 stroke(0,255,0) = garis berwarna hijau
 stroke(0,0,255) = garis berwarna biru

16. Praktek 7
function setup() {
createCanvas(200, 200);
}
function draw() {
background(220);
fill(255, 255, 0, 50);
// Garis Hijau
stroke(0, 255, 0);
circle(100, 100, 50);
// Garis Merah
stroke(255, 0, 0);
rect(0, 0, 100, 50);
noFill();
// Garis Biru
stroke(0, 0, 255);
ellipse(50, 70, 30, 30);
}

17. No Stroke
function setup() {
createCanvas(200, 200);
}
function draw() {
background(220);
fill(255, 255, 0, 50);
// Garis Hijau
stroke(0, 255, 0);
circle(100, 100, 50);
// Garis Merah
stroke(255, 0, 0);
rect(0, 0, 100, 50);
noFill();
// Garis Biru
stroke(0, 0, 255);
ellipse(50, 70, 30, 30);
// Tanpa Garis
noStroke();
fill(255, 255, 0);
circle(20, 180, 50);
}

18. Ubah Ukuran Garis Warna
• Code : Link https://pastebin.com/qPTVsBVa

19. Contoh Kasus Pewarnaan Beberapa Object
• Silahkan Buka Link berikut : https://pastebin.com/RntKYZH1