DAFTAR ISI BAB 1. PENGENALAN GRAFIKA KOMPUTER...1

Grafika Komputer

 

DAFTAR ISI BAB 1. PENGENALAN GRAFIKA KOMPUTER .....................................................................1 A. DEFINISI GRAFIKA KOMPUTER ................................................................................................. 1 B. SEJARAH SINGKAT GRAFIKA KOMPUTER .................................................................................. 2 C. SISTEM GRAFIKA KOMPUTER ................................................................................................... 4 D. PENERAPAN GRAFIKA KOMPUTER ........................................................................................... 4 E. PENGGAMBARAN GRAFIK........................................................................................................ 8 F. PENGERTIAN PIXEL .................................................................................................................. 9

BAB 2. KLASIFIKASI PENERAPAN GRAFIKA KOMPUTER ................................................... 10 A. KLASIFIKASI PENERAPAN GRAFIKA KOMPUTER ...................................................................... 10 B. JENIS LAYAR PENAMPIL ......................................................................................................... 10 C. PENGOLAH TAMPILAN........................................................................................................... 11 D. TIPE LAYAR TAMPILAN........................................................................................................... 12 E. SISTEM KOORDINAT .............................................................................................................. 12 F. SOFTWARE YANG DIGUNAKAN .............................................................................................. 13 1. PENGENALAN BAHASA PEMROGRAM BORLAND DELPHI .................................................. 13

BAB 3. ALGORITMA PENGGAMBARAN GARIS ................................................................ 14 A. ALGORITMA DDA................................................................................................................... 14 1. CONTOH PENGILUSTRASIAN ALGORITMA DDA UNTUK GARIS .......................................... 15 2. ALGORITMA BRESENHAM UNTUK GARIS.......................................................................... 16 3. CONTOH PENGAPLIKASIAN ALGORITMA BRESENHAM ..................................................... 17

BAB 4. KONIK .............................................................................................................. 19 A. ALGORITMA PENGGAMBARAN LINGKARAN MIDPOINT ......................................................... 19 B. ALGORITMA PENGGAMBARAN LINGKARAN LAINNYA ............................................................ 20 1. ALGORITMA SIMETRI 4X .................................................................................................. 20 2. ALGORITMA PENGGAMBARAN LINGKARAN BRESENHAM ................................................ 21 3. OUTPUT PRIMITIF UMUM UNTUK LINGKARAN ................................................................ 22 C. ALGORITMA PENGGAMBARAN ELIPS MIDPOINT .................................................................... 23 D. ALGORITMA PENGGAMBARAN ELIPS LAINNYA ...................................................................... 24 1. ALGORITMA OUTPUT PRIMITIF ELIPS DENGAN FUNGSI PARAMETER ............................... 24 2. ALGORITMA SIMETRI 4X .................................................................................................. 25 E. PENGGUNAAN FUNGSI PARAMETER ...................................................................................... 26

F. PENGGUNAAN FUNGSI DAN KURVA PRIMITIF UNTUK ANIMASI SEDERHANA ......................... 33

BAB 5. CHART ............................................................................................................. 37 A. CHART ANIMASI .................................................................................................................... 37

BAB 6. ANIMASI .......................................................................................................... 44 A. SEJARAH SINGKAT ANIMASI................................................................................................... 44 B. MACAM-MACAM ANIMASI .................................................................................................... 45 C. ANIMASI LANJUT ................................................................................................................... 51

BAB 7. GRAFIK PARAMETRIK ........................................................................................ 55 A. STANDAR KERJA PARAMETIK ................................................................................................. 55 B. GRAFIK PARAMETIK ............................................................................................................... 56 C. VARIASI LAIN GRAFIK PARAMETRIK........................................................................................ 58

BAB 1 PENGENALAN GRAFIKA KOMPUTER A. DEFINISI GRAFIKA KOMPUTER 1. Komputer digunakan untuk menampilkan dan memanipulasi informasi dalam format bergambar atau garis, baik visual-display unit(VDU) atau via printer atau plotter. 2. Manipulasi dan penyajhian data bergambar dengan computer. 3. [Dictionary] a. Sekumpulan teknologi yang digunakan untuk menciptakan seni(art) dengan computer. b. Seni atau desain yang diciptakan menggunakan teknologi. 4. [Science and Technology Encyclopedia] Grafika komputer adalah suatu cabang ilmu computer yang berhadapan dengan teknik dan teori sintesis gambar(image) komputer. Komputer menghasilkan gambar dengan meneliti (analyzing) suatu kumpulan titik atau pixels(picture elements). Grafika komputer digunakan untuk meningkatkan pemahaman dan pemindahan informasi di dalam ilmu pengetahuan, rancang bangun, kedokteran, pendidikan, dan bisnis disertai kemudahan generasi(generation), produksi , dan tampilan gambar terbuat dari objek alami dengan realism yang hampir tak bias dibedakan dengan foto(photographs).

5. [Marketing Terms] Grfaika komputer adalah gambar(pictures) yang diciptakan dan dimanipulasi melalui penggunaan alat komputer. Istilah grafika computer biasanya menyinggung beberapa alat komputer atau program yang memampukan computer untuk menampilkan dan memanipulasi gambar (pictures). Sebagai contoh, suatu printer laser disebut alat grafika komputer sebab printer tersebut mengizinkan komputer mengeluarkan gambar.demikian juga monitor komputer yang bias menampilkan gambar. Grafika komputer digunakan untuk berbagai aplikasi yang mencakup penerbitan, pendidikan, pertunjukan, dan periklanan, atau dimana saja gambar dianggap perlu atau layak untuk menciptakan suatu pesan. Penggunaanya sangat efektif pada situasi di mana ada kebutuhan data yang dihitung untuk kemudian divisualisasikan, seperti data statistic atau grafik atau tabel matematika.

6. [Britannica] Grafika komputer adalah penggunaan komputer untuk menghasilkan gambar visual. Penciptaan grafika komputer untuk menyimpan dan memanipulasi gambar memerlukan komputer digital, tampilan layar, alat input/output, dan perangkat lunak khusus untuk menggambar dan mewarnai. Pada umumnya, format grafika komputer meliputi GIF dan JPEG, untuk gambar tunggal, dan MPEG dan Quicktime, untuk gambar multiframe.

7. [Encyclopedia] Grafik komputer, perpindahan data bergambar kedalam dan keluar compute. Penggunaan teknik-teknik konversi analog-to-digital, berbagai devices curve tracers, digitizers, dan light pens-dikoneksikan keterminal grafis komputerl; program computer-aided design, atau scanner optis adalah untuk menyimpan data bergamabar pada komputer digital. Pembalikan proses melalui teknik-teknik konversi digital-to-analog memungkinkan

1   

ditampilkannya data yang disimpan di dalam format garis pada suatu mechanical plotting board, atau plotter, atau pada terminal tampilan grafis, seperti televisi.

8. [Word Net] Kata benda grafika komputer memiliki satu arti, yaitu manipulasi dan penyajian data bergambar menggunakan komputer. 9. [Wikipedia] Grafika Komputer [CG] adalah bidang dari komputasi visual, di mana penggunaan komputer akan menghasilkan gamabr visual secara sintesis dan mengintegrasikan atau mengubah informasi mengenai ruang dan visual yang dicontohkan dari dunia nyata.

B. SEJARAH SINGKAT GRAFIKA KOMPUTER Grafika Komputer adalah disiplin yang menghasilkan picture atau images menggunakan komputer, yakni meliputi pemodelan – penciptaan, manipulasi, dan penyimpanan dari objek geometris dan rendering – mengubah scene ke image, atau proses perubahan bentuk, rasterisasi, shading, illumination, dan animasi image. Grafik komputer telah secara luas digunakan, seperti untuk presentasi grafik, paint systems, computer-aided design (CAD), image processing, simulation & virtual reality, and entertaintment. Pada tahun 1950-an, keluarannya via teletypes, lineprinter, dancathode ray tube (CRT). Suatu picture bias diproduksi menggunakan karakter gelap dan terang. 1950: Ben laposky pertama kali menciptakan gambar grafis, yaitu Osiloskop yang dihasilkan oleh suatu mesin (analog) elektronik. Gambar telah diproduksi dengan manipulasi cahaya elektronik dan merekamnya dalam film berkecepatan tinggi. 1951: MIT- yang pertama menampilkan video waktu nyata (real time), dan mampu menampilkan teks waktu nyata dan grafis pada layar osiloskop yang besar. Tahun 1960-an merupakan permulaan grafikinteraktif modern, keluarannya adalah grafik vector dan grafik interaktif. Salah satu permasalahan yang terburuk adalah biaya dan mesin yang tidak bias diakses. 1960: William Fetter – koin grafika komputer untuk menguraikan metode perancangan yang baru. 1961: Steve Russel – Spacewars, permainan komputer. 1963: Douglas Englebart – mouse pertama Ivan Sutherland – sketchpad, sistem grafika komputer interaktif, sebuah sistem komunikasi grafis manusia dan mesin, fitur-fiturnya adalah: Pop-up menu Penggambaran constraint-based Pemodelan hierarki Utilized lightpen untuk interaksi Ia merumuskan gagasan dalam penggunaan primitive, lines polygons, arcs, dan lain-lain dan batasan atasnya. Ia mengembangkan dragging, rubberbanding, dan transforming algorithms; serta memperkenalkan struktur data untuk penyimpanan. Ia dipertimbangkan sebagai pendiri grafika komputer. 1964: William Fetter – model dari bentuk komputer pertama. 1965: Jack Bresernham – algoritma line-drawing.

2   

