7122015 Komputer Grafik java Widjianto 1

32 hal
1.Fungsi/Relasi
Secara umum merupakan hubungan 2 var.
x  variabel bebas
y  variabel terikat
Jenis:
Garis Lurus
Parabola
Lingkaran
Ellips
Trigonometri: Sinus, Cosinus, Tangen,….
Teknik Implementasi:
Buat persamaan y = f(x)
Tetapkan batas xBawah dan xAtas
Buat array x dan y.
Gambarkan titik (x,y) dgn drawPolyline()
7122015 Komputer Grafik java Widjianto 2
32 hal
Yang perlu diperhatikan dlm menggambar grafik:
a. Grafik berorientasi pada sistem koordinat HUMAN.
b. Karena kita menggunakan Panel maka HARUS
mengeset pernyataan:
g = (Graphics)jPanel1.getGraphics();
c. Tentukan koordinat x awal dan x akhir sebagai batas.
d. Buat persamaan y = f(x).
e. Tetapkan array x dan array y dalam loop.
f. Tetapkan warna yang dikehendaki.
g. Grafik dibuat dgn perintah drawPolyline().

7122015 Komputer Grafik java Widjianto 3

32 hal
1. Kurva garis Lurus y = mx + p.
Inputan :
- koordinat xAwal dan xAkhir,
- nilai m dan p.
Buat persamaan y = mx + p.
Batas: xAwal dan xAkhir.
Jumlah titik: abs(xAkhir - xAwal).
Buat loop untuk membentuk array x dan array y.
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah g.drawPolyline(x, y, jumlah).

7122015 Komputer Grafik java Widjianto 4

32 hal
Coding:

Input: xAwal, xAkhir, m, p; (double)

Jumlah = (int) (xAkhir – xAwal);
for (int i = 0; i < jumlah; i++){
x[i] = (int) (x0+xAwal+i);
y[i] = (int) (y0 - (m*(xAwal+i)+p));
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah);

7122015 Komputer Grafik java Widjianto 5

