LABORATORIUM VIRTUAL KONSEP DAN PENGEMBANGAN SIMULASI FISIKA Wandah Wibawanto Penerbit LPPM UNNES i LABORATORIUM VIRTUAL KONSEP DAN PENGEMBANGAN SIMULASI FISIKA © All Rights Reserved Hak cipta dilindungi undang-undang Penulis: Wandah Wibawanto, S.Sn. M.Ds. Editor (verifikator ahli): Prof. Dr. rer.nat. Wahyu Hardyanto, M. Si. Fianti, S. Si., M. Sc., Ph. D Desain & Tata Letak: Wandah Wibawanto, S.Sn. M.Ds. Penerbit : Penerbit LPPM UNNES Gedung Prof. Retno Sriningsih Satmoko Lt 1 Universitas Negeri Semarang Kampus Sekaran, Gunungpati, Semarang e-mail: [email protected] ISBN : 978-623-7618-84-3 Cetakan Pertama : 2020 Undang - Undang RI Nomor 19 Tahun 2002 Tentang Hak Cipta Ketentuan Pidana Pasal 72 (ayat 2) Barang Siapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau menjual kepada umum suatu ciptaan atau barang hasil pelanggaran Hak Cipta atau hak terkait sebagaimana dimaksud pada ayat (1), dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau denda paling banyak Rp. 500.000.000,00 (lima ratus juta rupiah). ii iii Untuk ilmuwan masa depan Azka SaturnLab & Izzan Artwork iv v KATA PENGANTAR Alhamdulillahi robbil’aalamin, pada akhirnya buku ini selesai ditulis setelah proses penulisan dan pengembangan aplikasi berjalan sejak awal 2020. Rasa syukur yang terdalam saya sampaikan karena diberikan kemudahan dalam penulisan buku ini. Istilah laboratorium virtual merupakan istilah yang menjadi hype dalam 1 dekade terakhir. Keberadaan teknologi seperti augmented reality dan virtual reality menjadikan banyak pengembang aplikasi merilis laboratorium virtual dalam berbagai format, mulai dari platform umum seperti mobilephone dan website sampai dengan aplikasi yang membutuhkan perangkat khusus seperti Head Mounted Display untuk mensimulasikan laboratorium virtual dalam bentuk realitas maya. Sementara itu, pengembangan laboratorium virtual oleh pengembang lokal atau pengajar tanah air, masih relatif minim. Hal ini mungkin disebabkan karena minimnya referensi, atau sudah merasa nyaman dengan penggunaan aplikasi yang telah dibuat oleh pengembang luar negeri. Untuk itu, terbesit sekilas dipikiran saya untuk menuliskan sedikit referensi tentang konsep dan pengembangan laboratorium virtual dengan tujuan untuk menumbuhkan ketertarikan kepada siapapun dalam mengembangkan media pembelajaran sains berupa laboratorium virtual, yang mungkin dapat digunakan dalam ruang lingkup kecil yaitu pembelajaran di kelas atau bahkan dikembangkan lebih lanjut untuk menjadi aplikasi yang digunakan secara global. Buku ini saya tulis dengan latar belakang saya yang bukan dari bidang fisika, dan lebih cenderung kepada teknis pemrograman berbasis HTML 5 dan Javascript. Adapun ketika pembaca dari bidang Fisika atau sains lainnya menemukan beberapa kesalahan konsep, maka saya memohon maaf yang sebesar-besarnya dan memohon masukan guna perbaikan selanjutnya. Akhirnya, semoga buku ini dapat membawa manfaat bagi pengembangan aplikasi laboratorium virtual di Indonesia. Semarang, Juni 2020 Wandah Wibawanto vi vii Daftar Isi Kata Pengantar ................................................................................................................................... v Daftar Isi ................................................................................................................................................. vii Daftar Gambar ................................................................................................................................... xi BAB 1 Laboratorium Virtual ...................................................................................................... 1 1.1 Konsep Dasar Laboratorium Virtual ................................................................................... 1 1.2 Tujuan dan Keunggulan Penggunaan Laboratorium Virtual .................................. 5 1.3 Terminologi dalam Laboratorium Virtual ....................................................................... 11 1.4 Mendesain dan Mengembangkan Laboratorium Virtual .......................................... 14 A. Metodologi pengembangan laboratorium virtual................................................. 14 B. Pengetahuan dasar dalam pengembangan laboratorium virtual .................. 16 1.5 Pengembangan Laboratorium Virtual dalam Buku ini .............................................. 17 1.6 Referensi Pengembangan Laboratorium Virtual .......................................................... 18 1.7 Lisensi Buku.................................................................................................................................... 18 BAB 2 Teknologi HTML 5 dan Canvas .................................................................................. 19 2.1 HTML Canvas ................................................................................................................................. 19 2.2 Struktur HTML Canvas .............................................................................................................. 21 2.3 Javascript dan Kode untuk Canvas ...................................................................................... 22 A. Tutorial 1 – Memahami Javascript dan Canvas ......................................................... 22 2.4 Debugging (Menguji Kode / Mencari Kesalahan Kode) ............................................. 30 BAB 3 Pengembangan Simulasi dengan Javascript ..................................................... 33 3.1 Konsep Pengembangan Simulasi .......................................................................................... 33 3.2 Tahapan Perencanaan ............................................................................................................... 35 3.3 Tahapan Pengembangan Antarmuka ( Graphic Modelling) ..................................... 36 A. Library Javascript................................................................................................................... 37 3.4 Tahapan Pengembangan Interaktivitas ( Interactive Construction).................... 38 3.5 Tahapan Distribusi ( Deployment) ....................................................................................... 39 3.6 Sumber Belajar Javascript........................................................................................................ 39 viii BAB 4 Grafis Dasar ........................................................................................................................... 41 4.1 Menggunakan File Library simulasiDasar.js.................................................................... 41 4.2 Struktur utama file HTML ........................................................................................................ 42 4.3 Membuat grafis dasar ................................................................................................................ 42 A. Tutorial 2a – Membuat Garis ........................................................................................... 42 B. Tutorial 2b – Membuat Kotak ......................................................................................... 46 C. Membuat Lingkaran ............................................................................................................. 47 D. Membuat Diagram Kartesius (Sistem Kordinat Kartesius) .............................. 48 E. Menggabungkan Kode Library dengan Kode JS...................................................... 50 4.4 Transformasi Sistem Koordinat Layar ............................................................................... 53 A. Tutorial 2c – Membuat Garis pada Sistem Koordinat Kartesian.................... 55 BAB 5 Operasi Teks dengan Javascript ............................................................................... 57 5.1 Fungsi fillText pada canvas ...................................................................................................... 57 5.2 Fungsi teks pada simulasiDasar.js ....................................................................................... 57 A. Tutorial 3a – Operasi Teks ............................................................................................... 57 B. Tutorial 3b – teksHTML ..................................................................................................... 59 C. Tutorial 3c – Membuat Input Teks ............................................................................... 60 5.3 Formula Matematika dengan Latex Equation ................................................................. 65 BAB 6 Interaktivitas ........................................................................................................................ 67 6.1 Membuat tombol pada canvas ............................................................................................... 67 A. Tutorial 4a – Membuat Tombol ..................................................................................... 67 B. Tutorial 4b – Slider ............................................................................................................... 70 C. Tutorial 5 – Drag and Drop ............................................................................................... 73 BAB 7 Animasi .................................................................................................................................... 81 7.1 Konsep Dasar Animasi dengan Canvas .............................................................................. 81 A. Tutorial 6 – Animasi Roda Gigi ....................................................................................... 82 7.2 Animasi Sprite ................................................................................................................................ 85 A. Tutorial 7 – Animasi Sprite ............................................................................................... 86 ix