tutorial/cara mempelajari processing grafika komputer.Teknik informatika

Modul Praktikum Grafika Komputer

Apakah Grafika Komputer Itu?

            Grafika Komputer (Computer Graphic) adalah seperangkat alat yang terdiri dari
hardware dan software untuk memproduksi suatu gambar, grafik atau citra
realistic untuk seni, game computer, foto dan film animasi. Grafika Komputer
merupakan bagian yang paling paling sulit di bidang computer, karena selain
harus mengerti bahasa dan logika pemrograman juga dibutuhkan kemampuan
analisis serta pemahaman matematik.
Banyak cara dan variasi untuk menghasilkan gambar dengan computer.
Seringkali kita akan dihadapkan pada masalah algoritma dan pemrograman
untuk menghasilkan citra yang realistic. Hal ini adalah sesuatu yang lumrah,
sehingga diperlukan pendekatan sesederhana mungkin dan pemahaman
algoritma untuk mendapatkan citra realistic. Jadi

Processing untuk percobaan Grafika Komputer

             Processing merupakan perangkat lunak open source yang menyediakan bahasa pemrograman dan lingkungan pemrograman bagi orang-orang yang ingin membuat program pengolahan citra, animasi dan suara. Processing digunakan dalam berbagai tahap seperti: belajar, membuat prototype sampai pasda tahap produksi. Processing dibuat dengan tujuan untuk memberikan fasilitas belajar pemrograman computer dalam konteks visual. Processing dapat diunduh di http://www.processing.org. Ada dua versi processing yang tersedia, yaitu versi tanpa java dan versi dengan java. Dengan sedikit keberuntungan, model Lingkungan kerja Processing adalah seperti ditunjukkan pada gambar 1.1.

Gambar 1.1. Tampilan lingkungan kerja Processing

                Processing menggunakan istilah Sketch untuk proyek yang ditulis menggunakan processing. Setiap sketch disimpan dalam direktori terpisah dan program utama disimpan di file nama yang sama dengan nama direktori. Sebagai contoh, sketch dengan nama ‘Tugas Processing’ akan disimpan di derektori dengan file program ‘Tugas Processing.pde’.

Anda sekarang menjalankan Pengolahan Development Environment ( PDE). Toolbar editor berikut adalah pesan area dan di bawah lembar kerja ada terdapat pesan console. Pesan area digunakan untuk satu pesan baris, dan konsol digunakan untuk pesan kesalahan/eror.

Gambar 1.2.Tampilan Toolbar pada Processing

Fungsi- komponen toolbar pada processing 

Run
      Berfungsi untuk mengeksekusi/menjalankan sebuah program yang telah selesai di tulis pada lebar kerja  Software processing.

Stop
       Stop ini yang nya dalam bahasa Indonesia adalah"Berhenti(jeda). Fungsi dari stop ini adalah untuk menghentikan proses eksekusi dari processing.

New

        New ini berfungsi  untuk membuka lembar kerja baru yang belum di isi oke koding dari Processing

Open

       Open berfungsi untuk memanggil sebuah berkas yang sudah disimpan di direktori. Jika sudah membuat sebuah perintah dan  disimpan di direktori, untuk mencari berkas yang sudah disimpan klik open

Exsport aplication

         Berfungsi untukmengekspor ke berbagai bentuk aplikasi. Aplikasi yang dibuat di processing bisa dieksport ke 3 Platform Sistem Operasi yaitu Windows, dan Mac Linux dan ke Web. 

Langkah Pertama untuk percobaan 

Mempersiapkan layar

           Layar yang dimaksud adalah area untuk menampilkan objek. Perintah yang

digunakan adalah : size(width,height). Sebagai contoh size(200,200), hal ini

berarti ukuran layar adalah 200 x 200 Pixel.

warna Latar

           Warna yang digunakan dalam processing adalah penggabungan dari elemen

Red, Green dan Blue (RGB) atau warna Grayscalle (abu-abu). Untuk memberikan

warna latar (background) digunakan perintah background(x) atau

background(r,g,b).

            kisaran nilai warna yang digunakan adalah antara 0 sampai