32 hal
2. Kurva Parabola y = ax2 + bx + c
Inputan :
- lebar parabola (d),
- nilai a, b dan c.
Tentukan sumbu simetris xs = -b/(2a).
Tentukan batas awal dan batas akhir parabola:
xAwal = xs - d/2 dan xAkhir = xs + d/2.
Buat persamaan y = ax2 + bx + c.
Jumlah titik: d+1.
Buat loop untuk membentuk array x dan array y
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah g.drawPolyline(x,y, jumlah).
7122015 Komputer Grafik java Widjianto 6
32 hal
Coding:
Input: lebarParabola (d), a, b, c; (double)
xs = -b/(2a);
xAwal = xs - d/2;
jumlah = (int) (d+1);
for (int i = 0; i < jumlah; i++){
x[i] = (int) (x0+xAwal+i);
y[i] = (int) (y0-(a*Math.pow((xAwal+i),2)+b*(xAwal+i)+c);
}
g.setcColor(Color.blue);
g.drawPolyline(x, y, jumlah);

7122015 Komputer Grafik java Widjianto 7

32 hal
3. Kurva Lingkaran pusat (pX,pY)
3.1 Lingkaran Polinom
Persamaan Umum:
Inputan : nilai pX, pY dan r.
Buat persamaan eksplisit pusat (0,0):
Batas-batas -r dan r.
Jumlah titik: 2*r+1
Buat loop untuk membentuk array x dan array y dgn
x  x+pX , y  y+pY dan y1 -y+pY
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah:
g.drawPolyline(x, y, jumlah) // busur atas
g.drawPolyline(x, y1, jumlah) // busur bawah
7122015 Komputer Grafik java Widjianto 8
32 hal
Coding:
Input: pusatX (pX), pusatY (pY), radius (r); (double)
xAwal = -r ;
jumlah = (int) (2*r+1);
for (int i = 0; i < jumlah; i++){
x[i] = x0+pX+xAwal+i;
y[i]=(int)(y0-(pY+(Math.sqrt(Math.pow(r,2)-Math.pow((xAwal+i),2)))));
y1[i]=(int)(y0-(pY-(Math.sqrt(Math.pow(r,2)-Math.pow((xAwal+i),2))));
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah); //busur atas
g.setColor(Color.green);
g.drawPolyline(x, y1, jumlah); //busur bawah

7122015 Komputer Grafik java Widjianto 9

32 hal
3.2 Lingkaran Trigonometri
Bentuk persamaan umumnya:
x = pX + r.cos(sudutRadian).
y = pY + r.sin(sudutRadian).
Inputan : nilai pX, pY dan r.
Batas-batas sudut 0 dan 360.
Jumlah titik: 360.
sudutRadian = Math.toRadians(sudut).
Buat loop untuk membentuk array x dan array y.
x[i] = x0+pX + r.cos(sudutRadian).
y[i] = =y0-( pY + r.sin(sudutRadian)).
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah:
g.drawPolyline(x, y, jumlah);
7122015 Komputer Grafik java Widjianto 10
32 hal
Coding:
Input: pusatX (pX), pusatY (pY), radius (r); (double)
sudut = 0;
Jumlah = 360;
for (int i = 0; i <= jumlah; i++){
x[i] = (int) (x0+pX + r*Math.cos(Math.toRadians(sudut)));
y[i] = (int) (y0-(pY + r*Math.sin(Math.toRadians(sudut))));
sudut ++ ;
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah);
7122015 Komputer Grafik java Widjianto 11
32 hal
4. Kurva Ellips pusat (pX,pY)
4.1 Ellips Polinom:
Bentuk umum:
Inputan : nilai pX, pY, h, k.
Batas-batas -h dan h.
Buat persamaan eksplisit dengan pusat (0,0):

Jumlah titik 2*h +1.

Buat loop untuk membentuk array x, y dan y1 dgn
x  x+pX, y  y+pY dan y1  -y+pY.
Tetapkan warna garis yg dikehendaki.
g.drawPolyline(x, y, jumlah) // busur atas
g.drawPolyline(x, y1, jumlah) // busur bawah
7122015 Komputer Grafik java Widjianto 12
32 hal
Coding:
Input: pX, pY, h, k; (double)
xAwal = -h;
jumlah = (int) (2*h +1);
for (int i = 0; i < jumlah; i++){
x[i] =(int)(x0+pX+xAwal+i);
y[i] =(int) (y0-(pY+k*(Math.sqrt(1-Math.pow((xAwal+i)/h,2)))));
y1[i] =(int) (y0-(pY-k*(Math.sqrt(1-Math.pow((xAwal+i)/h,2)))));
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah); //busur atas
g.drawPolyline(x, y1, jumlah); //busur bawah

7122015 Komputer Grafik java Widjianto 13

32 hal
4.2 Ellips Trigonometri
Bentuk persamaan umumnya:
x = pX + h.cos(sudutRadian).
y = pY + k.sin(sudutRadian).
Inputkan : nilai pX, pY, h, k.
Batas-batas sudut 0 dan 360.
sudutRadian = Math.toRadians(sudut).
Buat loop untuk membentuk array x dan array y.
x[i] = x0 +pX+h*cos(sudutRadian);
y[i] = y0 - (pY+k*sin(sudutRadian));
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah:
g.drawPolyline(x, y, jumlah);
7122015 Komputer Grafik java Widjianto 14
32 hal
Coding:
Input: pusatX (pX), pusatY (pY), h, k; (double)
sudut = 0;
for (int i = 0; i <= 360; i++){
x[i] = (int) (x0+pX + h*Math.cos(Math.toRadians(sudut)));
y[i] = (int) (y0-(pY + k*Math.sin(Math.toRadians(sudut))));
sudut ++;
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah);

7122015 Komputer Grafik java Widjianto 15

32 hal
5. Kurva Trigonometri
Inputan: - sdtAwal dan sdtAkhir.
- amplitudo (ampli), banyak kurva (n).
Argument : radian.
Batas sdtAwal dan sdtAkhir.
Jumlah titik = abs(sdtAkhir-sdtAwal).
Konversi sudut ke radian: radian = Math.toRadians(sudut)
Konversi sudut ke sumbu x: xRad = sudut/360*width/n
Buat persamaan: y = ampli * f(x).
Buat loop untuk membentuk array x dan array y.
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah
g.drawPolyline(x, y, jumlah)

7122015 Komputer Grafik java Widjianto 16

32 hal
5.1 Kurva Sinus
Inputan: - sdtAwal dan sdtAkhir.
- amplitudo (ampli), banyak kurva (n).
Argument : radian.
Batas sdtAwal dan sdtAkhir.
Jumlah titik = abs(sdtAkhir- sdtAwal).
Konversi sudut ke radian: radian = Math.toRadians(sudut)
Konversi sudut ke sumbu x: xRad = sudut/360*width/n
Buat persamaan: y = ampli* sin(radian)
Buat loop untuk array x dan y
x[i] = (int) (x0+xRad);
y[i] = (int) (y0 - ampli * sin(radian));
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah: g.drawPolyline(x, y, jumlah)
7122015 Komputer Grafik java Widjianto 17
32 hal
Coding:

Input sudutAwal = sdt1; sudutAkhir = sdt2;

amplitudo = ampli; banyakKurva = n;
jumlah = Math.abs(sdt2-sdt1);
sudut =sdt1;
for (int i = 0; i <jumlah; i++){
xRad = sudut/360*width/n;
x[i] = (int) (x0+xRad);
y[i] = (int) (y0 - ampli * Math.sin(Math.toRadians(sudut)));
sudut ++;
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah);

7122015 Komputer Grafik java Widjianto 18

32 hal
5.2 Kurva Cosinus
Inputan: - sdtAwal dan sdtAkhir.
- amplitudo (ampli), banyak kurva (n).
Argument : radian.
Batas sdtAwal dan sdtAkhir.
Jumlah titik = abs(sdtAkhir- sdtAwal).
Konversi sudut ke radian: radian = Math.toRadians(sudut)
Konversi sudut ke sumbu x: xRad = sudut/360*width/n
Buat persamaan: y = ampli* cos(radian)
Buat loop untuk array x dan y
x[i] = (int) (x0+xRad);
y[i] = (int) (y0 - ampli * cos(radian));
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah: g.drawPolyline(x, y, jumlah)
7122015 Komputer Grafik java Widjianto 19
32 hal
Coding:

Input sudutAwal = sdt1; sudutAkhir = sdt2;

amplitudo = ampli; banyakKurva = n;
jumlah = Math.abs(sdt2-sdt1);
sudut =sdt1;
for (int i = 0; i <jumlah; i++){
xRad = sudut/360*width/n;
x[i] = (int) (x0+xRad);
y[i] = (int) (y0- ampli * Math.cos(Math.toRadians(sudut)));
sudut ++;
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah);

7122015 Komputer Grafik java Widjianto 20

32 hal
5.3 Kurva Tangen
Inputan: - sdtAwal dan sdtAkhir.
- amplitudo (ampli), banyak kurva (n).
Argument : radian.
Batas sdtAwal dan sdtAkhir.
Jumlah titik = abs(sdtAkhir- sdtAwal).
Konversi sudut ke radian: radian = Math.toRadians(sudut)
Konversi sudut ke sumbu x: xRad = sudut/360*width/n
Buat persamaan: y = ampli* tan(radian).
Buat loop untuk array x dan y
x[i] = (int) (x0+xRad);
y[i] = (int) (y0 - ampli * tan(radian));
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah: g.drawPolyline(x, y, jumlah)
7122015 Komputer Grafik java Widjianto 21
32 hal
Coding:

input sudutAwal = sdt1; sudutAkhir = sdt2;

jumlah = Math.abs(sdt2-sdt1);
sudut =sdt1;
for (int i = 0; i <jumlah; i++){
xRad = sudut/360*width/n;
x[i] = (int) (x0+xRad);
y[i] = (int) (y0-ampli * Math.tan(Math.toRadians(sudut)));
sudut ++;
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah);

7122015 Komputer Grafik java Widjianto 22

32 hal
5.4 Kurva CoTangen
Inputan: - sdtAwal dan sdtAkhir.
- amplitudo (ampli), banyak kurva (n).
Argument : radian.
Batas sdtAwal dan sdtAkhir.
Jumlah titik = abs(sdtAkhir- sdtAwal).
Konversi sudut ke radian: radian = Math.toRadians(sudut)
Konversi sudut ke sumbu x: xRad = sudut/360*width/n
Buat persamaan: y = ampli / tan(radian)
Buat loop untuk array x dan y
x[i] = (int) (x0+xRad);
y[i] = (int) (y0 - ampli /tan(radian)/sin(radian));
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah: g.drawPolyline(x, y, jumlah)
7122015 Komputer Grafik java Widjianto 23
32 hal
Coding:

Input sudutAwal = sdt1; sudutAkhir = sdt2;

amplitudo = ampli; banyakKurva = n;
jumlah = Math.abs(sdt2-sdt1);
sudut =sdt1;
for (int i = 0; i <jumlah; i++){
xRad = sudut/360*width/n;
x[i] = (int) (x0+xRad);
y[i] = (int) (y0-ampli / Math.tan(Math.toRadians(sudut)));
sudut ++;
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah);

7122015 Komputer Grafik java Widjianto 24

32 hal
5.5 Kurva Secan
Inputan: - sdtAwal dan sdtAkhir.
- amplitudo (ampli), banyak kurva (n).
Argument : radian.
Batas sdtAwal dan sdtAkhir.
Jumlah titik = abs(sdtAkhir- sdtAwal).
Konversi sudut ke radian: radian = Math.toRadians(sudut)
Konversi sudut ke sumbu x: xRad = sudut/360*width/n
Buat persamaan: y = ampli / cos(radian)
Buat loop untuk array x dan y
x[i] = (int) (x0+xRad);
y[i] = (int) (y0 – ampli/cos(radian));
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah: g.drawPolyline(x, y, jumlah)
7122015 Komputer Grafik java Widjianto 25
32 hal
Coding:

Input sudutAwal = sdt1; sudutAkhir = sdt2;

amplitudo = ampli; banyakKurva = n;
jumlah = Math.abs(sdt2-sdt1);
sudut =sdt1;
for (int i = 0; i <jumlah; i++){
xRad = sudut/360*width/n;
x[i] = (int) (x0+xRad);
y[i] = (int) (y0-ampli / Math.cos(Math.toRadians(sudut)));
sudut ++;
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah);

7122015 Komputer Grafik java Widjianto 26

32 hal
5.4 Kurva Cosecan
Inputan: - sdtAwal dan sdtAkhir.
- amplitudo (ampli), banyak kurva (n).
Argument : radian.
Batas sdtAwal dan sdtAkhir.
Jumlah titik = abs(sdtAkhir- sdtAwal).
Konversi sudut ke radian: radian = Math.toRadians(sudut)
Konversi sudut ke sumbu x: xRad = sudut/360*width/n
Buat persamaan: y = ampli / sin(radian)
Buat loop untuk array x dan y
x[i] = (int) (x0+xRad);
y[i] = (int) (y0 – ampli/sin(radian));
Tetapkan warna garis yg dikehendaki.
Aktifkan perintah: g.drawPolyline(x, y, jumlah)
7122015 Komputer Grafik java Widjianto 27
32 hal
Coding:

Input sudutAwal = sdt1; sudutAkhir = sdt2;

amplitudo = ampli; banyakKurva = n;
jumlah = Math.abs(sdt2-sdt1);
sudut =sdt1;
for (int i = 0; i <jumlah; i++){
xRad = sudut/360*width/n;
x[i] = (int) (x0+xRad);
y[i] = (int)(y0-ampli / Math.sin(Math.toRadians(sudut)));
sudut ++;
}
g.setColor(Color.blue);
g.drawPolyline(x, y, jumlah);

7122015 Komputer Grafik java Widjianto 28

32 hal
6. Animasi Dengan Lintasan Kurva
Kita berada dalam loop (for, do-while, while-do):
1.Tampilkan obyek.
2. Tahan sesaat  Thread.sleep(n), gunakan perintah try….
3. Hapus obyek:
- ada bekas gerakan  public void HapusObyek
dng setColor(Color.white)
- tanpa bekas gerakan  ClearRect().
4.Gerakkan koordinat acuan (a,b) pada kurva y = f(x)
ax by
5. Ubah ukuran obyek (jika dikehendaki)
6. Tampilkan obyek terakhir.
7. Kembali ke 1 dan ulangi.
*). Animasi dapat juga tanpa menghapus jejak.
7122015 Komputer Grafik java Widjianto 29
32 hal
Contoh Animasi Bentuk Lingkaran Polinom:
g = (Graphics)jPanel1.getGraphics();
pX = Double.parseDouble(PusatX.getText());
pY = Double.parseDouble(PusatY.getText());
r = Double.parseDouble(NilaiR.getText());
xAwal = - r;
jumlah = (int) (2 * r);
for (int i = 0; i < jumlah; i++) {
x[i] = (int) (x0+pX+xAwal+i);
y[i] = (int) (y0-(pY+(Math.sqrt(Math.pow(r,2)-
Math.pow((xAwal+i),2)))));
y1[i] = (int) (y0-(pY-(Math.sqrt(Math.pow(r,2)-
Math.pow((xAwal+i),2)))));

7122015 Komputer Grafik java Widjianto 30

32 hal
 try {
Thread.sleep(50);
} catch (InterruptedException ex) {
Logger.getLogger(FrameGrafikPersamaanFungsiDanAni
masi.class.getName()).log(Level.SEVERE, null, ex);
}
g.setColor(Color.red);
g.drawRect(x[i], y[i], 20, 20); //obyek gerak atas
g.setColor(Color.blue);
g.drawRect(x[i], y1[i], 20, 20); //obyek gerak bawah
}

7122015 Komputer Grafik java Widjianto 31

32 hal
Contoh Animasi Bentuk Lingkaran trigonometri:
g = (Graphics)jPanel1.getGraphics();
pX = Double.parseDouble(PusatX.getText());
pY = Double.parseDouble(PusatY.getText());
r = Double.parseDouble(NilaiR.getText());
sudut = 0;
Jumlah = 360;
for (int i = 0; i <= jumlah; i++){
x[i] = (int) (x0+pX + r*Math.cos(Math.toRadians(sudut)));
y[i] = (int) (y0-(pY + r*Math.sin(Math.toRadians(sudut))));
sudut ++ ;

7122015 Komputer Grafik java Widjianto 32

32 hal
 try {
Thread.sleep(50);
} catch (InterruptedException ex) {
Logger.getLogger(FrameGrafikPersamaanFungsiDanAni
masi.class.getName()).log(Level.SEVERE, null, ex);
}
g.setColor(Color.red);
g.drawRect(x[i], y[i], 20, 20); //obyek bergerak

7122015 Komputer Grafik java Widjianto 33

32 hal
Contoh Animasi Bentuk Obyek Gabungan Kotak & Oval:
pX = Double.parseDouble(PusatX.getText());
pY = Double.parseDouble(PusatY.getText());
r = Double.parseDouble(NilaiR.getText());
sudut = 0;
Jumlah = 360;
for (int i = 0; i <= jumlah; i++){
x[i] = (int) (x0+pX + r*Math.cos(Math.toRadians(sudut)));
y[i] = (int) (y0-(pY + r*Math.sin(Math.toRadians(sudut))));
x1[i] = (int) (x0+pX + 20 + r*Math.cos(Math.toRadians(sudut)));
y1[i] = (int) (y0-(pY+ 20 + r*Math.sin(Math.toRadians(sudut))));
sudut ++ ;
7122015 Komputer Grafik java Widjianto 34
32 hal
 try {
Thread.sleep(50);
} catch (InterruptedException ex) {
Logger.getLogger(FrameGrafikPersamaanFungsiDanAni
masi.class.getName()).log(Level.SEVERE, null, ex);
}
g.setColor(Color.red);
g.drawRect(x[i], y[i], 20, 20); //obyek bergerak
g.setColor(Color.blue);
g.drawOval(x1[i], y1[i], 20, 20); //obyek bergerak

7122015 Komputer Grafik java Widjianto 35

32 hal
Contoh
Animasi Bentuk Lingkaran trigonometri Membesar:
g = (Graphics)jPanel1.getGraphics();
pX = Double.parseDouble(PusatX.getText());
pY = Double.parseDouble(PusatY.getText());
r = Double.parseDouble(NilaiR.getText());
sudut = 0;
Jumlah = 360;
for (int i = 0; i <= jumlah; i++){
x[i] = (int) (x0+pX + r*Math.cos(Math.toRadians(sudut)));
y[i] = (int) (y0-(pY + r*Math.sin(Math.toRadians(sudut))));
sudut ++ ;
7122015 Komputer Grafik java Widjianto 36
32 hal
 try {
Thread.sleep(50);
} catch (InterruptedException ex) {
Logger.getLogger(FrameGrafikPersamaanFungsiDanAni
masi.class.getName()).log(Level.SEVERE, null, ex);
}
g.setColor(Color.red);
g.drawRect(x[i], y[i], 20+i, 20+i); //obyek bergerak

7122015 Komputer Grafik java Widjianto 37

32 hal
 TUGAS

Buat program semua masalah yang telah dibahas

BAB 3 SELESAI…..

7122015 Komputer Grafik java Widjianto 38

32 hal