SIMULASI EKSPERIMEN FISIKA. Paduan Praktis Membuat Simulasi Eksperimen Fisika Berbasis. Website

(1)

SIMULASI EKSPERIMEN FISIKA

Paduan Praktis Membuat Simulasi Eksperimen Fisika Berbasis

Website

Penulis: Djukarna

Institut: Program Studi Pendidikan Fisika STKIP Surya

Tanggal: 15 Febuari 2021

(2)

Daftar Isi

1 Pendahuluan 1

1.1 Simulasi Eksperimen Fisika . . . 1

1.2 Processing . . . 2

1.3 HTML5 dan Notepad++ . . . 9

2 Pemograman Processing 17 2.1 Struktur Program Processing . . . 17

2.2 Sistem Koordinat Frame Pada Processing . . . 22

2.3 Gambar-Gambar Dasar Pada Processing . . . 24

2.4 Warna, Order Gambar dan Atribut Gambar . . . 28

2.5 Fungsi Aritmatika . . . 32

2.6 Fungsi Logika dan Kontrol . . . 33

3 Memulai Program Processing di Notepad++ 36 3.1 Menyiapkan halaman website untuk animasi fisika . . . 38

3.2 Menyiapkan layar kerja dan mengatur warna background . . . 40

3.3 Menggambar & Animasi Dasar di Processing . . . 43

4 Membuat Alat-Alat Simulasi Eksperimen Fisika 56 4.1 Animasi Tampilan Macam-Macam Alat Ukur Digital . . . 56

4.2 Membuat Alat Pemanas & Pendingin . . . 69

4.3 Membuat Varibel Power Supply . . . 81

4.4 Membuat Saklar dan Lampu . . . 85

5 Membuat Simulasi Pengukuran Suhu Dengan Termometer Raksa dan Termometer Digital 92 5.1 Deskripsi Eksperimen . . . 92

5.2 Alat -Alat Ukur yang dibutuhkan . . . 92

5.3 Susunan Alat Eksperimen . . . 93

5.4 Pemograman . . . 93

(3)

Bab 1 Pendahuluan

1.1 Simulasi Eksperimen Fisika

1.1.1 Pengertian Simulasi Eksperimen Fisika

Pengertian simulasi menurut kamus besar bahasa Indonesia adalah metode pelatihan yang meragakan sesuatu dalam bentuk tiruan yang mirip dengan keadaan sesungguhnya. Jadi simulasi eksperimen fisika adalah metode pelatihan atau pengajaran dengan meragakan percobaan fisika dalam bentuk tiruan yang menyerupai dengan keadaan sesungguhnya. Pada simulasi eksperimen fisika ada proses meragakan dalam bentuk tiruan. Salah satu alat yang dapat digunakan untuk membuat tiruan eksperimen fisika adalah komputer.

Komputer dapat digunakan untuk membuat animasi eksperimen fisika. Pada saat ini telah tersedia banyak program komputer yang dapat digunakan untuk membuat animasi eksperimen fisika, antara lain: Processing, Blender, Macromedia Flash, 3DMax dan program-program grafis lainnya. Simulasi eksperimen fisika selain dapat dilakukan dengan menggunakan animasi grafis, dapat juga dilakukan dengan menggunakan permodelan numerik, namun permodelan numerik tidak cocok digunakan untuk siswa sekolah menengah dan mahasiswa tingkat awal karena permodelan numerik sangat abstrak dan membutuhkan pemahaman yang lebih dalam tentang konsep-konsep fisika.

Pada tingkat menengah (SMP dan SMA) dan juga mahasiswa tingkat awal, simulasi eksperi-men fisika sebaiknya dilakukan dengan eksperi-menggunakan animasi grafis berupa gambar-gambar yang dibuat sedemikian rupa sehingga dapat meragakan proses atau konsep fisika. Melalu peragaan ini, diharapkan dapat membantu siswa untuk memahami konsep dasar fisika.

Pada kondisi pandemi seperti sekarang ini, proses belajar mengajar di sekolah dialihkan ke metode pembelajaran jarak jauh (PJJ). Praktikum atau demontrasi fisika jelas tidak dapat dilaksanakan dari jarak jauh. Namun dengan menggunakan simulasi eksperimen fisika melalui website, guru-guru dapat meragakan suatu konsep fisika dengan gampang, asyik dan menye-nangkan. Guru-guru juga dapat mendesain LKS yang menarik untuk melakukan praktikum fisika dengan menggunakan animasi fisika secara DARING.

Pada saat ini sudah tersedia beberapa situs internet yang menyediakan animasi fisika seperti https://phet.colorado.edu, https://www.iop.org, https://physicscentral.com dan beberapa website lainnya. Semua situs itu berasal dari luar negeri. Jika kita cari di mesin pencari google, dengan menggunakan bahasa Indonesia tidak ditemukan situs yang menyediakan layanan gratis untuk simulasi eksperimen fisika. Saat ini hanya ada satu situs yaitu http://praktikum-fisika.com milik STKIP Surya yang dirilis pada bulan januari 2021. Website ini berisi bermacam-macam animasi eksperimen fisika yang dapat diakses secara gratis, bahkan source code juga dibagikan secara gratis untuk guru-guru atau siapa saja yang mau mengembangkan lebih lanjut.

(4)

1.2 Processing

1.1.2 Kelebihan dan Kelemahan Simulasi Eksperimen Fisika

Eksperimen fisika yang ditampilkan dalam bentuk simulasi di website tentu saja akan menarik minat siswa untuk mencobanya, selain itu eksperimen fisika melalui website dapat diakses kapan saja dan di mana saja selama tersedia jaringan internet. Ini merupakan salah satu kelebihan simulasi eksperimen fisika melalui website. Siswa dapat mengulang eksperimen di rumah, dan guru-guru juga dapat memberikan tugas tambahan kepada siswa untuk melakukan sendiri eksperimen fisika di rumah berbasis website. Berbeda dengan praktikum di laboratorium yang hanya dapat dilakukan di laboratorium dengan pengawasan guru atau laboran.

Selain kelebihan-kelebihan simulasi eksperimen fisika melalui website, metode ini juga memiliki kelemahan antara lain :

1. Simulasi bagaimanapun detail dibuatnya, tidak akan dapat mewakili secara penuh kondisi nyata di alam semesta. Kita hanya bisa melakukan pendekatan saja, namun untuk kegiatan belajar, hal ini sudah cukup baik apalagi jika didampingi oleh guru yang kompeten. 2. Simulasi eksperimen fisika berbasis website membutuhkan teknologi komputer dan jaringan,

sehingga mutlak membutuhkan daya listrik dan internet. Bagi kota-kota besar yang listrik dan internet sudah tersedia dengan baik, hal ini tidak menjadi masalah, tetapi bagi daerah 3T di Indonesia hal, ini adalah masalah karena listrik belum tersedia dengan baik dan internet juga belum tentu ada.

3. Simulasi eksperimen fisika menuntut guru-guru dan dosen untuk belajar pemograman komputer yang bukan bidang utama guru dan dosen fisika. Namun hal ini dirasakan penting untuk mulai dilakukan sejak sekarang karena tuntutan kemajuan teknologi pendidikan menuju ke arah pengggunaan komputer dan internet untuk mendukung proses belajar mengajar.

Masih banyak lagi kekurang dan kelebihan simulasi eksperimen fisika, namun kita tidak akan berlama-lama membahas hal ini.

1.2 Processing

Processing adalah program animasi grafis yang diturunkan dari bahasa pemrograman Java, sehingga bahasa program processing mirip dengan bahasa java script. Processing digunakan untuk mempelajari bagaimana suatu code program bekerja dalam bentuk gambar. Kelebihan program processing antara lain :

1. Gratis dan bersifat open source

2. Program interaktif dengan 2D, 3D, pdf atau svg output

3. Dapat dĳalankan di sistem operasi Linux, Windows, Mac OS, Android dan ARM

4. Pada saat ini processing sudah memiliki lebih dari 100 file library yang dapat ditambahkan ke core processing

(5)