dengan 255. Sebagai contoh background(128), hal ini berarti warna latar adalah

grayscale dengan nilai 128. Jika ditulis background(255,0,0) akan mengakibatkan

warna latar menjadi merah, karena nilai merah disi nilai 255 dan hijau serta biru

adalah 0.

Selanjut nya

Program 1.1

// Mengatur ukuran layar 200, 200, mengatur ukuran lebar(width) tampilan layar 200 pixels

// Dan tinggi Tampilan layar(height) tampilan layar is 200 pixels

size(200, 200);background(0);

Program 1.2

// Sets the screen to be 200, 200, so the width of the window is 200 pixels

// and the height of the window is 200 pixels

size(200, 200);

background(128);

Program 1.3

// Sets the screen to be 200, 200, so the width of the window is 200 pixels

// and the height of the window is 200 pixels

size(200, 200);

background(255);

Program 1.4

// Sets the screen to be 200, 200, so the width of the window is 200 pixels

// and the height of the window is 200 pixels

size(200, 200);

background(255,128,0);

 

Setelah membuat percobaan diatas  langkah selanjutnya membuat sebuah gambar, Silahkan salin koding dibawah ini :

size (600,600); background(5,249,74);   strokeWeight(10); stroke(248,67,71); line(0,420,420,0);   strokeWeight(10); stroke(88,67,248); line(0,480,480,0);   strokeWeight(10); stroke(244,214,14); line(0,540,540,0);   strokeWeight(10); stroke(196,6,224); line(0,600,600,0);   //kepala strokeWeight(3); fill(0,0,255); stroke(0,0,0); arc(350,250,250,255,(130*PI)/180,(410*PI)/180); fill(255,255,255); arc(350,270,210,200,(130*PI)/180,(410*PI)/180);   fill(255,255,255); noStroke(); rect(283,300,135,50);   //mata kiri fill(255,255,255); stroke(0,0,0); ellipse (330,170, 50, 60); fill(0,0,0); strokeWeight(15); point(340,185);    //mata kanan  strokeWeight(3); fill(255,255,255); ellipse (385,170, 50, 60); fill(0,0,0); strokeWeight(15); point(375,185);   strokeWeight(3); fill(255,0,0); //hidung ellipse(357,200,25,20); line(356,210,356,245);   //mulut arc(350,245,140,180,(0*PI)/180,(180*PI)/180); arc(350,325,140,115,(215*PI)/180,(325*PI)/180); line(280,245,420,245);   //kumis kiri line(330,210,290,200); line(330,220,290,210); line(330,230,290,220);   //kumis kanan line(378,210,418,200); line(378,220,418,210); line(378,230,418,220);   //tangan kiri fill(0,0,255); strokeWeight(3); stroke(0,0,0); ellipse(240,390,40,100);   //telapak kiri fill(255,255,255); ellipse(240,440,40,40);   //tangan kanan fill(0,0,255); strokeWeight(3); stroke(0,0,0); ellipse(460,390,40,100);   //telapak kanan fill(255,255,255); ellipse(460,440,40,40);   //badan fill(0,0,255); stroke(0,0,0); strokeWeight(3); rect(255,350,190,150);   //leher strokeWeight(9); stroke(255,0,0); line(255,345,445,345);   //perut fill(255,255,255); strokeWeight(3); stroke(0,0,0); arc(350,395,160,170,(330*PI)/180,(570*PI)/180); noStroke(); rect(283,352,135,50);   //lonceng fill(255,255,0); strokeWeight(3); stroke(0,0,0); ellipse(350,358,25,25); ellipse(350,365,10,10); arc(350,356,25,10,(180*PI)/180,(360*PI)/180); arc(350,360,25,10,(180*PI)/180,(360*PI)/180); //kantong fill(255,255,255); strokeWeight(3); stroke(0,0,0); arc(350,390,140,150,(0*PI)/180,(180*PI)/180); line(280,390,420,390);   //garis kaki fill(0,0,255); arc(340,490,30,20,(280*PI)/180,(420*PI)/180);   //kaki fill(255,255,255); ellipse(410,520,120,50); ellipse(290,520,120,50);

semoga bermanfaat