1968: Tektronik – CRT khusus, tabung penyimpanan direct-view, dengan keyboard dan mouse, antarmuka komputer yang sederhana dengan $15,000, sehingga diusahakan adanya pembuatan grafik. Ivan Sutherland – tampilan pertama head-mounted. 1969: John Warnock – area subdivision algorithm , hidden surface algorithms. Bell Labs – framebuffer pertama yang berisi 3 bit per pixel. Pada awal tahun 1970-an, keluaran menggunakan raster displays, kemampuan grafik masih tipis dan tebal. 1972: Nolan Kay Bushnell – Pong, video arcade game. 1973: John Whiteney. Jr. and Gary Demos – “Westworld”, adalah film yang pertama kali menggunakan grafika komputer. 1974: Edwin Catmuff – pemetaan tekstur dan Z-buffer hidden-surface algorithm. James Blinn – curved surfaces, perbaikan pemetaan tekstur. Phone Bui-Toung – specular highlighting 1975: Martin Newell – grafika komputer yang terkenal menggunakanBezier patches. Benolid Mandelbrot – fractal/dimensi fraksional. 1976: James Blinn – environment mapping dan bump mapping. 1977: Steve Wozniak – apple II, warna grafik komputer pribadi. 1979: Roy Trubshaw and Richard Bartle – MUD, suatu multi-user dungeon/Zork. Pada tahun 1980-an, keluarannya adalah grafik raster built-in, gambar bitmap, dan pixel. Biayabiaya komputer pribadi berkurang secara drastic, trackball dan mouse menjadi alat interaktif yang baku. 1982: Steven Lisberger – “Tron”, Disney movie yang pertama dengan grafika komputer menggunakan 3-D secara luas. Tom Brighman – “Morphing”, urutan film pertama dengan karakter wanita yang berubah bentuk menjadi binatang buas yang mirip harimau. Jihn Walkner and Dan Drake – AutoCAD. 1983: Jaron Lanier –“DataGlove”, fitur film virtusl reality suatu sarung tangan terpasang dengan tombol dan sensor untuk mendeteksi gerakan tangan. 1984: Wavefron tech. – Polhemus, perangkat lunak pertama grafik 3D. 1985: Pixar Animation Studios –“Luxo Jr.”, 1989,”Tin Toy” NES – Sistem permainan rumahan Nintendo 1987: IBM-VGA, dikenalkan Video Graphics Array. 1989:

3   

Dibentuk Video Electronics Standards Association (VESA)-SVGA, Super VGA. Pada tahun 1990-an, sejak diperkenalkan VGA dan SVGA, komputer interaktif telah digunakan secara luas, sistem Renderman menyediakan kecepatan, dan efek komputer digital yang berkualitas tinggi. 1992: Silicon Graphics – spesifikasi OpenGL 1993: University of Illinois – Mosaic, Web browser grafik pertama. Steven Spielberg – “Jurassic Park” film fiksi grafika kompuiter pertama yang sukses. 1995: Buena Vista Pictures – “Toy Story”, first full-length, computer-generated, feature film. NVIDIA Corporation – GeForce 256, GeForce3(2001) 2003: ID Software – mesin grafik Doom.

C. SISTEM GRAFIKA KOMPUTER Sebuah bagan bias mewakili sejumlah data yang saling terkait. Bagan juga memudahkan seseorang untuk meneliti kecenderungan atau aspek lain yang tersaji dalam bagan tersebut jauh lebih cepat dibandingkan dengan melihat data yang berjumlah cukup banyak. Penggunaan teknik-teknik tertentu memudahkan penyajian data yang berjumlah cukup besar dalam sebuah atau beberapa bagan oleh komputer. Dalam hal ini, operator memasukkan sejumlah data yang diperlukan sehingga dengan prosedur tertentu komputer akan bias menampilkan bagan yang diinginkan. Dengan cara tersebut, bagan yang dihasilkan oleh komputer seolah-olah merupakan gambar yang mati karena operator sama sekali tidak bias berinteraksi langsung dengan gambar yang ada dilayar komputer. Sistem yang akan dijelaskan diatas disebut sistem pasif, dimana operator tidak bisa berinteraksi secara langsung menggunakan gambar yang dibangkitkan. Cara diatas seringkali kurang memadai karena adakalanya operator ingin berinteraksi secara langsung dengan gambar yang terlihat dilayar komputer.

D. PENERAPAN GRAFIKA KOMPUTER 1. Dalam bidang sains, teknologi dan bisnis dapat dimanfaatkan pemakaian bentuk garis 2 dan 3 dimensi (grafik 2D dan 3D) untuk menunjukkan fungsi matematis, fenomenafenomena fisis, fungsi-fungsi ekonomi, histogram, diagram batang, pie chart, diagram penjadwalan pekerjaan, diagram-diagram produksi, dan masih banyak lagi yang lain. Grafik-grafik yang dihasilkan dalam bidang tersebut digunakan terutama untuk menyajikan kecendrungan dan pola ataupun peramalan dari suatu phenomena yang cukup rumit. Serta

4   

membantu para manager dalam pembuatan keputusan sehubungan dengan pekerjaan masing-masing. Semuanya disajikan dalam bentuk diagram.

Gambar 1.1 Contoh Grafik Pie Chart 2. Dalam bidang kartografi, grafika komputer banyak digunakan untuk menyajikan informasi geografis dan fenomena-fenomena alamiah lainnya. Contoh pemakaian grafika komputer dalam bidang tersebut antara lain untuk menyajiakan peta-peta geografis seperti terlihat dalam gambar 1.2; peta relief, peta eksplorasi minyak, dan penambangan, peta cuaca, peta garis tinggi permukaan laut, peta kepadatan penduduk, dan lain-lain.

Gambar 1.2 Peta GIS: Contoh Penerapan dalam Bidang Kartografi 3. Pembuatan sebuah bisa dikategorikan dalam kelompok animasi. Jika melihat ke layar televisi, maka akan ditemukan semakin banyak film kartun dengan teknik penyajian yang semakin menarik dan gambar yang juga semakin lembut. Contoh dalam kelompok simulasi adalah simulasi dari reaksi nuklir dan kimia, aliran hidrodinamis, perubahan struktur dari suatu benda yang diberi beban melebihi kekuatannya, dan lain-lain. Flight simulator merupakan contoh pemanfaatan grafika komputer yang canggih dalam segi simulasi dan animasi. Simulator tersebut tidak hanya membangkitkan gambar-gambar

5   

yang menunjukkan bahwa bukmi berada dalam keadaan diam dan pesawat dalam keadaan bergerak, tetapi juga bisa membangkitkan efek-efek khusus, misalnya kabut, lampu diwaktu malam, badai awan, hujan, dan fenomena-fenomena lain yang banyak ditemui para pilot. Dengan cara yang sama, pengaksesan komputer dan pengeksekusian suatu program juga bisa disimulasikan sehingga bisa diperlihatkan bagaimana masing-masing komponen yang ada dalam komputer saling berinteraksi antara satu sama yang lain.

 

Gambar 1.3 Penerapan Grafika Komputer Dalam Film 4. Dalam computer-aided design(CAD), grafika komputer bisa digunakan untuk merancang komponen-komponendari sistem mekanis, elektris, elektro-mekanis, peranti-peranti elektronis, maupun peranti-peranti yang lai. Sistem-sitem tersebut mencakup strukturstruktur bangunan, reactor-reaktor kimia, badan-badan mobil, pesawat terbang, lambung kapal lengkap dengan ruang yang ada, jaringan komputer dan telepon, dan sebagainya. Penekanan dibidang tersebut adalah dihasilkannya dengan ketelitian yang sangat tinggi. Selain itu, citra yang dihasilkan dari CAD bisa dipakai sebagai masukan bagi suatu sistem yang akan mengevaluasi model yang digambar sesuai kebutuhan. Menggunakan cara-cara tertentu, operator bisa mengubah model yang sudah ada untuk disesuaikan dengan kebutuhan.

Gambar 1.4 Penerapan Grafika Komputer Dalam Bidang CAD 5. Dalam process control, misalnya untuk flight simulator, operator hanya berinteraksi dengan suatu keadaan yang disimulasikan, bukan berinteraksi langsung dengan dunia nyata.

6   

Dalam beberapa terapan, operator bisa berinteraksi langsung dengan dunia nyata melalui tampilan yang tersaji dalam komputer. Pada reactor-reaktor kimia, pabrik-pabrik, dan jaringan komputer, misalnya, sensor-sensor sering dipasang di bagian-bagian kritis. Sensor-sensor tersebut kemudian dihubungkan kesebuah komputer yang bisa menampilkan citra grafis sehingga operator bisa dengan mudah mengamati bagian-bagian kritis dari reactor, maupun pabrik melalui tampilan layar komputer. Dalam bidang militer, para jendral seringkali harus duduk di depan layar komputer yang menyajiakan data tentang kondisi lapangan, dan perubahan bisa terjadi, serta data lain yang diperlukan.

Gambar 1.5 Contoh Penerapan Grafika Komputer dalam Bidang Flight Simulator 6. Dalam bidang otomasi kantordan publikasi elektronis, grafika komputer dimanfaatkan untuk menghasilkan naskah-naskah yang tidak hanya terdiri dari tulisan, tetapi juga dilengkapi dengan gambar, bagan atau informasi 2D lainnya.

Gambar 1.6 Contoh Grafik Hasil Plotting Komputer

7   

7. Dalam bidang seni komersial, grafika komputer dimanfaatkan untuk membuat ulang gambar-gambar yang memiliki niali historis tinggi yang paling pentinguntuk dilestarikan, seperti lukisan dari pelukis terkenal. Selain itu, grafika komputer juga dimanfaatkan dalam pembuatan iklan atau logo dari suatu produk.

Gambar 1.7 Contoh Lukisan Monalisa Hasil Remake dengan Komputer 8. Dalam bidang antar muka grafis (Graphical User Interface/GUI), grafika komputer seolaholah menyediakan suatu bahasa anatrmuka pemakai (User Interface) yang baru. Hal itu dikarenakan “dialog” antara pemakai dan komputer tidak lagi hanya dilakukan melalui suatu perintah yang harus diketikkan. Tetapi pemakai juga bisa memilih suatu simbol atau icon yang tersedia untuk mengerjakan aktivitas yang diinginkan. Pemilihan icon bisa dilakukan menggunakan peranti pembantu seperti mouse , lightpen, dan lainnya.

Gambar 1.8 Sistem Operasi Windows Merupakan Hasil Pengembangan dari Grafika Komputer

E. PENGGAMBARAN GRAFIK Dalam penggambaran grafik secara sederhana biasanya dibuat titik cukup banyak sehingga cirri dasar dari grafik sangat jelas. Disebutkan bahwa kesimetrisan grafik bisa mengurangi usaha yang tercakup, khususnya dalam mengenali titik-titik tempat terjadinya

8   

