Objek Oriented Mengenal konsep Obyek di Processing

Presentasi berjudul: "Objek Oriented Mengenal konsep Obyek di Processing"— Transcript presentasi:

1 Objek Oriented Mengenal konsep Obyek di Processing
Membuat, Menggunakan dan Mengubah Obyek

2 Mengenal konsep obyek di Processing
Menggambar pada layar komputer adalah seperti menggambar pada sebuah kertas grafik Pixel adalah grid dari element pencahayaan pada layar komputer Koordinat-X : Nilai yang mewakili sumbu X (Horizontal) Koordinat-Y : Nilai yang mewakili sumbu Y (Vertikal)

3 Perbandingan Pixel Pixel merupakan suatu satuan standar ukuran yang digunakan pada layar. Perbandingan berikut ini adalah untuk melihat perbedaan dari setiap nilai pixel yang digunakan. Diharapkan anda bisa mengambil kesimpulan dari perbandingan berikut ini :

4 Function Function adalah dasar untuk membangun suatu blok dari program processing Behavior dari function didefinisikan sebagai parameter, seperti : size point line triangle quad rect ellipse arc Penggunaan function akan dijelaskan, anda harus lebih fokus lagi pada slide-slide berikutnya

5 Menggambar Titik Jalankan perintah, size (480, 120);
size() function memiliki dua parameter: width dan height pada layar point() function memiliki dua parameter untuk mendefinisikan posisi: koordinat-X dan koordinat-Y Jalankan perintah, size (480, 120); point (240, 60); Output :

6 Behavior Function Menggambar Bentuk Dasar

7 Menggambar Garis Untuk menggambar garis memerlukan dua buah koordinat, gunakan line () function. Bu : line (x1, y1, x2, y2); Contoh program, size (480, 120); line (20, 50, 420, 110); Output :

8 Menggambar Bentuk Dasar
Ikuti pola ini : Untuk membuat sebuah segi tiga, membutuhkan 6 parameter Untuk membuat sebuah quadrilateral, membutuhkan 8 parameter Contoh : size (480, 120); quad (158, 55, 199, 14, 392, 66, 351, 107); triangle(347, 54, 392, 9, 392, 66); triangle(158, 55, 290, 91, 290, 112); Output :

9 Menggambar Bujursangkar
Untuk menggambar bujursangkar memerlukan 4 buah paramater, gunakan rect () function. Bu : rect (x1, y1, width, height); Contoh program, size (480, 120); rect (180, 60, 220, 40); Output :

10 Menggambar Ellipse Untuk menggambar ellipse memerlukan 4 buah paramater, gunakan ellipse () function. Bu : ellipse (x1, y1, width, height); Contoh program, size (480, 120); ellipse(278, -110, 400, 400); ellipse(120, 100, 110, 110); ellipse(412, 60, 18, 18); Output :

11 Menggambar Sebagian dari Ellipse
Untuk menggambar sebagian dari ellipse memerlukan 6 buah paramater, gunakan arc () function. Bu : arc (x1, y1, width, height, start, stop); Contoh program, size(480, 120); arc(90, 60, 80, 80, 0, HALF_PI); arc(190, 60, 80, 80, 0, PI+HALF_PI); arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI); arc(390, 60, 80, 80, QUARTER_PI, PI+QUARTER_PI); Output :

12 Lingkaran dan Pengukuran Derajad

13 Menggambar Sebagian dari Ellipse dengan menggunakan Derajad
Untuk menggambar sebagian dari ellipse memerlukan 6 buah paramater, gunakan arc () function. Gunakan radians () function, pada parameter start dan stop Bu : arc (x1, y1, width, height, start, stop); Contoh program, size(480, 120); arc(90, 60, 80, 80, 0, radians (90)); arc(190, 60, 80, 80, 0, radians (270)); arc(290, 60, 80, 80, radians (180), radians(450)); arc(390, 60, 80, 80, radians (45), radians (225)); Output :

14 Menggambar dengan Urutan
Ketika program dieksekusi (run), komputer mulai membaca dari atas hingga pembacaan line program berikutnya. Perhatikan contoh berikut ini : size(480, 120); ellipse(140, 0, 190, 190); rect(160, 30, 260, 20); size(480, 120); rect(160, 30, 260, 20); ellipse(140, 0, 190, 190);

15 Shape Properties Draw Smooth Lines
smooth () function, memberikan mehalusan pada tepi garis. Prinsipnya yaitu dengan mencampurkan/ menyatukan tepi garis dengan nilai pixel terdekatnya. Jika smooth () function diaktifkan, maka nosmooth () function secara otomatis tidak aktif. Set Stroke Weight Defaultnya strokeweight adalah single pixel, fungsinya memberikan ketebalan pada garis. Set Stroke Atributes Strokejoin () function Strokecap () function

16 Draw Smooth Lines Set Stroke Weight
Contoh : size(480, 120); smooth(); ellipse(75, 60, 90, 90); strokeWeight(8); ellipse(175, 60, 90, 90); ellipse(279, 60, 90, 90); strokeWeight(20); ellipse(389, 60, 90, 90); Contoh : size (480, 120); smooth (); ellipse (140, 60, 90, 90); noSmooth (); ellipse (240, 60, 90, 90); Output : Output :

17 Set Stroke Atributes Contoh : size (480, 120); smooth (); strokeWeight (12); strokeJoin (ROUND); rect (40, 25, 70, 70); strokeJoin (BEVEL); rect (140, 25, 70, 70); strokeCap (SQUARE); line (270, 25, 340, 95); strokeCap (ROUND); line (350, 25, 420, 95); Output :

18 Contoh Lain : size (800, 600); background (255, 255, 255);
for (int i=0; i<100; i++) { fill (random(0, 255), random(0, 255), random(0, 255)); int p1x = (int) random (0,800); int p1y = (int) random (0,600); int p2x = (int) random (0,800); int p2y = (int) random (0,600); int p3x = (int) random (0,800); int p3y = (int) random (0,600); triangle (p1x, p1y, p2x, p2y, p3x, p3y); }