1.2 Processing Processing pada awalnya dibuat oleh Ben Fry dan Casey Reas dari MIT di tahun 2001, pada tahun 2012 bersama dengan Dan Shiffman mereka membentuk Yayasan Processing (Pro-cessing Foundation). Pada saat ini program pro(Pro-cessing didukung oleh 3 orang developer handal yaitu Andreas Colubri (Boston), mengembangkan OpenGL (Video), Elie Zananiri (New York), Contributor library dan Samuel Pottinger (San Francisco) pengembang Core Processing. Se-mua dokumentasi, tutorial, referensi dan forum komunikasi antar programmer dapat dilihat di processing.org. Jika selama membuat program kita mendapat kendala, maka referensi tersedia lengkap di website processing.org.

Seiring dengan perkembangan, program processing sekarang berkembang menjad p5js (Processing Java Script), Processing.py (Processing Python), Processing Android (untuk aplikasi Android), Processing for Pi (untuk aplikasi IoT pada platform Rasbery Pi. Selain itu processing juga dikembangkan ke hardware programming yang sekarang sangat terkenal yaitu Arduino IDE. Kelebihan processing yang paling menentukan ketika kita akan membuat simulasi eksperi-men fisika adalah kita dapat dengan mudah eksperi-menambahkan script processing ke HTML5, sehingga animasi eksperimen fisika yang kita buat dapat diakses oleh pengguna melalui browser di in-ternet. Bahkan kita dapat membuat animasi fisika langsung di notepad++ dengan bentuk kode HTML5 tanpa memerlukan program processing, kita hanya membutuhkan tambahan source dari processing.js.

Pada kesempatan ini kita akan mempelajari dan membuat simulasi eksperimen fisika seder-hana dengan menggunakan script processing yang ditulis langsung ke HTML5 dengan meng-gunakan program notepad++. Hasil akhirnya adalah sebuah website yang berisikan simulasi eksperimen fisika.

1.2.1 Cara Menginstal Processing

Sebelum menginstal Processing di komputer, pertama-tama kita harus mendownloadnya terlebih dahulu dari website resmi processing yaitu di https://processing.org/download/ . Berikut ini tampilan website untuk mendownload program processing.

(6)

1.2 Processing

Gambar 1.1: Website Tempat Mendownload Processing

Pilih dan klik sesuai dengan OS yang anda gunakan, untuk windows 8 dan 10 gunakan yg 64 bit, sedangkan untuk windows 7 dan sebelumnya gunakan yang 32 bit. Setelah akan tampil jendela download seperti pada gambar dibawah ini.

Gambar 1.2: Jendela download

Kemudian pilih / klik "save file" dilanjutkan dengan klik "OK". Selanjutkan kita tunggu hingga file benar-benar selesai di download. File yang didownload berupa file .rar, unzip file tersebut dengan menggunakan winrar ke drive C.

(7)

1.2 Processing

Gambar 1.3: Unzip file ke drive C

Kemudian dengan menggunakan window explorer, buka folder tersebut hingga didapat icon processing seperti pada gambar berikut ini.

Gambar 1.4: Icon processing

Lakukan double klik ke icon processing, maka program processing akan aktfi. Untuk memudahkan membuka program processing, maka anda dapat meng"copy" icon processing tersebut dan mem"paste"nya ke desktop, sehingga di lain waktu ketika kita hendak membuka program processing dapat dengan cara melakukan double klik ke shortcut processing di desktop anda.

(8)

1.2 Processing

Gambar 1.5: Icon processing

1.2.2 GUI Processing

Berikut ini adalah tampilan Graphic User Interface (GUI) program processing.

Gambar 1.6: GUI Processing

Sama dengan program-program komputer lainnya, processing juga dilengkapi dengan menu bar standar seperti File, Edit, Sketch, Debug, Tools dan Help. Berikut ini tampilan menu-menu

(9)

1.2 Processing GUI program processing.

Gambar 1.7: Menu File

(10)

1.2 Processing

Gambar 1.9: Menu Sketch

(11)

1.3 HTML5 dan Notepad++

Gambar 1.11: Menu Tools

Gambar 1.12: Menu Help

1.3 HTML5 dan Notepad++

HTML singkata dari Hyper Text Mark-up Language adalah bahasa mark-up yang paling banyak digunakan untuk pembuatan website. HTML tidak bekerja seperti bahasa pemograman,

(12)

1.3 HTML5 dan Notepad++ tetapi HTML mengelola struktur pada sebuah halaman website. Pada dasarnya HTML digu-nakan untuk menunjukkan elemen-elemen yang terdapat pada sebuah halaman website. Setiap pembukaan ditunjukkan dengan tanda <....> dan ditutup dengan </....>. Kedua tanda ini berisikan inisial yang mewakili sebuah elemen halaman website. Beberapa keunggulan HTML5 adalah:

1. Penangan error yang lebih baik

2. Kemudahan untuk membuat aplikasi website

3. Menggunakan sintak yang lebih sederhana dibandingkan dengan pendahuluanya (HTML) 4. Dapat dengan mudah ditambahkan Java dan CSS untuk membuat website yang lebih

responsif.

5. Sudah mendukung konten video dan audio (tanpa membutuhkan flashplayer lagi) 6. Dukungan grafik vektor

7. Sangat kompatibel dengan banyak web browser 8. Penyimpanan informasi secara lokal

9. Dapat menjalankan Javascript di Web Brwoser

Point terakhir yaitu dapat menjalankan javascript di web browser adalah salah satu keunggu-lan tersendiri yang dapat kita manfaatkan untuk membuat simulasi atau animasi eksperimen fisika.Berikut ini adalah daftar tag (tanda) yang digunakan pada HTML5 berserta artinya. (Con-tekan yang penting untuk membuat website :) )

Table 1.1: Dafter Sintak HTML5

Sintak Keterangan <!DOCTYPE> Versi HTML <html> Dokumen HTML <head> Tempat Metadata

<body> Konten (isi) halaman website <!- .... -> Cara menuliskan komentar <base> Base URL

<div> Section / bagian halaman <p> Paragraf

(13)

Table 1.2: Dafter Sintak HTML5(lanjutan)

Sintak Keterangan

<hr> Garis horizontal pembatas section <a href=""> Link halaman

< a href="mailto"> Link email <a href="name"> Anchor <a href="#name"l> Link ke anchor

<strong> Membuat cetak tebal text (bold) <em> Membuat cetak miring text (italic) <blockqoute> Kutipan dari sumber lain

<q> Kutipan pendek

<abbr> Singkatan seperti Prof, Dr, dll <acronym> Singkatan seperti HTML, JS dll <address> Alamat

<pre> Text preformatted <dfn> Definisi

<code> Kode

<cite> Text miring untuk judul sebuah karya <del> Membuat garis horizontal pada text <ins> Membuar garis bawah pada text <sub> Text subscript

<sup> Text Superscript

<bdo> Arah text(kiri-kanak atau seballiknya) <ol> Ordered list

<ul> Unordered list <li> Item sebuah list

<dl> List istilah beserta deginisinya <dt> Istilah yang didefinisikan <dd> Definisi istilah

<form> Form

<fieldset> Menyatukan beberapa kolom form dalam satu kategori <legend> Memberi judul pada fieldset

<label> Membuat daftar pilihan berbentuk checker box <select> Membuat drop-down list

<input> Membaut kolom form

<optgroup> Membuat teks tebal untuk drop-down list <option> Membuat item dalam drop-down list

(14)

Table 1.3: Dafter Sintak HTML5(lanjutan)

Sintak Keterangan

<textarea> Membuat kolom form dalam kapasitas tak terbatas <button> Tombol

<table> Membuat tabel <caption> Membuat judul tabel <thead> Header tabel

<tbody> Body tabel <tfoot> Tabel footer

<colgroup> Mengkategorikan 1 atau lebih kolom tabel <col> Menentukan warna sebuah kolom

<tr> Baris tabel <th> Cell header <td> Cell biasa <img> Gambar

<map> Gambar dengan bagian yang dapat diklik <area> Bagian gambar yang dapat diklik

HTML5 dapat ditulis dengan mengunakan HTML editor. HTML editor adalah sebuah program komputer yang digunakan untuk membuat sekaligus mengedit kode HTML. Pada saat ini telah beredar banyak sekali HTML editor, salah satu HTML editor yang mudah digunakan dan bersifat gratis adalah notepad++. Notepad++ dibuat untuk sistem operasi window dengan tujuan untuk memperbaiki atau melengkapi kekurangan program notepad yang menjadi bawaan windows.

Notepad++ dapat di download di https://notepad-plus-plus.org/downloads/ . Notepad++ memiliki tampilan yang sederhana dan mudah digunakan. Gambar berikut ini menunjukkan tampilan notepas++.

(15)

Gambar 1.13: GUI Notepad++

Notepad++ akan kita gunakan untuk membuat website animasi eksperimen fisika.

1.3.1 Menambahkan ProcessingJS (Javascript) ke HTML

Kita dapat menambahkan program processing ke website dengan memanfaatkan process-ing.JS. Prosesnya bekerja dengan mengompilasi kode processing ke dalam JavaScript dan kemu-dian menampilkan hasilnya menggunakan elemen kanvas HTML5 di browser. Hasilnya adalah sketsa atau animasi versi berbasis web yang ditampilkan tanpa plugin apa pun dan ini berarti program animasi eksperimen fisika yang sudah dibuat dapat diakses di browser modern apa pun, termasuk di perangkat seluler. Cuma untuk perangkat seluler, akan timbul sedikit masalah, dimana kita harus mengatur ulang resolusi layar. Untuk aplikasi seluler sebaiknya animasi eksperimen fisika dibuat dengan menggunakan Processing for Android.

Cara menambahkan processing JS ke HTML5 yaitu :

1. Buat file HTML baru dengan menggunakan notepad++ dan simpan ke dalam satu folder khusus

2. Di dalam folder yang sama, buat satu folder baru lainnya dan beri nama js

3. Simpan file processing.js (file disertakan di folder modul ini atau bisa di download dari github) ke dalam folder js

4. Di dalam file HTML bagian <head> tambahkan kode berikut ini.

5. Pada file HTML bagian <body> tambahkan file berikut ini:

... tulis kode processing anda di sini kemudian akhiri dengan </script>

(16)

6. Setelah selesai, simpan file dan jalankan di web browser

Gambar berikut in contoh penulisan kode processing dengan menggunakan notepad di HTML5

Gambar 1.14: File HTML5 dengan processing

Jika dĳalankan di browser akan tampak seperti ini.

Gambar 1.15: Hasil kode pada gambar di atas

1.3.2 Contoh Pemograman Java-Processing Dengan Notepad++

(17)

h1,h4 {text-align: center;} </style>

<head>

<title>H & V Scroll</title>

<body>

<h1>Horizontal & Vertikal Scroll</h1> <div class="isi">

//--- Tempat kode processing

---int dragx =60; int dragy = 60; int x; int y; int posx= 365; int posy=240; int px; int py; int wh =600; int hh = 20; int wv = 20; int hv = 500; int yr; int xr; void setup(){ size(900, 600); } void draw(){ background(230); stroke(0); strokeWeight(2); //horizontal scroll fill(0, 200, 0); rect(150, 50, wh, hh); fill(0); px = posx + dragx; rect(px,40,20,40);

(18)

1.3 HTML5 dan Notepad++ xr = px -149; text("HScroll = ",150,100); text(xr,210,100); //vertikal scroll fill(200, 0, 0); rect(800, 50, wv, hv); fill(0); py = posy + dragy; rect(790,py,40,20); yr = py - 48; text("VScroll = ",700,500); text(yr,760,500); //elips fill(0, 0, 255); ellipse(450, 300, xr, yr); } void mouseDragged(){

if(mouseX <= wh+130 && mouseX >= 150 && mouseY <= 70 && mouseY >= 50){ x = mouseX - pmouseX;

if (x >= 0 && px <= wh+130){dragx = dragx + 4;}

else if(x <= 0 && px >= 150){dragx = dragx - 4;} }

if(mouseX <= 830 && mouseX >= 790 && mouseY <= (hv+30) && mouseY>= 50){ y = mouseY - pmouseY;

if (y >= 0 && py <=hv+30){dragy = dragy + 4;}

(19)

Bab 2 Pemograman Processing

2.1 Struktur Program Processing

Pada bab ini akan memperkenalkan elemen-elemen dan referensi dasar yang digunakan untuk menulis program processing. Menulis program adalah suatu kegiatan "menulis code-code program yang dilakukan secara terstruktur dan mengikuti aturan penulisan program yang sudah ditetapkan" . Sesuatu yang dibutuhkan untuk menulis program adalah kode-kode program. Kode-kode program tersebut tidak langsung dapat ditulis begitu saja, tetapi harus mengikut struktur program yang sudah ditetapkan. Struktur program processing dapat dilihat seperti berikut ini. // Berikut ini kode program processing untuk menampilkan sebuah

//kotak dan tulisan Hello. i am processing // bagian deklarasi konstanta dan variabel

boolean s1;

// bagian pengaturan awal (global)

void setup(){ size(900,600); } // program utama void draw() { background(230); rect(200,200,200,200);

text("Hello i'am processing", 210,210);

if (!s1){ saklarHOFF(230,90); } else{ saklarHON(230,90); }

//class - class program yang digunakan pada program utama, untuk memudahkan menulis program utama dan mempersingkat kode program

void mousePressed() {

if (mouseX >230 && mouseX < 280 && mouseY>90 && mouseY<110) {

if (s1==false) { s1 = true; } else { s1 = false; } } }

(20)

2.1 Struktur Program Processing

public void saklarHON(int x1, int y1) {

//saklar ON(posisi X1, posisi y1)

line(x1, y1, x1-20, y1); line(x1+30, y1, x1+60, y1); line(x1, y1, x1+25, y1); fill(255, 0, 0);

ellipse(x1+30, y1, 3, 3); ellipse(x1+25, y1, 3, 3); ellipse(x1, y1, 3, 3); }

public void saklarHOFF(int x1, int y1) {

//saklar OFF (posisi X1, posisi y1)

line(x1, y1, x1-20, y1); line(x1+30, y1, x1+60, y1); line(x1, y1, x1+25, y1-15); fill(255, 0, 0);

ellipse(x1+30, y1, 3, 3); ellipse(x1+25, y1-15, 3, 3); ellipse(x1, y1, 3, 3); }

Program processing tersusun atas 4 bagian yaitu bagian deklarasi variabel dan konstanta global(), bagian setup, bagian draw() dan bagian class-class program. Dari ke 4 bagian struktur program ini bagian setup() dan bagian draw() wajib ada.

2.1.1 Komentar

Komentar di dalam program processing tidak diproses oleh komputer tetapi penting bagi programmer sebagai pengingat atau pembatas program terutama untuk program-program yang panjang. Komentar pada processing ada 2 macam yaitu komentar satu baris (komentar pendek) dan komentar banyak baris (komentar panjang). Cara penulisan komentar pada processing adalah sebagai berikut ini.

// berikut ini cara menulis program 1 baris yaitu dengan menggunakan tanda (//)

/* berikut ini cara menuliskan program multi baris yaitu dengan menggunakan tanda (/* komentar ... */

Penulisan kode program processing memiliki beberapa bagian yaitu komentar, statement (pernyataan), akhir statement dan parameter. Gambar berikut ini menunjukkan bagian-bagian kode program tersebut.

(21)

2.1 Struktur Program Processing

Gambar 2.1: Bagian-bagian kode program

Perlu diingat penulisan kode program processing harus memperhatikan huruf besar dan huruf kecil, kesalahan penulisan huruf besar dan huruf kecil akan menyebabkan error dan program tidak dapat dieksekusi. misalnya :

// penulisan kode program yang salah

Background(230); strokeweight(2); ellipsemode(radius);

// yang benar seperti ini :

backgound(230); strokeWeight(2); ellipseMode(RADIUS);

Supaya tidak terjadi kesalahan penulisan huruf besar dan huruf kecil, ada baiknya menge-cek format statement dengan melihat referensi kode program processing yang dapat dilihat di :https://processing.org/reference/

2.1.2 Fungsi

Fungsi adalah perintah yang memungkinkan kita untuk membuat gambar, mengatur warna, mengatur tebal garis, menghitung dan mengelola angka, dan mengeksekusi bermacam-macam aksi. Sebuah fungsi biasanya ditulis dengan menggunakan huruf kecil yang diikuti dengan paratesis. Elemen di dalam parathesis yang dipisahkan oleh tanda koma (,) disebut parameter. Parameter mempengaruhi kerja sebuah fungsi. Fungsi juga ada yang tidak dilengkapi dengan parameter. Contoh program berikut ini menunjukkan kerja fungsi yang mengatur luas frame kerja (size()) dan background() yang mengatur warna frame kerja.

// fungsi size mempunyai 2 buah parameter yaitu parameter x dan parameter y. // parameter x mengatur panjang frame arah horizontal dan parameter y mengatur

panjang frame arah vertikal

size(900,600); // mengatur frame sebesar 900 px kali 600 px // fungsi berikut ini digunakan untuk mengatur warna dasar frame

(22)

2.1 Struktur Program Processing warna hijau dan B untuk warna biru

// penulisannya : background(R,G,B); tetapi background juga dapat ditulis dengan 1 buah parameter yaitu nanti tiap-tiap

// parameter R,G dan B diberikan nilai yang sama seperti berikut ini:

background(230); // dapat juga ditulis background (230,230,230); artinya parameter R= 230, G = 230 dan B = 230.

2.1.3 Data, dan Variabel

Processing dapat menyimpan dan mengelola banyak data, termasuk angka (numerik), kata, warna, gambar, dan boolena (benar atau salah). Komputer menyimpan data-data tersebut dengan berbagai cara, jadi kita harus tahu tipe data apa yang akan kita gunakan sehingga dapat diolah oleh komputer dengan benar. Berikut ini akan dibahas mengenai tipe-tipe data yang digunakan oleh program processing.

1. Numerik

Data Numerik atau angka adalah tipe data yang sering dan pasti digunakan pada program processing. Processing mengenal 2 macam tipe data numerik yaitu data floating dan integer. Integer adalah semua bilangan bulat termasuk bilangan bulat positif dan bilangan bulat negatif seperti 28, -128, 500, 7888 dan sebagainya. Sedangkan bilangan yang mengandung pecahan (desimal) dikenal oleh processing sebagai bilangan floating (float). Bilangan float termasuk bilang negatif, seperti -12,25 ; 24,5 ; 0,31 dan sebagainya. 2. Kata

Kata pada program processing dikenal dengan String. Fungsi ini digunakan untuk mendeklarasikan suatu variabel sebagai kata. Biasanya ditulis dengan tanda kutip seperti contoh berikut ini.

String A = "Kenapa";

3. Warna Warna dinyatakan dengan RGB (Red, Green, Blue) yaitu penggabungan warna merah, hĳau dan biru. Data warna dapat dinyatakan dengan bilangan desimal (0-255) atau bisa juga dengan bilangan hexadesimal (00 - FF). Berikut ini contoh penulisan warna pada program processing.

fill(120,255,0) // artinya diberi warna Red 120, Green = 255 dan blue = 0

fill(#ff12,ff) // artinya diberi warna red ff, greem = 12 dan blue = FF atau pada sistem desimal red=255, green=12 dan blue =255

4. gambar Processing dapat juga mengolah data gambar berupa image. Data image yang dapat dikelola oleh processing adalah .gif, .jpg. .tgs dan .png.

5. boolean Boolean adalah data true/false. Data boolean digunakan sebagai pertimbangan logika yang biasanya digabungkan dengan statement if, dan while.

(23)

2.1 Struktur Program Processing Tabel berikut ini menunjukkan perbandingan tiap data yang digunakan pada program processing.

Table 2.1: Perbandingan Data Pada Program Processing

Nama Data Ukuran Data Range

Boolean 1 bit benar atau salah

byte 8 bit -128 s/d 127 char 16 bit 0 s/d 65535 int 32 bit -2.147.483.648 s/d 2.147.483.647 float 32 bit -3,40282347 ×1038 _s/d 3,40282347 ×1038

color 32 bit 16.777.216 warna

Varibel adalah sebuah alokasi memori yang digunakan untuk menyimpan data. Varibel mengĳinkan sebuah data yang ada di dalamnya untuk digunakan selama beberapa kali di dalam program. Setiap variabel terdiri dari 2 bagian yaitu nama variabel dan nilai atau besar variabel tersebut. Misalnya sebuah variabel bernama "umur" dengan nilai variabel tersebut "21", maka setiap kali kata "umur" digunakan di dalam program, maka kata "umur" tersebut memiliki nilai sebesar "21".

Variabel harus dideklarasikan diawal program sebelum digunakan. Sebuah variabel dideklarasikan nama dan nilainya. baris program berikut ini menunjukkan cara mendeklarasikan variabel pada processing.

int x; // mendeklarasikan variabel x dengan tipe data integer

float y; // mendeklarasikan variabel y dengan tipe data float

boolean b; // mendeklarasika variabel b dengan tipe data boolean

x = 50; // memberikan nilai 50 ke x

y = 12.6; // memberikan nilai 12.6 ke y

b = true; // memberikan nilai true ke b

Dekalarasi juga dapat ditulis dengan cara yang lebih singkat seperti berikut ini.

int x = 5;

float y = 12/6;

boolean b = true;

atau jika tipe data yang digunakan sama maka dapat ditulis :

float x, y, z; x = -3.9; y = 12.5; z = 0.2354;

(24)

2.2 Sistem Koordinat Frame Pada Processing Nama variabel tidak boleh sama dan tipe data juga harus benar. Untuk data bilangan bulat gunakan int, data pecahan gunakan float . data true/false gunakan boolean dan data kata gunakan String.

2.2 Sistem Koordinat Frame Pada Processing

Sebelum membuat gambar di processing, kita harus mengetahui terlebih dahulu sistem koordinat yang digunakan pada processing. Satuan panjang atau jarak yang digunakan pada processing adalah pixel (px). Pixel adalah grid yang terdapat pada layar monitor komputer yang berupa sebuah lampu LED kecil yang menyala dengan warna tertentu. Layar monitor menggunakan luas screen yang berbeda-beda. Sebuah layar laptop dengan luas layar 1.764.000 pixels memiliki lebar 1680 px dan tinggi 1050 px. Layar monitor PC dengan luas layar 1.310.720 memiliki lebar 1290 dan tinggi 1024 pixel dan layar monitor lama dengan luas layar 786.432 memiliki lebar 1024 dan tinggi 768 pixel. Luas layar ini sering disebut resolusi monitor. Semakin luas layar monitor maka semakin banyak pixel yang dimilikinya dan semakin bagus gambar yang ditampilkan.

Mengingat layar monitor memiliki resolusi yang berbeda-beda ada baik, sebelum kita mem-buat simulasi eksperimen fisika, kita juga mempertimbangkan kemungkinan bahwa program yang kita buat akan digunakan pada komputer dengan layar resolusi yang rendah. Biasanya sebuah program simulasi eksperimen fisika dbuat pada ukuran layar 900 x 600 px atau lebih rendah .

Ukuran tampilan layar processing diatur dengan menggunakan fungsi :

size(width, height);

Fungsi size() memiliki 2 buah parameter, parameter pertama mengatur lebar layar dan parameter kedua mengatur tinggi layar seperti pada contoh gambar berikut ini.

(25)

2.2 Sistem Koordinat Frame Pada Processing

Gambar 2.2: Contoh hasil fungsi size()

Posisi suatu titik pada layar dinyatakan dengan koordinat X dan koordinat Y. koordinat X adalah jarak pada arah horizontal dari titik asal (0) dan koordinat Y adalah jarak pada arah vertikal dari titik asal (0). Titik asal pada sistem koordinat yang digunakan pada processing tidak sama dengan titik asal pada sistem kartesian. Titik asal (0,0) sistem koordinat processing berada dipokok kiri atas layar. Besar nilai koordinat akan bertambah ke arah kanan dan ke arah bawah dan sebaliknya akan berkurang ke arah atas dan ke arah kiri. Gambar berikut ini menampilkan contoh sistem koordinat pada processing.

(26)

2.3 Gambar-Gambar Dasar Pada Processing Sebuah posisi dinyatakan dengan nilai koordiant X yang diikuti oleh nilai koordinat Y yang dipisahkan oleh tanda koma(,). Notasi untuk koordinat asal ditulis (0,0). Sebuah koordinat (100,150) memiliki nilai koordinat X sebesar 100 dan nilai koordinat Y sebesar 150.

Sebuah layar tampilan dengan ukuran 100 x 100 pixel memiliki titik koordinat asal (0,0) dipokok kiri atas, sedangkan titik pojok kanan atas akan bernilai (99,0), titik pojok kanan bawah akan bernilai (99,99) dan titik pojok kiri bawah akan bernilai (0,99).

2.3 Gambar-Gambar Dasar Pada Processing

Gambar - gambar dasar pada processing antara lain: titik (point), garis (line), persegi panjang (rectangular), elips (ellipse) dan segitiga (triangular).

2.3.1 Titik (point)

Fungsi gambar yang paling sederhana pada processing adalah gambar titik. Gambar titik dapat dituliskan dengan fungsi :

point(x, y);

Fungsi titik mempunyai 2 parameter yaitu parameter x yang menyatakan koordinat x dan param-eter y yang menyatakan koordinat y. Satu titik merupakan satu pixel pada layar komputer.

2.3.2 Garis (line)

Fungsi garis digunakan untuk menggambar garis. Fungsi garis ditulis seperti contoh berikut ini.

line(x0, y0, x1, y1);

Fungsi garis memiliki 4 parameter yaitu : x0 yang menyatakan titik koordinat x awal x1 yang menyatakan titik koordinat x akhir y0 yang menyatakan titik koordinat y awal y1 yang menyatakan titik koordinat y akhir.

(27)

2.3 Gambar-Gambar Dasar Pada Processing

Gambar 2.4: Parameter sebuah garis di processing

2.3.3 Persegi Panjang (rectangular)

Fungsi persegi panjang (rectangular) digunakan untuk menggambar bentuk bangun datar persegi panjang dan persegi. Fungsi persegi panjang dapat ditulis sebegai berikut :

rect(x, y, dx, dy);

Fungsi persegi panjang mempunyai 4 parameter yaitu :

x menyatakan koordinat x (pojok kiri atas persegi panjang) y menyatakan koordinat y (pojok kiri atas persegi panjang) dx menyatakan panjang persegi panjang

dy menyatakan lebar persegi panjang

Jika parameter panjang (dx) sama dengan parameter lebar (dy) maka bangun yang dibentuk akan berupa pesegi. Gambar berikut ini menunjukkan contoh program processing untuk menggambar persegi panjang.

(28)

2.3 Gambar-Gambar Dasar Pada Processing

2.3.4 Elips (ellipse)

Fungsi elips (ellipse) digunakan untuk menggambar bangun datar elip dan lingkaran. Fungsi ellipse dapat ditulis sebagai berikut :

ellipse(x, y, dx, dy);

Fungsi ellipse mempunyai 4 parameter yaitu :

x menyatakan koordinat titik pusat elips pada arah sumbuh X y menyatakan koordinat titik pusat elips pada arah sumbuh Y dx menyatakan diameter arah sumbuh X

dy menyatakan diameter arah sumbuh Y

Jika diameter arah sumbuh X (dx) sama dengan diameter arah sumbuh Y (dy) maka akan terbentuk sebuah lingkaran. Gambar berikut ini menunjukkan contoh program processing untuk menggambar elips.

Gambar 2.6: Parameter gambar elips

2.3.5 Segitaga (triangular)

Fungsi segitiga dapat digunakan untuk menggambar segitiga pada processing. Fungsi segitiga (triangular) dapat ditulis dengan format seperti ini.

triangle(x1, y1, x2, y2, x3 ,y3);

Fungsi triangle mempunyai 6 parameter yaitu : x1 menyatakan koordinat titik x1 y1 menyatakan koordinat titik y1 x2 menyatakan koordinat titik x2 y2 menyatakan koordinat titik y2 x3 menyatakan koordinat titik x3 y3 menyatakan koordinat titik y3

(29)

2.3 Gambar-Gambar Dasar Pada Processing Gambar berikut ini menunjukkan contoh program processing untuk menggambar segitiga

Gambar 2.7: Parameter gambar segitiga

2.3.6 Busur(arc)

Fungsi busur (arc) digunakan untuk menggambar garis lengkung atau busur. Menggambar garis busur pada program processing, kita harus memahami sistem sudut yang digunakan pada processing. Program processing menggunakan sistem radian untuk menyatakan sudut. Satu lingkaran penuh (360o) besarnya sama dengan 2π radian. Menggambar busur diprocessing selalu berputar searah jarum jam. Fungsi busur (arc) dapat ditulis diprogram processing sebagai berikut :

arc(x, y, dx, dy, start, stop, mode)

Fungsi busur (arc) mempunyai 7 parameter yaitu : x menyatakan koordinat titik pusat x y menyatakan koordinat titik pusat y dx menyatakan lebar busur arah x dy menyatakan tinggi busur arah y

start menyatakan titik awal sudut busur (dalam radian) stop menyatakan titik akhir sudut busur (dalam radian)

mode = terdapat 3 macam mode yaitu OPEN untuk tembereng terbuka, CHORD untuk tembereng tertutup, PIE

(30)

2.4 Warna, Order Gambar dan Atribut Gambar

Gambar 2.8: Parameter gambar busur

2.4 Warna, Order Gambar dan Atribut Gambar

2.4.1 Memberikan Warna

Program processing dapat mengelola warna-warna yang kita inginkan. Untuk memberikan warna ke suatu bangun datar yang dibuat dapat menggunakan perintah :

fill(r, g, b);

ellipse(x, y, rx, ry);

Sedangkan untuk menghapus warna dapat digunakan fungsi :

noFill();

ellipse(x, y, rx, ry);

Contoh penggunaan fungsi fill() dan noFill():

(31)

2.4.2 Order Gambar

Program processing mengeksekusi program dari atas ke bawah, sehingga gambar yang ter-letak di bagian atas akan digambar terlebih dahulu, baru kemudian menggambar fungsi berikut-nya. Perhatikan perbedaan order gambar kedua program berikut ini

Gambar 2.10: Contoh order gambar pada processing

Pada gambar 1 lingkaran merah digambar terlebih dahulu, baru kemudian persegi panjang hĳau digambar sehingga posisi lingkaran merah berada di belakang persegi panjang hĳau, sedan-gkan pada gambar 2 persegi panjang hĳau digambar terlebih dahulu baru kemudian digambar lingkaran merah sehingga posisi lingkaran merah berada di depan persegi panjang hĳau. Jadi bangun datar yang digambar terlebih dahulu akan menempati posisi di belakang bangun datar yang digambar berikutnya.

2.4.3 Atribut Gambar

Pada program processing terdapat beberapa penambahan atribut gambar seperti fungsi smooth() dan fungsi noSmooth() yang dpaat digunakan untuk memperhalus gambar (Antialians-ing). Penulisan smooth() dan noSmooth() adalah sebagai berikut:

ellipse(30, 48, 36, 36); smooth()

ellipse(70, 48, 36, 36);

(32)

Gambar 2.11: Perbedaan smooth() dan noSmooth()

Selain atribut smooth() dan noSmooth(), terdapat juga atribut garis yaitu fungsi strokeWeit-ght(), fungsi strokeCap() dan fungsi strokeJoin(). fungsi strokeWeight( ) mempunyai 1 parameter yang mengatur ketebalan garis gambar yang digunakan. Fungsi strokeCap( ) juga mempunyai 1 parameter yang akan memberikan ujung garis berupa lingkaran, kotak atau project. Berikut ini menunjukkan contoh penggunaan fungsi atribut garis.

Gambar 2.12: Contoh penggunaan atribut garis

2.4.4 Mode Gambar

Saat menggambar elips, secara default parameter elips mengatur x dan y koordinat di titik pusat (CENTER). Mode ini dapat diubah dengan menggunakan perintah ellipseMode( )

(33)

2.4 Warna, Order Gambar dan Atribut Gambar dan ditambahkan parameter CENTER, RADIUS, CORNER atau CORNERS. Berikut contoh penggunaannya.

Gambar 2.13: Contoh penggunaan mode gambar

fungsi mode juga dapat diterapkan ada persegi panjang, berikut ini contoh programnya.

Gambar 2.14: Contoh penggunaan mode gambar pada persegipanjang

Kita juga dapat menambahkan fillet pada sudut persegi panjang dengan mengunakan mode rect( x1, y1, dx, dy, TL, TR, BR, BL). Keterangan: x1 = koordinat x, y1 = koordinat y, dx = panjang persegi panjang, dy = lebar persegi panjang, TL = Top Left (sudut kiri atas), TR = Top Right (sudut kanan atas), BR = Bottom Right (sudut kanan bawah) dan BL = Bottom Left (sudut kiri bawah). Berikut ini contohnya.

(34)

2.5 Fungsi Aritmatika

Gambar 2.15: Contoh menambahkan fillet pada sudut persegi panjang

2.5 Fungsi Aritmatika

Beberapa sintaks aritmatika yang digunakan oleh program processing adalah :

Table 2.2: Sintaks Aritmatika pada Processing

Nama Sintaks Penulisan Contoh & artinya Penjumlahan (add) + x = 24 + 5 → x = 29 Pengurangan (substract) - x = 24 - 5 → x = 19 Perkalian (multiply) * x = 24 * 5 → x = 120 Pembagian (divide) / x = 25 / 5 → x = 5 Sisa bagi (modulus) % x = 9 % 3 → x = 0

Parathesis ( ) rect(20, 20, 40, 40); inkremental (increment) ++ x++ → x = x + 1 dekremental (decrement) – x– → x = x - 1 add assign += x = x += 5 → x = x + 5 substract assign -= x -= 5 → x = x - 5 multiply assign *= x *= 4 → x = x * 4 divide assign /= x /= 4 → x = x / 4 negasi (negation) - x = -x

nilai atas (ceil) ceil() x = ceil(2.3) → x = 3 nilai bawah (floor) floor() x = floar(2.3) → x = 2 pembulatan (round) round() x = round(2.3) → x = 2

mininum (min) min()

(35)

2.6 Fungsi Logika dan Kontrol

2.6.1 fungsi desisi dan percabangan

Sintak-sintak yang digunakan oleh program processing untuk operasi logika dan perbandin-gan dapat dilihat pada tabel berikut ini.

Table 2.3: Sintaks Logika & perbandingan Processing

Nama Sintaks Penulisan Contoh & artinya

Lebih dari > x > 5 → x = 6, 7, 8, ...

Kurang dari < x < 5 → x = 4, 3, 2, 1, ... Lebih dari atau sama dengan >= x >= 0 → x = 0, 1, 2, ... Kurang dari atau sama

den-gan

<= x <= 0 → x =0, -1, -2, ...

sama dengan == x == 9 → x sama dengan 9

tidak sama dengan != x != 9 → x tidak sama dengan 9

if , else if ( ){ }, else ( ){ }

Logika OR || (x ==0 || x == 1) → x sama

dengan nol ATAU x sama dengan 1

Logika AND && ( x==0 && x ==1) → x sama dengan nol DAN x sama den-gan 1

Logika NOT != x!= 1 → x tidak sama dengan

1

(36)

2.6 Fungsi Logika dan Kontrol

Gambar 2.16: Struktur operasi logika dan percabangan dengan if, else if dan else

2.6.2 Fungsi Pengulangan(iterasi)

Pengulangan atau iterasi adalah operasi yang digunakan untuk melakukan proses pengulan-gan suatu statement berulangkali hingga batas yang ditentukan. Sintak operasi pengulanpengulan-gan atau iterasi adalah :

for (int i=0; i <=10; i ++)\{ ... statement ....\}

Penulisan program dengan menggunakan iterasi akan memperpendek alur program dan memu-dahkan penulisan, bandingkan dua program yang sama berikut ini.

size(200,200); line(20, 20, 20, 180); line(30, 20, 30, 180); line(40, 20, 40, 180); line(50, 20, 50, 180); line(60, 20, 60, 180); line(70, 20, 70, 180); line(80, 20, 80, 180); line(90, 20, 90, 180);

(37)

2.6 Fungsi Logika dan Kontrol line(100, 20, 100, 180); line(110, 20, 110, 180); line(120, 20, 120, 180); line(130, 20, 130, 180); line(140, 20, 140, 180);

Jika ditulis dengan menggunakan statement for ( ... ) { .... } menjadi :

size(200,200);

for ( int 1 = 20; i < 150; i += 10)\{ line(i, 20, i, 180);

\}

Jelas lebih singkat penulisan dengan menggunakan statement pengulangan. Struktur pen-gulangan dapat dilihat pada gambar berikut ini.

(38)

Bab 3 Memulai Program Processing di Notepad++

Pada pokok bahasan ini kita akan memulai membuat program processing dengan menggu-nakan notepad++. Program ditulis di notepad++ dan dibuka di browser, dapat menggumenggu-nakan Mozzila Firefox, Google Chrome, atau Microsoft Edge. Pertama-tama buka notepad++ dengan melakukan double klik pada icon notepad++ yang ada di desktop seperti pada gambar berikut ini.

Gambar 3.1: Double klik pada icon notepad++

Maka akan muncul GUI notepad++ seperti pada gambar berikut ini.

(39)

3.1 Menyiapkan halaman website untuk animasi fisika Kemudian simpan file new1.txt ke folder tersendiri dan beri nama dengan extensi .html, misalnya "gambar_dasar.html".

Gambar 3.3: Simpan file new1.txt ke folder tersediri dengan nama berextensi .html misalnya:

gam-bar_dasar.html

Maka file new1.txt akan berubah menjadi file HTML dengan nama file gambar_dasar.html seperti pada gambar di bawah ini.

Gambar 3.4: Halaman kerja file HTML

(40)

3.1 Menyiapkan halaman website untuk animasi fisika

Animasi eksperimen fisika yang kita buat akan ditampilkan di website, sehingga kita mem-butuhkan sebuah halaman website. Halaman website ini harus kita siapkan terlebih dahulu, berikut ini adalah tahap-tahapan untuk menyiapkan halaman website animasi eksperimen fisika. Sebuah halaman website sederhana yang dibuat dengan HTML5 membutuhkan kode mini-mum sebagai berikut :

//tempat mengatur style halaman website

</style> <head>

// tempat deklarasi meta dan include file

</head> <body>

// tempat program utama

</body> <footer>

//tempat catatan kaki

</footer> </html>

(41)

3.1 Menyiapkan halaman website untuk animasi fisika

Gambar 3.5: Kode program dasar html

Jangan lupa setelah selesai di ketik, file disimpan.

Kemudian tambahkan di bagian <head>, file processing.js seperti yang telah dibahas di bab1. Tambahkan juga <title>, judul/nama eksperimen di bagian <body>, dan CopyRight di bagian <footer> seperti pada gambar berikut ini.

Gambar 3.6: Kode program dasar HTML

Jika program dĳalankan di browser maka akan muncul tampilan seperti pada gambar di bawah ini.

(42)

3.2 Menyiapkan layar kerja dan mengatur warna background

Gambar 3.7: Tampilan di browser

Kode processing dapat ditulis di antara <script type="text/processing"> ... </script> seperti pada gambar dibawah ini.

Gambar 3.8: Tempat menuliskan kode processing

Sekarang program HTML5 sudah siap untuk ditambahkan kode-kode program processing untuk membuat animasi eksperimen fisika.

3.2 Menyiapkan layar kerja dan mengatur warna background

Pogram minimal processing membutuhkan " void setup() "dan " void draw() ". Void setup() digunakan untuk melakukan pengaturan awal, sedangkan void draw adalah tempat program

(43)

3.2 Menyiapkan layar kerja dan mengatur warna background utama dĳalankan.

Gambar 3.9: Kode dasar processing

Jika dĳalankan di browser maka akan terlihat seperti pada gambar berikut ini.

Terlihat layar animasi yang tampil sangat kecil, Untuk selanjutkan kita harus mengubah layar kerja ini menjadi lebih besar dan juga mengatur warna background sesuai dengan selera kita masing-masing.

Ketika mengubah luas layar, kita harus mempertimbangkan resolusi layar monitor. Ukuran layar yang tepat untuk membuat animasi adalah panjang 900 px dan lebar 600 px. Warna background sesuai dengan selera masing-masing. Warna background diatur dengan metode

(44)

3.2 Menyiapkan layar kerja dan mengatur warna background RGB (red,green,blue) dengan nilai red, green dan blue adalah 0 - 255 (8 bit). Berikut ini contoh kode programnya.

Gambar 3.11: Kode program processing untuk mengatur layar dan background

Jika dĳalankan di browser maka terlihat :

Terlihat layar kerja berada di bagian sisi kiri layar monitor, tentu ini membuat fokus mata kita tertuju ke sisi kiri monitor. Sebaiknya layar kerja diposisikan tepat ditengah monitor. Hal ini dapat dilakukan dengan penambahan setting di bagian <style> pada kode HTML (dapat juga dilakukan mengunakan CSS). Berikut contoh kode programnya.

(45)

3.3 Menggambar & Animasi Dasar di Processing

Gambar 3.13: Tambahan kode HTML5 untuk mengatur style halaman website

Jika dĳalankan di browser maka terlihat :

3.3 Menggambar & Animasi Dasar di Processing

Berikut contoh program processing untuk menggambar berbagai bentuk persegi panjang.

.isi{margin: auto; max-width: 70%;} h1,h4 {text-align: center;}

(46)

</style> <head>

<body>

<h1>Bangun Datar Dasar Pada Processing</h1> <div class="isi">

---void setup(){ size(900,600); } void draw(){ background(230); strokeWeight(1); stroke(0); fill(255); rect(100, 200, 400, 100); fill(0); rect(100, 350, 400, 100); fill(255, 255, 0); rect(100, 500, 100, 50); fill(150, 0, 0); rect(250, 500, 100, 50); noStroke(); fill(0, 0, 200); rect(400, 500, 100, 50); stroke(150,0,0); strokeWeight(5); fill(250,100,0); rect(600, 200, 100, 300); stroke(255); strokeWeight(5); fill(0); rect(750, 200, 100, 300);

(47)

for(int i=0; i <= 730; i += 20){ rect(100+i, 50, 10, 10);

rect(100+i, 150, 10, 10)}

for (int j=0; j<=730; j +=80){

Jika program di atas dibuka dengan menggunakan browser maka didapat:

Berikutnya kita akan membuat animasi gerak kotak yang berada di atas lantai. Jika mouse di klik atau ditekan atau didrag, maka kotak akan bergeser. Berikut programnya.

(48)

</style> <head>

<title>Gerak Kotak</title>

<body>

<h1>Animasi Gerak Kotak oleh Klik Mouse</h1> <div class="isi">

---int press = 60; int click = 60; int drag =60; int x; void setup(){ size(900, 600); } void draw(){ background(230); strokeWeight(10); stroke(100, 50, 0); line(50, 200, 850, 200); line(50, 300, 850, 300); line(50, 400, 850, 400); strokeWeight(2); stroke(0); fill(255); rect(click, 146, 50, 50, 5, 5, 5, 5); fill(0);

text("yang ini mouse diclick", 50, 130); strokeWeight(2);

(49)

fill(255, 0, 0);

rect(press, 246, 50, 50, 5, 5, 5, 5); fill(0);

text("yang ini mouse ditekan", 50, 230); strokeWeight(2);

stroke(0); fill(0, 0, 255);

rect(drag, 346, 50, 50, 5, 5, 5, 5); fill(0);

text("yang ini mouse didrag", 50, 330); } void mousePressed(){ press = press + 10; } void mouseClicked(){ click = click + 10 } void mouseDragged(){ x = mouseX - pmouseX; if (x >= 0){drag = drag + 2;}

Jika program di atas dĳalankan di browser. maka tampilannya seperti pada gambar berikut ini

(50)

Cara kerja program :

Jika mouse ditekan, maka kotak merah akan bergerak ke kanan, sementara kotak putih diam, jika tekanan mouse dilepas, maka kotak yg putih akan bergerak ke kanan dan kotak merah diam. Kotak biru bergerak jika mouse di drag ke kiri atau ke kanan. Drag adalah ditekan tombol kiri sambil digerakan.

Dari kode program bagian mouse drag, kita bisa mengembangkan menjadi sebuah scroll mendatar. Berikut hasil pengembangan kode program mouseDrag menjadi sebuah scroll men-datar.

</style> <head>

<title>Horizontal Scroll</title>

<body>

<h1>Horizontal Scroll</h1> <div class="isi">

(51)

---3.3 Menggambar & Animasi Dasar di Processing int drag =60; int x; int pos= 365; int p; int w =600; int h = 20; int y; void setup(){ size(900, 600); } void draw(){ background(230); stroke(0); strokeWeight(2); fill(0, 200, 0); rect(150, 200, w, h); fill(0); p = pos+drag; rect(p,190,20,40); text(p,365,100); y = p -149; text(y,365,50); noFill(); ellipse(450,300,y,y); } void mouseDragged(){ x = mouseX - pmouseX;

if (x >= 0 && p <= w+130){drag = drag + 2;}

(52)

</html>

Jika program dĳalankan di browser, maka tampilannya akan seperti pada gambar berikut ini.

Point scroll (kotak warna hitam) dapat digerakkan ke kiri dan ke kanan, ketika kotak hitam digerakkan ke kanan, maka variabel p akan bertambah dan diameter lingkaran menjadi semakin besar. Sebaliknya jika kotak hitam digerakkan ke kiri, maka variabel p akan semakin kecil dan diameter lingkaran juga mengecil. Pada program ini, kita bisa mendrag mouse di seluruh bagian layar, nah, coba dipikirkan bagaimana caranya supaya mouse hanya bisa didrag di alur scroll horizontal saja?.

Program berikutnya horizontal scroll dimodifikasi menjadi vertikal scroll, kemudian kedua scroll digabungkan untuk mengatur jari-jari elips. Berikut kode programnya.

</style> <head>

<title>H & V Scroll</title>

(53)

<body>

<h1>Horizontal & Vertikal Scroll</h1> <div class="isi">

---int dragx =60; int dragy = 60; int x; int y; int posx= 365; int posy=240; int px; int py; int wh =600; int hh = 20; int wv = 20; int hv = 500; int yr; int xr; void setup(){ size(900, 600); } void draw(){ background(230); stroke(0); strokeWeight(2); //horizontal scroll fill(0, 200, 0); rect(150, 50, wh, hh); fill(0); px = posx + dragx; rect(px,40,20,40); xr = px -149; text("HScroll = ",150,100); text(xr,210,100); //vertikal scroll fill(200, 0, 0); rect(800, 50, wv, hv); fill(0);

(54)

3.3 Menggambar & Animasi Dasar di Processing py = posy + dragy; rect(790,py,40,20); yr = py - 48; text("VScroll = ",700,500); text(yr,760,500); //elips fill(0, 0, 255); ellipse(450, 300, xr, yr); } void mouseDragged(){

if(mouseX <= wh+130 && mouseX >= 150 && mouseY <= 70 && mouseY >= 50){ x = mouseX - pmouseX;

if (x >= 0 && px <= wh+130){dragx = dragx + 4;}

else if(x <= 0 && px >= 150){dragx = dragx - 4;} }

if(mouseX <= 830 && mouseX >= 790 && mouseY <= (hv+30) && mouseY>= 50){ y = mouseY - pmouseY;

if (y >= 0 && py <=hv+30){dragy = dragy + 4;}

(55)

Dari kedua program scroll ini, coba pikirkan dapat dimanfaatkan sebagai apa horizontal scroll dan vertikal scroll ini untuk membuat animasi fisika?

Program berikut ini untuk membuat cakram yang berputar.

</style> <head>

<title>Animasi Lingkaran</title>

<body>

<h1>Membuat Cakram Berputar</h1> <div class="isi">

---float angle=0;

int drag =60;

int x;

int pos= 365;

(56)

3.3 Menggambar & Animasi Dasar di Processing int w =600; int h = 20; int y; void setup(){ size(900, 600); } void draw(){ background(230); noStroke(); strokeWeight(2); //scroll horizontal fill(0, 200, 0); rect(150, 50, w, h); fill(0); p = pos+drag; rect(p,40,20,40); y = p -149; //fungsi rotasi angle = angle - y; translate(450,300); rotate(angle); rect(-25,-25,50,50); //cakram merah fill(255,0,0); arc(0,0,300,300,0,PI-((1/3)*PI)); //cakram hijau fill(0,255,0); arc(0,0,300,300,PI-((1/3)*PI), PI+((1/3)*PI)); //cakram biru fill(0,0,255); arc(0,0,300,300,PI+((1/3)*PI), TWO_PI); } void mouseDragged(){ x = mouseX - pmouseX;

if (x >= 0 && p <= w+130){drag = drag + 2;}

else if(x <= 0 && p >= 150){drag = drag - 2;} }

(57)

Jika program dĳalankan di browser akan tampil seperti pada gambar berikut ini.

(58)

Bab 4 Membuat Alat-Alat Simulasi Eksperimen Fisika

Pada pokok bahasan ini, kita akan membahas cara membuat animasi alat-alat praktikum fisika yang bisa digunakan untuk simulasi eksperimen fisika. Beberapa alat yang sering dipakai untuk simulasi antara lain :

1. Animasi alat ukur digital

2. Animasi pemanas dan pendingin 3. Animasi power supply

4. Animasi variabel resistor atau rheostat 5. Animasi saklar, tombol dan lampu 6. Animasi sistem silinder piston 7. Animasi trolli dan ticker timer

Selanjutnya beberapa animasi ini akan kita bahas satu per satu.

4.1 Animasi Tampilan Macam-Macam Alat Ukur Digital

4.1.1 Animasi Volmeter Digital

Animasi voltmeter digital dapat dibuat dengan menggunakan 2 buah persegi panjang. Persegi panjang yang besar digunakan sebagai bodi voltmeter dan diberi warna abu-abu gelap, sedangkan persegi panjang ke lebih kecil digunakan sebagai layar display voltmeter dan diberi warna merah gelap supaya kontras dengan teks yang berwarna putih. Pada voltmeter juga dilengkapi dengan teks satuan tegangan (V) yang berwarna putih dan teks tegangan yang terukur yang ditampilkan di display yang juga berwarna putih. Gambar berikut ini menunjukan desain animasi voltmeter digital.

Gambar 4.1: Tampilan voltmeter digital

kode program untuk membuat Voltmeter digital adalah sebagai berikut ini.

(59)

4.1 Animasi Tampilan Macam-Macam Alat Ukur Digital

</style> <head>

<title>Animasi Alat Ukur</title>

<body>

<h1>Animasi Alat Ukur Digital</h1> <div class="isi">

---void setup(){ size(900,600); } void draw(){ background(230); stroke(0); strokeWeight(2); // voltmeter digital fill(120); rect(300,300,120,40); fill(150,0,0); rect(305,305,80, 30); fill(255); textSize(25); text("V", 395, 330); text("28", 320,330); } //---</script> <canvas></canvas> </div> </body> <footer> <h4>CopyRight2021 @ Djukarna</h4>

(60)

</footer> </html>

Jika program tersebut di jalankan di web browser, maka akan tampil seperti pada gambar berikut ini.

Gambar 4.2: Tampilan voltmeter digital di web browser

Selanjutnya kita akan mencoba menggabungkan voltmeter dengan program scroll horizon-tal. Scroll horizontal akan menjadi sumber tegangan varibel dan voltmeter mengukur sumber tegangan tersebut. Program berikut ini menunjukkan gabungan keduannya.

</style> <head>

<body>

(61)

4.1 Animasi Tampilan Macam-Macam Alat Ukur Digital //--- Tempat kode processing

---int drag =60; int x; int pos= 365; int p; int w =600; int h = 20; int y; void setup(){ size(900,600); } void draw(){ background(230); stroke(0); strokeWeight(2); // voltmeter digital fill(120); rect(300,300,120,40); fill(150,0,0); rect(305,305,80, 30); fill(255); textSize(25); text("V", 395, 330); text(nf(y, 0), 320,330); //scroll tegangan fill(0, 200, 0); rect(150, 50, w, h); fill(0); p = pos+drag; rect(p,40,20,40); y = (p -149)/10; } void mouseDragged(){ x = mouseX - pmouseX;

if (x >= 0 && p <= w+130){drag = drag + 2;}

else if(x <= 0 && p >= 150){drag = drag - 2;} }

//---</script>

(62)

Manipulasi yang dilakukan adalah mengganti teks yang terdapat pada display dengan nilai y yang ada di scroll. nilai Y berkisar 0 - 580, untuk membuat sebuah sumber tegangan DC dari 0 - 58 V maka kita bisa membagi nilai Y dengan 10. Kemudian sebelum ditampilkan nilai Y harus diatur jumlah digitnya dengan sintak "nf(y,0)", namun karena Y adalah bilangan integer (int), maka nilai Y berupa bilangan bulat.

Gambar berikut ini menunjukkan animasi voltmeter digital dengan scroll horizontal sebagai sumber tegangan DC bervariasi.

Gambar 4.3: Tampilan animasi voltmeter

Jika kita hendak menampilkan banyak voltmeter pada satu animasi, maka kita akan mengulang-ulang kode program yang sama, hal ini menyebabkan sekuen program menjadi panjang dan rumit. Untuk menyederhanakan penulisan, maka kita dapat menempatkan voltmeter sebagai class tersediri, yang nantinya bisa dipanggil. Sebelum membuat class voltmeter, kita harus menentukan variabel apa saja yang merupakan variabel bebas yang dapat diganti-ganti oleh programmer. Variabel bebas yang dapat diganti-ganti adalah posisi X, posisi Y dan tentu saja variabel tegangannya. Program berikut ini menunjukkan contoh class voltmeter.

(63)

<style>

</style> <head>

<body>

---int drag =60; int x; int pos= 365; int p; int w =600; int h = 20; int y; float V1; void setup(){ size(900,600); } void draw(){ background(230); stroke(0); strokeWeight(2); // voltmeter digital Voltmeter(V1,300,300); //scroll tegangan fill(0, 200, 0); rect(150, 50, w, h); fill(0); p = pos+drag; rect(p,40,20,40);

(64)

y = (p -149)/10; V1 = y;

}

public void Voltmeter(float V, int x, int y){ stroke(0); strokeWeight(2); fill(120); rect(x,y,120,40); fill(150,0,0); rect(x+5,y+5,80, 30); fill(255); textSize(25); text("V", x+95, y+30); text(nf(V, 0), x+20, y+30); } void mouseDragged(){ x = mouseX - pmouseX;

if (x >= 0 && p <= w+130){drag = drag + 2;}

Bandingkan program kedua dengan program pertama. Kedua program menghasilkan tampi-lan yang sama. Perbedaan terletak pada class (public void) yang ada di program kedua. Jika kita akan menambah voltmeter dalam jumlah banyak di program ke dua maka dapat kita lakukan dengan mudah seperti program berikut ini.

(65)

h1,h4 {text-align: center;} </style>

<head>

<body>

---int drag =60; int x; int pos= 365; int p; int w =600; int h = 20; int y; float V1; float V2; float V3; float V4; float V5; void setup(){ size(900,600); } void draw(){ background(230); stroke(0); strokeWeight(2); // voltmeter digital Voltmeter(V1,300,200); Voltmeter(V2,300,250); Voltmeter(V3,300,300); Voltmeter(V4,300,350); Voltmeter(V5,300,400);

(66)

4.1 Animasi Tampilan Macam-Macam Alat Ukur Digital //scroll tegangan fill(0, 200, 0); rect(150, 50, w, h); fill(0); p = pos+drag; rect(p,40,20,40); y = (p -149)/10; V1 = y; V2 = y; V3 = y; V4 = y; V5 = y; }

public void Voltmeter(float V, int x, int y){ stroke(0); strokeWeight(2); fill(120); rect(x,y,120,40); fill(150,0,0); rect(x+5,y+5,80, 30); fill(255); textSize(25); text("V", x+95, y+30); text(nf(V, 0), x+20, y+30); } void mouseDragged(){ x = mouseX - pmouseX;

if (x >= 0 && p <= w+130){drag = drag + 2;}

(67)

4.1 Animasi Tampilan Macam-Macam Alat Ukur Digital Tampilan di browser :

Gambar 4.4: Tampilan animasi banyak voltmeter

Dengan menggunakan sistem kelas, kita dengan mudah menambahkan banyak voltmeter digital. kita hanya harus mengatur variabel yang di ukur, menampilkan voltmeter sesuai variabel yang diukur dan menentukan nilai yang kita ukur.

Kelas voltmeter ini juga dapat kita ubah menjadi bermacam-macam alat ukur, misalnya termometer, Amperemeter, timbangan massa, alat ukur tekanan, Ohmmeter dan sebagainya, dengan cara mengganti nama kelas dan satuan pada alat ukur. Berikut ini contoh program processing dalam bentuk class-class macam-macam alat ukur digital.

</style> <head>

<body>

(68)

---4.1 Animasi Tampilan Macam-Macam Alat Ukur Digital int drag =60; int x; int pos= 365; int p; int w =600; int h = 20; int y; float V1; float V2; float V3; float V4; float V5; float P; void setup(){ size(900,600); } void draw(){ background(230); stroke(0); strokeWeight(2);

// macam-macam alat ukur digital

Voltmeter(V1,300,200); Amperemeter(V2,300,250); Ohmmeter(V3,300,300); Termometer(V4,300,350); Tekanan(V5,300,400); Tekanan(P,600,200); //scroll tegangan fill(0, 200, 0); rect(150, 50, w, h); fill(0); p = pos+drag; rect(p,40,20,40); y = (p -149)/10; V1 = y; V2 = y; V3 = y; V4 = y;

(69)

V5 = y; }

public void Voltmeter(float V, int x, int y){ stroke(0); strokeWeight(2); fill(120); rect(x,y,120,40); fill(150,0,0); rect(x+5,y+5,80, 30); fill(255); textSize(25); text("V", x+95, y+30); text(nf(V, 0), x+20, y+30); }

public void Amperemeter(float I, int x, int y){ stroke(0); strokeWeight(2); fill(120); rect(x,y,120,40); fill(150,0,0); rect(x+5,y+5,80, 30); fill(255); textSize(25);

text("I", x+95, y+30); text(nf(I, 0), x+20, y+30); }

public void Tekanan(float p, int x, int y){ stroke(0); strokeWeight(2); fill(120); rect(x,y,150,40); fill(150,0,0); rect(x+5,y+5,80, 30); fill(255); textSize(25);

text("bar", x+95, y+30); text(nf(p, 0), x+20, y+30); }

(70)

4.1 Animasi Tampilan Macam-Macam Alat Ukur Digital stroke(0); strokeWeight(2); fill(120); rect(x,y,150,40); fill(150,0,0); rect(x+5,y+5,80, 30); fill(255); textSize(25);

text("Ohm", x+95, y+30); text(nf(R, 0), x+20, y+30); }

public void Termometer(float T, int x, int y){ stroke(0); strokeWeight(2); fill(120); rect(x,y,120,40); fill(150,0,0); rect(x+5,y+5,80, 30); fill(255); textSize(25); text("C", x+95, y+30); text(nf(T, 0), x+20, y+30); textSize(16);

text("o", x+87, y+20); }

void mouseDragged(){ x = mouseX - pmouseX;

if (x >= 0 && p <= w+130){drag = drag + 2;}

(71)

4.2 Membuat Alat Pemanas & Pendingin Tampilan di web browser:

Gambar 4.5: Tampilan animasi macam-macam alat ukur digital

4.2 Membuat Alat Pemanas & Pendingin

Selanjutnya pada bagian kedua ini kita akan membuat animasi pemanas dan pendingin dengan memanfaatkan horizontal scroll yang programnya sudah kita buat di bab 3. Animasi alat pemanas dan pendingin banyak digunakan pada berbagai eksperimen fisika.

Pertama-tama kita harus membuat model alat pemanas. Model alat pemanas atau pendingin yang didesain mirip seperti kompor listrik dan dilengkapi scroll yang dapat digeser ke kiri untuk pendinginan dan ke kanan untuk pemanasan. Kode program juga dibuat dalam bentuk class, sehingga nantinya dapat memudahkan pembuatan animasi eksperimen fisika. Berikut ini kode program untuk animasi alat pendingin dan pemanas.

</style> <head>

<title>Animasi Kompor</title>