perubahan atas cirri-ciri grafik. Kita bisa menentukan titik maksimum loakl, tiotik minimum local, dan titik balik. Kita bisa juga menentukan secara persis dimana grafik naik ataui dimana grafik cekung ke atas. Pengikutsertaan gagasan tertsebut dalam prosedur penggambaran grafik adalah program untuk pasal ini.

F. PENGERTIAN PIXEL Pixel merupakan singkatan dari picture element, kadang-kadang juga disebut pel. Pixel merupakan satu titik dalam satu grid berbentuk persegi atau juga beribu titik secara individual “dilukis” menjadi suatu bentuk image yang dihasilkan pada layar komputer atau pada kertas oleh sebuah Printer. seperti halnya bit, yakni unit informasi terkecil yang bisa diproses oleh komputer, sebuah pixel adalah elemen terkecil dari perangkat keras pencetak atau display, seperti monitor dan bagi perangkat lunak yang bisa memanipulasi untuk menghasilkan image berupa huruf-huruf, angka-angka, atau grafik. Sebagai contoh, huruf “A” sebenarnya dihasilkan dari suatu pola pixel dalam sebuah grid, seperti gambar 1.9 berikut.

Gambar 1.9 Pola Titik pada Huruf A

9   

BAB 2 KLASIFIKASI PENERAPAN GRAFIKA KOMPUTER A. KLASIFIKASI PENERAPAN GRAFIKA KOMPUTER Kriteria pertama adalah “tipe dari objek dan gambar yang dihasilkan”tipe dari objek dan gambar yang dihasilkan”. Terapan yang termasuk dalam criteria tersebut, antara lain gambar-gambar garis dari objek dua dimensi dan tiga dimensi(yang sering disebut wired frame pictures). Misalnya, garis-garis yang menunjukkan struktur suatu bangunan, gambargaris untuk objek tiga dimensi dengan bagian tertentu yang tidak tampak, gambar dua dimensi dengan gray scale yang berbeda, serta gambar tiga dimensi yang memperlihatkan efek pencahayaan/bayangan terapan-terapan yang sejenis. Klasifikasi kedua adalah “Jenis interaksi derajat pengendalian objek/gambar dalam layar”. Dalam offline plotting, gambar bisa dibentuk dari sekumpulan data yang diketahui atau diambil dari suatu basis data. Dengan demikian, gambar yang dihasilkan tidak bisa diubah kecuali dengan mengubah basis data yang diketahui. Dalam interaktive plotting, operator bisa berinteraksi dengan gambar sehingga operator bisa mengubah gambar yang tampil pada layar menggunakan peranti yang tersedia. Interactive design operator bisa menggambar suatu bentuk tertentu yang dimulai pada layar yang berada dalam keadaan kosong. Selanjutnya, ditambahkan sejumlah objek dimana operator bisa dengan mudah dan bebas mengubah gambar yang telah terbentuk. Operator juga bisa memperbesar atau memperkecil gambar. Jika perlu, operator bisa melihat bagian-bagian tertentu secara lebih rinci. Klasifikasi ketiga merupakan peranan gambar atau bagaimana gambar yang tampil bagi operator atau siapa saja yang melihatnya. Dalam bidang-bidang tertentu, misalnya kartografi, misalkan gambar yang dihasilkan merupakan produk utama, sedangkan pada bidang-bidang lain, gambar yang dihasilkan hanyalah merupakan visualisai dari suatu objek atau fenomena yang ingin diamati. Klasifikasi yang keempat adalah hubungan antar objek dan gambar yang tampil. Dalam hal ini, operator menampilkan sebuah gambar sebanyak satu kali atau sekelompok gambar yang saling berhubungan atau dengan teknik lainnya. Dengan demikian, kita bisa mengembangkan paketpaket grafika komputer pada kelompok-kelompok yang sudah dijelaskan.

B. JENIS LAYAR PENAMPIL Pada dasarnya, semua layar penampil dengan kemampuan grafik mempunyai tiga komponen utama, yaitu pengingat digital atau frame buffer dimana citra yang akan ditampilkan ke layar

10   

disimpan sebagai matrix nilai elemennya menunjukkan intensitas dari citra grafis yang akan ditampilkan; layar penampil, dan suatu output pengendali tampilan (display controller) atau pengolah tampilan (display processor), yang berfungsi untuk melewatkan isi pengingat digital dan mengolahnya untuk ditampilkan ke layar tampil. Cara penampilan gambar pada layar membedakan jenis layar tampilan yang ada. Layar tampilan yang dikembangkan sekitar tahun enam puluhan, dan yang masih banyak digunakan sampai saat ini, disebut dengan tampilan vector atau tampilan kaligrafi. (vector, calligraphic atau stroke display). Pengingat digital pada jenis tampilan vector berisi daftar tampilan (display list) atau program tampilan (diplay program) yang berisi perintah penggambaran titik, perintah penggambaran garis dan perintah penggambaran karakter. Perintah-perintah ini selanjutnya akan diolah oleh pengolah tampilan yang akan mengubah data digital menjadi tegangan analog yang akan dipakai untuk memancarkan electron, yang apabila mengenai tabung layar tampilan yang dilapisi fosfor akan menyebabkan fosfor tersebut berpendar, dan terlihat ada gambar. Karena sinar pendar dari fosfor tersebut tidak tahan lama, dalam puluhan atau ratusan milidetik, maka electron-elektron tersebut harus ditembakkan minimal 30 kali per detik untuk menghindari adanya kedip. Proses ini disebut sebagai penyegaran electron (electron refreshing). Pada pertengahan tahun tujuh puluhan dikembangkan jenis layar tampilan berdasarkan teknologi televisi dan disebut sebagai raster display. Dalam tampilan jenis ini, garis, karakter dan bentuk-bentuk lain selalu digambar berdasarkan komponen terkecilnya, yaitu titik dan biasa disebut sebagai pixel atau pel (picture element). Sebuah titik pada layar tampilan bisa dihidupmatikan dengan mudah. Karena status sebuah titik adalah salah satu dari hidup (nyala) atau mati, maka dengan mudah status tersebut dikodekan menggunakan angka 1 (untuk titik yang hidup/menyala ) atau 0 (untuk titik yang mati/tidak menyala). Dengan cara inilah sesungguhnya suatu citra grafis disimpan di dalam pengingat digital. Didalam pengingat digital, citra grafis yang akan ditampilkan disimpan sebagai pola bit. Dengan mengubah pola bit yang ada dalam pengingat digital, dengan seterusnya kita akan menggunakan istilah piksel, bisa dibentuk gambar sesuai keinginan. Untuk gambar hitam-putih, warna hitam bisa disajikan dengan menggunakan bit 1, dan warna putih menggunakan bit 0, dan hanya memerlukan sebuah penembak elektron. Untuk gambar berwarna (color) pengaturan ini sedikit lebih rumit karena ketergantungan pada warna yang digunakan.

C. PENGOLAH TAMPILAN Pengolahan tampialan (display processor) atau vidio display adapter adalah bagian yang mengolah pola bit dari pengingat digital menjadi tegangan analog, yang selanjutnya akan membangkitkan elektron yang digunakan untuk menembak fosfor pada layar tampilan. Adapter tampilan yang banyak digunakan untuk komputer-komputer pribadi adalah MDA (Monochrome Display Adapter), CGA (Color Graphics Adapter), MCGA (Multi-Color Graphics Array), EGA (Enhanched Graphics Adapter), VGA (Video Graphics Adapter), SVGA (Super Video Graphics Adapter), dan WXGA (Weight Extra Graphics Adapter).

11   

D. TIPE LAYAR TAMPILAN Tipe layar tampilan berdasarkan jenis adapter, dikenal pula jenis layar tampilan untuk bisa dipakai bersama-sama dengan salah satu dari adapter tampilan diatas. Layar tampilan bisa dikelompokan menjadi 5 tipe yaitu: 1. Direct-Drive Monochrome Monitor. Tipe layar tampilan ini biiasanya digunakan untuk adapter jenis MDA atau EGA. Layar tampilan jenis ini hanya menyajikan warna latar depan (foreground) dan warna latar belakang (background). 2. Composite Monochrome Monitor. Tipe layar ini digunakan bersama-sama dengan adapter dengan jenis CGA. Tipe layar ini hanya bisa menyajikan sebuah warna latar depan, dan hanya dapat digunakan bersama-sama dengan adapter jenis CGA. Saat ini layar dengan tipe ini sudah jarang ditemui, karena resolusi dan jumlah yang dapat ditampilkannya memang tidak banyak. 3. Composite Color Monitor. Tipe layar ini dapat menghasilkan teks dan grafik berwarna (color). Meskipun demikian, tipe layar ini mempunyai resolusi yang jelek, sehingga gambar yang dihasilkan tidak bagus. Tipe layar tampilan ini harus digunakan bersama-sama dengan adapter jenis CGA. 4. Red-Green-Blue Monitor. Tipe layar ini lebih dikenal dengan sebutan RGB monitor (RGB= Red-Green-Blue). Tipe layar RGB lebih baik dibanding dengan Composite Color Monitor karena layar tampilan ini memproses isyarat warna merah, hijau dan biru secara terpisah. Dengan demikian, teks dan grafik yang dihasilkan juga lebih halus. 5. Variable-Frequency Monitor. Adapter tampiilan yang berbeda sering kali membangkitkan isyarat yang berbeda pula, sehingga ada beberapa layar tampilan yang tidak bisa dipasang dengan adapter tertentu. Layar tampilan ini memungkinkan kita untuk menggunakan adapter tampilan yang berbeda sehingga apabila ada teknologi adapter penampil yang lebih baru, kita tidak perlu membeli layar tampilan yang baru juga.

E. SISTEM KOORDINAT Suatu grafik, dari bentuk yang paling sederhana, sampai yang paling yang paling rumit sekalipun selalu bisa dipecahkan menjadi elemen-elemen yang paling kecil, yaitu titik. Dalam layar penampil elemen terkecil dari grafik adalah piksel. Letak suatu titik atau piksel, bisa dibedakan dengan titik lain berdasarkan lokasi titik-titik tersebut. Dalam dunia nyata, dikenal adanya sistem koordinat Cartesian yang dipakai untuk membedakan lokasi atau posisi sembarang titik atau obyek lain. Dalam sistem koordinat tersebut dikenal sistem koordinat cartesian dua dimensi dan tiga dimensi. Dalam sistem koordinat cartesian dua dimensi, lokasi setiap titik ditentukan oleh dua besaran. Nilai dua besaran tersebut apabila digambar akan membentuk suatu sumbu koordinat mendatar dan tegak. Sumbu koordinat mendatar sering disebut dengan absis (sumbu x), dan sumbu koordinat tegak dinamakan dengan ordinat (sumbu y). Dalam sistem koordinat dimensi tiga, selain sumbu x dan sumbu y terdapat satu sumbu lain, yang arahnya tegak lurus dengan

