LAPORAN

PENGENALAN PEMROGAMAN GRAFIKA COMPUTER

laporan ini disusun untuk memenuhi tugas pemrogaman grafika komputer

Dosen Pengampu
Dimas Fanny S.St., M.kom.

Oleh
Ambal Suharyudi Onoaji (19104410063)

PROGAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS ISLAM BALITAR
BLITAR
2021
 TUGAS GRAFIKA KOMPUTER

1. Buat gambar 2D (garis, kotak, segitiga, lingkaran, bintang) pada contoh penerapan
pemrograman C++ dengan menggunakan bahasa javascript. Bisa gunakan pada
website https://editor.p5js.org/ .
Ketentuannya sbb : (perhatikan slide 15-24)
a. Buat sekreatif mungkin tanpa menggunakan warna
b. Resolusi windows 1000 x 500
c. Ditampilkan secara keseluruhan dan tidak boleh saling bertumpuk 5 objek tersebut
2. Gunakan akun pribadi kalian (akun bisa menggunakan google atau github)
3. Untuk filenya dengan nama nim_nama_tugas1.js
4. Hasil penerapan pada penggunaan p5, berikan penjelasan koding tersebut dan
printscreen hasil outputnya
5. Bandingkan hasil penerapan C++ dengan menggunakan p5

Jawab;

1. Source code
function setup() {
createCanvas(1000, 500);
}

function draw() {
background(220);

circle(570, 130, 50);

line(480, 170, 520, 200);

line(520, 170, 480, 200);
 triangle(480, 60, 520, 60, 500, 10); //topi

rect(400, 110, 50, 40);

beginShape();
vertex(500, 220);
vertex(515, 250);
vertex(545, 250);
vertex(520, 270);
vertex(530, 300);
vertex(500, 280);
vertex(470, 300);
vertex(480, 270);
vertex(455, 250);
vertex(485, 250);
endShape(CLOSE);
}

2. Hasil output
3. Penjelasan coding

 createCanvas(1000, 500);

merupakan lebar dan tinggi pixel

 circle(570, 130, 50);

untuk membuat lingkaran dengan parameter x, y, w

 line(480, 170, 520, 200);

untuk membuat garis dengan parameter (x1, y1, x2, y2)

 triangle(480, 60, 520, 60, 500, 10);

untuk membuat segitiga dengan parameter x1. Y1, x2, y2, x3, y3
  rect(400, 110, 50, 40);

untuk membuat kotak atau persegi panjang dengan parameter x, y, w, h

 beginShape();
vertex(500, 220);
vertex(515, 250);
vertex(545, 250);
vertex(520, 270);
vertex(530, 300);
vertex(500, 280);
vertex(470, 300);
vertex(480, 270);
vertex(455, 250);
vertex(485, 250);
endShape(CLOSE);
untuk membuat bintang atau bentuk yang rumit beginShape untuk mulai pencatatan
titk sudut dan endShape untuk mengakhiri

4. perbandingan hasil penerapan pada c++ dan p5.js

Dibanding dengan C++ Setelah menerapkan kedua bahasa pemrograman diatas untuk
membuat bentuk geometri, dapat disimpulkan bahwa coding pada p5.js lebih
sederhana pemakaiannya,