Membuat Karakter Dengan Processing
Mungkin kalian bingung ini gambar apa? Cara berpenampilan seperti anak sekolah dasar, cara berpenampilan seperti robot, cara berpenampilan sedikit aneh. Saya merasakan hal yang sama ketika saya menyelesaikan tugas ini. Karakter ini dibuat menggunakan software bernama Processing. Saya hanya menggunakan perangkat lunak open source ini ketika saya mendapatkan mata kuliah grafika komputer.
Ternyata, saya mendapatkan banyak hal menarik dari software ini. Dulu saya tidak terlalu tertarik dengan dunia pemrograman, sekarang saya sangat tertarik dengannya. Mungkin gambar di atas tidak sempurna, tapi saya senang dengan hasil pertama yang saya lakukan dari jam 5:30 pagi sampai jam 10:00 pagi karena dikumpulkan pada jam 1:00 siang. Entah kenapa dalam keadaan tegang membuat otak saya bekerja lebih maksimal dari pada keadaan bebas, tapi tentu itu bukan contoh yang baik dan tidak boleh ditiru ya teman - teman. Pada intinya postingan kali ini saya ingin membuat tutorial, lebih tepatnya cara membuat karakter dengan Processing.
Sebelumnya kamu harus mendownload software Processing terlebih dahulu.
Download melalui link berikut https://processing.org/
Berikut ini merupakan cara membuat karakter :
1. Membuat Background dan Ukuran Canvas
size(500,500);
background(#056FFF);
Perintah size : size (width, height), jadi size ini merupakan perintah untuk membuat ukuran layar 500 x 500, yang mana width-nya 500 dan height-nya berukuran 500.
Perintah background : background(R, G, B), jadi background ini merupakan perintah untuk memberikan warna latar, dan pada penggunaan warna saya menggunakan kode warna hex, dan warna latar-nya berwana biru.
2. Membuat Topi
//topi
fill(#B90B0B);
rect(200,35,60,40);
fill(#FFFFFF);
ellipse(230,78,150,10);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #B90B0B ini merupakan warna merah dan untuk kode #FFFFFF ini merupakan warna putih.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
Perintah ellipse : ellipse (x, y, width, height), jadi ellipse ini merupakan perintah untuk membuat lingkaran, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
3. Membuat Kepala
//kepala
fill(#ffdbac);
rect(180,80,100,100);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #ffdbac ini merupakan warna putih skin tones.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
4. Membuat Mata
//mata
fill(#FFFFFF);
rect(195,105,20,20);
rect(247,105,20,20);
fill(#000000);
rect(205,110,10,10);
rect(257,110,10,10);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #FFFFFF ini merupakan warna putih dan kode #000000 merupakan warna hitam.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
5. Membuat Alis
//alis
fill(#000000);
rect(190,95,30,5);
rect(243,95,30,5);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, kode #000000 merupakan warna hitam.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
6. Membuat Hidung
//hidung
fill(#000000);
rect(225,135,10,10);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, kode #000000 merupakan kode warna hitam.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
7. Membuat Mulut
//mulut
fill(#b83f3f);
arc(230,155,50,20,0,PI);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #b83f3f ini merupakan warna merah muda mulut.
Perintah arc : arc (x, y, w, h, “sdt1”, “sdt2”). Membuat juring/sektor, atau busur (tepinya saja) dari elips. Letak pusat elipsnya adalah di (x, y), lebarnya w, dan tingginya h. Sudutnya akan mulai dari “sdt1” ke ”sdt2”. Dan PI dapat digunakan untuk menggantikan satuan 180 derajat, 45 derajat, 90 derajat, dan 360 derajat.
8. Membuat Telinga
//telinga
fill(#ffdbac);
rect(170,105,10,30);
rect(280,105,10,30);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #ffdbac ini merupakan warna putih skin tones.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
9. Membuat Leher
//leher
fill(#ffdbac);
rect(220,180,20,40);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #ffdbac ini merupakan warna putih skin tones.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
10. Membuat Baju
//baju
fill(#FFFFFF);
rect(160,220,150,130);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #FFFFFF ini merupakan warna putih.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
11. Membuat Kantong Baju
//kantong
fill(#B90B0B);
arc(270,240,20,50,0,PI);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #B90B0B ini merupakan warna merah.
Perintah arc : arc (x, y, w, h, “sdt1”, “sdt2”). Membuat juring/sektor, atau busur (tepinya saja) dari elips. Letak pusat elipsnya adalah di (x, y), lebarnya w, dan tingginya h. Sudutnya akan mulai dari “sdt1” ke ”sdt2”. Dan PI dapat digunakan untuk menggantikan satuan 180 derajat, 45 derajat, 90 derajat, dan 360 derajat.
12. Membuat Kancing Baju
//kancing baju
fill(#B90B0B);
ellipse(230,240,10,10);
ellipse(230,270,10,10);
ellipse(230,300,10,10);
ellipse(230,330,10,10);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #B90B0B ini merupakan warna merah.
Perintah ellipse : ellipse (x, y, width, height), jadi ellipse ini merupakan perintah untuk membuat lingkaran, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
13. Membuat Tangan
//tangan
fill(#FFFFFF);
rect(135,230,25,30);
rect(310,230,25,30);
fill(#ffdbac);
rect(135,260,10,50);
rect(325,260,10,50);
fill(#000000);
ellipse(140,320,30,30);
ellipse(330,320,30,30);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #FFFFFF ini merupakan warna putih dari lengan baju, dan untuk kode #ffdbac ini merupakan warna putih skin tones dari tangan, sedangkan kode #000000 ini untuk warna hitam pada telapak tangan.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
Perintah ellipse : ellipse (x, y, width, height), jadi ellipse ini merupakan perintah untuk membuat lingkaran, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
14. Membuat Celana
//celana
fill(#B90B0B);
rect(160,350,70,30);
rect(240,350,70,30);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #B90B0B ini merupakan warna merah dari celana.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tinggi-nya.
15. Membuat Kaki
//kaki
fill(#ffdbac);
rect(180,380,30,90);
rect(260,380,30,90);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #ffdbac ini merupakan warna putih skin tones.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tinggi-nya.
16. Membuat Sepatu
//sepatu
fill(#080808);
rect(155,450,60,30);
ellipse(170,465,50,40);
fill(#FFFFFF);
ellipse(160,455,10,10);
fill(#080808);
rect(255,450,50,30);
ellipse(295,465,50,40);
fill(#FFFFFF);
ellipse(305,455,10,10);
Perintah fill : fill (R, G, B), jadi fill ini merupakan perintah untuk mewarnai objek, yang mana kode #080808 ini merupakan warna hitam dari sepatu dan untuk kode #FFFFFF ini merupakan warna putih dari sepatu yang mengkilat/bersih.
Perintah rect : rect (x, y, width, height), jadi rect ini merupakan perintah untuk membuat persegi/persegi panjang, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tinggi-nya.
Perintah ellipse : ellipse (x, y, width, height), jadi ellipse ini merupakan perintah untuk membuat lingkaran, yang mana x dan y merupakan posisi awal dari sudut, lalu width merupakan lebar-nya dan height merupakan tingginya.
Berikut ini merupakan code keseluruhan dari karakter yang telah dibuat :
size(500,500);
background(#056FFF);
noStroke();
//topi
fill(#B90B0B);
rect(200,35,60,40);
fill(#FFFFFF);
ellipse(230,78,150,10);
//kepala
fill(#ffdbac);
rect(180,80,100,100);
//mata
fill(#FFFFFF);
rect(195,105,20,20);
rect(247,105,20,20);
fill(#000000);
rect(205,110,10,10);
rect(257,110,10,10);
//alis
fill(#000000);
rect(190,95,30,5);
rect(243,95,30,5);
//hidung
fill(#000000);
rect(225,135,10,10);
//mulut
fill(#b83f3f);
arc(230,155,50,20,0,PI);
//telinga
fill(#ffdbac);
rect(170,105,10,30);
rect(280,105,10,30);
//leher
fill(#ffdbac);
rect(220,180,20,40);
//baju
fill(#FFFFFF);
rect(160,220,150,130);
//kantong
fill(#B90B0B);
arc(270,240,20,50,0,PI);
//kancing baju
fill(#B90B0B);
ellipse(230,240,10,10);
ellipse(230,270,10,10);
ellipse(230,300,10,10);
ellipse(230,330,10,10);
//tangan
fill(#FFFFFF);
rect(135,230,25,30);
rect(310,230,25,30);
fill(#ffdbac);
rect(135,260,10,50);
rect(325,260,10,50);
fill(#000000);
ellipse(140,320,30,30);
ellipse(330,320,30,30);
//celana
fill(#B90B0B);
rect(160,350,70,30);
rect(240,350,70,30);
//kaki
fill(#ffdbac);
rect(180,380,30,90);
rect(260,380,30,90);
//sepatu
fill(#080808);
rect(155,450,60,30);
ellipse(170,465,50,40);
fill(#FFFFFF);
ellipse(160,455,10,10);
fill(#080808);
rect(255,450,50,30);
ellipse(295,465,50,40);
fill(#FFFFFF);
ellipse(305,455,10,10);
Pada hasil akhir ini saya menambahkan perintah noStroke( ) dibawah perintah background, jadi noStroke sendiri merupakan perintah untuk tidak memberi warna pada garis tepi dari objek, maka secara otomatis seluruh objek tidak ada warna pada garis tepi-nya.
Penutup
Mungkin segitu aja dulu untuk postingan kali ini. Jangan lupa di bagikan ke teman-teman kamu yang lain ya, dan jangan lupa kunjungi situs ini untuk mendapatkan info menarik serta terbaru lain nya. Kalau masih bingung caranya, komen aja di bawah! Terima kasih!
Bareh
Comparing two bad things doesn't make one of them better.
.png)