12   

sumbu y dan sekaligus tegak lurus sumbu x, sehingga lebih tepat dikatakan bahwa sumbu ini tegak lurus (menembus) bidang gambar, dan disebut sebagai sumbu z. Secara sederhana, sistem koordinat Cartesian dua dimensi dan tiga dimensi bisa digambarkan. Berbeda dengan sistem koordinat cartesian yang mengenal sumbu x dan sumbu y (serta sumbu z untuk sistem koordinat tiga dimensi) negatif, maka dalam sistem koordinat layar, yang hanya mengenal sistem koordinat dua dimensi, hanya dikenal sumbu x dan sumbu y positif. Dalam sistem koordinat layar, koordinat (0,0) menunjukkan titik kiri atas layar, dan koordinat (x1,y1) menunjukkan titik kanan bawah. Nilai x1dan y1 menyesuaikan terhadap mode grafik yang digunakan. Sebagai contoh, untuk mode VGA Hi, nilai x1 adalah 639, dan nilai y1 adalah 479. Seperti dijelaskan di atas, sistem koordinat layar hanya mengenal sumbu x dan sumbu y positif. Meskipun demikian, penggunaan cara-cara tertentu pada koordinat layar bisa dimanipulasi sehingga bisa menampilkan gambar seperti pada halnya pada koordinat Cartesian dan dimensi.

F. SOFTWARE YANG DIGUNAKAN 1. Pengenalan Bahasa Pemrogram Borland Delphi Delphi adalah sebuah IDECompiler untuk bahasa pemrograman Pascal dan lingkungan pengembangan perangkat lunak. Produk ini dikembangkan oleh CodeGear sebagai divisi pengembangan perangkat lunak milik Embarcadero, divisi tersebut sebelumnya adalah milik Borland. Bahasa Delphi, atau dikenal pula sebagai object pascal (pascal dengan ekstensi pemrograman berorientasi objek (PBO/OOP)) pada mulanya ditujukan hanya untuk Microsoft Windows, namun saat ini telah mampu digunakan untuk mengembangkan aplikasi untuk Linux dan Microsoft .NET framework (lihat di bawah). Dengan menggunakan Free Pascal yang merupakan proyek opensource, bahasa ini dapat pula digunakan untuk membuat program yang berjalan di sistem operasi Mac OS X dan Windows CE Pada tanggal 8 Februari 2006, Borland mengumumkan akan melepas seluruh jajaran produk pengembangan aplikasi komputernya termasuk di antaranya Delphi. [1]. Saat ini Delphi menjadi bagian dari jajaran IDE milik Embarcadero Technologies setelah Embarcadero Technologies mengakuisisi CodeGear, anak perusahaan Borland yang menangani tool pengembangan aplikasi.

13   

BAB 3 ALGORITMA PENGGAMBARAN GARIS Persamaan slope-intercept pada bidang kartesius, untuk garis lurus dinyatakan sebagai: Y=m-x+b Dengan m menyatakan slope atau kemiringan garis dan b sebagai suatu intercept y. Misalkan diketahui dua endpoints pada sebuah garis yang dispesifikasi pada posisi (x1, Y1) dan (X2, Y2) maka pengilustrasian garis tersebut ditunjukkan pada gambar dibawah ini. Kita dapat menentukan nilai untuk slope atau kemiringan garis yang dinotasikan dengan m dan nilai y, serta intercept b dengan menggunakan persamaan:

m=

(

)

(

)

b=y1-m.x1 Algoritma untuk menentukan penggambaran garis didasari pada persamaan (3). Untuk x, dan interval garis ∆y melalui persamaan.

∆y=m. ∆x Secara sederhana kita juga dapat memperoleh x pada interval ∆x dengan persamaan:

∆x=

∆ ( )

Algoritma penggambaran garis yang akan kita ulas dan implementasikan didalam bab ini terdiri dua algoritma penggambaran, yaitu algoritma DDA dan algoritma bresenham.

A. ALGORITMA DDA Digital Diferential Analyser adalah suatu algoritma (pendekatan) pengkonversian suatu himpunan pixel menjadi suatu garis yang didasari atas perhitungan Dx dan Dy, dengan menggunakan persamaan (4) dan (5) diatas. Kita cocokan sebuah garis pada unit interval di dalam satu koordinat dan kemudian kita tentukan nilai interger yang mempunyai jarak terdekat dengan line-path untuk koordinat yang lain. Perhatikan garis pertama dengan slope positif yang ditunjukkan gambar di atas. Jika slope kurang dari 1, kita tentukan nilai untuk unit interval x (dalam hal ini Dx=1) dan hitung beberapa hasil iterasi secara berturut2 untuk nilai y dengan persamaan.

Yk+1=Yk+m

14

subskrip k bernilai integer yang dimulai dari 1, untuk pengiterasian pertama, dan terus menambahakan nilai k dengan 1 sampai pasangan koordinat (x,y) Yng terpenuhi oleh algoritma tersebut. Slope m dapat berupa suatu nilai antara 0 dan 1, kemudian hasil hitungan y akan dibulatkan (trancation) menjadi suatu nilai integer yang mendekati dengan nilai sebenarnya yang bertipe pecahan (floating). Untuk garis dengan kemiringan positif atau > (lebih besar) dari 1, kita harus menukarkan peran dari x dan y, dapat kita contohkan pada interval y (Dy=1), lalu hitung beberapa nilai x secara berturut-turut menggunakan persamaan.

Xk+1 = Xk + = Persamaan (6) dan (7) didasarkan dari pengasumsian suatu garis yang diproses dari titik ujung paling kiri dari garis menuju titik ujung paling kanan dari garis tersebut. Jika proses ini dibalikkan atau ditukar, suapaya diperoleh keadaan di mana titik ujung awalnya berada du sebelah kanan, maka kita harus memberikan nilai ∆x=1 dan

yk+1 = yk – m atau (di saat slope atau kemiringan garis lebih besar dari 1) maka kita harus memasukkan nilai Dy = -1 dan

Xk+1 = Xk Persamaan (6) dan (9) dapat juga digunakan untuk menghitung posisi pixel yang membentuk suatu garis dengan slope negatif. Jika nilai absolut slope lebih kecil dari 1 dan titik-titik ujung (endpoint) awalnya berada di sisi paling kiri, kita berikan nilai Dx = 1 dang hitung nilai yk+1 dengan persamaan (6). Dan kemudian endpoint awal berada pada posisi sebelah kanan (untuk slope yang sama), kita masukkan Dx = -1 dan kita dapatkan nilai y dari hasil perhitungan menggunakan persmaan (8). Sama juga ketika nilai absolut dari sebuah slope positif adalah besar dari 1, kita gunakan Dy = -1 dan kita tentukan Xk+1 dengan persamaan (9) atau kita gunakan Dy = 1 dan kita tentukan Xk+1 dengan persamaan (7). Algoritma ini dirangkum di dalam prosedur berikut, yang mana program menerima input dua posisi pixel endpoint (titik-titik ujung suatu garis) sebagai awalnya dan menentukan perbedaan horizontal den vertikal diantara dua posisi endpoint yang diperoleh untuk parameter dx dan dy. Perbedaan nilai yang cenderung besar akan menentukan nilai dari parameter step di dalam algoritma DDA. Dimulai dari posisi pixel (Xa,ya) kita tentukan penyeimbang yang dibutuhkan pada beberapa langkah program untuk menghasilkan posisi pixel selanjutnya sepanjang line path. Digital diferential analyzer merupakan suatu metode yang paling cepat melakukan kalkulasi (menghitung) keberadaan posisi pixel dan merupakan implementasi langsung dari persamaan (1). Program yang digunakan untuk pengimplementasian DDA algoritma ke screen komputer menggunakan Delphi dapat dirancang sebagai berikut:

1. Contoh Pengilustrasian Algoritma DDA Untuk Garis

15

Gambar 3.1.1 Tampilan Pengilustrasian Algoritma DDA Listing Program: procedure TForm1.Button1Click(Sender: TObject); var dx,dy,fstep,f,x1,x2,y1,y2:integer; deltax,deltay,x,y:real; begin x1:=strtoint(edit1.Text); y1:=strtoint(edit2.Text); x2:=strtoint(edit3.Text); y2:=strtoint(edit4.Text); dx:=(x2-x1); dy:=(y2-y1); if(abs(dx)>abs(dy)) then fstep:=abs(dx) else fstep:=abs(dy); deltax:= dx/fstep; deltay:= dy/fstep; x:=x1;y:=y1; canvas.Pixels[trunc(x),trunc(y)]:=clblue; for f:=0 to fstep-1 do begin x:=x+deltax; y:=y+deltay; canvas.Pixels[trunc(x),trunc(y)]:=clblue; end; end;

2. Algoritma Bresenham Untuk Garis Algoritma Bresenham merupakan suatu algoritma (pendekatan) yang dikreasikan oleh Bresenham yang tidak kalah akurat dan efisien dengan algoritma primitif lainnya (seperti DDA), bagian pengkonversian (scan–konversi) garis akan melakukan kalkulasi untuk penambahan nilai–nilai integer (yang dibutuhkan untuk membentuk garis) yang disesuaikan dengan tipe

16

grafik yang dipakai oleh layar komputer(keadaan monitor PC)kita. Untuk mengilustrasikan pendekatan bresenham, pertama kita harus memperhatikan proses scan- konvensi untuk garis dengan slope positif yang lebih kecil dari 1. Posisi pixel sepanjang line-path kemudian ditentukan dengan penyamplingan pada unit interval x.dimulai dari endpoint kiri (Xo,Yo) dari garis yang diberikan, kita pindahkan beberapa kolom berturut-turut (berdasarkan posisi x) dan plot pixel-pixel yang mempunyai nilai scan-line y ke jarak yang paling dekat dengan linepath.secara matematis pembentukan algoritma bresenham adalah sebagai berikut: y = m(Xk+1) + b (10) di mana d1 = y-yk dan subtitusikan (10) ke da;a, d1; d1 = m(Xk+1) + b – yk di mana d2 = (yk + 1) – y, dan subtitusikan (10) ke dalam d2; d2 = yk + 1 – m(Xk+1) – b kemudian d1-d2 d1-d2 – 2m(Xk+1) – 2yk +2b – 1 nilai parameter keputusan pk untuk langkah ke-k th (k th – step) didalam algoritma bresenham dapat ditentukan dengan menyusun suatu persamaan (11). Pk = Dx (d1 – d2) = 2Dy. Xk - 2Dx.yk + c Pk+1 = 2Dy.Xk+1 - 2Dx.yk+1 + c (12) Kemudian pk+1 – pk Pk+1 – pk = 2Dy(xk+1 – xk) - 2Dx(yk+1 – yk) Disini kita peroleh xk+1 = xk+1, agar diperoleh suatu manipulasi persamaan berikut:

Pk+1 = pk + 2Dy - 2Dx(yk+1 – yk) (13) Dimana yk+1 – yk mempunyai perkisaran nilai antara 0 dan 1, di mana nilai – nilai tersebut sanagt tergantung pada tanda (+ dan -) dari parameter pk. Perhitungan rekursif dari parameter ini dilakukan pada beberapa posisi integer x, dimulai pada koordinat endpoint yang paling kiri pada garis. Parameter pertama, po, dievaluasi atau digeneralisasikan dari persamaan (12) dengan posisi awal pixel (xo,yo) dan slope atau kemiringan m yang nilainya dapat ditentukan dari perhitungan atau kalkulasi Dy / Dx: P = 2Dy – Dx

3. Contoh Pengaplikasian Algoritma Bresenham Perancangan program untuk penggambaran garis menggunakan pendekatan Bresenham dapat dilakukan sebagai berikut:

17

Gambar 3.1.2 Tampilan Program Algoritma Bresenham Listing program: procedure TForm1.Button1Click(Sender: TObject); var p,dx,dy,xend,f,x,y,xa,xb,ya,yb: integer; begin xa:=216; xb:=345; ya:=145; yb:=270; dx:=abs(xa-xb); dy:=abs(ya-yb); p:=(2*dy)-dx; if (xa>xb) then begin x:=xb; y:=yb; xend:=xa; end else begin x:=xa; y:=ya; xend:=xb; end; canvas.Pixels[x,y]:=clred; for f:=x to xend do begin x:=x+1; if(p<0)then p:=p+(2*dy) else begin y:=y+1; p:=p+(2*(dy-dx)); end; canvas.Pixels[x,y]:=clred; end; end; end.

18

BAB 4 KONIK A. Algoritma Penggambaran Lingkaran Midpoint

Gambar 4.1 Tampilan Program Lingkaran Midpoint Listing Program: procedure TForm1.Button1Click(Sender: TObject); var x,y,p,xc,yc,radius:integer; begin x:=0;xc:=100;yc:=200;radius:=45; y:=radius; p:=1-radius; while(x
19

else begin x:=x+1; y:=y-1; end; if(p<0)then p:=p+2*x+1 else p:=p+2*(x-y)+1; end; end; end.

B. Algoritma Penggambaran Lingkaran Lainnya 1. Algoritma simetri 4X

Gambar 4.2.1 Tampilan program Simetri 4X/Circle 4X

Listing programnya: procedure TForm1.Button1Click(Sender: TObject); var d,c,x,y,theta,thetf:real; xc,yc,r:integer; begin xc:=250;yc:=200;r:=199; thetf:=0.0; d:=2*PI; theta:=d/4; c:=1/r; while (thetf
20

x:=r*cos(thetf); y:=-r*sin(thetf); canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clblue; canvas.pixels[trunc(xc+x),trunc(yc-y)]:=clblue; canvas.pixels[trunc(xc-x),trunc(yc+y)]:=clblue; canvas.pixels[trunc(xc-x),trunc(yc-y)]:=clblue; canvas.pixels[trunc(xc+y),trunc(yc+x)]:=clblue; canvas.pixels[trunc(xc+y),trunc(yc-x)]:=clblue; canvas.pixels[trunc(xc-y),trunc(yc+x)]:=clblue; canvas.pixels[trunc(xc-y),trunc(yc-x)]:=clblue; thetf:=thetf+c; end; end; end.

2. Algoritma penggambaran lingkaran bresenham

Gambar 4.2.2 Tampilan Program Lingkaran Bresenham Listing Program: procedure TForm1.Button1Click(Sender: TObject); var x,y,p,xc,yc,r:integer; begin xc:=250; yc:=123; r:=100; x:=0; y:=r; p:=(3-(2*r)); while(x
21

canvas.Pixels[xc-x,yc+y]:=clblue; canvas.Pixels[xc-x,yc-y]:=clblue; canvas.Pixels[xc+y,yc+x]:=clblue; canvas.Pixels[xc+y,yc-x]:=clblue; canvas.Pixels[xc-y,yc+x]:=clblue; canvas.Pixels[xc-y,yc-x]:=clblue; if(p<0)then p:=(p+(4*x)+6) else begin p:=(p+(4*(x-y))+10); y:=y-1; end; x:=x+1; end; end; end.

3. Output primitif umum untuk lingkaran.

Gambar 4.2.3 Tampilan Program Output Primitif Umum Untuk Lingkaran Listing Program: procedure TForm2.Button1Click(Sender: TObject); var c,x,y,theta,theta_b:real; r,xc,yc:integer; begin r:=110; xc:=300; yc:=305; c:=1/(r); theta :=0.0; theta_b :=2*PI; while(theta
22

y:=yc-r*sin(theta); canvas.pixels[trunc(x),trunc(y)]:=clblack; theta:=theta+c; end; end; end.

C. Algoritma Penggambaran Elips Midpoint

Gambar 4.3 Tampilan Program Elips Midpoint Listing program: procedure TForm1.Button1Click(Sender: TObject); var x,y,xc,yc,rx,ry,p,px,py,ry2,rx2,tworx2,twory2:integer; begin ry:=150;rx:=76;xc:=400;yc:=200; ry2:=ry*ry; rx2:=rx*rx; twory2:=2*ry2; tworx2:=2*rx2; x:=0; y:=ry; canvas.Pixels[xc+x,yc+y]:=clblack; canvas.Pixels[xc+x,yc-y]:=clblack; canvas.Pixels[xc-x,yc+y]:=clblack; canvas.Pixels[xc-x,yc-y]:=clblack; p:=abs(trunc(ry2-rx2*ry+(0.25*rx2))); px:=0; py:=tworx2*y; while(px=0) then begin

23

y:=y-1; py:=py-tworx2; end; if (p<0)then p:=p+ry2+px else p:=p+ry2+px-py; canvas.Pixels[xc+x,yc+y]:=clblack; canvas.Pixels[xc+x,yc-y]:=clblack; canvas.Pixels[xc-x,yc+y]:=clblack; canvas.Pixels[xc-x,yc-y]:=clblack; end; p:=trunc(ry2*(x+0.5)*(x +0.5)+rx2*(y-1)*(y-1)-rx2*ry2); while(y>0)do begin y:=y-1; py:=py-tworx2; if (p<=0)then begin x:=x+1; px:=px+twory2; end; if (p>0)then p:=p+rx2-py else p:=p+rx2-py+px; canvas.Pixels[xc+x,yc+y]:=clblack; canvas.Pixels[xc+x,yc-y]:=clblack; canvas.Pixels[xc-x,yc+y]:=clblack; canvas.Pixels[xc-x,yc-y]:=clblack; end; end; end.

D. Algoritma Penggambaran Elips Lainnya 1. Algoritma output primitif elips dengan fungsi parameter.

Gambar 4.4.1 Tampilan Gambar Elips dengan Fungsi Parameter

24

Listing program: procedure TForm1.Button1Click(Sender: TObject); var c,x,y,theta,theta_b:real; xc,yc,r1,r2:integer; begin xc:=300;yc:=200;r1:=50;r2:=190; c:=1/(r1); theta :=0.0; theta_b:=2*PI; while(theta
2. Algoritma Simetri 4X

Gambar 4.4.2 Tampilan Program Elips Simetri 4X Listing program: procedure TForm1.Button1Click(Sender: TObject); var d,c,x,y,theta,thetf:real; xc,yc,r,r2:integer; begin xc:=300;yc:=200;r:=150;r2:=130; thetf:=0.0; d:=2*PI; theta:=d/4; c:=1/(r); while (thetf
25

begin x:=r*cos(thetf); y:=r2*sin(thetf); canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clblue; canvas.pixels[trunc(xc+x),trunc(yc-y)]:=clblue; canvas.pixels[trunc(xc-x),trunc(yc+y)]:=clblue; canvas.pixels[trunc(xc-x),trunc(yc-y)]:=clblue; canvas.pixels[trunc(xc+y),trunc(yc+x)]:=clblue; canvas.pixels[trunc(xc+y),trunc(yc-x)]:=clblue; canvas.pixels[trunc(xc-y),trunc(yc+x)]:=clblue; canvas.pixels[trunc(xc-y),trunc(yc-x)]:=clblue; thetf:=thetf+c; end; end; end.

E. Penggunaan Fungsi Parameter. Suatu fungsi y=f(x) yang dinyatakan dalam bentuk kartesius sering kali menjadi lebih mudah bentuknya kalau ditulis dalam bentuk parameter disini adalah sebuah variable perantara yang menghubungkan y dengan x. Misalnya sebagai parameter kita ambil variable t sehingga fungsi yang tadinya mempunyai bentuk y=f(x) menjadi: X=f1(t) Y=f2(t) Parameter t sekarang berperan sebagai variable bebas, sedang x dan y sebagai variable tak bebas. Misalkan persamaan kartesius lingkaran x2+y2=a2 dalam bentuk parameter t mempunyaio persamaan: X=a cos t Y=a sin t, 0 ≤ t ≤ 2 Parameter t disini menyatakan sudut yang diapit sumbu x positif dan radius OP (Lihat Gambar). Berbagai macam fungsi kurva digunakan dalam pemodelan suatu objek, jalur penspesifikasian perpindahan berbagai objek didalam grafik animasi, data, dan fungsi penggrafikan dan aplikasiaplikasi grafik lainnya. Secara umum pembentukan kurva mencakup kerucut, trigonometri dan fungsi eksponen, distribusi eksponensial, polinominal biasa, dan fungsi spline. Penggambaran kurva-kurva ini dapat dihasilkan dengan metode atau pendekatan yang tidak jauh berbeda yang dibahas pada diskusi terdahulu tentang fungsi lingkaran dan fungsi elips. Kita bisa menghasilkan posisi sepanjag jalur kurva secara langsungdari gambaran eksplisit y=f(x) atau

26

dalam bentuk parametric. Alternative lain, kita dapat menggunakan tambahan metode midpoint untuk memplot alur kurva dengan fungsi implicit f(x,y)=0. Contoh-contoh pemanfaatan fungsi parameter dalam suatu diringkas sebagai berikut:

program dapat

1. Sinus

Gambar 4.7 Tampilan Program Fungsi Parameter (Sinus) Listing program: procedure TForm1.Button1Click(Sender: TObject); var fs,fy: real; x:integer; begin fs:=0.0; for x:=0 to 740 do begin fy:=80*sin(fs/40); canvas.pixels[trunc(320+fs),trunc(240-fy)]:=clred; canvas.pixels[trunc(320-fs),trunc(240-fy)]:=clred; fs:=fs+1; end; end; end.

27

2. Cardiod

Gambar 4.6.2 Tampilan Program Fungsi Parameter (Cardiod) Listing Program: procedure TForm1.Button1Click(Sender: TObject); var r,d,c,x,y,theta,thetf: real; a,xc,yc:integer; begin a:=100;xc:=300;yc:=200; thetf:=0.0; d:=2*PI; theta:=d; c:=1/a; while (thetf
28

3. Threeleaf

Gambar 4.6.3 Tampilan Program Fungsi Parameter (Threeleaf) Listing Program: procedure TForm1.Button1Click(Sender: TObject); var r,d,c,x,y,theta,thetf: real; a,xc,yc:integer; begin a:=100;xc:=300;yc:=200; thetf:=0.0; d:=2*PI; theta:=d; c:=1/a; while (thetf
29

4. Spiral

Gambar 4.6.4 Tampilan Program Fungsi Parameter (Spiral) Listing Program procedure TForm1.Button1Click(Sender: TObject); var r,d,c,x,y,theta,thetf: real; a,xc,yc:integer; begin a:=50;xc:=300;yc:=100; thetf:=0.0; d:=2*PI; theta:=d; c:=1/a; while (thetf
30

5. Fourleaf

Gambar 4.11 Tampilan Program Fungsi Parameter (Forleaf) Listing program

procedure TForm1.Button1Click(Sender: TObject); var r,d,c,x,y,theta,thetf: real; a,xc,yc:integer; begin a:=100;xc:=300;yc:=200; thetf:=0.0; d:=2*PI; theta:=d; c:=1/a; while (thetf
31

6. Limacon

Gambar 4.6.6 Tampilan Program Fungsi Parameter (Limacon) Listing Program procedure TForm1.Button1Click(Sender: TObject); var r,d,c,x,y,theta,thetf: real; a,xc,yc,b: integer; begin a:=100;xc:=300;yc:=200;b:=50; thetf:=0.0; d:=2*PI; theta:=d; c:=1/a; while (thetf
32

F. Penggunaan Fungsi Dan Kurva Primitif Untuk Animasi Sederhana. Pada subbab ini kita bahas pemanfaatan fungsi-fungsi dan kurva primitif kedalam aplikasi animasi sederhana. Disini kita contohkan animasi solar-system, adanya pergerakan planet mengelilingi matahari, dan satelit mengelilingi planet. Dalam bahasa C (turbo C)listing dikonstruksi dari fungsi parameter dan penyesuaian koordinat kutub terhadap koordinat pixel. Adapun listing tersebut dapat kita rangkum sebagai berikut:

Gambar 4.13 Rancangan awal form solar-system Listing Program unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls, ExtCtrls; type TForm1 = class(TForm) Button1: TButton; Panel1: TPanel; orbit3: TShape; orbit2: TShape; Sun: TShape; orbit1: TShape; Timer1: TTimer; biru: TShape; merah: TShape; putih: TShape;

33

Orbit4: TShape; Orbit5: TShape; orbit6: TShape; Orbit7: TShape; orbit8: TShape; orbit9: TShape; merah2: TShape; kuning: TShape; skyblue: TShape; aqua: TShape; kuning2: TShape; biru2: TShape; Label1: TLabel; Button2: TButton; procedure Button1Click(Sender: TObject); procedure Timer1Timer(Sender: TObject); procedure Button2Click(Sender: TObject); private { Private declarations } public { Public declarations } end; var Form1: TForm1; theta,d,c:real; constanta,f:integer; implementation {$R *.dfm} procedure TForm1.Button1Click(Sender: TObject); begin label1.Visible:=true; constanta:=5; biru.Visible:=true; merah.Visible:=true; merah2.Visible:=true; putih.Visible:=true; kuning.Visible:=true; skyblue.Visible:=true; aqua.Visible:=true; kuning2.Visible:=true; biru2.Visible:=true; Timer1.Enabled:=TRUE; theta:=0.0; c:=1/100; d:=2*PI; f:= panel1.clientwidth; end; procedure TForm1.Button2Click(Sender: TObject); begin

34

Close; end; procedure TForm1.Timer1Timer(Sender: TObject); var x1,y1,x2,y2,x3,y3,x4,y4:real; x5,y5,x6,y6,x7,y7,x8,y8,x9,y9:real; begin label1.Left:=f-1;f:=f-1; if (label1.left+label1.width<=(-1*(panel1.clientwidth)))then f:=panel1.clientwidth; if (theta<=(2*d)) then begin x9:=((orbit9.width)/2)+(orbit9.Left)((orbit9.width)/2)*cos(theta); y9:=((orbit9.height/2)+(orbit9.top))+(orbit9.height/2)*sin(theta); x8:=((orbit8.width)/2)+(orbit8.Left)((orbit8.width)/2)*cos(2*theta); y8:=((orbit8.height/2)+(orbit8.top))+(orbit8.height/2)*sin(2*theta); x7:=((orbit7.width)/2)+(orbit7.Left)((orbit7.width)/2)*cos(4*theta); y7:=((orbit7.height/2)+(orbit7.top))+(orbit7.height/2)*sin(4*theta); x6:=((orbit6.width)/2)+(orbit6.Left)+((orbit6.width)/2)*cos(5*theta); y6:=((orbit6.height/2)+(orbit6.top))(orbit6.height/2)*sin(5*theta); x5:=((orbit5.width)/2)+(orbit5.Left)+((orbit5.width)/2)*cos(3*theta); y5:=((orbit5.height/2)+(orbit5.top))(orbit5.height/2)*sin(3*theta); x4:=((orbit4.width)/2)+(orbit4.Left)+((orbit4.width)/2)*cos(theta); y4:=((orbit4.height/2)+(orbit4.top))-(orbit4.height/2)*sin(theta); x3:=((orbit3.width)/2)+(orbit3.Left)+((orbit3.width)/2)*cos(2*theta); y3:=((orbit3.height/2)+(orbit3.top))(orbit3.height/2)*sin(2*theta); x2:=((orbit2.width)/2)+(orbit2.Left)+((orbit2.width)/2)*cos(4*theta); y2:=((orbit2.height/2)+(orbit2.top))(orbit2.height/2)*sin(4*theta); x1:=((orbit1.width)/2)+(orbit1.Left)+((orbit1.width)/2)*cos(6*theta); y1:=((orbit1.height/2)+(orbit1.top))(orbit1.height/2)*sin(6*theta); biru2.left:=trunc(x9)-constanta; biru2.Top:=trunc(y9)-constanta; kuning2.left:=trunc(x8)-constanta; kuning2.Top:=trunc(y8)-constanta; aqua.left:=trunc(x7)-constanta;

35

aqua.Top:=trunc(y7)-constanta; skyblue.left:=trunc(x6)-constanta; skyblue.Top:=trunc(y6)-constanta; kuning.left:=trunc(x5)-constanta; kuning.Top:=trunc(y5)-constanta; merah2.left:=trunc(x4)-constanta; merah2.Top:=trunc(y4)-constanta; merah.left:=trunc(x2)-constanta; merah.Top:=trunc(y2)-constanta; biru.left:=trunc(x3)-constanta; biru.Top:=trunc(y3)-constanta; putih.left:=trunc(x1)-constanta; putih.Top:=trunc(y1)-constanta; theta:=theta+c; end; if (theta>=2*d) then theta:=0.0; end; end.

36

BAB 5 Chart A. Chart Animasi Perancangan program untuk penggambarn chart animasi dapat dilakukan dengan langkahlangkah berikut: 1. Jalankan Delphi 2. Setelah muncul form baru pada halaman Delphi, maka tambahkan icon Button1, Button2, DBChart dan Timer Inspector sebagai berikut:

pada halaman form1. Atur properti icon tersebut pada Object

Sehingga tampilan form sekarang adalah sebagai berikut:

3. Klik 2X pada DBChart1, maka akan muncul tampilan berikut:

37

Pada Form editing DBChart1, klik sekali pada button Add, sehingga muncul tampilan:

Klik pada icon line dan klik Ok, sehingga muncul tampilan:

38

Beri nama series1 dengan mengklik Button Tittle, misalkn Tokyo,

Ulangi kembali dan tambahkan kota-kota berikut: Turin, Liverpool, New York. Sehingga tampilan PageControlSeries adalah seperti berikut:

Klik pada PageControl Axis, sehingga muncul tampilan:

39

Lalu pada Axis Klik PageControl Tittle, sehingga muncul tampilan:

Atur Title = Liter, lalu pada panel Axis, klik RadioButton Button dan atur Title = Perpompa Bensin.

40

Klik pada PageControl Title

AturTitles = Pemkaian bahan bakar pada kendaraan bermotor. Klik Button Close, dan tampilan akan berupa:

41

4. Klik 2x pada timer program berikut:

, setelah muncul halaman Code Editor, maka tuliskan kode

procedure TForm1.Timer1Timer(Sender: TObject); var i : longint; tmp: double; begin with dbchart1 do begin for i := 0 to seriescount-1 do with series[i] do begin tmp := xvalues[1] - xvalues[0]; delete(0); addxy(xvalues.last+tmp,yvalues.last+random(100)50,'',clteecolor); end; repaint end; end; Klik sekali pada halaman form, lalu klik sekali pada PageControl Events didalam halaman object inspector:

42

Klik 2X pada sel yang sejajar dengan OnItem OnActive , setelah muncul halaman editor, tuliskan kode berikut: procedure tform1.formactivate(sender: tobject); var i,j : integer; begin with dbchart1 do for i := 0 to seriescount-1 do for j := 1 to 15 do series[i].AddXY(j,random(100),'',clteecolor); end; procedure TForm1.Button1Click(Sender: TObject); begin IF MESSAGEDLG('TERIMA KASIH ATAS ATENSI ANDA',MTINFORMATION,[MBYES,MBNO],0)=MRYES THEN BEGIN close; end; end; Dan terakhir klik 2x pada button1 , lalu ketikkan: Close;

43

BAB 6 ANIMASI A. Sejarah Singkat Animasi Animasi sendiri berasal dari bahasa latin yaitu “anima” yang berarti jiwa, hidup, semangat. Sedangkan karakter adalah orang, hewan maupun objek nyata lainnya yang dituangkan dalam bentuk gambar 2D maupun 3D. shingga karakter animasi secara dapat diartikan sebagai gambar yang memuat objek yang seolah-olah hidup, disebabkan oleh kumpulan gambar itu berubah beraturan dan bergantian ditampilkan. Objek dalam gambar bisa berupa tulisan, bentuk benda, warna dan spesial efek. Jenis-jenis animasi : Karakter animasi sendiri sekarang telah berkembang yang dulu mempunyai prinsip sederhana sekarang menjadi beberapa jenis animasi yaitu

a. Animasi 2D (2 Dimensi) Animasi 2D biasa juga disebut dengan film kartun. Kartun sendiri berasal dari kata Cartoon, yang artinya gambar yang lucu. Dan film kartun itu kebanyakan film yang lucu. Contohnya banyak sekali, baik yang di TV maupun di Bioskop. Misalnya: Shincan, Looney Tunes, Pink Panther, Tom and Jerry, Scooby doo, dan masih banyak lagi. Meski yang populer kebanyakan film Disney, namun bukan Walt Disney sebagai bapak animasi kartun.

b. Animasi 3D (3 Dimensi) Perkembangan teknologi dan komputer membuat teknik pembuatan animasi 3D semakin berkembang dan maju pesat. Animasi 3D adalah pengembangan dari animasi 2D. Dengan animasi 3D, karakter yang diperlihatkan semakin hidup dan nyata, mendekati wujud manusia aslinya. Semenjak Toy Story buatan Disney (Pixar Studio), maka berlomba¬lombalah studio film dunia memproduksi film sejenis. Bermunculanlah, Bugs Life, AntZ, Dinosaurs, Final Fantasy, Toy Story 2, Monster Inc., hingga Finding Nemo, The Incredible, Shark Tale. Cars, Valian. Kesemuanya itu biasa juga disebut dengan animasi 3D atau CGI (Computer Generated Imagery).

c. Stop_Motion Animation Animasi ini juga dikenali sebagai claymation kerana animasi ini menggunakan clay (tanah liat) sebagai objek yang di gerakkan.

44

Teknik ini pertama kali di perkenalkan oleh Stuart Blakton pada tahun 1906. Teknik ini seringkali digunakan dalam menghasilkan visual effect bagi filem-filem era tahun 50an dan 60an. Film Animasi Clay Pertama dirilis bulan Februari 1908 berjudul, A Sculptors Welsh Rarebit Nightmare. Untuk beberapa waktu yang lalu juga, beredar film clay yang berjudul Chicken Run.. Jenis ini yang paling jarang kita dengar dan temukan diantara jenis lainnya. Meski namanya clay (tanah liat), yang dipakai bukanlah tanah liat biasa. Animasi ini memakai plasticin, bahan lentur seperti permen karet yang ditemukan pada tahun 1897. Tokoh-tokoh dalam animasi Clay dibuat dengan memakai rangka khusus untuk kerangka tubuhnya, lalu kerangka tersebut ditutup dengan plasficine sesuai bentuk tokoh yang ingin dibuat. Bagian-bagian tubuh kerangka ini, seperti kepala, tangan, kaki, disa dilepas dan dipasang lagi. Setelah tokoh-tokohnya siap, lalu difoto gerakan per gerakan. Foto-foto tersebut lalu digabung menjadi gambar yang bisa bergerak seperti yang kita tonton di film. Animasi ini agak sukar untuk dihasilkan dan memerlukan kos yang tinggi. d. Animasi Jepang (Anime) Anime, itulah sebutan tersendiri untuk film animasi di Jepang\, Jepang pun tak kalah soal animasi dibanding dengan buatan eropa. Anime mempunyai karakter yang berbeda dibandingkan dengan animasi buatan eropa. Salah satu film yang terkenal adalah Final Fantasy Advent Children dan Jepang sudah banyak memproduksi anime. Berbeda dengan animasi Amerika, anime Jepang tidak semua diperuntukkan untuk anak-anak, bahkan ada yang khusus dewasa.

B. Macam-macam Animasi 1. Planet Animasi

Gambar 6.2.2 Tampilan Program Planet Animasi

45

Listing Program procedure TForm1.Button1Click(Sender: TObject); begin constanta:=5; biru.Visible:=true; merah.Visible:=true; putih.Visible:=true; Timer1.Enabled:=TRUE; theta:=0.0; c:=1/100; d:=2*PI; end; procedure TForm1.Timer1Timer(Sender: TObject); var x1,y1,x2,y2,x3,y3:real; begin if (theta<=(2*d)) then begin x3:=((orbit3.width)/2)+(orbit3.Left)+((orbit3.width)/2)*cos(2*theta); y3:=((orbit3.height/2)+(orbit3.top))-(orbit3.height/2)*sin(2*theta); x2:=((orbit2.width)/2)+(orbit2.Left)+((orbit2.width)/2)*cos(-4*theta); y2:=((orbit2.height/2)+(orbit2.top))-(orbit2.height/2)*sin(-4*theta); x1:=((orbit1.width)/2)+(orbit1.Left)+((orbit1.width)/2)*cos(6*theta); y1:=((orbit1.height/2)+(orbit1.top))-(orbit1.height/2)*sin(6*theta); merah.left:=trunc(x2)-constanta; merah.Top:=trunc(y2)-constanta; biru.left:=trunc(x3)-constanta; biru.Top:=trunc(y3)-constanta; putih.left:=trunc(x1)-constanta; putih.Top:=trunc(y1)-constanta; theta:=theta+c; end; if (theta>=2*d) then theta:=0.0; end; end.

46

2. Animasi UFO

Gambar 6.2.1 Tampilan Program Animasi UFO

Listing Program procedure TForm1.Timer1Timer(Sender: TObject); var x,y,pencacah:integer; begin randomize; x:=random(panel1.width); y:=random(panel1.height); pencacah:=random(2); x:=x+1;y:=y+1; if pencacah=1 then begin if ((ufo.left)<=(panel1.Width-ufo.Width)) then ufo.left:=ufo.left+trunc(10*sin(x/y)) else ufo.left:=ufo.left-trunc(10*cos(x/y)); if ((ufo.top)<=(panel1.height-ufo.height)) then ufo.top:=ufo.top+trunc(10*sin(y/x)) else ufo.top:=ufo.top-trunc(10*cos(y/x)); end; if pencacah=0 then if (ufo.left>0) then if (ufo.top>0) then begin if ((ufo.left)<=(panel1.Width-ufo.Width)) then ufo.left:=ufo.left-trunc(10*sin(x/y)) else ufo.left:=ufo.left-trunc(10*cos(x/y)); if ((ufo.top)<=(panel1.height-ufo.height)) then ufo.top:=ufo.top-trunc(10*sin(y/x)) else ufo.top:=ufo.top-trunc(10*cos(y/x)); end; end; end.

47

3. Curves Animate 1

Gambar 6.2.3 Tampilan Curves Animate Listing Program procedure TForm1.Button1Click(Sender: TObject); begin a:=100;xc:=600;yc:=300;b:=100; thetf:=-2.0*PI; d:=PI; xp:=0; theta:=2*d; c:=1/a; timer1.Enabled:=true; shape1.Visible:=false; end; procedure TForm1.Timer1Timer(Sender: TObject); begin if (thetf<(theta)) then begin r:=b+a*cos(thetf*thetf)+sin(thetf); x:=r*cos(thetf); y:=r*sin(thetf); if xp=0 then if(thetf<=-PI) then canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clyellow else canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clyellow; if xp=1 then begin shape1.Left:=trunc(xc+x); shape1.Top:=trunc(yc+y); end; thetf:=thetf+c; end;

48

if (thetf>theta) then thetf:=0.0; end; procedure TForm1.Button2Click(Sender: TObject); begin xp:=1; shape1.Visible:=true; a:=100;xc:=300;yc:=200;b:=50; thetf:=-10.0; d:=2*PI; theta:=d; c:=1/a; timer1.Enabled:=true; end; end.

4. Curves Animate 2

Gambar 6.2.4 Tampilan Curves Animate

Listing Program procedure TForm1.Button1Click(Sender: TObject); begin a:=100;xc:=300;yc:=200;b:=100; thetf:=0.0; d:=2*PI;xp:=0; theta:=d; c:=1/a; timer1.Enabled:=true; shape1.Visible:=false; end; procedure TForm1.Timer1Timer(Sender: TObject); begin if (thetf<(8*theta)) then begin

49

r:=b+sin(sqr(thetf))/cos(thetf); x:=r*cos(15*thetf); y:=r*sin(10*thetf); if xp=0 then canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clyellow; if xp=1 then begin shape1.Left:=trunc(xc+x); shape1.Top:=trunc(yc+y); end; thetf:=thetf+c; end; if (thetf>(8*theta)) then begin r:=b+sin(thetf)/cos(sqr(thetf)) x:=r*cos(thetf); y:=r*sin(thetf); if xp=0 then canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clyellow; if xp=1 then begin shape1.Left:=trunc(xc+x); shape1.Top:=trunc(yc+y); end; thetf:=thetf+c; end; end; procedure TForm1.Button2Click(Sender: TObject); begin xp:=1; shape1.Visible:=true; a:=100;xc:=300;yc:=200;b:=100; thetf:=0.0; d:=2*PI; theta:=d; c:=1/a; timer1.Enabled:=true; end; end.

50

C. Animasi Lanjut 1. Bola Pantul

Gambar 6.3.1 Animasi Bola Pantul List ing Program: Klik 2X Pada Button1(Mulai), lalu tuliskan: procedure TForm1.MulaiClick(Sender: TObject); begin Timer1.Enabled:=TRUE; end; Klik 2X Pada Button2(Berhenti), lalu tuliskan: procedure TForm1.BerhentiClick(Sender: TObject); begin Timer1.Enabled:=TRUE; end; Klik 2X Pada Button3(Selesai), lalu tuliskan: Close; Klik 2X Pada ScrollBar1(Sb_Ukur), lalu tuliskan: procedure TForm1.Sb_UkurChange(Sender: TObject); begin Bola.Width:= Sb_Ukur.Position; Bola.Height:=Sb_Ukur.Position; end; Klik 2X Pada ScrollBar2(Sb_Cepat), lalu tuliskan: procedure TForm1.Sb_CepatChange(Sender: TObject); begin Timer1.Interval:= 101-Sb_Cepat.Position; end;

51

Klik sekali pada halaman Form, lalu klik sekali pada pagecontrol events didalam halaman object inspector:

Klik 2X pada sel yang sejajar dengan item OnActive, setelah muncul halaman editor, tuliskan kode berikut:

procedure TForm1.FormActivate(Sender: TObject); begin Randomize; Bola.Left := Random(Panel1.ClientWidth-Bola.width); Bola.Top := Random(Panel1.ClientHeight-Bola.Height); Kanan := Boolean(Random(2)); Bawah := Boolean(Random(2)); end; Klik 2X pada Timer, setelah muncul halaman editor, tuliskan kode berikut:

procedure TForm1.Timer1Timer(Sender: TObject); begin if Kanan then begin Bola.Left := Bola.Left + 1; if Bola.Left + Bola.Width >= Panel1.ClientWidth then begin Kanan := False; Bola.Brush.Color:=clblue; end end else Begin Bola.Left := Bola.Left - 1; if Bola.Left <= 0 then begin Kanan := True;

52

Bola.Brush.Color:=clgreen; end end; if Bawah then begin Bola.Top := Bola.Top + 1; if Bola.Top + Bola.Width >= Panel1.Clientheight then Bawah := False; end else Begin Bola.Top := Bola.Top - 1; if Bola.Top <= 0 then Bawah := True; end; end;

2. Kartun Sederhana Kita coba membuat kartun sederhana “Kapal yang melintas lautan” . buka aplikasi paint, lalu gambarkan:

Simpan dengan file” Laut.Bmp”. Seterusnya gambarkan sebuah kapal sederhana dan simpan dengan file”Ship.Bmp”.

Untuk menggerakkan kapal melintasi lautan, maka ikuti langkah-langkah berikut: 1. Jalankan Delphi

53

2. Setelah muncul form baru pada halaman Delphi, maka tambahkan icon Timer pada halaman form1, atur properti komponen tersebut pada Object Inspector sebagai berikut:

Klik 1X pada form1, lalu klik pada Tab Events dalam halaman Object Inspector.

Klik 2X pada sel disebelah item OnCreate, setelah muncul halaman kode editor tuliskan.

54

BAB 7 Grafik Parametrik A. Standar Kerja Parametik Perancangan program untuk grafik parametrik dapat dilakukan dengan langkah-langkah berikut: 1. Jalankan Delphi. 2. Stelah muncul form baru kedalam delphi, maka tambahkan icon button1, button2, shape1 , dan Timer1 pada halaman form1. Atur properti komponen tersebut pada Object Inspector sebagai berikut:

Tampilakn form yang diinginkan akan berbentuk:

55

Untuk beberapa program yang dirancang kedepan, kita akan selalu menggunakan standar perancangan form sub materi 7.1.

B. Grafik Parametik Untuk sub materi 7.2, kita telah sepakat untuk menggunakan standar kerja sub materi 7.1. Klik 2X pada button1(curve), lalu tuliskan listing berikut: procedure TForm1.Button1Click(Sender: TObject); begin a:=100;xc:=300;yc:=200;b:=100; thetf:=0.0; d:=2*PI;xp:=0; theta:=d; c:=1/a; timer1.Enabled:=true; shape1.Visible:=false; end; Klik 2X pada button2(Animasi), lalu tuliskan listing berikut: procedure TForm1.Button2Click(Sender: TObject); begin xp:=1; shape1.Visible:=true; a:=100;xc:=300;yc:=200;b:=100; thetf:=0.0; d:=2*PI; theta:=d; c:=1/a; timer1.Enabled:=true; end; end.

56

Klik 2X pada Timer1, lalu tuliskan listing berikut: procedure TForm1.Timer1Timer(Sender: TObject); begin if (thetf<(8*theta)) then begin r:=b+sin(thetf)/cos(thetf); x:=r*cos(5*thetf); y:=r*sin(7*thetf); if xp=0 then canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clyellow; if xp=1 then begin shape1.Left:=trunc(xc+x); shape1.Top:=trunc(yc+y); end; thetf:=thetf+c; end; if (thetf>(8*theta)) then begin r:=b+sin(thetf)/cos(sqr(thetf)); x:=r*cos(thetf); y:=r*sin(thetf); if xp=0 then canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clyellow; if xp=1 then begin shape1.Left:=trunc(xc+x); shape1.Top:=trunc(yc+y); end; thetf:=thetf+c; end; end; Tambahan dibawah header var, var Form1: TForm1; r,d,c,x,y,theta,thetf: real; a,xc,yc,b,xp:integer;

57

Gambar 7.2.1 Grafik Parametrik

C. Variasi Lain Grafik Parametrik 1. Kidney Stone

Gambar 7.3.1 Kidney Stone

Kidney Stone dapat dibentuk dengan langkah-langkah berikut: Klik 2X pada button1(curve), lalu tuliskan listing berikut: procedure TForm1.Button1Click(Sender: TObject);

58

begin a:=100;xc:=300;yc:=200;b:=100; thetf:=0.0; d:=2*PI;xp:=0; theta:=d; c:=1/a; timer1.Enabled:=true; shape1.Visible:=false; end; Klik 2X pada button2(Animasi), lalu tuliskan listing berikut: procedure TForm1.Button2Click(Sender: TObject); begin xp:=1; shape1.Visible:=true; a:=100;xc:=300;yc:=200;b:=100; thetf:=0.0; d:=2*PI; theta:=d; c:=1/a; timer1.Enabled:=true; end; end. Klik 2X pada Timer1, lalu tuliskan listing berikut: procedure TForm1.Timer1Timer(Sender: TObject); begin if (thetf<(8*theta)) then begin r:=(b*sin(thetf))+sin(thetf)/cos(thetf); x:=r*cos(5*thetf); y:=r*sin(7*thetf); if xp=0 then canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clyellow; if xp=1 then begin shape1.Left:=trunc(xc+x); shape1.Top:=trunc(yc+y); end; thetf:=thetf+c; end; end;

59

2. Flying Eight

Gambar 7.3.2 Flying Eight

Flying Eight dapat dibentuk dengan langkah-langkah berikut: Klik 2X pada button1(curve), lalu tuliskan listing berikut: procedure TForm1.Button1Click(Sender: TObject); begin a:=100;xc:=300;yc:=200;b:=50; thetf:=0.0; d:=2*PI;xp:=0; theta:=d; c:=1/a; timer1.Enabled:=true; shape1.Visible:=false; end; Klik 2X pada button2(Animasi), lalu tuliskan listing berikut:

procedure TForm1.Button2Click(Sender: TObject); begin xp:=1; shape1.Visible:=true; a:=100;xc:=300;yc:=200;b:=100; thetf:=0.0; d:=2*PI; theta:=d; c:=1/a; timer1.Enabled:=true; end; end.

60

Klik 2X pada Timer, lalu tuliskan listing berikut:

procedure TForm1.Timer1Timer(Sender: TObject); begin if (thetf<(8*theta)) then begin r:=(b*(sin(thetf)/cos(thetf)))+sin(thetf)/cos(thetf); x:=r*cos(5*thetf); y:=r*sin(7*thetf); if xp=0 then canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clblue; if xp=1 then begin shape1.Left:=trunc(xc+x); shape1.Top:=trunc(yc+y); end; thetf:=thetf+c; end; end; Tambahan dibawah header var,

var Form1: TForm1; r,d,c,x,y,theta,thetf: real; a,xc,yc,b,xp:integer;

3. Spreading

Gambar 7.3.3 Spreading

61

Spreading dapat dibentuk dengan langkah-langkah berikut: Klik 2X pada button1(curve), lalu tuliskan listing berikut: procedure TForm1.Button1Click(Sender: TObject); begin a:=90;xc:=350;yc:=200;b:=50; thetf:=0.0; d:=8*PI;xp:=0; theta:=d; c:=1/a; timer1.Enabled:=true; shape1.Visible:=false; end; Klik 2X pada button2(animasi), lalu tuliskan listing berikut: procedure TForm1.Button2Click(Sender: TObject); begin xp:=1; shape1.Visible:=true; a:=100;xc:=300;yc:=200;b:=50; thetf:=0.0; d:=8*PI; theta:=d; c:=1/a; timer1.Enabled:=true; end; end. Klik 2X pada Timer, lalu tuliskan listing berikut: procedure TForm1.Timer1Timer(Sender: TObject); begin if (thetf<(theta)) then begin r:=b+a*tan(8*thetf); x:=r*(-cos(thetf)); y:=r*sin(thetf); if xp=0 then canvas.pixels[trunc(xc+x),trunc(yc+y)]:=clyellow; if xp=1 then begin shape1.Left:=trunc(xc+x); shape1.Top:=trunc(yc+y); end; thetf:=thetf+c; end; end;

62

Tambahan dibawah header var,

var Form1: TForm1; r,d,c,x,y,theta,thetf: real; a,xc,yc,b,xp:integer;

63