Komputasika 3 2017

Komputasi Fisika 3
Simulasi dan Visualisasi Fisika

dengan JavaScript
Editor:
Sparisoma Viridi
Rizal Kurniadi
Departemen Fisika, FMIPA, Institut Teknologi Bandung

Mei 2017 | Ramadhan 1438
Komputasi Fisika 3
Simulasi dan Visualisasi Fisika
dengan JavaScript
Editor:
Sparisoma Viridi
Rizal Kurniadi
Departemen Fisika, FMIPA, Institut Teknologi Bandung

Mei 2017 | Ramadhan 1438
Buku ini disusun dengan bantuan dukungan Riset ITB tahun 2017 dengan
kode FMIPA.PN 6-24-2017
Sparisoma Viridi dan Rizal Kurniadi (editor), Kompu tasi Fisika 3: Simulasi dan
Visualisasi Fisika dengan JavaScript, Departemen Fisika, Institut Teknologi
Bandung
Lisensi ITB 2017
Penyebaran dalam bentuk aslinya diperbolehkan selama untuk tujuan

pendidikan dan tak-komersial. Modifikasi dan pembua tan karya turunan
memerlukan ijin dari penulis dudung@fi.itb.ac.id | rijalk@fi.itb.ac.id
Pengantar
Buku Komputasi Fisika 3: Simulasi dan Visualisasi Fisika dengan JavaScript ini
merupakan kumpulan tugas RBL (research based learning) pengganti U2 (ujian
kedua) pada matakuliah FI5005 Komputasi Sistem Fisis dan FI4278 Komputasi
Sistem Granular yang masing-masing merupakan layanan dalam Program Magister
Fisika dan Program Sarjana Fisika, Fakultas Matematika dan Ilmu Pengetahuan
Alam, Institut Teknologi Bandung, Indonesia. RBL merupakan suatu metode
pembelajaran yang sudah umum diberikan pada program studi-program studi dalam
eks-Departemen Fisika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut
Teknologi Bandung, sejak sekitar tahun 2007-an. Saat itu matakuliah-matakuliah
Fisika Dasar (IA, IB, IIA, dan IIB) merupakan menjadi implementasi pertamanya.
Antusiasme dari pengajar dan peserta ajar membuat metode ini kemudian menjadi
rutin dan populer digunakan dalam semua jenjang (S1, S2, dan S3). Khusus dalam
kuliah terkait komputasi metode pengajaran ini dianggap baik karena peserta ajar
dapat menerapkan hasil pemahaman mereka dalam suatu permasalahan nyata yang
telah dipilih dan kemudian menyelesaikannya secara numerik.
Setiap tugas RBL tersebut disajikan dalam tiap bab, yang dilengkapi dengan deskripsi
permasalahan fisisnya, penyelesaiannya sampai pada bentuk (baik secara sengaja
ataupun tidak) yang tidak diselesaikan secara analitik melainkan secara numerik,
metode numerik yang digunakan, algoritma program, hasil yang diperoleh dan
diskusinya, referensi, dan lampiran kode-kodenya (minimal berkas .html dan .js,
ataupun dilengkapi dengan .css). Pembaca diharapkan dapat memanfaatkan contoh-
contoh RBL tersebut untuk mempelajari sistem fisis yang dipilih, metode numerik,
dan penerapannya dalam JavaScript. Pada bagian lampiran disajikan pula contoh-
contoh berkas yang diberikan dalam perkuliahan.
Salah satu alasan mengapa JavaScript yang dipilih adalah karena untuk
menjalankannya tidak diperlukan piranti lunak khusus, melainkan cukup sebuah
penjelajah internet (internet browser), yang terdapat dalam setiap sistem operasi dan
pada hampir setiap piranti keras digital dewasa ini (komputer, smarthphone, tablet,
dan lain-lain). Kemudahan ini diharapkan dapat mengurangi kesulitan dalam
mempersiapkan lingkungan untuk menjalankan program, seperti menginstal Mingw
atau Cygwin untuk menjalankan g++ dan Gnuplot dalam sistem operasi Windows
(yang masih merupakan sistem operasi terpopuler di kalangan peserta ajar). Aplikasi
lebih ramah pengguna (user friendly) seperti Matlab dan Scilab dihindari karena
terlalu banyak menyembunyikan detil proses komputasi yang dirasakan dapat terlalu
memanjakan peserta ajar sehingga tidak terbiasa berpikir kritis dan teknis.
Bandung, 30 Mei 2017 | 4 Ramadhan 1438

Sparisoma Viridi & Rizal Kurniadi (editor)
i
Komputasi Fisika 3: Pengantar
ii
Cara merujuk
Setiap bab dalam buku Komputasi Fisika 3: Simulasi dan Visualisasi Fisika dengan
JavaScript ini dapat dirujuk dengan cara
Nama_Penulis_1, Nama_Penulis_2, .., "Judul bab" dalam Komputasi Fisika 3:

Simulasi dan Visualisasi Fisika dengan JavaScript oleh S. Viridi (editor), 2015,
pp. halaman_mulai-halaman_akhir.
Atau dengan menggunakan rujukan untuk format referensi berbentuk chapter of the
book, misalnya untuk bab 2
R. E. S. Fauzi, E. S. Rahayu, D. S. Maulana, N. Wahida, K. Pertiwi, A. Yuneldi,

Bavitra, "Simulasi gerak fluida berdasarkan variasi luas penampang self-siphon
dengan menggunakan metode SFVE yang mengimplementasikan algoritma Euler"
dalam Komputasi Fisika 3: Simulasi dan Visualisasi Fisika dengan JavaScript
oleh S. Viridi (editor), 2015, pp. 25-50.
iii
Komputasi Fisika 3: Cara merujuk
iv
Daftar isi
Pengantar i
Cara merujuk iii
Daftar isi v
1 Analisis bentuk orbit bumi mengelilingi matahari berdasarkan 1
perubahan nilai posisi awal, kecepatan awal, dan massa matahari
T. Budianto, D. Andaris, R. Stiawan, R. Nurainy, L. Putri, L. Nuraeni,
D. Safitri
2 Simulasi gerak fluida berdasarkan variasi luas penampang self-siphon 25
dengan menggunakan metode SFVE yang mengimplementasikan
algoritma Euler
R. E. S. Fauzi, E. S. Rahayu, D. S. Maulana, N. Wahida, K. Pertiwi,
A. Yuneldi, Bavitra
3 Simulasi numerik distribusi temperatur pada pelat material persegi 51
menggunakan Javascript
W F. D. Marieta, I. L. Sholihah, E. Susanti, A. I. Samosir, W. Meutia,
N. A. Zen
4 Studi gerak jatuh 2-dimensi sistem benda: Kasus dua benda 71
yang terhubung dengan pegas
H. Abdillah, R. D. Septianto, J. Maharani, M. R. Taufani,
D. Nurhanivah, C. W. Winardhi
5 Model klasik resonansi Fano 115
A. M. Yusuf, A. Fitriana, D. Rahmawati, Irhas, M. Yunus,
P. M. Widartiningsih
6 Simulasi 1d gerak osilasi terkopel untuk menentukan amplitudo 149
maksimum benda terbawah
A. Kusumadjati, S. Hartarti, N. A. Lutfin, F. Bidalo, S. D. Sari
Nurlina, Fauziah A.
7 Simulasi reflektansi, transmitasi, absorbansi gelombang EM melalui 173
N medium
A. Suaif, Y. P. Purwasunu, M. Ulfa, G. Pamungkas, A. Z. Purwalaksana
N. F. Lubis, P. Y. D. Sagita
8 Analisis pengaruh gravitasi terhadap fenomena efek kacang Brazil 211
Z. Y. Rabbani, R. Giovanni, T. Warsahemas
v
Komputasi Fisika 3: Daftar isi
9 Simulasi sifon dengan metode elemen volume fluida tunggal 227

(single volume fluid element method)
M. Pranolo, K. F. S. Pardede, Ramadhiansyah
10 Simulasi gerak sistem pendulum ganda dengan gravitasi 249
yang berubah terhadap waktu
A. S. U. Ulwi, G. Syahfia, R. H. Pangarihutan
11 Pergerakan flagella dengan gaya pegas 269
A. N. F. Rudiawan, F. A. Purnama, M. F. Girindra, J. Muchtar
Lampiran A: Berkas Javascript 289
A.1 vect3.js 289
A.2 grain.js 291
A.3 force.js 292
A.4 mdynamics.js 294
A.5 debug.js 294
A.6 changel.js 295
A.7 draw.js 295
A.8 timer.js 297
A.9 layout.js 298
A.10 xychart.js 302
A.11 matrix.js 307
A.12 parabol.js 308
A.13 sirkular.js 311
A.14 ode.js 314
A.15 hello.js 316
Lampiran B: Berkas HTML & tampilannya 325
B.1 parabol.html 325
B.2 sirkular.html 326
B.3 matrix.html 328
B4. ode.html 329
B5. grains.html 330
B.6 draw2dmolecules.html 332
B.7 xychart.html 333
vi
B.8 jumlah.html 335

B.9 complex.html 336
B.10 sampling_simulation_with_input_area.html 339
B.11 time_triggered.html 340
vii
viii
Analisis bentuk orbit bumi
1 mengelilingi matahari berdasarkan
perubahan nilai posisi awal, kecepatan awal,
dan massa matahari
Toto Budianto | toto.budianto@students.itb.ac.id
Dora Andris | doraandris18.93@gmail.com
Roni Stiawan | stiawan@s.itb.ac.id
Rany Nurainy | ranynurainy25@gmail.com
Lale Putri | utilale93@gmail.com
Lely Nuraeni | lelynuraenii@gmail.com
Diana Safitri | dianasafitri.ds92@gmail.com
Simulasi pergerakan bumi mengelilingi matahari dapat mempermudah proses

pemahaman mengenai pola pergerakan bumi dalam orbitnya. Pada penelitian ini,
telah dibuat sebuah program simulasi berbasis Javascript untuk menyimulasikan gerak
bumi mengelilingi matahari. Simulasi ini dirancang dengan mempertimbangkan
konsep-konsep fisis terkait serta memungkinkan pengguna mengubah parameter
kecepatan bumi dan massa matahari. Perubahan kedua parameter tersebut dapat
mengubah bentuk orbit bumi mengelilingi matahari. Pada penelitian ini juga telah
ditemukan kecepatan kritis bumi yaitu kecepatan minimal yang diperlukan bumi
untuk mengelilingi matahari secara periodik.
1.1 Pendahuluan
Keadaan orbit bumi saat mengelilingi matahari sangat mempengaruhi kondisi di
permukaan bumi. Perubahan musim dan cuaca, serta perubahan lama waktu siang dan
malam adalah beberapa akibat dari hal tersebut. Dampak nyata yang dirasakan
membuat pengetahuan mengenai pergerakan bumi menjadi suatu hal yang sangat
penting untuk dipelajari. Menurut National Science Education Standards (National
Reaserch Council [NRC], 1996) materi pembelajaran bumi dan antariksa merupakan
salah satu konten utama dalam sains [1]. Pergerakan bumi mengelilingi matahari akan
lebih mudah dipelajari melalui suatu simulasi yang dapat memberikan gambaran
secara visual. Pembuatan simulasi saat ini telah banyak dilakukan untuk menunjang
pemahaman konsep terkait pergerakan bumi mengelilingi matahari, akan tetapi
banyak simulasi yang mengabaikan konsep fisis seperti konsep kekekalan momentum
yang akibatnya bumi disimulasikan mengelilingi matahari dengan kelajuan yang sama
di titik perihelion maupun aphelion. Sedangkan jika dianalisis secara fisis, ketika
bumi berada lebih dekat dengan matahari, kelajuannya haruslah lebih besar
1
Komputasi Fisika 3: 1 Analisis bentuk orbit bumi ..
dibandingkan ketika bumi berada jauh dari matahari. Selain itu, masih ada simulasi-
simulasi yang dibuat dengan anggapan orbit bumi berbentuk lingkaran sehingga tidak
cukup menggambarkan lintasan bumi yang sebenarnya.
Dalam penelitian ini telah dibuat sebuah simulasi gerak revolusi bumi dengan
melibatkan konsep-konsep fisis yang terkait. Beberapa variabel seperti massa
matahari dan kecepatan bumi dibuat agar dapat diubah oleh pengguna sehingga dapat
melihat efek yang terjadi ketika variabel-variabel tersebut berubah. Simulasi ini
dibuat dengan asumsi bahwa bumi bergerak mengelilingi matahari dalam bidang dua
dimensi. Selain itu, bumi dan matahari diasumsikan sebagai benda titik.
1.2 Teori
1.2.1 Hukum gravitasi Newton
Hukum Keppler menjelaskan tiga aturan pokok terkait gerak planet yaitu (i) semua
planet bergerak dalam lintasan berbentuk elips dengan matahari pada salah satu titik
fokusnya; (ii) garis yang menghubungkan planet dengan matahari akan menyapu
daerah luasan yang sama dalam waktu yang sama; dan (iii) kuadrat periode planet
mengelilingi matahari sebanding dengan pangkat tiga jarak rerata planet ke matahari
[2]. Walaupun hukum Keppler merupakan langkah penting untuk memahami gerakan
planet-planet, namun hukum tersebut tetap hanya aturan empiris yang diperoleh dari
pengamatan astronomis Brahe [3]. Hukum gravitasi Newton mempostulatkan adanya
gaya yang muncul akibat interaksi dua benda bermassa yang sebanding dengan massa
kedua benda dan berbanding terbalik dengan kuadrat jarak antara kedua benda.
Kelebihan Newton adalah dia tidak hanya dapat menjelaskan apa yang mendasari
hukum-hukum Kepler ini, tetapi juga menunjukkan bahwa hukum yang sama juga
berlaku secara universal untuk semua benda-benda bermassa [4]. Dalam kasus ini,
dua benda yang dianalisis adalah bumi dan matahari. Besar gaya yang diterima bumi
dan matahari dituliskan dalam persamaan
r Mm )
F = -G 2 r , (1.1)
r
di mana G adalah konstanta gravitasi universal yang bernilai 6,67 × 10-11 N · kg-2 · m2,
M adalah massa matahari (kg), m adalah massa bumi (kg), dan r adalah jarak bumi-
matahari (m).
Berdasarkan persamaan (1.1), besarnya gaya interaksi bumi-matahari sangat
bergantung pada tiga variabel yaitu massa matahari, massa bumi, dan jarak antara
bumi dan matahari. Jika nilai dari salah satu variabel diubah, maka besarnya gaya
gravitasi pun akan berubah. Semakin besar massa matahari atau pun massa bumi,
maka gaya interaksi bumi dan matahari akan semakin besar, karena F ~ M dan F ~ m.
Begitu pun sebaliknya, jika massa matahari atau bumi diperkecil maka besarnya gaya
interaksi bumi-matahari pun akan semakin mengecil. Selain itu, besarnya gaya
interaksi bumi-matahari juga bergantung pada jarak antara bumi-matahari. Semakin
dekat jarak antara bumi-matahari, maka semakin besar gaya interaksinya.Sebaliknya,
2
jika jarak antara bumi-matahari semakin jauh maka besarnya gaya interaksi keduanya
akan mengecil karena F ~ 1 .
r2
1.2.2 Hukum II Newton
Ketika suatu benda diberi gaya, maka benda tersebut akan dipercepat. Hukum II
Newton menjelaskan bahwa percepatan sebuah benda berbanding lurus dengan gaya
total yang bekerja padanya dan berbanding terbalik dengan massanya [5]. Interaksi
antara bumi dan matahari akan menimbulkan gaya interaksi yang akan diterima sama
besar oleh keduanya. Namun, percepatan yang dialami bumi jauh lebih besar dari
percepatan matahari karena massa bumi jauh lebih kecil dibandingkan massa
matahari. Dalam proses pembuatan simulasi, percepatan matahari dianggap sama
dengan nol atau matahari dianggap diam, hal ini dapat berlaku karena percepatan
matahari jauh lebih kecil jika dibandingkan dengan percepatan bumi. Percepatan bumi
dapat diketahui dari hasil kombinasi persamaan hukum gravitasi Newton dengan
hukum II Newton sebagai berikut
r r
∑ F = m.a , (1.2)
r r
di mana F adalah gaya yang bekerja pada m (N), m adalah massa benda (kg), dan a
adalah percepatan gerak benda (m/s2). Percepatan gerak benda pada kasus ini dicari
dengan cara menyubstitusikan Persamaan (1.1) ke Persamaan (1.2), sehingga
didapatkan
Mm ) r
-G 2
r = m.a , (1.3)
r
r
Mm r r
-G 2 = m.a (1.4)
r r
Pergerakan matahari dan bumi pada kasus ini didefinisikan dalam koordinat kartesian
sehingga percepatan gerak bumi dan matahari juga didefinisikan dalam arah x dan y,
sehingga Persamaan (1.4) akan menjadi
Mm r r r r
-G 3
( x + y ) = m( a x + a y ) , (1.5)
r
dengan axdan ay dapat diuraikan menjadi
r M r
a x = -G 3 x , (1.6)
r
dan
r M r
a y = -G 3 y , (1.7)
r
di mana ax adalah percepatan gerak bumi mengelilingi matahari dalam arah x (m/s2) ,
ay adalah percepatan gerak bumi mengelilingi matahari dalam arah y (m/s2), G
3
merupakan konstanta gravitasi universal yang besarnya 6,67 x 10-11 (Nm/kg), M

adalah massa matahari (kg), dan r adalah jarak bumi-matahari (m).
1.2.3 Gaya sentripetal

Bumi bergerak mengelilingi matahari (revolusi) dalam sebuah orbit yang berbentuk
elips [6]. Pergerakan bumi mengelilingi matahari ini tidak terlepas dari konsep gerak
melingkar, sehingga gaya sentripetal sangat diperlukan dalam kasus ini. Besarnya
gaya sentripetal didefinisikan pada persamaan berikut ini
mv 2
F = , (1.8)
r
dengan melakukan substitusi Persamaan (1.1) ke Persamaan (1.8), maka didapatkan
M v2
G = , (1.9)
r2 r
di mana merupakan kecepatan bumi ketika mengelilingi matahari yang dapat
didefinsikan sebagai
v = ωr , (1.10)
dan
2π
ω= , (1.11)
T
dengan adalah kecepatan linier (m/s), ω adalah kecepatan angular (rad/s), r adalah
jari-jari lintasan (m), dan T adalah periode rotasi (s),sehingga Persamaan (1.9)
menjadi
M ω 2r 2
G = , (1.12)
r2 r
M 2π
G 3
= ( )2 , (1.13)
r T
sehingga periode bumi mengelilingi matahari didapatkan sebagai berikut
4π 2 r 3
T= , (1.14)
GM
dengan T merupakan periode bumi mengelilingi matahari (s), r adalah jarak bumi dan
matahari (m), G adalah tetapan gravitasi (N · kg-2 · m2), dan M adalah massa matahari
(kg). Dengan memasukkan besarnya jarak bumi-matahari, konstanta gravitasi
universal, dan massa matahari ke persamaan (1.14) maka akan didapatkan periode
bumi mengelilingi matahari yaitu sebesar 365.25 hari.
1.2.4 Hukum kekekalan momentum sudut

Bumi mengelilingi matahari dalam lintasan elips dengan eksentrisitas 0.01671022 [7].
Adanya nilai eksentrisitas tersebut menandakan bahwa ketika terjadi perubahan jarak
4
antara bumi-matahari ketika revolusi terjadi. Perubahan jarak antara bumi-matahari

tersebut menyebabkan munculnya dua titik ekstrim yaitu titik terdekat bumi ke
matahari yang dikenal dengan istilah perihelion, dan titik terjauh bumi ke matahari
yang dikenal sebagai aphelion. Hukum kekekalan momentum menjelaskan bahwa
kecepatan bumi saat mengelilingi matahari dipengaruhi oleh nilai jarak. Hukum ini
berlaku pada bumi dikarenakan momen gaya yang dimiliki bumi saat mengelilingi
matahari adalah nol [8]. Semakin dekat jarak bumi ke matahari maka kecepatannya
semakin tinggi, begitupula semakin jauh jarak bumi dari matahari maka kecepatannya
akan semakin rendah. Oleh karena itu, kecepatan bumi di titik perihelion haruslah
lebih besar dari titik aphelion. Hubungan antara jarak dan kecepatan bumi
mengelilingi matahari dapat diturunkan dari persamaan kekekalan momentum sudut
berikut ini
L1 = L2 , (1.15)
I 1ω1 = I 2ω 2 , (1.16)
2 2
mr1 ω1 = mr2 ω 2 , (1.17)
2 v1 2 v
mr1 = mr2 2 , (1.18)
r1 r2
r1v1 = r2 v 2 = C . (1.19)
Dari Persamaan (1.19) terlihat bahwa hasil kali jarak dan kecepatan bernilai konstan
dan r = 1 yang menunjukkan bahwa jika jarak antara bumi-matahari semakin
v
mengecil maka kecepatan bumi mengelilingi matahari akan semakin besar dan
sebaliknya.
1.2.5 Gerak lurus berubah beraturan

Perubahan jarak bumi terhadap matahari menyebabkan perubahan nilai kecepatan
seperti yang dijelaskan sebelumnya. Selain itu, perubahan nilai jarak juga akan
mengubah nilai percepatan bumi mengelilingi matahari seperti dijelaskan pada
persamaan (1.6) dan (1.7), sehingga dapat ditarik kesimpulan bahwa bumi
mengelilingi matahari dengan percepatan yang berubah-ubah tergantung nilai jarak
antara bumi dan matahari.
Untuk selang waktu yang sangat singkat, bumi mengalami perubahan jarak terhadap
matahari relatif kecil, sehingga percepatan bumi dalam selang waktu tersebut dapat
dianggap konstan. Hal ini menyebabkan dalam arah x dan y, bumi dapat dianggap
bergerak lurus berubah beraturan sehingga memenuhi persamaan berikut
1
x = x0 + v 0 x ∆t + a x ∆t 2 , (1.20)
2
dan
5
1
a y ∆t 2 ,
y = y 0 + v 0 y ∆t + (1.21)
2
di mana x dan y adalah posisi bumi pada selang waktu tertentu dalam arah x dan y
(m), x0 dan y0 adalah posisi bumi pada saat t = 0 (m), v 0 x dan v0 y adalah
kecepatan bumi pada saat t = 0 dalam arah x dan y (m/s), a percepatan bumi
mengelilingi matahari (m/s2), dan ∆t adalah selang waktu (s).
1.3 Metode numerik

Metode numerik adalah teknik-teknik yang digunakan untuk merumuskan masalah-
masalah matematika agar dapat diselesaikan dengan operasi-operasi aritmatika biasa.
Terdapat banyak metode numerik yang salah satunya adalah Finite Difference
Methode. Finite Difference Method atau metode beda hingga adalah suatu metode
yang dapat digunakan untuk menyelesaikan persamaan differensial. Secara analitik,
perumusan percepatan bumi pada arah x dan y telah dirumuskan pada persamaan (1.6)
dan (1.7). Percepatan bumi merupakan bentuk differensial orde dua sehingga secara
numerik dapat diselesaikan dengan metode beda hingga seperti berikut.
x n +1 + x n −1 − 2 x n
ax = , (1.22)
∆t 2
dan
y n +1 + y n −1 − 2 y n
ay = , (1.23)
∆t 2
di mana ax dan ay masing-masing adalah percepatan bumi pada arah x dan y, x n dan
y n adalah posisi bumi pada saat ke-n, x n +1 dan yn +1 masing-masing adalah posisi
bumi pada saat ke-n+1, dan x n −1 dan y n −1 adalah posisi bumi pada saat ke n-1, dan
∆t adalah selang waktu dari posisi-1 ke posisi-2.
Dalam pembuatan simulasi gerak revolusi bumi, Persamaan (1.20) dan (1.21)
digunakan untuk menentukan posisi baru dari bumi terhadap matahari. Sebagai
contoh, Persamaan (1.20) dapat ditulis menjadi
x n +1 = 2 x n − x n −1 + a x ∆t 2 , (1.24)
di mana x n +1 adalah posisi baru bumi terhadap matahari, x n adalah posisi bumi saat
ini yang diperoleh dari persamaan gerak lurus berubah beraturan, dan x n −1 adalah
posisi bumi sebelumnya yang pada awalnya ditetapkan secara sembarang atau sesuai
referensi yang ada. Variabel-variabel ini, akan bertukar posisi untuk menghasilkan
posisi baru selanjutnya.
6
Gambar 1.1.Posisi awal bumi di titik ( x t , y t ) yang berubah setelah selang waktu ∆t ke posisi
( xt + ∆t , y t + ∆t ) yang menyebabkan jarak (r) bumi-matahari pun berubah.
1.4 Algoritma
Simulasi perubahan bentuk orbit bumi mengelilingi matahari dengan mengubah
kecepatan awal bumi pada saat t = 0.
L1. G, M, x0, y0, v0x, v0y
L2. Perubahan skala data
L3. r = (xn2 + yn2)1/2
L4. ax = -xn/r3
L5. ay = -yn/r3
L6. xn = x0 + v0x t + 0.5 axt2;
L7. yn = y0 + v0y t + 0.5 ay * t2;
L8. xn-1 = xn; xn = xn+1; yn-1 = yn; yn = yn-1; ulangi tahap L3
L9. drawOnCanvas (xn, yn); tc.plot();
L10. drawOrbit(xn, yn);
7
1.5 Hasil dan diskusi

Parameter-parameter yang digunakan untuk menjalankan simulasi diberikan pada
tabel berikut.
Tabel 1.1 parameter simulasi.
Simbol Nilai Awal Kode

30
M 1,989.10 M
11
x0 1,52093.10 x0
y0 0 y0
v0x 0 v0x
v0y -29290 v0y
Nilai-nilai parameter awal ditentutukan berdasarkan data dari beberapa referensi.
Data-data ini kemudian dapat diubah untuk melihat bagaimana bentuk orbit dari
setiap perubahan kecepatan awal dan massa matahari. Komponen simulasi terdiri dari
empat bagian utama seperti ditunjukkan pada Gambar 1.2.
Gambar 1.2 Komponen simulasi dengan empat bagian utama yaitu: (A) input data,
(B) simulasi pergerakan planet mengelilingi matahari, (C) grafik perubahan jarak
planet dengan matahari terhadap waktu, dan (D) bentuk orbit planet.
8
Proses analisa yang pertama kali dilakukan adalah menganalisa bagaimana perubahan
bentuk orbit planet terhadap perubahan massa matahari dengan kecepatan awal dan
posisi awal yang sama. Kecepatan awal yang digunakan adalah 29290 km/jam dengan
posisi awal pada = 1.52x1011 m dan = 0 m. Massa matahari yang digunakan pada
simulasi pertama adalah 2×1030 kg. Bentuk orbit dari pergerakan planet dengan massa
matahari tersebut digambarkan pada grafik bagian D. Massa matahari kemudian
ditambahkan 1030 kg dan menampilkan orbit planet kembali pada grafik yang sama.
Penambahan massa matahari dan penggambaran orbit diulang sampai beberapa kali
untuk mendapatkan grafik seperti ditunjukkan pada gambar berikut
Gambar 1.3 Beberapa bentuk orbit planet bergantung dari besarnya massa matahari. Orbit
terluar terbentuk dengan massa matahari 2x1030 kg, kemudian orbit yang lebih dalam terbentuk
dengan selisih massa matahari tiap orbit adalah 1030 kg.
Dari hasil simulasi di atas, dapat disimpulkan bahwa semakin besar massa matahari,
nilai eksentrisitas orbit dari planet akan semakin besar. Hal ini menyebabkan pada
nilai massa matahari yang terlalu besar, planet dapat menabrak matahari dan hancur.
9
Berikut adalah gambar hasil simulasi lintasan planet dengan kecepatan awal v0 y = -
30
1000 km/jam dan massa matahari 1.99x10 kg.
Gambar 1.4 Planet yang memiliki kecepatan awal kurang dari kecepatan kritisnya tidak akan
dapat mengorbit dan akan jatuh di titik pusatnya yaitu matahari.Bumi terjatuh dan menabrak
matahari (pusat koordinat) ketika v0 y = 1000 m/s.
Gambar 1.4 di atas menunjukkan bahwa bumi akan bergerak menabrak matahari
(pusat koordinat) jika kecepatan awal bumi 1000 m/s. Agar lintasan orbit planet tidak
menabrak matahari, maka planet membutuhkan kecepatan minimal (kecepatan kritis)
yang semakin bertambah besarseiring pertambahan massa matahari. Untuk
mengetahui bagaimana perubahan kecepatan kritis terhadap perubahan massa
matahari, dilakukan simulasi dengan posisi awal planet = 1.52x1011 m dan = 0 m.
Grafik berikut menunjukkan hasil simulasi perubahan massa matahari terhadap
kecepatan minimum yang dibutuhkan planet untuk mengorbit matahari tanpa
mengenainya.
10
Gambar 1.5 Grafik perubahan kecepatan kritis terhadap perubahan massa matahari menujukkan
bahwa persamaan regresi yang memenuhi dinyatakan dalam deret polinomial orde-4.
1.6 Kesimpulan
Simulasi ini secara umum dapat digunakan sebagai metode pengkajian pola
perubahan orbit planet mengelilingi matahari akibat adanya perubahan massa
matahari serta kecepatan minimum yang diperlukan planet untuk dapat mengorbit
matahari. Dari hasil simulasi didapatkan bahwa semakin besar massa matahari,
semakin besar nilai eksentrisitas dari orbit planet dengan kecepatan awal yang sama.
Hubungan perubahan massa matahari dan kecepatan kritis planet dapat didekati
menggunakan deret polynomial orde-4.
1.7 Referensi
1. National Science Education Standards (1996) (P 6), tersedia online pada
(https://www.csun.edu/science/ref/curriculum/reforms/nses/nses-complete.pdf)
2. Hewitt, P. G. (2002). Conceptual physics. Pearson Educación (P 199).
3. Tippler, P. A. (1998). Fisika untuk sains dan teknik (PP 344 – 345).
4. Mirza Satriawan (2012), Fisika Dasar (P 55) tersedia online pada
(https://www.google.co.id/url?sa=t&rct=j&q=&esrc=s&source=web&cd=8&v
ed=0ahUKEwin_IDw6PnTAhWEs48KHX_QBjIQFghfMAc&url=http%3A%
2F%2Fmirza.staff.ugm.ac.id%2Ffisdas%2FFisdasbookI.pdf&usg=AFQjCNHn
lR82DUCAaAuchHJ7UOLb6fTb6Q&cad=rja)
5. Giancoli, D. C. (2000). Physics for scientists and engineers (Vol. 3). Upper
Saddle River, NJ: Prentice hall (P 95).
6. Halliday, D., & Resnick, R. (1996). Fisika jilid 1. Erlangga, Jakarta (P 519).
11
7. Earth Fact Sheet, tersedia online pada

(https://nssdc.gsfc.nasa.gov/planetary/factsheet/earthfact.html)
8. Abdullah, M. (2007) Fisika Dasar 1. ITB, Bandung, pp.566-567.
1.8 Lampiran
A. Keterangan penggunaan program dan skrip
Tabel 1 Program dan skrip serta hasil keluarannya.
Program / Skrip Piranti lunak Keluaran Lampiran
Hypertext Markup
index.html Komponen Simulasi B
Language
Data perhitungan
script.js javascript C
numerik
Manipulasi data dan
function.js javascript D
grafik
xychart.js javascript Library grafik 2D E
Modifikasi tampilan
style.css Cascading Stylesheet F
komponen simulasi
B. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simulasi Orbit Planet</title>
<link href="style.css" rel="stylesheet">
<script src="xychart.js"></script>
</head>
<body>
<h2>Simulasi Orbit Planet</h2>
<textarea id="textarea"></textarea>
<canvas id="canvas" width="400px" height="400px"></canvas>
<canvas id="chartCanvas" width="600px" height="400px">
</canvas><br />
<button id="startButton"> Start </button>
<button id="resetButton"> Reset </button><br />
<br />Banyak Titik <input id="maxLengthInput" value="500" />
<canvas id="xychart" width="600px" height="600px"></canvas>
<br />
<span>
<i>Note : Titik potong garis merah berada di (0,0)</i>
</span><br />
12
<br /><br />
<script src="functions.js"></script>
<script src="script.js"></script>
</body>
</html>
C. script.js
var sButton = document.getElementById("startButton");
var resetButton = document.getElementById("resetButton");
sButton.onclick = function() {
if ((sButton.innerHTML).trim() == "Start") {
sButton.innerHTML = "Stop";
timer = setInterval(startSimulation, interval);
} else if((sButton.innerHTML).trim() == "Stop"){
sButton.innerHTML = "Start";
clearInterval(timer);
}
}
ta.oninput = function(){
resetData();
}
resetButton.onclick = function(){
resetData();
}
function resetData(){
data = getParameters();
M = data.M/1.989e+30;
m = data.m/5.9722e+24;
x0 = data.x0*200/1.52093e+11;
y0 = data.y0;
v0x = data.v0x;
v0y = data.v0y*0.070125/29290;
i = 0;
xnm1 = x0;
ynm1 = y0;
r2 = (x0 * x0 + y0 * y0);
r3 = r2 * Math.sqrt(r2);
ax = - G * M * x0 / r3;
ay = - G * M * y0 / r3;
xn = x0 + v0x * dt + 0.5 * ax * dt2;
yn = y0 + v0y * dt + 0.5 * ay * dt2;
tc.clearAllData();
orbitChart.clearAllData();
//alert("Data berhasil dirubah");
}
//Simulation Process
function startSimulation(){
//waktu
13
t = i * dt;
i++;
//menghitung nilai berikutnya

r2 = (xn * xn + yn * yn);
r3 = r2 * Math.sqrt(r2);
ax = - G * M * xn / r3;
ay = - G * M * yn / r3;
//metode finite different orde 2

xnp1 = 2 * xn - xnm1 + ax * dt2;
ynp1 = 2 * yn - ynm1 + ay * dt2;
//menggeser nilai
xnm1 = xn;
xn = xnp1;
ynm1 = yn;
yn = ynp1;
if(Math.abs(xn-x0) < 1 && Math.abs(yn-y0) < 1){

console.log("Kembali ke posisi awal");
}
//drawOnChart(t, xn, yn);
drawRealData(t, xn, yn);
clearCanvas();
drawOnCanvas(xn, yn);
//console.log("\t" + t + "\t" + xn + "\t" + yn);
}
var mli = document.getElementById("maxLengthInput");

mli.oninput = function(){
if(mli.value>0) orbitChart.dataMaxLength = mli.value;
while(orbitChart.datax.length > orbitChart.dataMaxLength){

orbitChart.datax.shift();
orbitChart.datay.shift();
}
}
D. functions.js
/* this file contains variable and function declarations */
var ta = document.getElementById("textarea");
var textMessage = document.getElementById("textMessage");
var sun = {x:0, y:0, m: 1.989e+30};

var earth = {t:0, x:0, y:0, m: 5.9722e+24};
//constants
var G = 1;
var dt = 50 ;
setParameters();
var data = getParameters();
var M = 1;
var dt2 = dt * dt;
14
var x0 = 200;
var y0 = 0;
var v0x = 0;
var v0y = 0.070125;
//initial value
var i = 2;
var xnm1 = x0;
var ynm1 = y0;
var r2 = (x0 * x0 + y0 * y0);
var r3 = r2 * Math.sqrt(r2);
var ax = - G*M*x0 / r3;
var ay = - G*M*y0 / r3;
var xn = x0 + v0x * dt + 0.5 * ax * dt2;
var yn = y0 + v0y * dt + 0.5 * ay * dt2;
var rmax = 1e13;
var timer;
var interval = 10; // javascript can't do faster than 10ms
//Set real world coordinate

var xmax = 300;
var ymax = 300;
var xmin = -xmax;
var ymin = -ymax;
var canvas = document.getElementById("canvas");

var bgColor = "#FFFFE0";
var ctx = canvas.getContext("2d");
clearCanvas();
//Mencetak nilai x dan y pada textarea

function writeInTextarea(xn,yn) {
ta.value += t + "\t" + xn + "\t" + yn + "\n";
}
//Set nilai awal pada textarea (default values)

function setParameters(){
var str = "";
str += " M \t 1.989e+30 \n";
//str += " m \t 5.9722e+24 \n";
str += " x0 \t 1.52093e+11 \n";
str += " y0 \t 0 \n";
str += " v0x \t 0 \n";
str += " v0y \t -29290 \n";
ta.value = str.replace(/ +?/g, ''); //REGEX to remove white spaces
}
//Membaca nilai-nilai yang ada pada text area

function getParameters(){
var str = ta.value.trim();
var lines = ta.value.split("\n");
var Nlines = lines.length;
if (lines[Nlines - 1].length == 0) {
15
Nlines--;
}
var data = {};
for(var l = 0; l < Nlines; l++) {
var cols = lines[l].split("\t");
var Ncols = cols.length;
var temp = parseFloat(cols[1]);
switch(cols[0]){
case "M" : data.M = temp; break;
case "m" : data.m = temp; break;
case "x0" : data.x0 = temp; break;
case "y0" : data.y0 = temp; break;
case "v0x" : data.v0x = temp; break;
case "v0y" : data.v0y = temp; break;
}
}
return data;
}
//Coordinate Transformation: from real to canvas

function xtransform(x) {
return canvas.width * (x - xmin) / (xmax - xmin);
}
function ytransform(y) {
return -canvas.height * (y - ymin) / (ymax - ymin) +canvas.height;
}
function clearCanvas(){
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function drawOnCanvas(x, y) {
//Draw The Earth
x = xtransform(x);
y = ytransform(y);
ctx.fillStyle = "green";
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fill();
//Draw the Sun

ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, 8, 0, 2 * Math.PI);
ctx.fill();
}
//Membuat grafik t vs r
var timeChartCanvas = document.getElementById("chartCanvas");
var tc = new XYChart(timeChartCanvas);
tc.dataMaxLength = 400;
tc.ymax = data.x0*1.05;
tc.ymin = data.x0/1.05;
tc.xmin = 0;
tc.xmax = tc.dataMaxLength;
16
function drawRealData(t, x, y){

earth.x = getRealPosition(x);
earth.y = getRealPosition(y);
earth.t = getRealTime(t);
drawOrbit(earth.x, earth.y);
var a = Math.sqrt(earth.x*earth.x + earth.y*earth.y);

tc.pushData(earth.t,a);
if(a > tc.ymax) tc.ymax = a;

if(a < tc.ymin) tc.ymin = a;
if(earth.t > tc.xmax){

tc.xmin = earth.t-tc.dataMaxLength;
tc.xmax = earth.t;
if(a > tc.ymax) {tc.ymax = a;}
else if(a < tc.ymin) {tc.ymin = a;}
}
tc.clear();
tc.plot();
console.log("\t" + earth.t + "\t" + earth.x + "\t" + earth.y);
}
//Membuat Grafik Orbit planet

var xychartCanvas = document.getElementById("xychart");
var orbitChart = new XYChart(xychartCanvas);
orbitChart.setCoordinates(0, 0, 10, 10);
orbitChart.pointColor = "blue";
orbitChart.xLabel = "x";
orbitChart.yLabel = "y";
orbitChart.dataMaxLength = 1000;
orbitChart.lineColor = "red";
orbitChart.digitX = 0;
orbitChart.digitY = 0;
function drawOrbit(x, y){

orbitChart.pushData(x,y);
if(x > orbitChart.xmax) orbitChart.xmax = x;
if(x < orbitChart.xmin) orbitChart.xmin = x;
if(y > orbitChart.ymax) orbitChart.ymax = y;
if(y < orbitChart.ymin) orbitChart.ymin = y;
if(orbitChart.xmax > orbitChart.ymax) orbitChart.ymax =

orbitChart.xmax;
else orbitChart.xmax = orbitChart.ymax;
if(orbitChart.xmin < orbitChart.ymin) orbitChart.ymin =
orbitChart.xmin;
else orbitChart.xmin = orbitChart.ymin;
if(Math.abs(orbitChart.xmax) > Math.abs(orbitChart.xmin))

orbitChart.xmin = -orbitChart.xmax;
else orbitChart.xmax = -orbitChart.xmin;
orbitChart.clear();
orbitChart.showCenterLine();
orbitChart.plot();
}
17
function getRealPosition(x){
return data.x0 * x / 200;
}
function getRealTime(t){
return t*365.25/17300;
}
E. xychart.js
/*
xychart.js
Library of simple xy-chart class in JavaScript
Sparisoma Viridi | dudung@gmail.com
* this is a modified version, by Roni Stiawan *

- Constructor requires "canvas" element
- functions added:
this.pushData(x,y)
this.clearAllData()
formatTickLabel(number,digit) : 12300000000 => 1.23e10
- maximum length of data = this.dataMaxLength
*/
// Class of XYChart
function XYChart(canvas) {

// Some plot properties
this.pointColor = "green";
this.pointSize = 1;
this.lineColor = "#f99";
this.lineWidth = 0;
this.pointLineWidth = 0;
this.axisLineColor = "#000";
this.axisLineWidth = "1";
// Fonts properties
this.fontSize = "14px";
this.fontFamily = "Times New Roman";
this.fontColor = "black";
this.textAlign = "center";
this.textBaseline="middle";
// Axis
this.padding = parseInt(this.fontSize);
this.ticsWidth = 5;
this.nTicsX = 10;
this.nTicsY = 10;
this.xTics = Array(this.nTicsX + 1);
this.yTics = Array(this.nTicsY + 1);
this.xLabel = "t (hari)";
this.yLabel = "r";
this.digitX = 0;
this.digitY = 2;
18
// Real world coordinates

this.xmin = -1;
this.ymin = -1;
this.xmax = 1;
this.ymax = 1;
// Screen coordinates
this.XMIN = 0;
this.YMIN = 0;
this.XMAX = 1;
this.YMAX = 1;
// Number of data
this.N = 0;
this.dataMaxLength = 1000;
// Raw data
if(arguments.length == 2) {
this.datax = arguments[0];
this.datay = arguments[1];
if(this.datax.length < this.datay.length) {
this.N = this.datax.length;
} else {
this.N = this.datay.length;
}
} else {
this.datax = [];
this.datay = [];
}
// Plotting data
this.dataX = [];
this.dataY = [];
// Set world coodinates

this.setCoordinates = function(xmin, ymin, xmax, ymax) {
this.xmin = xmin;
this.ymin = ymin;
this.xmax = xmax;
this.ymax = ymax;
}
// Transform datax to dataX

this.transX = function(x) {
var X = (x - this.xmin) / (this.xmax - this.xmin);
X *= (this.XMAX - this.XMIN);
X += this.XMIN;
return X;
}
// Transform datay to dataY

this.transY = function(y) {
var Y = (y - this.ymin) / (this.ymax - this.ymin);
Y *= (this.YMAX - this.YMIN);
Y += this.YMIN;
return Y;
}
19
// Push data
this.pushData = function(datax, datay) {
this.datax.push(datax);
this.datay.push(datay);
} else {
}
//cleaning unnecessary data

if(this.datax.length > this.dataMaxLength)
this.datax.shift();
if(this.datay.length > this.dataMaxLength)
this.datay.shift();
while(this.datax[0] < this.xmin){
this.datax.shift();
this.datay.shift();
}
}
// Update data
this.changeData = function(datax, datay) {
this.datax = datax;
this.datay = datay;
} else {
}
}
// Clear canvas
this.clear = function() {
ctx.fillStyle = "white";
}
// Plot data to a canvas

this.plot = function() {
// Update screen coordinates
this.XMIN = 0 + 5 * this.padding;
this.YMIN = canvas.height - 5 * this.padding;
this.XMAX = canvas.width - this.padding;
this.YMAX = 0 + this.padding;
// Convert raw data to plotting data

this.dataX = Array(this.N);
this.dataY = Array(this.N);
for(var i = 0; i < this.N; i++) {
this.dataX[i] = this.transX(this.datax[i]);
this.dataY[i] = this.transY(this.datay[i]);
}
//var ctx = canvas.getContext("2d");
// Plot axis
20
ctx.strokeStyle = this.axisLineColor;
ctx.lineWidth = this.axisLineWidth;
ctx.beginPath();
var XO = this.transX(this.xmin);
var YO = this.transY(this.ymin);
ctx.moveTo(XO, YO);
ctx.lineTo(this.XMAX, YO);
ctx.moveTo(XO, YO);
ctx.lineTo(XO, this.YMAX);
ctx.stroke();
// Calculate and plot tics

var dtx = (this.xmax - this.xmin) / this.nTicsX;
for(var i = 0; i <= this.nTicsX; i++) {
this.xTics[i] = this.xmin + dtx * i;
}
var dty = (this.ymax - this.ymin) / this.nTicsY;
for(var i = 0; i <= this.nTicsY; i++) {
this.yTics[i] = this.ymin + dty * i;
}
ctx.beginPath();
var X = this.transX(this.xTics[i]);
ctx.moveTo(X, YO - 0.5 * this.ticsWidth);
ctx.lineTo(X, YO + 0.5 * this.ticsWidth);
}
var Y = this.transY(this.yTics[i]);
ctx.moveTo(XO - 0.5 * this.ticsWidth, Y);
ctx.lineTo(XO + 0.5 * this.ticsWidth, Y);
}
ctx.stroke();
// Draw grid
ctx.strokeStyle = "#ccc";
ctx.lineWidth = "0.5";
ctx.beginPath();
ctx.moveTo(this.XMIN, Y);
ctx.lineTo(this.XMAX, Y);
}
ctx.moveTo(X, this.YMIN);
ctx.lineTo(X, this.YMAX);
}
ctx.stroke();
// Plot axis numbers

ctx.font = this.fontSize + " " + this.fontFamily;
ctx.fillStyle = this.fontColor;
ctx.textAlign = this.textAlign;
ctx.textBaseline = this.textBaseline;
var T = formatTickLabel(this.xTics[i] , this.digitX);

21
var Y = YO + 3 * this.ticsWidth;
ctx.fillText(T, X, Y);
}
var T = formatTickLabel(this.yTics[i] ,
this.digitY);
var X = XO - 4.5 * this.ticsWidth;
}
var font = "italic " + this.fontSize + " ";

font += this.fontFamily;
ctx.font = font;
var XMID = 0.5 * (this.XMAX + this.XMIN);
var Y = this.YMIN + 8 * this.ticsWidth;
ctx.fillText(this.xLabel, XMID, Y);
var X = this.XMIN - 10 * this.ticsWidth;
var YMID = 0.5 * (this.YMAX + this.YMIN);
ctx.fillText(this.yLabel, X, YMID);
// Draw plotting data

ctx.strokeStyle = this.pointColor;
ctx.lineWidth = this.pointLineWidth;
ctx.beginPath();
ctx.arc(this.dataX[i], this.dataY[i],
this.pointSize, 0, 2 * Math.PI);
ctx.stroke();
}
if(this.lineWidth > 0) {
ctx.strokeStyle = this.lineColor;
ctx.lineWidth = this.lineWidth;
ctx.beginPath();
var X = this.dataX[i];
var Y = this.dataY[i];
if(i == 0) {
ctx.moveTo(X, Y);
} else {
ctx.lineTo(X, Y);
}
}
ctx.closePath();
ctx.stroke();
}
}
this.showCenterLine = function(){
ctx.beginPath();
ctx.moveTo(this.transX(this.xmax), this.transY(0));
ctx.lineTo(this.transX(this.xmin), this.transY(0));
ctx.moveTo(this.transX(0), this.transY(this.ymax));
ctx.lineTo(this.transX(0), this.transY(this.ymin));
ctx.closePath();
ctx.stroke();
22
this.clearAllData = function(){
this.xmin = 0;
this.xmax = 500;
this.ymin = data.x0/1.05;;
this.ymax = 50;
this.XMIN = 0;
this.YMIN = 0;
this.XMAX = 1;
this.YMAX = 1;
this.N = 0;
this.datax = [];
this.datay = [];
this.dataX = [];
this.dataY = [];
}
}
//Mengubah format tick label menjadi seperti 2.3e6 (2.3x10^6)

function formatTickLabel(number, digit){
var T = number.toFixed(digit);
var done = false;
var n = 5;
if(Math.abs(T) > Math.pow(10,n)){
while(!done){
if(Math.abs(T) < Math.pow(10,n+1)) {
T = (T/Math.pow(10,n)).toFixed(digit)
T += "e" + n;
done = true;
}else{
n++;
}
}
}
return T;
}
F. style. css
body{
background: #fff;
margin: 30px;
}
textarea{
width: 200px;
height: 300px;
}
input{
padding: 5px;
margin: 5px;
}
button{
padding: 5px;
width: 80px;
23
canvas{
border: 1px solid purple;
}
24
Simulasi gerak fluida berdasarkan
2 variasi luas penampang self-siphon
dengan menggunakan metode SFVE yang
mengimplementasikan algoritma Euler
Renato Eka Sakti Fauzi | renatoekasaktifauzi@gmail.com
Eka Sylvianti Rahayu | ekarukmanaeka@gmail.com
Dian Syah Maulana | diansyahmas@gmail.com
Nurul Wahida | nuurulwahiida127@gmail.com
Kisna Pertiwi | kisnapertiwi@gmail.com
Ari Yuneldi | ariyuneldi1202@gmail.com
Bavitra | bavitracurapa@gmail.com
Gerak fluida di dalam sifon disimulasikan menggunakan metode Single Fluid Volume
Elements (SFVE) yang menerapkan algoritma Euler. Variasi parameter dilakukan
untuk jari-jari awal ri, jari-jari akhir rf,, panjang pipa yang tercelup L, dan koefisien
gesek cf,. Parameter yang berpengaruh terhadap y dan v adalah ri, rf, L dan cf.
Konstruksi sifon dengan ri > rf memiliki nilai ymax yang lebih besar dibandingkan
dengan konstruksi sifon yang memiliki ri < rf.
2.1 Pendahuluan
Sifon merupakan sebuah alat yang sering digunakan di dalam kehidupan sehari-hari
misalnya untuk mengalirkan bahan bakar minyak dari sebuah tangki penyimpanan
ataupun untuk flush toilet. Secara sederhana sifon adalah alat yang dapat mengalirkan
fluida dari satu titik yang rendah ke satu titik lain yang lebih tinggi [1]. Alat
sederhana seperti ini dibuat pertama kali oleh Leonardo da Vinci [2]. Sedangkan self-
siphon adalah sifon yang dapat mengalirkan flida dengan sendirinya tanpa perlu
adanya stimulus seperti misalnya perbedaan tekanan [2]. Simulasi mengenai self-
sipon ini telah banyak dilakukan seperti diantaranya penggunaan metode dinamika
molekuler untuk gerakan fluida di dalam U self-siphon [2] dan penggunaan metode
Single Fluid Volume Element untuk mensimulasikan gerak fluida pada self-siphon [3].
Simulasi kali ini merupakan simulasi gerak fluida pada self-siphon berbentuk lurus
dengan luas penampang yang divariasikan. Metode yang akan digunakan adalah
metode Single Fluid Volume Element (SFVE) dengan mengaplikasikan algoritma
Euler. Gerak fluida pada self-siphon pada simulasi kali ini dipengaruhi oleh tiga gaya,
yakni gaya gravitasi, gaya tekan, dan gaya gesek antara fluida dengan dinding self-
siphon.
25
Komputasi Fisika 3: 2 Simulasi gerak fluida ..
2.2 Teori
Self-siphon dengan bentuk lurus diset secara vertikal. Sejumlah volume kecil fluida
yang berada di dekat permukaan merepresentasikan aliran fluida sementara yang
selalu berpindah-pindah atau yang disebut dengan Single Fluid Volume Element
(SFVE).
Gambar 2.1. Single Fluid Volume Element (SFVE) dengan ketebalan Δh melewati area A
dengan jarak Δs sepanjang pipa dalam waktu Δt dan dengan kcepatan vs.
Simulasi self-siphon ditinjau dalam satu dimensi, dalam selang waktu ∆ t dengan
jarak sebagai berikut.
∆ s = vs∆ t . (2.1)
Gerak fluida di dalam self-siphon dipengaruhi oleh tiga gaya. Gaya yang pertama
adalah gaya tekan yang didasari oleh perbedaan tekanan yang dialami oleh SFVE.
SFVE berada pada posisi S dan mengalami perbedaan tekanan sebesar ∆p
∆p = p 1 − p 1 , (2.2)
s − ∆h s+ ∆h
2 2
dengan gaya tekan sebagai berikut

Fp = ∆p. A . (2.3)
Tekanan sebesar p pada saat s − ∆h / 2 berdasarkan tekanan hidrostatik yang diukur

pada posisi vertical permukaan fluida pada pipa y f (s )
[
p s − 1 ∆h = ρ f g y f ( s ) − y ( s ) ]
2 . (2.4)
Abaikan tekanan udara pada s + ∆h / 2 sehingga Persamaan (2.2) berubah menjadi
26
[
∆p ≈ ρ f g y f ( s ) − y ( s ) . ] (2.5)
Gaya yang kedua yang mempengaruhi gerak fluida di dalam self-siphon adalah gaya
gesek. Persamaan untuk gaya gesek didapatkan dari modifikasi persamaan Poiseuille
F f = −8πη∆hv s . (2.6)
Gaya terakhir yang memengaruhi gerak fluida di dalam self-siphon adalah gaya
gravitasi
rr  3 
Fg = mg .s = mgcos θ − π  . (2.7)
 2 
Dengan menggunakan Hukum II Newton ketiga gaya yang dialami oleh SFVE adalah
sebagai berikut
m
d 2s
2
ds
[ ]  3 
+ 8πη∆h − ρ f g y f (s ) − y (s ) A − mgcos θ (s ) − π  = 0 .(2.8)
d t dt  2 
Persamaan (2.8) dapat disederhanakan menjadi
d 2s ds
2
+ c1 + c0 + c = 0 , (2.9)
d t dt
dengan
 8πη∆h 
c1 =  , (2.10)
 m 
ρ f gAsinθ
c0 = , (2.11)
m
  π  ρ f sin (θs f A)
c = − g cos θ −  + . (2.12)
  2 m 
Jika A yang divariasikan, maka
A = πR 2 , (2.13)
y = mx + c , (2.14)
dengan m adalah gradien garis linier
∆y
m= , (2.15)
∆x
y f − yi
m= , (2.16)
x f − xi
27
maka
y−c
x= , (2.17)
m
jika
R = r + x, (2.18)
maka
 y−c
R = r + , (2.19)
 m 
Gambar 2.2. Konstruksi pipa yang digunakan: rf < ri (kiri) dan rf > ri (kanan).
2.3 Metode numerik

Persamaan Euler digunakan untuk menyelesaikan konstruksi sifon, yang mana S
diturunkan terhadap waktu, dinyatakan dalam
d ns d ns d n+1s
t + ∆t = + ∆t . (2.20)
dt n dt n t dt n+1 t
Percepatan dapat ditulis dalam bentuk persamaan di bawah ini
d 2s ds
2
= −c1 c0 s − c . (2.21)
dt dt
Persamaan (2.20) dan (2.21) dapat diimplementasikan dan digunakan dalam kondisi
kontinuitas dalam semua kondisi sifon. Pergerakan ini dapat ditulis dalam
d2y dy
2
+ c1 c0 y + c = 0 , (2.22)
dt dt
28
dengan η dan ρ merupakan viskositas dan massa jenis air, ∆h dan ∆m

merupakan kedalaman dan massa, g adalah percepatan gravitasi, A merupakan luas
dari pipa, dan y0 merupakan posisi permukaan air. Persamaan di atas diturunkan
karena adanya pengaruh gaya gravitasi bumi, gaya gesek fluida, dan gaya tekan
hidrostatis menggunakan persamaan Newton yang ditulis dalam [4]
d 2θ dθ  g cos θ  c
2
+ c1 + − c0 sin θ  + 0 ( y0 − yc ) = 0 . (2.23)
dt dt  R  R
2.4 Algoritma
Simulasi pergerakan fluida dalam sifon dengan variasi jari-jari dilakukan dengan
menggunakan algoritma berikut ini untuk memperoleh y(t)
L1. Pri, Prf, Pl, PL, Pyf, Peta, Prho, Pg, Pdh, Pcf, pi?
L2. Pti, Pdt, Ptf?
L3. Wi = 1.2*PL/Prho*20.
L4. v = 0, y = -(PL-Wi).
L5. dx = Pri.
L6. x0 = Pri - dx.
L7. x1 = Prf - dx.
L8. y0 = -Pl.
L9. y 1 = P l.
L10. mgrad = (y1 - y0) / (x1 – x0).
L11. c = y1 - (mgrad * x1).
L12. x = (y - c) / mgrad.
L13. r = x + dx.
L14. A = pi * r * r.
L15. yfmy = Pyf - y.
L16. m = Prho * A * Pdh.
L17. fp = Prho * Pg * yfmy * A.
L18. ff = - (8 * pi * Peta * Pdh * v * Pcf).
L19. fg = - (m * Pg), sf = fp + ff + fg.
L20. a = sf / m.
L21. t += Pdt.
L22. v += a * Pdt.
L23. y += v * Pdt.
29
2.5 Hasil dan Diskusi

Parameter-parameter simulasi yang digunakan diberikan dalam Tabel 2.1 berikut.
Tabel 2.1 Parameter-parameter simulasi.
Symbol Nilai Code

ri 2 dan pri
1-5 (kelipatan 0.5)
rf 2 dan prf
1-5 (kelipatan 0.5)
l 200 Pl
L 10-50 pL
yf 0 pyf
η 1 peta
ρ 1 prho
g 9.8 pg
dh 0.1 pdh
ti 0 pti
dt 0.001 pdt
tf 0.1 ptf
cf 230 pcf
Gambar 2.3. Posisi y sebagai fungsi waktu t saat jari-jari akhir rf divariasikan
(saat ri = 2, rf = 1-5 dengan kelipatan 0.5).
30
Gambar 2.4. Posisi y sebagai fungsi waktu t saat jari−jari awal ri divariasikan (saat ri = 1-5
dengan kelipatan 0.5 , rf = 2).
Berdasarkan Gambar 3 dan 4, terlihat hubungan posisi SFVE y terhadap waktu t
dengan variasi jari-jari akhir rf yang konstan dan variasi jari-jari awal ri dengan rf
yang konstan. Berdasarkan Gambar 3 dan 4, dapat dilihat bahwa kedua grafik
memiliki kecenderungan yang sama. Perbedaan dari Gambar 3 dan 4 adalah kerapatan
dari grafik. Pada Gambar 3 saat rf divariasikan grafik terlihat lebih rapat, bahkan
untuk beberapa titik sebelum nol, y berada pada nilai yang sama. Hal tersebut
dikarenakan saat ri konstan bagian bawah sifon memiliki luas penampang yang sama
sehingga menghasilkan gaya tekan yang sama. Semakin ke atas, untuk rf yang besar
maka luas penampang akan besar pula yang berakibat pada gaya tekan yang lebih
besar sehingga kecepatan yang dialami oleh SFVE akan besar dan posisi yang dapat
dicapai menjadi lebih tinggi. Sedangkan pada Gambar 4, saat ri divariasikan grafik
terlihat lebih renggang. Tidak banyak titik yang memiliki nilai y yang sama. Hal
tersebut dikarenakan saat ri divariasikan maka bagian bawah sifon akan berbeda.
Semakin besar ri luas penampang bagian bawah akan semakin besar dan
menyebabkan gaya tekan yang besar sehingga dari awal SFVE sudah mendapat besar
gaya tekan yang berbeda bergantung pada besar ri. Gaya yang semakin besar akan
menyebabkan kecepatan yang besar dan menghasilkan posisi y yang lebih tinggi.
Garis pada grafik tidak linear karena SFVE bergerak keatas dan kebawah permukaan
air sehingga nilai y akan mengalami peredaman seiring penambahan waktu secara
periodik. Peredaman nilai y disebabkan pengaruh gaya gesekan dan pengurangan
tekanan hidrostatis pada saat pergerakan sifon diatas permukaan air.
31
Gambar 2.5. Posisi maksimum ymax sebagai fungsi dari jari−jari akhir rf (saat ri =2, rf = 1-5
dengan kelipatan 0.5).
Gambar 2.6. Posisi maksimum ymax sebagai fungsi dari jari−jari awal ri (ri = 1-5 dengan
kelipatan 0.5 dan rf =2).
Berdasarkan Gambar 5 dan 6 dapat dilihat bahwa saat ri maupun rf yang divariasikan
nilai ymax mengalami peningkatan. Namun, peningakatan saat ri divariasikan lebih
signifikan dibandingkan dengan saat rf divariasikan. Selain itu, interval ymax saat ri
divariasikan lebih besar. Hal tersebut dikarenakan pada saat rf yang divariasikan gaya
tekan awal relatif sama yang diakibatkan oleh ri yang konstan, sehingga ymax untuk
variasi rf memiliki nilai yang tidak jauh berbeda.
Gambar 2.7. Kecepatan maksimal vmax sebagai fungsi dari jari−jari akhir rf (ri = 2 dan rf = 1-5
dengan kelipatan 0.5).
32
Gambar 2.8. Kecepatan maksimum vmax sebagai fungsi dari jari−jari awal ri (ri = 1-5 dengan
kelipatan 0.5 dan rf = 2).
Berdasarkan Gambar 2.7 dan 2.8 nilai kecepatan maksimum pada saat ri divariasikan
memiliki peningkatan yang signifikan terutama pada rentang 1−2 mm. Semakin besar
nilai ri, peningkatan vmax tidak terlalu besar. Hal tersebut dikarenakan pada saat ri
berada pada rentang 1−2 mm konstruksi sifon menyempit di bagian bawah hingga
lurus. Sedangkan saat ri lebih besar dari 2 mm maka konstruksi sifon menjadi
menyempit di bagian atas.
Gambar 2.9. Waktu yang dibutuhkan untuk menempuh posisi maksimal tymax sebagai fungsi
dari jari−jari akhir rf (ri = 2 dan rf = 1-5 dengan kelipatan 0.5).
Gambar 2.10. Waktu yang dibutuhkan untuk menempuh posisi maksimal tymax sebagai fungsi
dari jari−jari awal ri (ri = 1-5 dengan kelipatan 0.5 dan rf = 2).
33
Gambar 2.11. Waktu yang dibutuhkan untuk menempuh kecepatan maksimal tvmax sebagai
fungsi dari jari−jari akhir rf (ri = 2 dan rf = 1-5 dengan kelipatan 0.5).
Berdasarkan Gambar 9 dan 10 terlihat bahwa untuk setiap nilai rf atau ri besar tymax
tidak jauh berbeda dengan kata lain bahwa tymax bukan merupakan fungsi dari ri dan rf.
Gambar 2.12. Waktu yang dibutuhkan untuk menempuh kecepatan maksimal tvmax sebagai
fungsi dari jari−jari awal ri (ri = 1-5 dengan kelipatan 0.5 dan rf = 2).
Sama halnya seperti Gambar 2.9 dan 2.10, Gambar 2.11 dan 2.12 menunjukkan
bahwa tvmax bukan fungsi dari ri dan rf. Meskipun pada grafik terlihat adanya
peningkatan, namun peningkatan yang terjadi memiliki orde milisekon yang artinya
peningkatan tersebut bernilai sangat kecil.
Gambar 2.14. Posisi maksimum ymax sebagai fungsi dari waktu t saat ri dan rf berubah dengan
koefisien gesek cf 230.
34
Gambar 2.14 merupakan grafik posisi ymax sebagai fungsi dari waktu saat ri dan rf
berubah. Berdasarkan Gambar 14 yang memiliki ymax paling besar adalah sifon
dengan ri lebih besar dari rf. Sedangkan sifon dengan rf lebih besar dari ri memiliki
ymax yang lebih kecil. Hal tersebut dikarenakan jika ri besar maka luas penampang
bagian bawah sifon akan lebih besar yang mengakibatkan gaya tekan fluida juga
besar. Saat gaya tekan fluida besar maka kecepatan yang dialami oleh SFVE akan
besar. Sehingga, posisi S akan semakin tinggi. Jika dilihat lebih lanjut lagi, perbedaan
posisi maksimum pada ri > rf dan rf > ri cukup besar. Hal tersebut dapat terlihat dari
jarak grafik yang renggang. Perbedaan yang besar tersebut menunjukkan bahwa
perbedaan gaya yang dialami SFVE juga besar.
Gambar 2.15. Waktu t sebagai fungsi dari posisi y saat variasi panjang pipa yang dicelupkan L
dengan ri = rf = 2 mm.
Gambar 2.16. Waktu t sebagai fungsi dari posisi y saat variasi panjang pipa yang dicelupkan L
dengan ri = rf = 3.5 mm.
35
Gambar 2.15 dan 2.16 menggambarkan hubungan antara waktu dengan posisi
ketinggian fluida dalam pipa saat pipa dicelupkan ke dalam air, yaitu dengan
memvariasikan panjang pipa yang dicelupkan. Pertama pipa dicelupkan ke dalam
fluida yaitu saat waktu 0 detik di dapatkan ketinggian fluida pada permukaan pipa
sebesar -0,0098. Hal ini menandakan bahwa pada saat 0 detik air berada di bawah
permukaan fluida yang berada di wadah. Dengan memvariasikan panjang pipa yang
dicelupkan ke dalam fluida (L = 10 mm sampai dengan L = 90 mm) didapatkan
ketinggian fluida pada permukaan yang berbeda-beda. Semakin dalam pipa yang
dicelupkan ke dalam fluida maka semakin tinggi posisi air dalam pipa dan sebaliknya.
Dilihat dari waktunya, mulai dari 0 detik sampai 0,01 detik maka ketinggian posisi air
dalam fluida cenderung bertambah kecuali pada saat t = 0,09 detik ada sedikit
perbedaan. Hal ini disebabkan oleh viskositas fluida. Selain itu, dilihat dari grafik
terdapat saat dimana posisi fluida sama dengan posisi fluida yang ada di wadah. Hal
ini terjadi saat t berada antara 0,004 detik hingga 0,006 detik.
Gambar 2.17. Panjang pipa yang tercelup L sebagai fungsi dari kecepatan maksimum vmax saat
ri = rf = 2.
Gambar 2.18. Panjang pipa yang tercelup L sebagai fungsi dari kecepatan maksimum vmax saat
ri = rf= 3.5.
36
Berdasarkan Gambar 2.17 dan 2.18 didapatkan bahwa hubungan antara L dan vmax
berbanding lurus, hal ini telah dibuktikan secara eksperimen bahwa apabila panjang
pipa yang dicelupkan ke dalam fluida semakin panjang maka besarnya kecepatan
maksimum fluida akan meningkat. Hal tersebut dikarenakan semakin dalam pipa
yang dicelupkan, tekanan hidrostatis akan semakin besar sehingga menyebabkan gaya
hidrostatis menjadi besar juga. Sehingga kecepatan yang dialami oleh SFVE juga
akan semakin besar.
Gambar 2.19. Panjang pipa yang tercelup L sebagai fungsi dari posisi maksimum ymax saat ri =
rf = 2 mm.
Gambar 2.20. Panjang pipa yang tercelup L sebagai fungsi dari posisi maksimum ymax saat ri =
rf= 3.5 mm
Berdasarkan Gambar 2.19 dan 2.20, hubungan antara panjang pipa yang tercelup L
dan posisi maksimum ymax adalah berbanding lurus. Semakin panjang pipa yang
dicelupkan ke dalam fulida maka posisi maksimum yang dicapai oleh SFVE juga
37
semakin tinggi. Hal tersebut tentu berhubungan dengan penjelasan sebelumnya bahwa
semakin panjang pipa yang tercelup ke dalam fulida, maka kecepatan dari SFVE
semakin besar sehingga SFVE mampu menjangkau posisi yang lebih tinggi jika
dibandingkan dengan pipa yang tercelup lebih pendek.
2.6 Kesimpulan
Gerak fluida di dalam self-siphon telah berhasil disimulasikan menggunakan metode
SFVE yang menerapkan algoritma Euler. Beberapa parameter yang memengaruhi
gerak fluida, yaitu variasi ri dengan rf konstan, jika semakin besar luas penampang
bagian bawah wadah menyebabkan gaya tekan yang besar. Sehingga, akan
menghasilkan kecepatan yang besar dan posisi y yang lebih tinggi. Hal yang sama
juga terjadi pada variasi rf dengan ri konstan, namun terdapat perbedaan diantara
keduanya yang menunjukan bahwa ri lebih berpengaruh daripada rf. Hal ini
dibuktikan dengan persamaan gaya tekan, yaitu semakin besar luas penampang maka
gaya juga semakin besar. Selain itu, semakin panjang pipa yang dicelupkan L maka
semakin tinggi posisi air di dalam pipa yang menyebabkan vmax dalam fluida akan
meningkat. Hal tersebut karena gaya hidrostatis yang besar yang diakibatkan oleh
tekanan hidrostatis yang besar pula.
2.7 Referensi
1. Nurhayati, W. Hidayat, Novitrian, S. Viridi, F. P. Zen, “Simulation of Fluid
Flow in A U-Shape Self-Siphon and Its Working Space”, AIP AIP Conf. Proc.,
2014.
2. S. Viridi, Suprijadi, S. N. Khotimah, Novitrian, F. Masterika, “Self-Siphon
Simulation Using Molecular Dynamics Method, Selected Papers 2, 9-16
(2012).
3. S. Viridi, Novitrian, Nurhayati, W. Hidayat, F. D. E. Latief, and F. P. Zen,
“Development of Single Fluid Volume Element Method for Simulation of
Transient Fluid Flow in Self-Siphons”, AIP Conf. Proc., 199-207 (2014).
4. S. Viridi, Novitrian, F. Masterika, F. D. E. Latief, and F. P. Zen, “Segmented
Self-Siphon: Experiments and Simulations”, AIP Conf. Proc., 190-195 (2012).
38
2.8 Lampiran
Tabel 1.2 Program dan skrip serta hasil keluarannya.
fluid.js Javascript Air B
formula.js Javascript Output C
pipes.js Javascript Sifon D
script.js Javascript - E
stationary.js Javascript Wadah F
xychart.js Javascript Grafik G
B. Program fluid.js
// Create fluid object
"use strict";
function Fluid(argument) {
var _this = this;
var lastX = 0, lastY = 0;
var w = 200;
var h = 250;
this.width = argument.width;
this.height = argument.height;
this.oFluid = new Konva.Rect({

x: this.width / 2 - (w/2),
y: this.height / 2,
width: w,
height: h,
fill: '#5ce7f9',
opacity: 0.3
});
this.oPipe = new Konva.Rect({

x: this.width / 2 - (w/2),
width: w,
height: argument.height,
fill: '#5ce7f9',
});
this.move = function(ty){
this.oPipe.y(ty);
};
39
this.onConstruct = function(){
lastX = 0;
lastY = 0;
};
this.update = function(ty){
var fParam = formula.inputText();
var wi = fParam.tpdi;
var hl = fParam.tpL;
if(ty) this.oPipe.y(ty);
else this.oPipe.y(this.height / 2 + hl);
};
this.update();
}
C. Skrip formula.js
// Create Formula function
"use strict";
var formula;
function Formula() {
var height = 0, width = 0, inputText, lState = 0;

var XMIN = 0, XMAX = 0, YMIN = 0, YMAX = 0;
var xmin = 0, xmax = 100, ymin = 0, ymax = 100;
var pri, prf, pl, pL, pyf, peta, prho, pg, pdh, pti, pdt, ptf,
pcf, logText;
var _t = 0, _y = 0, _v = 0, crossx, chart = new Array();
var chartData = [{x: new Array(), y: new Array()}, {x: new
Array(), y: new Array()}, {x: new Array(), y: new Array()}];
var cmm = [{min:0,max:0}, {min:-10, max:10}, {min:-10,max:10}],
ctmax;
// transformation x
function tX(x){
var X = (x - xmin) / (xmax - xmin);
X *= (XMAX - XMIN);
X += XMIN;
return X;
}
// transformation y
function tY(y){
var Y = (y - ymin) / (ymax - ymin);
Y *= (YMAX - YMIN);
Y += YMIN;
return Y;
}
// save input parameter
function generateParameter(input, isStart){
pri = input[0]/1000; prf = input[1]/1000;
pl = input[2]/1000; pL = input[3]/1000;
pyf = input[4]/1000; peta = input[5]/1000;
prho = input[6]*1000; pg = input[7];
pdh = input[8]/1000; pti = input[9];
pdt = input[10]; ptf = input[11];
pcf = input[12];
40
var wi = 1.2*pL/prho*20;
_y = -(pL-wi);
crossx = getDecimalCount(ptf);
for (var i = 0; i < chartData.length; i++) {
chartData[i].x = new Array();
chartData[i].y = new Array();
}
ctmax = ptf*crossx;
chart[0].setCoordinates(0, _y*1000, ctmax, pL*1000);
chart[1].setCoordinates(0, -10, ctmax, 10);
var dx;
if(pri < prf) dx = pri;
else dx = prf;
var fpm = prho * pg * pL * Math.PI*dx*dx*100;
chart[2].setCoordinates(0, -fpm, ctmax, fpm);
for (var i = 0; i < chart.length; i++) {
chart[i].xLabel = crossx > 1 ? "t(s/"+crossx+")" :
"t(s)";
chart[i].changeData(chartData[i].x, chartData[i].y);
chart[i].clear();
chart[i].plotToCanvas();
}
if(lState < 2) lState++;
else writeHeaderLog();
if(isStart) return _y;
}
// get decimal count from decimal number
function getDecimalCount(num){
var str = String(num);
str = str.split('.');
if(str.length > 1) {
var s = 1;
for (var i = 0; i < str[1].length; i++) {
s *= 10;
}
return s;
} else return 1;
}
// print data to chart
function setChartData(){
chart[i].changeData(chartData[i].x, chartData[i].y);
chart[i].clear();
}
}
// set coordinate of chart
function chartCoordinate(i, n){
if(n > cmm[i].max) cmm[i].max = n;
if(n < cmm[i].min) cmm[i].min = n;
chart[i].setCoordinates(0, cmm[i].min, ctmax, cmm[i].max);
}
// siphon calculation
function calculateSiphon(){
var dx;
if(pri < prf) dx = pri;
else dx = prf;
var x0 = pri - dx, x1 = prf - dx;
41
var y0 = -pL, y1 = pl, mg;

if((pri - prf) == 0) mg = 0;
else mg = (y1 - y0) / (x1 - x0);
var c = y1 - (mg * x1), x;
if(mg == 0) x = 0;
else x = (_y - c) / mg;
var r = x + dx;
var A = Math.PI * r * r, yfmy = pyf - _y;
var m = prho * A * pdh, fp = prho * pg * yfmy * A;
var ff = - (8 * Math.PI * peta * pdh * _v * pcf);
var fg = - (m * pg), sf = fp + ff + fg, a = sf / m;
logText.value += round(_t) + "\t" + round(_y) + "\t"
+ round(_v) + "\t" + round(fp) + "\n";
chartData[0].x.push(_t*crossx);
chartData[0].y.push(_y*1000);
chartData[1].x.push(_t*crossx); chartData[1].y.push(_v);
chartData[2].x.push(_t*crossx); chartData[2].y.push(fp*100);
chartCoordinate(1, _v)
chartCoordinate(2, fp*100)
setChartData();
_v += a * pdt;
var ly = _y;
_y += _v * pdt;
if(_y > (pl - pL)) _y = ly;
_t += pdt;
}
// check is movement of y is available or not
function isAvailable(){
if(_t <= ptf && _y <= (pl - pL)) return true;
else return false;
}
// Rounding value
function round(val){
return Math.round(val*10000) / 10000;
}
// send data to textarea
function writeHeaderLog(){
logText.value = "t" + "\t" + "y" + "\t" + "v" + "\t"
+ "Fp" + "\n";
logText.value += "------" + "\t" + "------" + "\t"
+ "------" + "\t" + "------" + "\n";
}
this.init = function(argument){
width = argument.width; height = argument.height;
XMIN = width / 2; XMAX = width;
YMIN = height / 2; YMAX = YMIN - width / 2;
};
this.inputText = function(input, isStart){

if(input){
inputText = input;
return generateParameter(input, isStart);
} else {
var tpdi = Math.abs(tX(pri*1000) - tX(0)),
tpdf = Math.abs(tX(prf*1000) - tX(0));
var tpl = Math.abs(tY(pl*1000) - tY(0)),
42
tpL = Math.abs(tY(pL*1000) - tY(0));

var param = { tpdi: tpdi, tpdf: tpdf, tpl: tpl,
tpL: tpL };
return param;
}
};
this.getTY = function(){
calculateSiphon();
return tY(_y*1000);
};
this.moveAble = function(isMove){
if(isMove) _t = 0;
else return isAvailable();
};
this.logText = function(log){
if(log) {
logText = log;
writeHeaderLog();
for (var i = 0; i < 36; i++) {
logText.value += "0.0000" + "\t"
+ "0.0000" + "\t" + "0.0000"
+ "\t" + "0.0000" + "\n";
}
}
};
this.maxValue = function(){
return {y: _y, v: _v, t: _t};
};
this.chart = function(c){
chart.push(c);
};
this.initTY = function(){
return tY(_y*1000);
};
}
formula = new Formula();
D. Skrip pipes.js
// Create pipes object
"use strict";
function Pipes(argument) {
var _this = this;
var lastX = 0;
var lastY = 0;
this.oPipe = new Konva.Line({
stroke: '#d1d1d1',
strokeWidth: 1,
shadowColor: '#d1d1d1',
shadowBlur: 10,
43
shadowOpacity: 0.9,
fill: "#d1d1d1",
closed: true,
opacity: 0.5
});
this.update = function(){
var wf = fParam.tpdf;
var hu = fParam.tpl - fParam.tpL;
this.oPipe.points(
[argument.width / 2 - wf/2,
argument.height / 2 - hu, // a
argument.width / 2 - wi/2,
argument.height / 2 + hl, // b
argument.width / 2 + wi/2,
argument.height / 2 + hl, // c
argument.width / 2 + wf/2,
argument.height / 2 - hu ] // d
);
};
this.update();
}
E. Skrip script.js
// Main script
"use strict";
var textarea, pipes, fluid, stationary, layer, anim, ssButton,
isFinish = true, cButton;
// Start button clicked
function start(a){
ssButton = a;
if(ssButton.innerHTML == "Mulai"){
if(isFinish){
formula.moveAble(true);
isFinish = false;
construct();
}
anim.start();
ssButton.innerHTML = "Berhenti";
stationary.pipeCover.hide();
cButton.disabled = true;
} else {
anim.stop();
ssButton.innerHTML = "Mulai";
stationary.pipeCover.show();
cButton.disabled = false;
}
}
// Construct button clicked
function construct(){
generateInputText(true);
pipes.update();
44
var ty = formula.initTY();
fluid.update(ty);
stationary.update();
layer.batchDraw();
isFinish = true;
}
// animation
function moving(frame){
if(formula.moveAble()){
var ty = formula.getTY();
fluid.move(ty);
stationary.setTextMeter(formula.maxValue());
} else {
anim.stop();
ssButton.innerHTML = "Mulai";
stationary.pipeCover.show();
isFinish = true;
cButton.disabled = false;
}
}
// get input value
function generateInputText(setMax){
var lines = textarea.value.split("\n");
var valIndex = 6;
var result = new Array();
for(var i = 0; i < lines.length; i++) {
var obj = lines[i].split("\t");
obj = parseFloat(obj[1]);
result.push(obj);
}
var my = formula.inputText(result, true);

if(setMax) stationary.setTextMeter({y: my, v: 0, t: 0}, true);
}
// input text for first time
function initInputText(){
var str = "ri\t2\tmm\n";
str += "rf\t2\tmm\n";
str += "l\t200\tmm\n";
str += "L\t70\tmm\n";
str += "yf\t0\tmm\n";
str += "eta\t1\tcP\n";
str += "rho\t1\tg/cc\n";
str += "g\t9.8\tm/s2\n";
str += "dh\t0.1\tmm\n";
str += "ti\t0\ts\n";
str += "dt\t0.001\ts\n";
str += "tf\t0.1\ts\n";
str += "cf\t80\tx";
textarea.value = str;
generateInputText();
}
// chart initialization
function initChart(){
var chart = ["top", "middle", "bottom"];
var chartY = ["y(mm)", "v(m/s)", "Fp(cN)"];
cButton = document.getElementById("construct");
45

var id = document.getElementById("chart-"+chart[i]);
var canvas = document.createElement("canvas");
canvas.width = id.offsetWidth;
canvas.height = id.offsetHeight;
id.appendChild(canvas);
chart[i] = new XYChart(canvas, "t(s/10)", chartY[i]);
}

chart[i].setCoordinates(0, 0 * 2, 1, 1.5 * 2);
chart[i].changeData(new Array(), new Array());
chart[i].clear();
formula.chart(chart[i]);
}
}
// initialization
function init() {
var c = document.getElementById("container");
textarea = document.getElementById("input-text");
var logText = document.getElementById("log-text");
formula.logText(logText);
var width = c.offsetWidth;
var height = c.offsetHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
layer = new Konva.Layer();
var argument = {width: width, height: height};
formula.init(argument);
initChart();
initInputText();
pipes = new Pipes(argument);
fluid = new Fluid(argument);
stationary = new Stationary(argument);
layer.add(fluid.oPipe);
layer.add(stationary.abstractWall);
layer.add(stationary.lineX);
layer.add(stationary.lineY);
layer.add(pipes.oPipe);
layer.add(stationary.pipeCover);
layer.add(fluid.oFluid);
layer.add(stationary.tube);
layer.add(stationary.maxMeter);
layer.add(stationary.maxTime);
stage.add(layer);
anim = new Konva.Animation(moving, layer);
construct();
}
init();
46
G. Skrip stationary.js
// Create fixed object
"use strict";
function Stationary(argument) {
var cX = argument.width / 2;
var cY = argument.height / 2;
var w = 200, h = 250;
var maxY = -1, maxV = 0, maxTY = 0, maxTV = 0;
this.tube = new Konva.Line({

points: [argument.width / 2 - (w/2),
argument.height / 2 - (10),
argument.width / 2 - (w/2),
argument.height / 2 + h,
argument.width / 2 + (w/2),
argument.height / 2 + h,
argument.height / 2 - 10],
stroke: '#aec7ef',
strokeWidth: 5,
lineJoin: 'round'
});
this.lineX = new Konva.Line({

points: [0, cY, argument.width, cY],
stroke: '#bcbcbc',
strokeWidth: 0.5
});
this.lineY = new Konva.Line({

points: [cX, 0, cX, argument.height],
stroke: '#bcbcbc',
strokeWidth: 0.5
});
this.abstractWall = new Konva.Line({

fill: "#FFFFFF",
stroke: "#FFFFFF",
closed: true
});
this.pipeCover = new Konva.Line({

fill: "#4f68bd",
stroke: "#4f68bd",
closed: true
});
this.maxMeter = new Konva.Group({x: 50, y: 30, draggable: true});
var maxMeterContainer = new Konva.Rect({

width: 150, height: 60,
fill: '#CC3333', shadowColor: '#3D3D3D',
strokeWidth: 5, cornerRadius: 10
});
47
this.textMeter = new Konva.Text({

text: 'ymax\t= 0.000\nvmax\t= 0.000', fontSize: 15,
fontFamily: 'Arial', fill: '#FFFFFF',
width: 150, padding: 10, lineHeight: 1.5,
align: 'left', fontStyle: 'bold'
});
this.maxTime = new Konva.Group({x: argument.width - 200,

y: 30, draggable: true});
var maxTimeContainer = new Konva.Rect({

width: 150, height: 60,
fill: '#0086B3', shadowColor: '#3D3D3D',
strokeWidth: 5, cornerRadius: 10
});
this.textTime = new Konva.Text({

text: 'tymax\t= 0.000\ntvmax\t= 0.000', fontSize: 15,
fontFamily: 'Arial', fill: '#FFFFFF',
width: 150, padding: 10, lineHeight: 1.5,
align: 'left', fontStyle: 'bold'
});
this.setTextMeter = function(val, isReset){

if(val.y > maxY) {
maxY = val.y;
maxTY = val.t;
}
if(val.v > maxV) {
maxV = val.v;
maxTV = val.t;
}
if(isReset){
maxY = val.y;
maxV = val.v;
maxTY = 0;
maxTV = 0;
}
var y = maxY*1000, v = maxV, ty = maxTY*1000, tv = maxTV*1000;
y = Math.round(y*100)/100; v = Math.round(v*100)/100;
ty = Math.round(ty*100)/100; tv = Math.round(tv*100)/100;
this.textMeter.text('ymax\t= '+y+'\tmm\nvmax\t= '+v+'\tm/s');
this.textTime.text('tymax\t= '+ty+'\tms\ntvmax\t= '+tv+'\tms');
};
this.maxMeter.add(maxMeterContainer);
this.maxMeter.add(this.textMeter);
this.maxTime.add(maxTimeContainer);
this.maxTime.add(this.textTime);
this.update = function(){
var wf = fParam.tpdf;
var hu = fParam.tpl - fParam.tpL;
var pcw = wf, pch = 20;
48
var pcaw = argument.width / 2 - wf/2;

var pcah = argument.height / 2 - hu;
this.abstractWall.points(
[argument.width / 2 - (w/2), argument.height / 2 - hu,
argument.width / 2 - (w/2), argument.height / 2 +
argument.height,
argument.width / 2 + (w/2), argument.height / 2 +
argument.height,
argument.height / 2 - hu,
argument.width / 2 + wf/2,
argument.height / 2 - hu, // d
argument.width / 2 + wi/2
argument.height / 2 + hl, // c
argument.width / 2 - wi/2
argument.height / 2 + hl, // b
argument.width / 2 - wf/2
argument.height / 2 - hu] // a
);
this.pipeCover.points(
[pcaw - (0), pcah - pch/2,
pcaw - (0), pcah + pch/2,
pcaw + (pcw), pcah + pch/2,
pcaw + (pcw), pcah - pch/2,
pcaw + (pcw/2+pcw/5), pcah - pch/2, // d
pcaw + (pcw/2+pcw/5), pcah - pch, // c
pcaw + (pcw/2-pcw/5), pcah - pch, // b
pcaw + (pcw/2-pcw/5), pcah - pch/2] // a
);
};
this.update();
}
49
Gambar 2.21. Interface Software sifon menggunakan bahasa pemrograman Javascript. A: input
data, B: tombol untuk mengkonstruksi Sifon, C: tombol untuk memulai simulasi, D: tampilan
ymax dan vmax, E: Sifon, F: wadah air, G: tampilan tymax dan tvmax, H: grafik y tehadap t, I: grafik
v tehadap t, J: grafik y tehadap t, K: output data.
50
Simulasi numerik distribusi
3 temperatur pada pelat material
persegi menggunakan Javascript
Wina Fitria Dewi Marieta | winamarieta@gmail.com
Ila Lailatun Sholihah | ila.lailatun92@gmail.com
Eka Susanti | ekasusanti3@gmail.com
Andrew Imada Samosir| gus4ndrew@gmail.com
Winda Meutia | windameutia93@gmail.com
Nur Afifah Zen | nurafifahzen03@gmail.com
Karakteristik distribusi temperatur suatu material sangat penting dalam bidang

industri terutama bidang elektronika. Namun, untuk melakukan karakterisasi tersebut
membutuhkan biaya yang mahal dan waktu yang cukup lama. Oleh karena itu
dilakukan pemodelan distribusi temperatur pada pelat persegi menggunakan bahasa
pemrograman javascript dengan metode finite different. Adapun rumusan yang
digunakan pada metode ini didapatkan dari penurunan persamaan Laplace dengan
kondisi steady state yang digunakan untuk mendapatkan temperatur awal setiap titik
(x,y) pada pelat. Selanjutnya temperatur awal diupgrade setiap waktu sehingga
didapatkan data distribusi temperatur dalam fungsi T(x,y,t). Syarat batas temperatur
pada ketiga sisi persegi sebesar 100 ºC dan satu sisi lainnya 0 ºC. Simulasi
menampilkan plot data temperatur pada titik tengah pelat terhadap waktu saturasi
dengan beberapa variasi jumlah grid. Hasil simulasi menunjukkan bahwa semakin
banyak jumlah grid maka semakin tinggi waktu saturasi dan semakin lama waktu
yang dibutuhkan untuk mencapai temperatur saturasi dimana temperatur tertinggi
71,46 ºC pada jumlah grid 100×100. Hal tersebut disebabkan jumlah grid menentukan
ketelitian dari data temperatur saturasi yang dihasilkan. Selain itu, simulasi
menampilkan perbedaan plot data hubungan α terhadap waktu dan temperatur saturasi
pada pelat tembaga dan besi dengan jumlah grid yang sama. Simulasi berdasarkan
jenis pelat menunjukkan semakin besar nilai α maka semakin kecil temperatur
saturasi dan semakin lama waktu yang dibutuhkan untuk mencapai temperatur
saturasi dengan ukuran grid yang sama.
3.1 Pendahuluan
Perkembangan dunia teknologi dan Industri memiliki hubungan yang erat dengan
ilmu sains seperti fisika. Berbagai konsep dasar dalam fisika sering kali dijadikan
acuan dalam mengembangkan teknologi terbaru serta mempunyai pasar yang
menjanjikan [1]. Salah satu diantara konsep fisika yang akan kita bahas tentang
distribusi temperatur pada suatu material. Konsep ini menjadi bagian penting yang
51
Komputasi Fisika 3: 3 Simulasi numerik distribusi temperatur ..
harus dipahami dalam industri elektronika mengingat setiap komponen yang

diproduksi mempunyai fungsi dan tujuan yang berbeda. Contohnya oven listrik
dirancang menggunakan material dengan kemampuan distribusi temperatur yang baik
karena memang tujuannya adalah untuk pemanasan. Beda kasus dengan komponen-
komponen yang digunakan pada komputer, dirancang menggunakan material yang
memiliki distribusi temperatur lebih rendah. Inilah pentingnya kita mengetahui sifat
distribusi temperatur pada setiap material. Lebih khususnya dengan mengetahui sifat
distribusi temperatur kita dapat memprediksi temperatur pada suatu titik tertentu serta
waktu pemanasan yang dibutuhkan hingga temperatur tersebar secara merata di
seluruh bagian material [2]. Untuk mengetahui sifat distribusi temperatur suatu
material dapat dilakukan dengan metode eksperimen ataupun numerik menggunakan
simulasi komputer. Pada kasus ini kita mengembangkan pemodelan 2 dimensi untuk
melihat bagaimana distribusi temperatur melalui simulasi numerik menggunakan
metode finite different.
3.2 Teori
Distribusi temperatur T(x,y) pada keadaan tunak memenuhi persamaan Laplace
∇ 2 T (x, y ) = 0 , (3.1)
Asumsikan fungsi temperatur pada arah x dan y adalah separabel
T ( x , y ) = X (x )Y ( y ) . (3.2)
Jika diperlukan suatu fungsi sembarang variabel dapat dinyatakan dalam deret Fourier
∞ ∞
1
f (t ) = a o + ∑ a n cos nt + ∑ bn sin nt , (3.3)
2 n =1 n =1
dengan
π
1
an = ∫ f (t ) cos ntdt , (3.4)
π −π
dan
π
1
f (t )sin ntdt .
π −∫π
bn = (3.5)
Ambil fungsi periodik sebagai berikut
0,−π < t < 0

f (t ) = 
1, < 0 < t < π (3.6)
52
di mana untuk selang waktu lainnya berlaku berulang-ulang misalnya 0 untuk π<t<2π,
1 untuk 2π<t<3π dan seterusnya. Dengan menggunakan Persamaan (3.4) dapat
diperoleh bahwa
π
1 π 1 
an =
π ∫
0
cos ntdt =  sin nt  = 0 − 0 = 0 ,
n  t =0
(3.7)
dan dengan menggunakan persamaan (1.5) dapat diperoleh

π 0, n = 2m
bn =
1
π ∫
π  1  1 
sin ntdt = − cos nt  = − (−1) − 1 =  2
n
[ ] (3.8)
 n  t =0 n  nπ , n = 2m − 1
0
dengan m = 1,2, ...... .

Persamaan (3.8) menyatakan bahwa hanya terdapat
2
b2 m+1 = , m = 1,2,3.... , (3.9)
(2m − 1)π
untuk suku ao dapat diperoleh dari
π
1 π  1  1
bn =
π ∫ 0
dt = − t  = (π − 0) = 1 .
 π  t =0 π
(3.10)
Sehingga fungsi f(t) dalam persamaan (1.6) dapat dinyatakan sebagai

1 2 ∞ sin [(2m − 1)t ]
f (t ) = + ∑
2 π m =1 2m − 1 (3.11)
Substitusi Persamaan (3.2) ke Persamaan (3.1) akan memberikan
 d2 d2 
 2 + 2  X ( x)Y ( y ) = 0
 dx dy 
2
d X d 2Y
Y 2 +X 2 =0 (3.12)
dx dy
1 d 2 X 1 d 2Y
− = = 0.
X dx 2 Y dy 2
Kedua ruas dalam persamaan (3.12) baris terakhir merupakan fungsi dari x dan y,
yang dapat dipenuhi bila keduanya bernilai konstan. Untuk itu dapat dipilih konstanta
k 2 , sehingga dapat diperoleh dua persamaan yaitu
d2X (3.13)
− k 2 X = 0,
dx 2
53
d 2Y
− k 2Y = 0 , (3.14)
dy 2
dengan solusi
e ky sin kx,
 − ky
e sin kx, (3.15)
T = XY =  ky
e cos kx,
e − ky cos kx.

ky
Agar pada y = ∞ dan nilai T = 0 ºC maka solusi yang mengandung e tidak dapat
digunakan. Kemudian agar pada x = 0 dan x = l = 0 nilai T = 0 ºC, maka solusi yang
mengandung cos kx tidak berlaku. Dengan demikian solusinya adalah
πy
πx
T ( x, y ) = e l sin . (3.16)
l
Persamaan (3.16) telah memenuhi T (x,∞) = 0 ºC, T (0,y) = 0 ºC dan T (l,y) = 0 ºC.
Akan tetapi solusi ini belum dapat mengakomodasi syarat batas T (x,0) = 100 ºC.
Berdasarkan deret Fourier, persamaan (3.16) dapat dituliskan menjadi
nπy
∞
nπx
T ( x, y ) = ∑ bn e l
sin , (3.17)
n =1 l
apabila diterapkan syarat batas akan menjadi
nπy
∞
n πx
T ( x ,0 ) = ∑ b n e l
sin = 100 . (3.18)
n =1 l
Dengan menggunakan (3.5) dapat diperoleh
l
nπx  nπx 
l
2 200 l 200 l
bn = ∫
l 0
100 sin
l
dx = −
l nπ
dx = −
l nπ cos l 
  x =0
 400
 , n = 2m − 1 , (3.19)
=  nπ
0, n = 2 m
dengan m = 1, 2, 3, ... sehingga
54
πy
−( 2 n −1)
T ( x, y ) =
400 ∞
e l
(2n − 1)πx .
π
∑
n =1 2n − 1
sin
l
(3.20)
3.3 Metode numerik

Metode simulasi distribusi dapat menyelesaikan persamaan differensial parsial
dengan kondisi awal dan batas. Distribusi temperatur pada setiap material
menggunakan mekanisme aliran konduksi dapat diselesaikan menggunakan metode
finite difference. Hasil numerik dan analisis saling berhimpit dan mendekati referensi
[4].
Gambar 3.1 Jaringan titik hitungan pada bidang x dan y
Turunan pertama suatu fungsi dapat direpresentasikan dalam bentuk
df f (x + ∆x ) − f (x ) f (x ) − f ( x − ∆x ) ,
= = (3.21)
dx ∆x ∆x
yang dikenal sebagai beda depan dan beda belakang. Sedangkan turunan keduanya
f ( x + ∆x ) − f ( x ) f ( x ) − f ( x − ∆x )
−
d2 f ∆x ∆x f ( x + ∆x ) − 2 f ( x ) + f ( x − ∆x ) . (3.22)
= =
dx 2 ∆x (∆x )2
Untuk persamaan Laplace pada persamaan (3.1) dapat dituliskan
T ( x + ∆x, y ) − 2T ( x, y ) + T (x − ∆x, y ) T ( x, y + ∆y ) − 2T (x, y ) + T ( x, y − ∆y )

+ = 0 . (3.23)
(∆x ) 2
(∆y )2
55
Persamaan (3.23) dapat dituliskan kembali dalam bentuk

2
 ∆y 
 
 ∆x 
T ( x, y ) = [T (x, y + ∆y ) + T (x, y − ∆y )]
  ∆y  2 
21 +   
  ∆x  
2
 ∆y 
  . (3.24)
+  ∆x  [T (x + ∆x, y ) + T (x + ∆x, y )]
  ∆y  2 
2 1 +   
  ∆x  
Metode Finite Difference
T ( x, y ) = Ti , j ,
∂T ( x, y ) Ti , j +1 − Ti −1, j ,
= (3.25)
∂y 2∆x
∂T ( x, y) Ti +1, j +1 + Ti −1, j +1
= ,
∂x 2∆x
∂ 2T ( x, y ) Ti −1, j +1 − 2Ti , j +1 + Ti +1, j +1

= , (3.26)
∂x 2 ∆x
Ti ,kj+1 − Ti ,kj  T k − 2Ti ,kj + Ti −k1, j Ti ,kj +1 − 2Ti ,kj + Ti ,kj −1 

= κ  i +1, j + , (3.27)
∆t  (∆x )2 (∆y )2 
di mana ∆x=∆y dan dengan menggunakan parameter α = κ∆t sehingga di dapatkan

(∆x )2
persamaan
[
Ti ,kj+1 = α Ti +k1, j + Ti −k1, j + Ti ,kj +1 + Ti ,kj −1 − 4Ti ,kj + Ti ,kj] (3.28)
Solusi persamaan tersebut merupakan nilai T pada jarak x setiap waktu t. Persamaan
difusi dapat digunakan untuk menganalisis perambatan temperatur. Dengan T
(temperatur) dan κ merupakan koefisien kondutivitas [3].
56
3.4 Algoritma
Simulasi distribusi temperatur pada pelat material menggunakan algoritma berikut ini
untuk memperoleh Tsat.
L1. T1, T2, T3, T4?

L2. L1,L2?
L3. t, α?
L4. Tlast = 0
L5. Ti,j = sin(i).sin(j).100.0.50, i={0,1,2,3,4,…,L1}, j={0,1,2,3,4,…L2}
L6. Temperatur atas = 0, temperatur bawah = 100
L7. Ti,j = vt2
L8. Ti,j-1 = vt4
L9. T0,,j = vt1
L10. Ti-1,j = vt3
L11. i1 = i-1, i2 = i+1
L12. j1 = j-1, j2 = j+1
L13. Ti,j = (Ti1,j + Ti2,j + Ti,j1 + Ti,j2 * α) + (1-4 α) (Ti,j)
L14. Gradien dan plot grafik temperatur terhadap waktu

Simulasi ini dilakukan dengan menginput nilai batas T1, T2, dan T3 sebesar 100 ºC
dan temperatur T4 sebesar 0 ºC pada masing-masing sisi pelat persegi. Selanjutnya
parameter yang diubah adalah jumlah grid dan nilai α. Terdapat 10 macam variasi
ukuran grid (∆x = ∆y) yaitu 10×10 ; 20×20 ; 30×30 ; 40×40 ; 50×50 ; 60×60 ; 70×70 ;
80×80 ; 90×90 dan 100×100.Nilai α divarisikan 2 jenis yaitu 0,1 untuk pelat tembaga
dan 0,012 untuk pelat besi. Untuk melihat hubungan jumlah grid terhadap temperatur
dan waktu saturasi digunakan nilai α tembaga yaitu 0,1. Parameter-parameter simulasi
yang digunakan pada Tabel 1.1.
Symbol Nilai Code

Α 0,1 dan 0,012 alpha
T1, T2, T3, T4 100, 100, 100, 0 vt1, vt2, vt3, vt4
57
Berikut adalah hasil simulasi perubahan temperatur dan waktu saturasi untuk sebuah
titik di bagian tengah pelat,
Gambar 3.2 Distribusi Temperatur pada Pelat Tembaga dengan Jumlah Grid 10×10.
Semua data distribusi dengan ukuran grid yang berbeda-beda dari jumlah grid 10×10
sampai 100×100 menunjukkan pola grafik yang sama seperti Gambar 3.2 dengan
temperatur dan waktu saturasi yang berbeda. Dari kesepuluh variasi ukuran grid,
dapat dilihat perbedaan grafik saturasi temperatur pada titik tengah pelat tembaga
pada Gambar 3.3.
Gambar 3.3 Nilai temperatur sebagai fungsi waktu untuk berbagai variasi grid :
10×10 ; 20×20 ; 30×30 ; 40×40 ; 50×50 ; 60×60 ; 70×70 ; 80×80 ; 90×90 dan
100×100.
58
Gambar 3.3 menunjukkan bahwa jumlah grid mempengaruhi temperatur dan waktu
saturasi. Semakin banyak jumlah grid maka semakin lama waktu yang dibutuhkan
untuk mencapai temperatur saturasi, namun ketelitiannya semakin tinggi. Ukuran dan
jumlah grid adalah dua hal yang berbeda. Pada suatu pelat, semakin kecil ukuran grid
artinya semakin banyak jumlah grid yang digunakan. Perubahan temperatur pada
setiap grid akan mempengaruhi temperatur keseluruhan pelat. Semakin banyak grid
berarti semakin banyak pula perubahan-perubahan temperatur kecil yang
diperhitungkan dan akan mempengaruhi ketelitian dari setiap simulasi. Dari data yang
didapatkan, waktu saturasi terlama adalah pada saat ukuran grid 100×100 dan
temperatur saturasinya sebesar 71,46 0C. Selanjutnya, untuk melihat hubungan nilai α
terhadap temperatur dan waktu saturasi, diambil data sebelumnya untuk tembaga pada
ukuran grid 10×10 dan dibandingkan dengan temperatur dan waktu saturasi pelat besi
dengan α sebesar 0,012.
Gambar 3.4 Distribusi Temperatur pada Pelat Besi dengan Jumlah Grid 10×10.
Gambar 3.4 memperlihatkan hasil distribusi temperatur saturasi pada pelat besi
dengan α 0,012. Dari persamaan 1.28, α didefinisikan dengan persamaan berikut
k∆t
α= 2 (3.29)
∆x
α merupakan suatu konstanta yang nilainya bergantung pada konduktivitas termal
bahan (k), perubahan waktu ∆t dan ukuran grid yang digunakan ∆x. Dari grafik
Gambar 3.4 dibanding dengan Gambar 3.2 dapat dilihat bahwa semakin besar nilai α,
semakin kecil temperatur saturasi dan semakin lama waktu yang dibutuhkan untuk
mencapai temperatur saturasi pada titik tengah pelat. Pelat tembaga mencapai
temperatur saturasi sebesai 67,550C setelah 113,5 sekon dengan nilai α = 0,1
59
sedangkan pelat besi mencapai temperatur saturasi sebesar 70,14 0C setalah 127,27
sekon untuk α = 0,012 dengan jumlah grid yang sama untuk kedua pelat yaitu 10×10.
3.6 Kesimpulan
Distribusi temperatur pada pelat suatu material telah dapat disimulasikan
menggunakan bahasa pemrograman javascript dengan metode numerik finite
different. Hasil simulasi menunjukkan semakin banyak jumlah grid maka temperatur
saturasi semakin tinggi dan waktu yang dibutuhkan untuk mencapai temperatur
saturasi semakin lama. Besar temperatur saturasi terbesar pada jumlah grid 100×100
yaitu sebesar 71,46 ºC. Banyaknya jumlah grid menunjukkan ketelitian nilai
temperatur pada titik tengah pelat. Selain itu, besarnya temperatur saturasi bergantung
pada konduktifitas bahan yang berbanding lurus dengan konstanta α. Semakin kecil
nilai α maka semakin tinggi temperatur saturasi dan semakin besar nilai α maka
semakin rendah temperatur saturasi. Besar temperatur saturasi untuk pelat tembaga
dan temperatur saturasi pelat besi pada titik tengah pelat masing-masing 67,55 ºC dan
70,15 ºC.
3.7 Referensi
1. W. Destyanto, “ Simulasi Numerik Perpindahan Temperatur onveksi Alami
pada Lapis Batas Aliran Laminar dengan Metode Beda Hingga”, Skripsi,
Universitas Negeri Surakarta, Surakarta, Indonesia, 2007.
2. J. Aminuddin, Dasar-dasar Fisika Komputasi Menggunakan Matlab”, Gava
Media, Yogyakarta, 2008, pp 209-225.
3. Warsono, Supahar, Supardi, D. Darmawan,”Komputasi Distribusi Temperatur
Dalam Keadaan Mantap (Steady State) Pada Logam Dalam Berbagai
Dimensi”, Prosiding, diseminarkan di Yogyakarta, 8 Februari 2005, pp 43-57.
4. M. L. Boas, “Mathematical Methods in the Physical Science”, Third Edition,
John Wiley and Sons, United State of America, 2006, pp 621-626.
60
3.8 Lampiran
index.html B
Gambar 3.2
script.js C
Javascript dan
xychart.js D
Gambar 3.4
style.css E
B. Program index.html
<!DOCTYPE html>
<html>
<head>
<title> Distribusi Temperatur pada Pelat </title>
<meta charset ="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<center>
<h1> Distribusi Temperatur pada Pelat </h1>
</center>
<div id="left">
<center><p>Input</p></center>
<div class="w100">
T1 = <input type="text" id="vt1" class="w50px"
value="100 "/><br/><br/>
T2 = <input type="text" id="vt2"
class="w50px" value="100"/><br/><br/>
L1 = <input type="text" id="vl1"
L2 = <input type="text" id="vl2"
t    =
<input type="text" id="vt" class="w50px" value="100"/>
<br/>
</div>
</div>
<div id="center">
<canvas id="pelate" width="400" height="400"
style="border:1px solid #000000;"></canvas>
61
<canvas id="chart" width="400" height="400"

style="border:1px solid #000000;"></canvas>
<script type="text/javascript" src="xychart.js"></script>
<div id="forButton"></div>
<div id="forNote"></div>
</div>
<div id="right">
<center><p>Output</p></center>
<textarea id="output"></textarea>
</div>
<script src="script.js"></script>
</body>
</html>
C. Program script.js
//Variabel untuk Finite Differential Method
var n = 0;
var i1, i2, j1, j2;
//Delarasi Canvas
var pelateCanvas = document.getElementById("pelate");
var pelateContext = pelateCanvas.getContext("2d");
var color = ["#000000", "#ffffff", "#000000", "#ffffff", "#000000",
"#ffffff", "#000000", "#ffffff", "#000000", "#ffffff", "#000000",
"#ffffff", "#000000", "#ffffff", "#000000", "#ffffff", "#000000",
"#ffffff", "#FF66CC", "#ffffff"];
var color1 = ["#146eb4", "#ff9900", "#6599FF", "#00ff00", "#6599FF",
"#00ff00", "#6599FF", "#00ff00", "#6599FF", "#00ff00"];
// Deklarasi Chart
var chartCanvas = document.getElementById("chart");
//chartCanvas = chartCanvas.getContext("2d");
var chart = new XYChart(chartCanvas, "t", "T");
var vt = parseInt(document.getElementById("vt").value);
chart.setCoordinates(0, 0, vt, 100);
chart.changeData(new Array(), new Array());
chart.clear();
chart.plotToCanvas();
//Deklarasi Parameter Simulasi dan Keluaran

var GradienWarna;
var Temperatur = new Array();
var alpha = 0.1;
var TemperaturAtas;
var TemperaturBawah;
var RentangTemperatur;
var timer ;
var arrayt = new Array();
var arrayT = new Array();
var t = 0;
var Tlast = 0;
var output = document.getElementById("output");
output.innerHTML = "t \t T\n";
62
//Distribusi Temperatur
function SimulasiDifusiTemperatur() {
var vt1 = parseInt(document.getElementById("vt1").value);
var Baris = parseInt(document.getElementById("vl1").value);
var Kolom = parseInt(document.getElementById("vl2").value);
var fn = document.getElementById("forNote");
if (n == 0){
for (var i = 0; i < Baris; i++) {
Temperatur[i] = new Array();
for (var j = 0; j < Kolom; j++) {
Temperatur[i][j] = Math.sin(i)
* Math.cos(j)
*100 * 0 * 50 ;
}
}
}
//Finite Difference Method
if (n == 1) {
TemperaturAtas = 0;
TemperaturBawah = 100;
for (var i = 0; i < Baris; i++)
if (Temperatur[i][j] > TemperaturAtas)
TemperaturAtas = Temperatur[i][j];
if (Temperatur[i][j] < TemperaturBawah)
TemperaturBawah = Temperatur[i][j];
RentangTemperatur = TemperaturAtas - TemperaturBawah;
}
}
Temperatur[i][0] = vt2; //T2
Temperatur[i][Kolom-1] = vt4; //T4
}
Temperatur[0][j] = vt1; //T1
Temperatur[Baris-1][j] = vt3; //T3
}
i1 = i - 1;
i2 = i + 1;
if (i == 0)
i1 = Baris - 1;
if (i == Baris - 1)
i2 = 0;

j1 = j - 1;
j2 = j + 1;
if (j == 0)
j1 = Kolom - 1;
if (j == Kolom - 1)
j2 = 0;
//if(i != 0 && j != 0) {
Temperatur[i][j] = (Temperatur[i1][j] + Temperatur[i2][j] +
63
Temperatur[i][j1] + Temperatur[i][j2]) * alpha + (1 - 4 * alpha) *

Temperatur[i][j];
//}
GradienWarna = Math.floor((Temperatur[i][j] - TemperaturBawah) /
RentangTemperatur * 16)* 16;//Kontras warna
pelateContext.fillStyle = "rgb(" + GradienWarna + ", 0, " +
parseInt(255 - GradienWarna) + ")";
var nx = document.getElementById("pelate").width / Kolom;
var ny = document.getElementById("pelate").height / Baris;
pelateContext.fillRect(i * nx, j * ny, nx, ny); //
}
}
n++;
//console.log(Temperatur);
var Tbig = Temperatur[Baris / 2][Kolom / 2];
output.innerHTML += t + "\t" + Tbig + "\n";
if(Tlast < Tbig){
fn.innerHTML = "T = " + Tbig + " dan t = " + t + "\n";
Tlast = Tbig;
}
t+=alpha;
arrayT.push(Tbig);
arrayt.push(t);
chart.changeData(arrayt, arrayT);
chart.clear();
chart.plotToCanvas();
}
function doMouseDown(event) {
var vt = parseInt(document.getElementById("vt").value);
chart.setCoordinates(0, 0, vt, 100);
timer = setInterval(SimulasiDifusiTemperatur, 0.01); //Jeda waktu
}
// Create a text object and append it to body

var te1 = document.createElement("text");
te1.innerHTML = "<br>";
document.body.appendChild (te1);
var idButton = document.getElementById("forButton");

var btn1 = document.createElement("button");
btn1.innerHTML = "Start";
btn1.style.width = "92px";
btn1.onclick = function(){
if(btn1.innerHTML == "Start"){
doMouseDown();
btn1.innerHTML = "Stop";
}else{
btn1.innerHTML = "Start";
}
}
idButton.appendChild(btn1);
// Create another text object and append it to body

var te2 = document.createElement("text");
te2.innerHTML = " ";
document.body.appendChild(te2);
64
D. xychart.js
"use strict";
// Class of XYChart
function XYChart(cp, xl, yl) {
this.canvas = cp;

this.pointColor = "#f00";
this.pointSize = 1;
this.lineWidth = 1;
// Fonts properties
// Axis
this.ticsWidth = 5;
this.nTicsX = 5;
this.nTicsY = 5;
this.xLabel = xl || "x";
this.yLabel = yl || "y";
this.digitX = 0;
this.digitY = 0;

this.xmin = -1;
this.ymin = -1;
this.xmax = 1;
this.ymax = 1;
this.XMIN = 0;
this.YMIN = 0;
this.XMAX = 1;
this.YMAX = 1;
// Number of data
this.N = 0;
// Raw data
65
} else {
}
} else {
this.datax = [];
this.dataY = [];
}
// Plotting data
this.dataX = [];
this.dataY = [];

this.xmin = xmin;
this.ymin = ymin;
this.xmax = xmax;
this.ymax = ymax;
};

X += this.XMIN;
return X;
};

Y += this.YMIN;
return Y;
};
// Update data
this.datax = datax;
this.datay = datay;
} else {
}
};
// Clear canvas
var ctx = this.canvas.getContext("2d");
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
};

this.plotToCanvas = function() {
66
this.YMIN = this.canvas.height - 4 * this.padding;
this.XMAX = this.canvas.width - this.padding;

}
var ctx = this.canvas.getContext("2d");
// Plot axis
ctx.beginPath();
ctx.moveTo(XO, YO);
ctx.moveTo(XO, YO);
ctx.stroke();

}
}
ctx.beginPath();
}
}
ctx.stroke();
// Draw grid
ctx.beginPath();
}
67

}
ctx.stroke();

var T = this.xTics[i].toFixed(this.digitX);
}
var T = this.yTics[i].toFixed(this.digitY);
}
ctx.font = font;

ctx.beginPath();
ctx.stroke();
}
ctx.beginPath();
if(i == 0) {
ctx.moveTo(X, Y);
} else {
ctx.lineTo(X, Y);
}
}
ctx.stroke();
68
}
};
}
E. style.css
#left{
float: left;
padding: 0 10px;
text-align:left;
width: 10%;
}
#center{
float: left;
text-align:center;
padding: 10px;
width: 70
}
#right{
float: left;
text-align: center;
padding: 0 10px;
width: 20%;
}
#output{
width: 200px;
height: 350px;
}
.w100 {
width: 100%;
margin: 10px;
}
.w50px {
width: 50px;
}
F. Tampilan sebelum diklik “Start”
69
G. Tampilan Setelah Klik “Start”
3 5 6
Keterangan
1. Input T1, T2, T3 dan T4 merupakan batas dari pelat yang merupakan variabel
tetap.
2. Input L1 dan L2 merupakan jumlah grid yang ingin digunakan untuk
menentukan T saturasi di titik tengah pelat. Sedangkan t menunjukkan waktu
yang digunakan untuk mencapai saturasi. Ketiga variabel ini dapat diubah
sesuai dengan data yang dibutuhkan.
3. Gambar distribusi temperatur pada sebuah pelat yang dibatasi temperatur
tertentu dimana warna merah menunjukkan 100 ºC dan biru menunjukkan 0
ºC.
4. Tombol Start untuk memulai distribusi temperatur dan setelah mencapai
saturasi, dapat digunakan tombol stop untuk menghentikan running agar data
pada output dapat disalin ke bentuk excel.
5. Plot data berupa grafik temperatur terhadap waktu yang diambil pada satu
titik yaitu ditengah pelat.
6. Output data menampilkan data perubahan temperatur dan waktu di titik
tengah sampai menunjukkan keadaan saturasi. Data ini kemudian diolah ke
dalam excel bersama dengan data lainnya untuk dibandingkan nilai dari
temperatur dan waktu saturasi yang dapat dilihat pada Gambar 3.3.
70
Studi gerak jatuh 2-dimensi sistem
4 benda: Kasus dua benda yang
terhubung dengan pegas
Habibi Abdillah | abdillahhabibi@gmail.com
Ricky Dwi Septianto | septianto.rickydwi@gmail.com
Juwita Maharani | juwitamaharani6@gmail.com
M. Rizka Taufani | koeng.mcover@gmail.com
Devi Nurhanivah | devinurhanivah@gmail.com
Chandra W. Winardhi | chandra.winardhi@gmail.com
Pada penelitian ini, dimodelkan suatu sistem benda yang mengalami gerak jatuh
bebas 2-D, sistem benda terdiri dari dua buah partikel bermassa masing-masing m1
dan m2 dengan geometri lingkaran berjari-jari r1 dan r2 yang saling terhubung oleh
sebuah pegas dengan panjang normal L dan konstanta k. Benda diposisikan berada
dalam suatu media yang bisa diatur nilai viskositasnya sehingga didapatkan nilai gaya
akibat viskositas (Fv) serta gaya lainnya seperti gaya berat Fg dan gaya gesek akibat
permukaan Ff. Gerak masing-masing partikel pada sistem benda tersebut juga
dipengaruhi oleh gaya pegas Fs. Sementara parameter atau variabel bebas yang dapat
ditentukan di awal untuk menentukan pola gerak sistem benda antara lain konstanta
pegas k, posisi awal kedua benda (x1, y1) dan (x2, y2), viskositas media c, dan kekasaran
benda b.
4.1 Pendahuluan
Pada dasarnya terdapat dua sistem yang dibedakan berdasarkan interaksi yang terjadi,
yaitu interaksi klasik dan interaksi kuantum. Pada interaksi klasik ditinjau besaran-
besaran makroskopik seperti volum, temperatur, dan tekanan. Sementara pada
interaksi kuantum melibatkan pembentukan fungsi gelombang dan pencarian basis
yang tepat agar sistem dapat terkarakterisasi dengan benar.
Pada penelitian ini hanya dibatasi pada sistem interaksi klasik. Contoh gerak jatuh
sebuah benda sering sekali teramati dalam kehidupan sehari-hari, seperti gerak jatuh
pada daun, gerak jatuh pada bola, gerak jatuh sebuah koin dalam air dan gerak jatuh
benda yang lain. Bila lebih jauh diamati, pola gerakan yang terbentuk dari setiap
contoh yang telah disebutkan berbeda satu dengan yang lain. Hal ini tentu disebabkan
oleh banyak faktor yaitu gaya-gaya yang bekerja pada benda tersebut dan juga
ditentukan dari pola interaksi antar penyusun benda tersebut yaitu interaksi klasik.
Pada suatu sistem bola yang terjatuh, bola tersebut dianggap sebagai benda titik yang
dimodelkan dengan kumpulan benda titik yang terhubung dengan pegas atau biasa
disebut dengan system pegas terkopel.
71
Komputasi Fisika 3: 4 Studi gerak jatuh 2-dimensi ..
Beberapa studi telah dilakukan untuk melihat dinamika dari gerakan pegas yang
terkopel. Diantaranya telah ditinjau suatu system pegas terkopel yang digantung
secara vertikal dan dilihat dinamikanya dengan menyelesaikan persamaan diferensial
sampai orde keempat serta masalah nonlinear dari sistemnya [1], studi mengenai
dinamika dari system dua massa dengan posisi tetap yang terkopel oleh sebuah pegas
tak bermassa [2], dan solusi pendekatan pada masalah nonlinearitas dari sistem pegas
terkopel [3].
Pada penelitian ini difokuskan hanya pada dua benda yang terhubung dengan pegas
yang akan divariasikan massa benda, konstanta pegas, bentuk geometri benda,
orientasi jatuh benda, dan pergerakan benda pada fluida.
4.2 Teori dasar

Pada penelitian kali ini digunakan konsep dinamika dari Hukum II Newton yang
meliputi gaya pegas dan gaya gravitasi menggunakan persamaan berikut [4]
r r
∑ F = m&x& , (4.1)
dengan besar gaya pegas [4]
F = −k∆x . (4.2)
Model yang digunakan pada penelitian ini dapat dilihat pada gambar berikut ini
Gambar 4.1. Model gerak jatuh bebas pada 2 benda yang terkopling pegas dengan koordinat
benda 1 dan benda 2 yang berbeda.
Dalam konsep dinamika Gambar 4.1 dapat ditinjau dua sistem yaitu benda 1 dan
benda 2 yang saling terkopling dengan sebuah pegas satu sama lain, dengan posisi
horizontal, untuk benda 1 lebih tinggi dari pada benda 2. Untuk benda 1 persamaan
Hukum II Newton dalam arah x dapat dituliskan sebagai berikut
72
∑F x = m1&x&1 , (4.3)
dengan meninjau gaya pegas pada Gambar 1 diperopleh persamaan
k∆x = m1 &x&1 , (4.4)
atau
m1 &x&1 − k∆x = 0 . (4.5)
Gaya dalam arah sumbu y dapat diungkapkan
∑F y = m1 &y&1 , (4.6)
meninjau total gaya yang terlibat dalam arah y didapatkan
− m1 g − k∆y = m1 &y&1 , (4.7)
atau
m1 &y&1 + m1 g + k∆y = 0 . (4.8)
Pada benda 2, persamaan hukum II Newton pada sumbu x dapat dituliskan sebagai
berikut
∑F x = m2 &x&2 , (4.9)
dengan cara yang sama didapatkan persamaan
m2 &x&2 + k∆x = 0 . (4.10)
Sedangkan gaya pada arah sumbu yberlaku
∑F y = m2 &y&2 , (4.11)
Atau dapat ditulisakan
m2 &y&2 − m2 g + k∆y = 0 . (4.12)
Selain dari gaya pegas dan gaya gravitasi, pada penelitian ini digunakan pengaruh dari
gaya gesek yang diakibatkan oleh fluida(medium). Gaya gesek akibat fluida ini sangat
bergantung pada kecepatan (v), bentuk benda (R) dan koefisien kekentalan fluida (η).
Besar gaya gesekan tersebut dapat ditulisakan dalam bentuk berikut [5]
Fg = −6πRvη = −cv , (4.13)
dengan c merupakan suatu konstanta yang memenuhi c ≡ 6πRη yang secara fisis
menunjukkan besar gesekan benda terhadap mediumnya dipengaruhi oleh geometri
dari bendanya. Apabila semua gaya yang telah disebutkan sebelumnya disatukan ke
dalam sistem pada Gambar 4.1 maka, total gaya pada sistem dua buah benda yang
saling terkopel dapat diilustrasikan pada Gambar 4.2 yang dilengkapi dengan diagram
gaya pada masing-masing arah x dan y.
73
Gambar 4.2. Diagram gaya pada benda 1 dan 2 yang terkopling oleh pegas.
Untuk dua sistem benda yang saling terkopel dengan pegas ditunjukkan diagram gaya
yang bekerja untuk tiap benda pada Gambar 4.2. Terlihat bahwa untuk setiap benda
dikenai gaya pegas (Fp), gaya gesek fluida (Fg), dan gaya gravitasi (W) masing-
masing pada arah x dan y. Tinjau untuk benda 1 dalam arah x dengan menggunakan
Persamaan (4.3) dan (4.13) diperoleh persamaan
− m1 &x&1 + c1 x x&1 + k∆x = 0 . (4.14)
Selain itu, ditinjau benda 1 dalam arah sumbu y serta menggunakan Persamaan (4.6)
dan (4.13) didapatkan persamaan
m1 &y&1 + m1 g + k∆y + c1 y y&1 = 0 . (4.15)
Pada benda 2, dengan cara yang sama persamaan hukum II Newton pada sumbu x
dapat dituliskan sebagai berikut ini
m 2 &x&2 + c 2 x x& 2 + k∆x = 0 , (4.16)
dan dalam arah sumbu y dapat dituliskan sebagai
m2 &y&2 + m2 g + k∆y + c 2 y y& 2 = 0 . (4.17)
74
Target penelitian ini adalah untuk memvisualisasikan gerak 2 benda yang terkopling
satu sama lain oleh sebuah pegas dan dapat menentukan proyeksi dari gerak benda
tersebut. Berikut ini beberapa fenomena yang mungkin terjadi:
4.2.1 Gerak translasi arah horisontal

Gerakan ini akan terjadi ketika kondisi v, θ, L, dan k bernilai konstan, serta m1 = m2
dan r1 = r2.
Gambar 4.3. Ilustrasi gerak translasi pada dua benda terkopling pegas dengan berbagai sudut
terhadap sumbu horizontal,
Pada fenomena translasi dilakukan dua kasus yang berbeda, seperti pada Gambar 4.3
yaitu dua buah benda yang terkopel pegas dengan arah horizontal, terlihat bahwa pada
kasus pertama (Gambar 4.3 kiri) untuk posisi y yang sama dijatuhkan ke permukaan
tanah. Sedangkan, kasus kedua (Gambar 4.3 kanan) untuk posisi x dan y yang
berbeda, dimana posisi y pada benda 1 lebih tinggi dibandingkan dengan posisi y pada
benda 2 kemudian dijatuhkan pula ke permukaan tanah.
Pada fenomena diatas akan dilihat gerak yang terjadi untuk setiap variasi perubahan
panjang pegas (∆x) yaitu 40 cm (termampatkan), 50 cm (normal), dan 60 cm
(teregang). Kemudian dengan massa benda 1 sama dengan massa benda 2 (m2 = m1 =
1 kg), untuk setiap variasi ∆x tersebut, dikenai koefisien gesek yang sama antara
benda 1 dan benda 2 (c1=c2), yaitu 0, 0.1 dan 0.2.
Selain itu juga akan dilihat gerak sistem untuk kasus teregang (∆x = 60 cm), disini
akan dilakukan dua variasi yaitu varaiasi massa dan koefisien gesek. Untuk variasi
koefisien gesek, digunakan m2 = m1 = 1 kg, dengan perbedaan koefisen gesek benda 1
(c1 = 0) dengan koefisien gesek pada benda 2 (c2 = 0.1). Sedangkan untuk variasi
massa digunakan c1 = c2 = 0 dengan m1 = 1 kg dan m2 =10 kg.
75
4.2.2 Gerak translasi arah vertikal

Gerakan ini akan terjadi ketika kondisi v, θ = 180 °, dan k bernilai sangat kecil dan L
besarnya tidaklah konstan
Gambar 4.4. Ilustrasi gambar translasi pada dua benda terkopling pegas yang dilepas secara
vertikal dan pegas terkompres ketika benda menyentuh permukaan tanah.
Seperti halnya fenomena translasi arah horizontal, pada fenomena translasi arah
vertical yang diilustrasikan pada Gambar 4.4, terlihat bahwa posisi x pada benda 1
sama dengan posisi x pada benda 2. Pada fenomena ini akan ditinjau lebih jauh
mengenai gerak jatuh bebas dua buah benda yang saling terkopel dengan pegas pada
arah vertikal dengan meneliti lebih jauh dari beberapa kasus, diantaranya variasi
massa dan koefisien gesek tiap benda.
Kasus pertama yaitu variasi massa, ditetapkan koefisien gesek yang sama untuk benda
1 dan benda 2 (c1 = c2 = 0) dengan massa benda 1 (m1 = 1 kg) dan variasi massa
benda 2 (m2 = 1 kg, 5 kg, dan 10 kg).
Selain variasi massa, dilakukan pula variasi koerfisien gesek, dengan menentapkan
massa benda 1 sama dengan massa benda 2 (m2 = m1 = 1 kg). Variasi koefisien gesek
yang pertama yaitu dibuat koefisien gesek benda 1 selalu sama (c1 = 0) dengan
koefisien benda 2 yang berbeda-beda (c2 = 0 dan 1). Variasi koefisien gesek yang
kedua yaitu menetapkan koefisen gesek pada benda 2 selalu sama (c2 = 0) dengan
koefisien benda 1 yang berbeda-beda (c1 = 0 dan 1).
Kemudian akan diaplikasikan melalui simulasi kasus gerak jatuhnya sebuah pesawat,
di mana untuk benda 1 diilustrasikan sebagai manusia sedangkan benda 2 merupakan
76
kursi penyelamat. Dalam simulasi ini akan dilihat secara sederhana sistem pada
Gambar 4.2 bekerja untuk menyelamatkan manusia dari kecelakaan pesawat tersebut.
4.2.3 Gerak Translasi dan Gerak Osilasi

Gerakan ini akan terjadi ketika kondisi v, r, dan θ dibuat sedemikian rupa sehingga
berosilasi dan terdapat gaya viskositas (Fv).
Gambar 4.5. Ilustrasi gambar gerak translasi dimana salah satu benda berosilasi akibat massa
benda lebih besar dan memilliki gaya gesek yang berbeda dengan benda satunya.
Berbeda dengan fenomena sebelumnya, namun masih memanfaatkan gerak jatuh
bebas. Pada fenomena yang telihat pada Gambar 4.5 ini merupakan suatu gerak yang
rumit karena menggabungkan dua gerak yaitu translasi dan osilasi dengan melakukan
variasi parameter saja. Pada fenomena ini dilakukan suatu simulasi pada gerak jatuh
daun ke permukaan tanah.
77
4.3 Metode numerik

Metode numerik yang digunakan dalam penelitian ini adalah metode Euler dengan
formulasi yang diambil dari hukum Newton II serta meninjau masing-masing partikel
pada sistem benda tersebut. sehingga persamaan gerak untuk partikel ke-i adalah [6]
r r
∑F i = mi a i . (4.18)
Untuk masing–masing benda tersebut maka didapatkan ungkapan dalam komponen-
komponennya yang dapat ditulisakan [6]
Fi , f (x& i ) + Fi ,v ( x& i ) + Fi , s ( x1, x 2 , x3 , x 4 ) = mi &x&i , (4.19)
Fi , f ( x&1 ) + Fi ,v ( x&1 ) + Fi , s ( x1, x 2 , y1 , y 2 ) = mi &x&i , (4.20)
Fi , f ( y& i ) + Fi ,v ( y&1 ) + Fi , s ( x1, x 2 , y1 , y 2 ) = mi &y&i , (4.21)

dan besaran-besaran gerak lainnya dihitung menggunakan algoritma Euler untuk
menghitung kecepatan partikel ke-i yang memenuhi persamaan [6]
r r r
v i (t + ∆t ) = v i (t ) + a i (t )∆t . (4.22)
Sedangkan posisi partikel ke-i ditulisakan [6]
r r r
xi (t + ∆t ) = xi (t ) + v i (t )∆t , (4.23)
berlaku pada waktu t + ∆t. Sementara untuk menentukan interaksi antar partikel
terlebih dahulu menentukan kondisi dari pegas. Jika pegas teregang maka kita bisa
memandang kedua partikel memiliki gaya saling tarik-menarik. Sementara jika pegas
tertekan maka kedua pertikel memiliki gaya yang saling tolak-menolak. Kondisi
pegas yang teregang dan tertekan dapat dituliskan sebagai berikut:
Syarat pegas teregang adalah
(x1 − x2 )2 + ( y1 − y2 )2 > L, (4.24)
sedangkan yarat pegas tertekan dapat ditulis
(x1 − x2 )2 + ( y1 − y2 )2 < L . (4.25)
78
4.4 Algoritma
Simulasi gerak jatuh sistem benda dilakukan dengan menggunakan algoritma berikut
ini untuk memperoleh nilai kecepatan dan posisi benda.
L1. Input parameter: k, η, b, L,
Benda: x1, x2, y1, y2, r1, r2, m1, m2,
L2. Cek posisi partikel 1 (x1, y1) dan partikel 2 (x2, y2) untuk menentukan
regangan pegas dan kecepatan benda v1,x, v1,y, v2,x, v2,y
L3. Hitung: Fg, Fs, Fv, Ff masing-masing sumbu koordinat.
L4. Hitung nilai a1, a2
L5. Hitung nilai v1, v2
L6. Hitung nilai x1, x2, y1, y2
L7. Kembali ke proses L2.
L8. Jika button berhenti onclick, simulasi berhenti sementara
Jika button reset onclick, simulasi diulang / refresh
Jika button mulai onlclick, simulasi dimulai
Jika button siap onclick, tampilan posisi benda muncul pada layar

Parameter simulasi yang digunakan dapat dilihat pada tabel berikut,
Tabel 4.1. Beberapa parameter penting yan digunakan dalam simulasi.
No. Parameter Nilai
1. Gravitasi (m/s2) 10
2. Konstanta pegas (N/m) 10
3. Waktu awal (s) 10
4. Waktu akhir (s) 100
5. Perubahan waktu (s) 0.01
Gambar 4.6 menunjukan pola gerak benda pada ruang koordinat xy dengan variasi
keadaan awal yaitu termampatkan, normal, dan teregang. Dari Gambar 4.6 ini bisa
dilihat bahwa gerak benda sudah sesuai dengan dinamika hukum Newton yaitu ketika
gaya pegas diberikan hanya terhadap sumbu x (Gambar 4.6b), maka osiliasi hanya
terjadi pada sumbu x saja. Sementara pada sumbu y, benda hanya mengalami gaya
gravitasi yang diperlihatkan oleh Gambar 4.6c. Semua benda memiliki profil posisi y
terhadap waktu yang sama.
79
(a) 640 x = 40 px x = 50 px x = 60 px
480
y (px)
320
160
0
0 128 256 0 128 256 0 128 256
x (px)
(b) 192
640
128 (c)
64 x = 40 px 448
y (px)
192
x (px)
128 256
x = 50 px
64
192 64
0 4 8 12 16 20
128 t (s)
64 x = 60 px m1
0 4 8 12 16 20 m2
t (s)
Gambar 4.6. Pola gerak benda ter-coupling pegas pada keadaan awal termampatkan, normal,
dan teregang dengan (a) pola gerak ruang koordinat xy, (b) pola gerak benda pada sumbu x
sebagi fungsi waktu, dan (c) pola gerak benda pada sumbu y sebagai fungsi waktu.
Gambar 4.7 menunjukan pengaruh koefisien gesek benda terhadap profil gerak benda
yang direpresentasikan pada pola gerak sepanjang sumbu x dan sumbu y sebagai
fungsi dari waktu. Untuk gerak benda tanpa gaya gesek, dapat dilihat gerak sepanjang
sumbu x merupakan gerak osiliasi tanpa gangguan dan gerak sepanjang sumbu y
masih menunjukan kurva kuadratik yang menunjukan adanya percepatan dari gaya
berat. Sementara itu, bila sistem diberikan gangguan berupa gaya gesek, maka akan
terjadi pengurangan amplitudo gerak osilasi benda pada sumbu x. Hal ini menunjukan
koefisien gesek yang diberikan berpengaruh pada besar amplitudo sementara
frekuensi osilasi tetap konstan. Begitu juga dengan profil gerak sepanjang sumbu y,
terdapat pengurangan percepatan sehingg benda lebih lama sampai di dasar.
Fenomena yang menarik terlihat pada sistem yang diberi gaya gesek dengan koefisen
gesek sebesar 0,5. Profil gerak pada sumbu y tidak lagi berbentuk kuadratik, akan
tetapi menuju garis linier. Hal ini dikenal dengan kecepatan terminal, yaitu terjadi
ketika besar gaya gesek menyamai besar gaya lainnya yang bekerja pada benda
sehingga benda tidak lagi memiliki percepatan.
80
(a) 192 m2
x (px)
128
C1 = C2 = 0 m1
64
192
x (px)
128
C1 = C2 = 0,1
64
192
x (px)
128
C1 = C2 = 0,5
64
0 4 8 12 16 20
t (s)
(b) 640
C1 = C2 = 0,5
448
y (px)
256
C1 = C2 = 0,1
C1 = C2 = 0
64
0 4 8 12 16 20
t (s)
Gambar 4.7. Profil gerak benda ter-coupling pada (a) sumbu x dan (b) sumbu y sebagai fungsi
waktu dengan variasi koefisien gesek benda 0; 0,1; dan 0,5.
Pengaruh perbedaan koefisen gesek diperlihatkan oleh Gambar 4.8. Pada fenomena
ini telah kombinasi gerak benda yang sedikit kompleks. Pada kasus ini, benda 1
(hitam) tidak memiliki gaya gesek (C1 = 0), sementara benda 2 (merah) memiliki
koefisien gesek C2 sebesar 0,1. Gaya gesek yang dialami benda 2 memiliki kontribusi
ke segala arah baik pada sumbu x maupun sumbu y, sehingga pengurangan
percepatan terjadi pada kedua sumbu gerak tersebut. Sementara itu, benda 1 yang
tidak memiliki gesekan akan bergerak bebas dan memilki percepatan arah sumbu y
yang lebih besar sehingga benda 1 akan jatuh lebih cepat. Akan tetapi, benda 1
terhubung dengan benda 2 sehingga yang terjadi adalah benda 1 dibelokkan dan
membentuk pola rotasi dengan benda 2 sebagaimana disimulasikan dan diperlihatkan
oleh Gambar 4.9.
81
C1 = 0; C2 = 0.1
640 (b) m1 = 1 kg
(a)
192
x (px)
128 m2 = 1 kg
480
64
y (px)
320 0 4 8 12 16 20
t (s)
640
(c)
448
y (px)
160
256
0 64
0 128 256 0 4 8 12 16 20
x (px) t (s)
Gambar 4.8. Profil gerak benda akibat perbedaan koefisien gesek benda untuk representasi
pada (a) ruang koordinat xy, (b) sumbu x sebagai fungsi waktu, dan (c) sumbu y sebagai fungsi
waktu.
640
480
y (px)
320
160
t = 0,0s t = 2,559s t = 3,929s t = 6,369s
0
640
t = 8,109s t = 10,569s t = 12,479s t = 15,429s
480
y (px)
320
160
0
0 128 256 0 128 256 0 128 256 0 128 256
x (px)
Gambar 4.9. Posisi benda ter-coupling pada bidang xy sebagai fungsi waktu yang dipengaruhi
oleh perbedaan koefisien gesek dengan koefisien gesek benda 1 (hitam) sebesar 0 dan koefisien
gesek benda 2 (merah) sebesar 0,1.
82
Variasi lain yaitu untuk benda dengan posisi vertikal seperti pada Gambar 4.10, 4.11,
4.12, 4.13, dan 4.14 dibuat posisi benda 1 dan benda 2 dengan variasi massa benda,
serta koefisien gesek benda terhadap udara. Pada Gambar 4.10 divariasikan massa
benda m2 dengan variasi 1,5, dan 10. Sementara pada Gambar 4.12 divariasikan
massa benda m1 dengan variasi 5, dan 10.
Gambar 4.10a. Variasi massa benda m2 (kiri-kanan), m1 = m2 = 1, m2 = 5, dan m2 = 10.
83
Gambar 4.10b. Variasi massa benda m2 (kiri-kanan), m1 = m2 = 1, m2 = 5, dan m2 = 10.

Dari Gambar 4.10a dan 4.10b dapat dilihat bahwa ketika massanya kecil, akan jatuh
secara perlahan dan tidak ada pantulan saat benda mengenai dasar, sementara ketika
massa benda diperbesar, langsung terlihat adanya perbedaan yaitu pantulan yang
terjadi pada benda 1 (hitam). Pada Gambar 4.10b terlihat perbedaan yaitu di mana
benda 1 terbawa pantulan benda 2 sehingga menghasilkan terjadinya gerakan
pantulan yang kurang lazim karena terpengaruh benda 2.
84
Gambar 4.11. Variasi massa benda m1 (kiri-kanan), m1 = 5, dan m1 = 10.
Pada Gambar 4.12 dan 4.13 akan digunakan variasi koefisien gesek benda yaitu c1
dan c2, setiap variasi menggunakan nilai yang sama yaitu c1 =1, 5, dan 10. Lalu pada
simulasi berikutnya divariasikan c2 = 5 dan 10. Dari Gambar 4.13 dan Gambar 4.14
dapat dilihat perbedaan utamanya terletak pada waktu jatuh benda. Semakin besar
gaya gesek udaranya semakin lama benda jatuh ke dasar.
85
Gambar 4.12. Variasi koefisien gesek benda satu (kiri) c1 = 5 dan c2 = 1 sementara (kanan) c1 =
10 dan c2 = 1
Gambar 4.13. Variasi koefisien gesek benda dua (kiri) c2 = 5 dan c1 = 1 sementara (kanan) c2 =
10 dan c1 = 1.
86
Pada Gambar 4.15 dapat dilihat perubahan posisi turun benda dengan m1 = 5 dan c1 =
c2 = 1 yang terlihat bahwa benda 2 ketika menyentuh dasar akan terlontar sekali lagi
ke atas.
Gambar 4.14. Posisi benda jatuh dengan parameter m1 = 5, m2 = 1, c1 = c2 =1.
Berdasarkan percobaan yang telah dilakukan sebelumnya seperti pada Gambar

4.6 hingga Gambar 4.14 terlihat bahwa data yang diperoleh sudah sesuai dengan yang
diharapkan. Selanjutnya akan dilakukan percobaan mengenai variasi massa benda 1
dan benda 2, serta koefisien gesek benda 1 dan benda 2 untuk setiap waktu dan
kecepatan saat salah satu benda menyentuh permukaan tanah. Untuk variasi massa
antara benda 1 dan benda 2 yaitu 1 kg, 5 kg dan 10 kg. Sedangkan untuk variasi
koefisien gesek benda 1 dan benda 2 digunakan nilai dari 1, 3 dan 5.
87
Tabel 4.2. Waktu tempuh benda hingga menyentuh permukaan tanah.
m1-m2
1-1 1-5 1-10 5-1 5-5 5-10 10-1 10-5 10-10
t t t t t t t t t
1-1 108 40.8 32.4 40 34.2 25.8 28.6 27.2 24.8
1-3 197.8 72 43 68.4 44.2 34 258 33.6 34.8
1-5 293.2 108 60.4 182.7 61.6 44 56.2 45.4 62
3-1 197.8 69.4 41 72 68 33.4 282.8 34 34.8
c1-c2 3-3 318.6 102.8 58.4 102.8 66.8 45.2 667.4 411.8 38.4
3-5 399.6 137.6 76.8 134 82.2 58.4 96.4 107.6 46.2
5-1 293.2 99 56.2 108 94.8 45.4 121 44 63.2
5-3 399.6 134 74.6 137.6 112.2 56.5 332 69 46.2
5-5 530.4 169.8 93.6 169.2 108 70.2 534.6 70.2 57
Tabel 4.3. Kecepatan saat menyentuh tanah.
m1-m2
1-1 1-5 1-10 5-1 5-5 5-10 10-1 10-5 10-10
v v v v v v v v v
1-1 10.00 5.98 2.32 3.60 8.58 11.78 51.47 33.81 73.42
1-3 5.00 15.01 27.50 2.87 25.48 32.66 0.51 1.95 9.08
1-5 3.33 10.00 18.34 10.00 16.68 25.80 18.32 7.27 16.32
3-1 5.00 2.61 5.57 15.01 15.07 38.41 9.79 32.66 9.08
c1-c2 3-3 3.33 10.00 18.30 10.00 16.67 24.96 3.33 14.50 33.28
3-5 2.50 7.50 13.75 7.50 12.51 18.84 6.08 9.88 6.54
5-1 3.33 10.00 18.32 10.00 9.96 7.27 9.77 25.80 5.34
5-3 2.50 7.50 13.73 7.50 9.83 18.76 3.33 14.33 6.54
5-5 2.00 1.02 11.00 6.00 10.00 15.01 2.00 15.01 20.00
Berdasarkan data yang diperoleh kita tinjau waktu tempuh benda hingga menyentuh
permukaan tanah seperti pada Tabel 4.2, terlihat bahwa semakin besar massa maka
waktu yang ditempuh benda untuk sampai ke permukaan tanah semakin cepat,
misalnya pada variasi massa 1-1, 5-1 dan 10-1 pada variasi koefisien gesek yang
konstan (1-1). Untuk membuktikan lebih lanjut, dapat ditunjukkan saat waktu terlama
benda hingga mencapai permukaan tanah yaitu untuk variasi massa 1-1 yaitu 108 s,
sedangkan waktu tercepat benda hingga mencapai permukaan tanah yaitu pada variasi
10-10 yaitu 24.8 s. Selanjutanya apabila dilakukan variasi koefisien gesek, maka
88
terlihat bahwa pada Tabel 4.2 semakin besar koefisien geseknya maka semakin besar
pula waktu yang dibutuhkan benda untuk sampai ke permukaan tanah. Dapat
ditunjukkan melalui variasi massa yang sama (1-1), variasi koefisen yang berbeda (1-
1, 31-1 dan 3-1) terlihat bahwa semakin besar niali koefisien gesek maka waktunya
pun semakin besar. Sehingga, pengaruh waktu tempuh benda dengan variasi massa
dan koefisien gesek adalah semakin besar massa benda dan semakin kecil nilai
koefisien gesek maka semakin cepat benda menyentuh permukaan tanah (yaitu pada
saat variasi massa 10-10 dan variasi koefisien gesek 1-1 yaitu 24.8 s). Sebaliknya,
semakin ringan suatu benda dan semakin besar koefisien geseknya maka semakin
lama benda tersebut menyentuk permukaan tanah (seperti terlihat pada variasi massa
1-1 dan variasi koefisien gesek 5-5 yaitu 530.4 s).
Selain waktu tempuh benda menyentuh permukaan tanah, dalam penelitian ini juga
ditinjau kecepatan benda saat menyentuh tanah yang terlihat pada Tabel 4.3. Seperti
yang kita ketahui pada Fisika Dasar bahwa kecepatan berbanding terbalik dengan
waktu tempuh benda, oleh karena itu perbedaan antara Tabel 2 dan Tabel 3 tidak jauh
berbeda hanya berkebalikan saja seperti pada dilihat pada variasi (1-1,5-5) pada Tabel
4.3 memiliki warna merah karena memiliki nilai yang rendah sementara pada Tabel
4.2 memiliki warna hijau karena memiliki nilai yang tinggi. Terlihat jelas bahwa
koefisien gesek mempengaruhi kecepatan benda saat akan menumbuk tanah, tapi
kombinasi antara koefisien gesek dan massa benda dapat menghasilkan hasil yang
berbeda. Pada variasi m1-m2 (10-10) memiliki kecepatan yang cenderung menurun
tapi jika diberikan massa yang identik, akan menghasilkan kecepatan yang cukup
tinggi jika dibandingkan dengan hasil yang lain. Tabel 4.2 dan Tabel 4.3
menunjukkan bahwa bisa didapatkan variasi antara m1-m2 serta c1-c2 yang membuat
benda tidak terlalu lama di udara (waktu tempuh rendah) dan tidak terlalu cepat saat
menyentuh permukaan tanah (kecepatan rendah) seperti pada variasi massa (10-10)
dengan kombinasi variasi koefisien gesek (3-5, 5-1, dan 5-3) yang memiliki waktu
tempuh dan kecepatan yang masih jauh dibawah rata-rata dari kedua tabel.
4.6 Aplikasi
Model ini dapat diaplikasikan dalam kehidupan nyata seperti simulasi pada keamanan
penumpang pesawat dimana pesawat tersebut mengalami kecelakaan. Pada model
terdapat benda berwarna merah dan hitam. Misal dalam kasus ini benda berwarna
hitam adalah penumpang pesawat, dan benda berwarna merah adalah kursi yang
memiliki sifat cukup elastik, bebannya melebihi beban penumpang, dan mampu
menahan beban penumpang. Ketika pesawat akan jatuh, penumpang sudah otomatis
menempel pada kursi nya masing-masing (penumpang dan kursi berada dalam satu
sistem) dan sistem tersebut jatuh meninggalkan pesawat yang sudah tidak bisa
terkendali. Berikut adalah simulasinya.
89
Gambar 4.15. Profil gerak benda ter-coupling pada sumbu y sebagai fungsi waktu dengan
koefisien gaya gesek benda 1 (hitam) dan benda 2 (merah) berturut-turut adalah sebesar 5 dan
0.1
Dari Gambar 4.16 dapat dilihat bahwa ketika massa benda 1 adalah m1 = 10 kg dan
massa benda 2 adalah m2 = 80 kg, serta keduanya memiliki koefisien gesek yang
berbeda, dimana c1 = 5 dan c2 = 0.1, maka sistem akan jatuh cukup cepat. Sehingga
ketika mengenai permukaan tanah, benda 1 dan benda 2 akan terkompres oleh benda
1. Karena massa benda 2 lebih besar dari benda 1 maka benda 2 tidak mengalami
90
pergerakan lagi, sementara benda 1 mengalami pantulan. Seiring berjalannya waktu,

pantulan yang dialami benda 1 akan semakin teredam hingga benda 1 diam. Pada
Gambar 4.17 dapat dilihat perubahan posisi turun sistem. Simulasi ini sesuai dengan
gerak translasi dan terkompres, seperti Gambar 4.4.
Gambar 4.16. Posisi benda jatuh dengan parameter m1 = 10, m2 = 80, c1 = 5, c2 = 0,1.
Selain itu, sistem pengamanan untuk penumpang pesawat adalah parasut. Dalam hal
ini, sistem disimulasikan seperti Gambar 4.18 dan Gambar 4.19, dimana benda
berwarna hitam adalah parasut dan benda berwarna merah adalah penumpang
pesawat. Dari Gambar 4.17 dapat dilihat bahwa sistem bergerak turun secara linear
dari rentang t = 0 s sampai t = 52 s hingga penumpang menyentuh permukaan tanah.
Sementara parasut masih berada di atas permukaan tanah. Parasut baru menyentuh
permukaan tanah ketika t = 144 s. Hal ini dikarenakan massa parasut yang sangat
kecil dan tali yang menghubungkan parasut dengan penumpang dianggap sebagai
pegas yang cukup keras.
91
Gambar 4.17. Profil gerak benda ter-coupling pada sumbu y sebagai fungsi waktu dengan
koefisien gaya gesek pada benda 1 (hitam) sama dengan benda 2 (merah).
92
a b
Gambar 4.18. Posisi benda jatuh dengan parameter m1 = 1, m2 = 10, c1 = 5, c2 = 0,1 (a) Simulasi
sistem dalam bentuk 2 partikel terkopling (b) Simulasi pola gerak benda.
4.7 Kesimpulan
Pada simulasi ini telah ditunjukan fenomena gerak dua benda yang terkopling satu
sama lain dengan sebuah pegas. Benda dijatuhbebaskan dengan berbagai parameter
seperti variasi massa, koefisien gesek benda, dan posisi relatif masing-masing benda.
Kombinasi dari parameter-parameter tersebut mampu menghasilkan sebuah gerak
benda yang kompleks antara lain gerak translasi, gerak osilasi pegas, gerak osilasi
bandul, dan gerak rotasi. Lebih jauh lagi, simulasi yang dilakukan dapat menjadi
prediksi untuk gerak benda-benda kompleks seperti daun gugur, terjun payung, dan
gerak lainnya.
4.8 Referensi
1. Fay, T. H., dan Graham, S., D., “Coupled spring equations”, Int. J. Math.
Educ. Sci. Technol., vol. 34, no. 1, 65–79 (2003).
2. Santos, F. C., Coutinho, Y. A., Ribeiro-Pinto, L., dan Tort, A. C., “The motion
of two masses coupled to a finite mass spring”, Eur. J. Phys. 27, 1037–1051
(2006).
93
3. Ganji, S. S., Barari, A., Ganji, D. D., “Approximate analysis of two-mass-

spring systems and buckling of a column”, Computers & Mathematics with
Applications 61(4), 1088-1095 (2011).
4. Fawles, G., dan Cassiday, G., Analytical mechanics sixth edition, Harcourt
College Publishers, Fort Worth, 1998. Halaman 45-48 dan 80.
5. http://hyperphysics.phy-astr.gsu.edu/hbase/airfri.html(diakses tanggal 15 Mei
2017 pukul 15.00).
6. DeVries, P. L., A first course in computational physiscs, John Wiley & Sons,
New York, 1994. Halaman 208-215.
4.9 Lampiran
Petunjuk penggunaan program
Terdapat 3 file yaitu falling_ball_revA7.html, ball7.js, dan style.css satukan ketiga file
tersebut dalam satu folder, untuk menjalankan file falling_ball_revA7.html dapat di
doubleclick dan dibuka menggunakan browser apapun (disarankan menggunakan
browser chrome (Windows) atau chromium (Linux). Tampilan pada layar akan
menjadi seperti gambar 1.
Gambar 1. Tampilan layar ketika program falling_ball_revA7.html dibuka.
94
Audio player
Canvas 1 Canvas 2
Menjalankan simulasi Menampilkan grafik
bola terkopling posisi bola 1 dan 2
Gambar 2. Penjelasan tampilan pada layar
Canvas 3
Menampilkan grafik x(t)
Canvas 3
Menampilkan grafik y(t)
95
Textarea 1
Menampilkan simbol
parameter simulasi
Textarea 2
Input parameter simulasi
Textarea 3 Textarea 4
Output t, x, y, Vx, dan Vy Output t, x, y, Vx, dan Vy
dari benda 1 dari benda 2
Waktu simulasi
(Current time)
Button untuk mempersiapkan (siap),memulai
simulasi (mulai),dan mereset simulasi (reset)

Pada textarea1 terdapat beberapa simbol parameter yaitu x1 (posisi x bola 1), y1
(posisi y bola 1), r1 (jari-jari bola 1), c1 (koefisien gesek bola 1), dan m1 (massa bola
1). Begitu pula untuk x2, y2, r2, c2, dan m2. Gravitasi dilambangkan oleh g,
sementara L (panjang pegas), k (konstanta pegas), ti (t inisial), tf (t final), periode
(kecepatan simulasi). Parameter seperti l, dan tcur dapat diabaikan.
Cara untuk menggunakan program ini dapat dilihat pada tabel 1.
96
Tabel 1.Langkah penggunaan program

Langkah Petunjuk
1. Input parameter yang diinginkan pada Textarea2.
Tekan tombol “siap” untuk melihat apakah posisi benda
2.
sudah sesuai dengan yang diinginkan.
Jika masih belum sesuai keinginan, parameter dapat langsung
3.
diubah dan tekan tombol “siap”.
Jika sudah sesuai dengan yang diinginkan, tekan tombol
“mulai” untuk menjalankan simulasi.
4.
Tombol mulai akan berubah menjadi “berhenti” ketika
ditekan.
Tekan tombol “berhenti” untuk menghentikan simulasi
5. sementara, dan tekan tombol “mulai” untuk menjalankan
simulasi kembali
Tombol “reset” dapat digunakan untuk me-refresh layar dan
6.
simulasi.
Catatan - Perubahan parameter saat simulasi sedang berjalan tidak
akan mempengaruhi hasil simulasi.
- Jangan menekan tombol “siap” saat simulasi sedang
berjalan karena akan mengulang posisi benda dari awal
tapi menggunakan kondisi dari saat benda terakhir
Source Code Program

Terdapat 3 bagian pada source code yang telah dibuat yaitu style.css,
falling_ball_rev9.html, dan ball9.js. File style.css berisi mengenai style tabel, ukuran
canvas, textarea, dan font yang digunakan dalam file falling_ball_rev9.html. Pada file
falling_ball_rev9.html berisi program untuk tampilan yang akan dilihat pada layar
seperti posisi canvas, textarea, dan input parameter maupun output data. Sementara
file ball9.js berisi mengenai program utama yang digunakan dalam menjalankan
program ini. Berikut source code dari style.css, falling_ball_rev9.html, dan ball9.js
secara berurutan.
style.css
canvas {
background: #fff;
margin-right: 20px;
border: 1px solid gray;}
textarea {
height: 160px;
max-height: 160px;
width: 300px;
margin-right: 20px;
font-family: Arial;
97
font-size: 12px;}
spacehor {
margin-left: 20px;}
table {
margin-bottom: 10px;}
td {
font-family: Arial;
font-size: 12px;}
tr.spaceUpper > td {
padding-top: 1em;}
h1 {
color: #999;
font-family: Arial;
font-style: italic;}
div {
display: inline-block;
/*border: 1px dashed gray;*/}
input {
width: 50px;
text-align: left;
font-family: Arial;
font-size: 12px;}
button {
width: 70px;}
falling_ball_rev9.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gerak Benda Terkopel dalam Fluida</title>
<link rel="stylesheet" type="text/css"
href="style.css"/>
<script src="ball9.js"></script>
</head>
98
<body>
<audio autoplay="autoplay" controls="controls">
<source src="BeautyofHTML.mp3"
type="audio/mpeg"/>
</audio>
<h1>Gerak Benda Terkopel dalam Fluida</h1>
<table>
<tr>

<td rowspan="2">
<div><canvas id="myCanvas" width="320"
height="640"></canvas>
</div>
</td>
<td rowspan="2">
<div><canvas id="grafikxy" width="320"
</div>
</td>
<td>
<div><canvas id="grafik1" width="480"
</div>
</td>

<td rowspan="2">
<div>
<table>
<td>
<div><textarea id="tb" readonly></textarea></div>
</td>
<script>
tb.value = "x1\ty1\tr1\tm1\tc1\n";//benda1
tb.value += "x2\ty2\tr2\tm2\tc2\n"; //benda2
tb.value += "g\n"; //konstanta gravitasi
tb.value += "L\tl\tk\n"; //kondisi awal
tb.value += "deltat\ttcur\tti\ttf\tperiode"; //Parameter
// simulasi
</script>
</table>
<table>
<td>
99
<div><textarea id="hasil1"></textarea></div>
</td>
<td>
<div><textarea id="hasil2"></textarea></div>
</td>
</table>


t<sub>cur</sub> <input id="tcur"
value="0" readonly />s
<br><br>
<button id="siap" onclick="siapFunction()">
Siap
</button>

<button id="mulai" onclick="fire()">
Mulai
</button>

<button id="selesai" onclick="resetFunction()">
Reset
</button>
</div>
</td>
</tr>
<tr>
<td><div><canvas id="grafik2" width="480"
height="320"></canvas></div></td>
</tr>
</table>
<script>
var grafik1 = document.getElementById("grafik1");
var grafik2 = document.getElementById("grafik2");
var myCanvas =
document.getElementById("myCanvas");
var drawGraph = grafik1.getContext("2d");
var drawGraph2 = grafik2.getContext("2d");
var drawBall = myCanvas.getContext("2d");
var xmax = grafik1.width - (grafik1.width/10);
var ymax = grafik1.height - (grafik1.height/10);
var dx = xmax/10;
var dy = ymax/10;
/*membuat sumbu*/
makeAxis(drawGraph,dx,0,dx,ymax,0.5);
100
makeAxis(drawGraph,dx,ymax,grafik1.width,
ymax,0.5);
/*membuat grid vertikal*/
makeGrid(drawGraph,2*dx,0,2*dx,ymax,0.5);
gridText(drawGraph,
"Grafik Posisi Horizontal(x) Benda Terhadap
Waktu(t)",
grafik1.width/2,grafik1.height-10);

makeGrid(drawGraph,dx,ymax-dy,dx+xmax,
ymax-dy,0.5);
makeGrid(drawGraph,dx,ymax-2*dy, dx+xmax,
ymax-2*dy,0.5);
makeGrid(drawGraph,dx,ymax-3*dy,dx+xmax,
ymax-3*dy,0.5);
ymax-4*dy,0.5);
ymax-5*dy,0.5);
ymax-6*dy,0.5);
ymax-7*dy,0.5);
ymax-8*dy,0.5);
ymax-9*dy,0.5);
ymax-10*dy,0.5);
/*membuat teks grid horizontal*/

gridText(drawGraph,1*grafik1.height/10,
dx-15,ymax-dy+5);
dx-15,ymax-2*dy+5);
101
dx-15,ymax-3*dy+5);
dx-15,ymax-4*dy+5);
dx-15,ymax-5*dy+5);
dx-15,ymax-6*dy+5);
dx-15,ymax-7*dy+5);
dx-15,ymax-8*dy+5);
dx-15,ymax-9*dy+5);
dx-15,10);
/*membuat sumbu*/
makeAxis(drawGraph2,dx,0,dx,ymax,0.5);
makeAxis(drawGraph2,dx,ymax,grafik1.width,
ymax,0.5);
makeGrid(drawGraph2,2*dx,0,2*dx,ymax,0.5);

makeGrid(drawGraph2,dx,ymax-dy,dx+xmax,
ymax-dy,0.5);
makeGrid(drawGraph2,dx,ymax-2*dy,dx+xmax,
ymax-2*dy,0.5);
ymax-3*dy,0.5);
ymax-4*dy,0.5);
ymax-5*dy,0.5);
ymax-6*dy,0.5);
102
ymax-7*dy,0.5);
ymax-8*dy,0.5);
ymax-9*dy,0.5);
ymax-10*dy,0.5);
/*membuat teks grid horizontal*/

gridText(drawGraph2,1*myCanvas.height/10,
dx-15,ymax-dy+5);
dx-15,ymax-2*dy+5);
dx-15,ymax-3*dy+5);
dx-15,ymax-4*dy+5);
dx-15,ymax-5*dy+5);
dx-15,ymax-6*dy+5);
dx-15,ymax-7*dy+5);
dx-15,ymax-8*dy+5);
dx-15,ymax-9*dy+5);
dx-15,10);
gridText(drawGraph2,"Grafik Posisi Vertikal(y)
Benda Terhadap Waktu(t)",
grafik2.width/2,grafik2.height-10);
</script>
</body>
</html>
ball9.js
/*fungsi memulai simulasi*/
/*Variabel Inisial*/
//gacc =
parseFloat(document.getElementById("gacc").value);
103
//Variabel yg berhubungan dengan posisi

var drawBall;
var drawGraph;
var drawGraph2;
var drawGraphxy;
var period = 0; /*periode update data*/
var ax1 = 0; var ax10 = 0;/*percepatan awal horizontal*/
var ax2 = 0; var ax20 = 0;/*percepatan awal horizontal*/
var ay1 = 0; var ay10 = 0;/*percepatan awal vertikal*/
var ay2 = 0; var ay20 = 0;/*percepatan awal vertikal*/
var vx1 = 0; var vx10 = 0;/*kecepatan awal horizontal*/
var vx2 = 0; var vx20 = 0;/*kecepatan awal horizontal*/
var vy1 = 0; var vy10 = 0;/*kecepatan awal vertikal*/
var vy2 = 0; var vy20 = 0;/*kecepatan awal vertikal*/
var first = true;
var timer1;
var i = 0;
var tdat = 0;
var xdat1 = 0; var ydat1 = 0;
var xdat2 = 0; var ydat2 = 0;
var vxdat1 = 0; var vydat1 = 0;
var vxdat2 = 0; var vydat2 = 0;
var g = 0; /*konstanta gravitasi (dalam m/s^2)*/

var deltay = 0;
var deltax = 0;
/*End Variabel Inisial*/
/*Variabel Input*/
//Benda 1
var x1 = 0; var x10 = 0;/*posisi awal benda 1
horizontal*/
var y1 = 0; var y10 = 0;/*posisi awal benda 1 vertikal*/
var R1 = 0; /*jari-jari benda 1*/
var c1 = 0; /*konstanta viskositas benda 1*/
var m1 = 0; /*massa benda 1 (dalam kg)*/
//Benda 2
var x2 = 0; var x20 = 0;/*posisi awal benda 2
horizontal*/
var y2 = 0; var y20 = 0;/*posisi awal benda 2vertikal*/
var R2 = 0; /*jari-jari benda 2*/
var beta = 0; /*sudut awal*/
var c2 = 0; /*konstanta viskositas benda 2*/
var m2 = 0; /*massa benda 2 (dalam kg)*/
104
//Variabel yang bergantung benda 1-2

var l = 0; /*panjang pegas (dalam m)*/
var L = 50; var L0 = L;/*besar posisi antara x1 dan x2*/
var k = 0; /*konstanta pegas*/
var deltal = 0; /*perubahan panjang pegas*/
//Variabel simulasi
var dt = 0; /*perubahan waktu*/
var ti = 0;
var tf = 0;
var tcur = 0;
/*End Variabel Input*/
var hasil = "";
var hasilawal = "";
/*warna*/
var black = "#000000";
var red = "#ff0000";
var green = "#00ff00";
var blue = "#0000ff";
var yellow = "#ffff00";
var cyan = "#00ffff";
var magenta = "#ff00ff";
var white = "#ffffff";
var gray = "#cccccc";
function fire() {
if (first)
{read();}
toggle();
}
function read() {
var lines = new Array;
lines = ta.value.split("\n");
var N = lines.length;
for (var b=0; b<N; b++){
var terms = lines[b].split("\t");
if (b==0)
{
x1 = parseFloat(terms[0]); /*posisi awal
benda 1 horizontal*/
y1 = parseFloat(terms[1]); /*posisi awal
benda 1 vertikal*/
105
R1 = parseFloat(terms[2]); /*jari-jari benda

1*/
m1 = parseFloat(terms[3]); /*konstanta
viskositas benda 1*/
c1 = parseFloat(terms[4]); /*massa benda 1
(dalam kg)*/
}
else if (b==1)
{
x2 = parseFloat(terms[0]); /*posisi awal
benda 2 horizontal*/
y2 = parseFloat(terms[1]); /*posisi awal
benda 2 vertikal*/
R2 = parseFloat(terms[2]); /*jari-jari benda
2*/
m2 = parseFloat(terms[3]); /*konstanta
viskositas benda 2*/
c2 = parseFloat(terms[4]); /*massa benda 2
(dalam kg)*/
}
else if (b==2)
{
g = parseFloat(terms[0]);
}
else if (b==3)
{
L = parseFloat(terms[0]); /*panjang pegas
awal (dalam m)*/
l = parseFloat(terms[1]); /*panjang pegas
awal (dalam m)*/
k = parseFloat(terms[2]); /*konstanta pegas*/
}
else if (b==4)
{
dt = parseFloat(terms[0]); /*perubahan
waktu*/
ti = parseFloat(terms[2]);
tf = parseFloat(terms[3]);
period = parseFloat(terms[4]);
}
}
document.getElementById('hasil1').value =
document.getElementById('hasil1').value + ti
+ "\t" + x1 + "\t" + y1 + "\t" + vx1 + "\t"
+ vy1 + "\t" + "\n";
106
document.getElementById('hasil2').value + ti
+ "\t" + x2 + "\t" + y2 + "\t" + vx2
+ "\t" + vy2 + "\t" + "\n";
}
function toggle() {
if(event.target.innerHTML == "Berhenti") {
// Stop simulation
event.target.innerHTML = "Mulai";
clearInterval(timer1);
} else {
// Run simulation
event.target.innerHTML = "Berhenti";
timer1 = setInterval(mulaiFunction, period);
}
}
function clearCurrentFigure() {
var ctx1 = myCanvas.getContext("2d");
var ctx2 = grafik1.getContext("2d");
ctx1.fillStyle = "#fff";
ctx1.fillRect(0,0,320,640);
ctx2.fillStyle = "#fff";
ctx2.fillRect(0,0,480,320);
}
// Reset simulation
function resetFunction() {
location.reload();
}
/* FUNGSI MEMBUAT GRAFIK*/

function graph(plot,xpos,ypos,dotsize,color) {
plot.beginPath();
plot.fillStyle=color;
plot.arc(xpos,ypos,dotsize,0,Math.PI*2,true);
plot.closePath();
plot.fill();
}
/* FUNGSI MEMBUAT GRID */

function makeGrid(grid,xi,yi,xf,yf,linesize) {
grid.setLineDash([2, 4]);
grid.beginPath();
grid.moveTo(xi,yi);
107
grid.lineTo(xf,yf);
grid.lineWidth = linesize;
grid.strokeStyle = black;
grid.stroke();
}
/* FUNGSI MEMBUAT AXIS */

function makeAxis(axis,xi,yi,xf,yf,linesize) {
axis.beginPath();
axis.moveTo(xi,yi);
axis.lineTo(xf,yf);
axis.lineWidth = linesize;
axis.strokeStyle = black;
axis.stroke();
function gridText(text,value,xdat,ydat) {
text.font = "10px Arial";
text.fillStyle = black;
text.textAlign = "center";
text.fillText(value,xdat,ydat);
}
function siapFunction(){
read();
drawBall= myCanvas.getContext('2d');
drawBall.clearRect(0,0,myCanvas.width,myCanvas.height);
drawBall.beginPath();
drawBall.fillStyle="#000000";
drawBall.arc(x1,y1,R1,0,Math.PI*2,true);
drawBall.closePath();
drawBall.fill();
drawBall.moveTo(x1,y1);
drawBall.lineTo(x2,y2);
drawBall.lineWidth =2;
drawBall.stroke();
drawBall.fillStyle="#ff0000";
drawBall.fill();
108
gridText(drawGraph,0*tf/10,1*dx,ymax+10);
gridText(drawGraph,10*tf/10,(11*dx)-5,ymax+10);
gridText(drawGraph2,0*tf/10,1*dx,ymax+10);
gridText(drawGraph2,10*tf/10,(11*dx)-5,ymax+10);
}
function mulaiFunction() {
if(first){
first = false;
//Variabel global / Konstanta
deltay = 0;
deltax = 0;
/*End Variabel Inisial*/
/*Variabel Input*/
//Benda 1
x10 = x1;
y10 = y1;
//Benda 2
x20 = x2;
y20 = y2;
beta = 0; /*sudut awal*/
//Variabel yang bergantung benda 1-2

L0 = L;
109
/*End Variabel Input*/}
else {
i++;
var tii = ti.toFixed(3);
var x = x1.toFixed(2);
var y = 640-y1.toFixed(2);
var xx = x2.toFixed(2);
var yy = 640-y2.toFixed(2);
var vx = vx1.toFixed(2);
var vy = vy1.toFixed(2);
var vxx = vx2.toFixed(2);
var vyy = vy2.toFixed(2);
if(i%10==0)
{
document.getElementById('hasil1').value
+ tii + "\t" + x + "\t" + y + "\t" + vx
+ "\t" + vy + "\t" + "\n";
document.getElementById('hasil2').value
+ tii + "\t" + xx + "\t" + yy + "\t" + vxx
+ "\t" + vyy + "\t" + "\n";
}
else{}
//Untuk display data pada textarea.
deltay = y2 - y1;
deltax = x2 - x1;
beta = Math.abs(Math.atan(deltay/deltax));
l = Math.sqrt((deltax*deltax)+(deltay*deltay));
deltal = l - L;
/*nilai percepatannya benda*/
if(x1 <= x2) {
if (y1 <= y2){
if (l >= L){
ax1 = (k*Math.abs(deltal*deltax/l)*(Math.cos(beta)) -
(c1*vx1)) / m1;
ay1 = (k*Math.abs(deltal*deltay/l)*(Math.sin(beta)) +
(m1*g) - (c1*vy1)) / m1;
ax2 = (-k*Math.abs(deltal*deltax/l)*(Math.cos(beta)) -
(c2*vx2)) / m2;
ay2 = (-k*Math.abs(deltal*deltay/l)*(Math.sin(beta)) +
(m2*g) - (c2*vy2)) / m2;
}
if (l < L){
110
(c1*vx1)) / m1;
(m1*g) - (c1*vy1)) / m1;
(c2*vx2)) / m2;
(m2*g) - (c2*vy2)) / m2; }}
if (y1 > y2){

if (l >= L){
(c1*vx1)) / m1;
(m1*g) - (c1*vy1)) / m1;
(c2*vx2)) / m2;
(m2*g) - (c2*vy2)) / m2;
}
if (l < L){
(c1*vx1)) / m1;
(m1*g) - (c1*vy1)) / m1;
(c2*vx2)) / m2;
(m2*g) - (c2*vy2)) / m2; }}}
if(x1 > x2) {

if (y1 <= y2){
if (l >= L){
(c1*vx1)) / m1;
(m1*g) - (c1*vy1)) / m1;
(c2*vx2)) / m2;
(m2*g) - (c2*vy2)) / m2;
}
if (l < L){
(c1*vx1)) / m1;
111
(m1*g) - (c1*vy1)) / m1;

(c2*vx2)) / m2;
(m2*g) - (c2*vy2)) / m2; }}
if (y1 > y2){

if (l >= L){
ax1 = (-
k*Math.abs(deltal*deltax/l)*(Math.cos(beta)) - (c1*vx1))
/ m1;
(m1*g) - (c1*vy1)) / m1;
(c2*vx2)) / m2;
(m2*g) - (c2*vy2)) / m2;
}
if (l < L){
(c1*vx1)) / m1;
(m1*g) - (c1*vy1)) / m1;
(c2*vx2)) / m2;
(m2*g) - (c2*vy2)) / m2;
}}}
/*nilai kecepatan benda*/

vx1 = vx1 + (ax1*dt);
vy1 = vy1 + (ay1*dt);
vx2 = vx2 + (ax2*dt);
vy2 = vy2 + (ay2*dt);
if(y1 >= 640-R1) {

vy1 = - 0.2 * vy1; }
if(y2 >= 640-R2) {

vy2 = - 0.2 * vy2;}
/*nilai posisi benda*/

x1 = x1 + (vx1*dt);
y1 = y1 + (vy1*dt);
x2 = x2 + (vx2*dt);
y2 = y2 + (vy2*dt);
112
}
drawBall= myCanvas.getContext('2d');
drawBall.clearRect(0,0,myCanvas.width,myCanvas.height);
drawBall.fillStyle="#000000";
drawBall.fill();
drawBall.moveTo(x1,y1);
drawBall.lineTo(x2,y2);
drawBall.lineWidth =2;
drawBall.stroke();
drawBall.fillStyle="#ff0000";
drawBall.fill();
/*grafik x benda 1*/

drawGraph = grafik1.getContext('2d');
drawGraph2 = grafik2.getContext("2d");
drawGraphxy = grafikxy.getContext('2d');
var xmax = grafik1.width - (grafik1.width/10);
var ymax = grafik1.height - (grafik1.height/10);
var yymax1 = y1 * grafik2.height / myCanvas.height -
(y1 * grafik2.height / myCanvas.height/10);
var yymax2 = y2 * grafik2.height / myCanvas.height -
(y2 * grafik2.height / myCanvas.height/10);
var dx = xmax/10;
var dy = ymax/10;
graph(drawGraph,dx+(ti*(xmax)/tf),(ymax-
x1),0.5,black);
graph(drawGraph,dx+(ti*(xmax)/tf),(ymax-x2),0.5,red);
graph(drawGraph2,dx+(ti*(xmax)/tf),(yymax1),0.5,black);
graph(drawGraph2,dx+(ti*(xmax)/tf),(yymax2),0.5,red);
/*membuat teks grid vertikal*/
graph(drawGraphxy,x1,y1,0.5,black);
graph(drawGraphxy,x2,y2,0.5,red);
113
ti=ti+dt;
l = l;
tdat = ti.toFixed(2);
xdat1 = x1.toFixed(2);
ydat1 = y1.toFixed(2);
xdat2 = x2.toFixed(2);
ydat2 = y2.toFixed(2);
vxdat1 = vx1.toFixed(2);
vydat1 = vy1.toFixed(2);
vxdat2 = vx2.toFixed(2);
vydat2 = vy2.toFixed(2);
hasil+=tdat+"\t"+xdat1+"\t"+ydat1+"\t"+xdat2+"\t"+ydat2+"
\t"+vxdat1+"\t"+vydat1+"\t"+vxdat2+"\t"+vydat2+"\n";
// Update parameters
document.getElementById("tcur").value = ti+dt;
ti=ti+dt;
// Terminate simulation
if(ti > tf) {
document.getElementById("mulai").innerHTML =
"Mulai";
document.getElementById("mulai").disabled =
true;
first = false;}}
114
Model klasik resonansi Fano
5
A. Momang Yusuf | tho.mhaniepy@gmail.com
Anna Fitriana | annafphy@gmail.com
Dina Rahmawati | dinarahma1993@gmail.com
Irhas | irhashasbiullah1@gmail.com
Muthaharah Yunus | muthaharahyunus@gmail.com
Putri Mustika Widartiningsih | putrimw.itb@gmail.com
Resonansi Fano memiliki ciri khas interferensi yang menarik di mana kurva resonansi
yang dihasilkan berbentuk asimetri. Resonansi ini memiliki lebar spektrum yang lebih
sempit dan sensitif sehingga menjanjikan aplikasi yang luas pada sensor, penguat,
laser, dan sensing. Dalam model klasik, resonansi Fano dapat dimodelkan dengan
sistem osilasi massa terkopel yang dikenai gaya luar dan redaman. Untuk
menyelesaikan persamaan osilasi terkopel tersebut digunakan metode numerik
Runge-Kutta orde 4. Pemodelan klasik resonansi Fano sudah dilakukan dengan
variasi parameter frekuensi, konstanta kopling, faktor damping, dan gaya eksternal
untuk memperoleh fitur asimetrik Posisi resonansi sangat ditentukan oleh frekuensi
alamiah kedua pegas (faktor utama), faktor damping, dan konstanta kopling,
sedangkan tinggi resonansi ditentukan oleh besar gaya eksternal. Semakin besar
faktor damping, amplitudo simpangan yang dihasilkan semakin kecil.
5.1 Pendahuluan
Resonansi Fano telah menjadi kajian yang menarik khususnya dalam bidang
plasmonik setelah gejala resonansi ini pertama kali dipelajari oleh Ugo Fano dalam
bidang spektroskopi atom [1]. Resonansi Fano menunjukkan fenomena hamburan
resonansi yang unik dengan bentuk kurva yang asimetris yang dapat ditemukan dalam
bidang optik pada peristiwa anomali Wood [2], interaksi resonansi Bragg dengan pita
Fabry-Perot dalam kristal fotonik [3], serta proses transmisi dan pemantulan pada
lempeng kristal fotonik [4].
Karakteristik dan kelebihan resonansi Fano adalah memiliki profil asimetris, lebar
spektrum yang sempit, dan lebih sensitif dibandingkan dengan resonansi Lorentzian.
Dengan karakteristik seperti ini, resonansi Fano banyak diterapkan pada berbagai
bidang, misalnya dalam penyaringan optik, penyeleksi polarisasi, penginderaan, laser,
modulator dan optik nonlinear.
Meskipun merupakan gejala kuantum dan optik, gejala resonansi Fano ternyata dapat
digambarkan dengan sebuah sistem mekanika klasik berupa sistem osilator pegas-
massa terkopel (coupled mass-spring oscillator). Dalam RBL ini, kami
115
Komputasi Fisika 3: 5 Model klasik resonansi Fano
memvisualisasikan dan mempelajari resonansi Fano dengan menggunakan analogi

klasik di atas dengan parameter-parameter yang divariasikan seperti konstanta pegas,
koefisien gesek (b), frekuensi ( ω ), dan amplitudo (a) yang dapat diubah. Melalui
analogi sistem osilator pegas massa yang terkopel ini, akan ditunjukkan bahwa bentuk
kurva asimetrik resonansi Fano dapat diperoleh. Dengan demikian, pengkajian sistem
osilator pegas massa yang terkopel dapat memberikan gambaran terhadap fenomena
resonansi Fano.
5.2 Teori
Kurva asimetris dalam resonansi Fano adalah hasil interferensi dari resonansi
transmisi dan resonansi pantul (refleksi) yang dapat dianggap sebagai interaksi dua
gelombang. Amplitudo pertama adalah amplitudo hamburan dari gelombang datang
yang berbentuk kontinu dan amplitudo kedua berasal dari gelombang radiasi yang
ditimbulkan oleh penghambur yang bersifat diskrit (terlokalisasi). Gambar 5.1
menunjukan kurva hubungan antara amplitudo terhadap frekuensi, Fano menunjukkan
bahwa amplitudo kedua memiliki bentuk yang kecil dan tajam sehingga akan
memberikan resolusi dan ketelitian yang baik.
Gambar 5.1. Perilaku resonansi osilator terkopel ditunjukkan oleh amplitudo pertama (kiri) dan
amplitudo kedua (kanan) sebagai fungsi frekuensi [3]. Parameter yang digunakan v12 = 0.1, b1 =
0.025, a1 = 0.1, ω2 = 0.1.
Analogi klasik resonansi Fano dapat digambarkan oleh osilasi terkopel dari sistem
dua massa (coupled-mass-spring oscillation system) yang diperlihatkan dalam gambar
berikut.
Gambar 5.2. Model klasik resonansi fano digambarkan oleh sistem dua massa yang dikopel.
Persamaan gerak untuk sistem dua osilasi pegas-massa terkopel (coupled-mass-spring
oscillation system) seperti pada Gambar 5.3 adalah
116
&x&1 + b1 x&1 + ω1 2 x1 + v12 x 2 = a1e iωt , (5.1)
&x&1 + b2 x& 2 + ω 2 2 x 2 + v12 x1 = a 2 e iωt , (5.2)

di mana b1 menyatakan koefisien gesekan pada massa 1, b2 menyatakan koefisien
gesekan (faktor damping) pada massa 2, v12 menyatakan konstanta kopling (coupling
factor), serta ω1 dan ω2, masing-masing adalah frekuensi osilasi alamiah sistem
massa-pegas 1 (osilator 1) dan massa-pegas-2 (osilator 2). Solusi keadaan tunak
(steady state solution) dari perpindahan masing-masing osilator dinyatakan oleh
Persamaan (5.3)
x1 = c1e iωt , x 2 = c 2 e iωt , (5.3)
di mana c1 dan c2 masing-masing menyatakan amplitudo osilasi partikel 1 dan 2.
Persamaan (5.3) kemudian dimasukkan ke dalam persamaan (5.1) dan (5.2), akan
diperoleh
− ω 2 c1 + ω1 c1 + v12 c 2 = a1
2
(5.4)
− ω 2 c 2 + ω 2 c 2 + v12 c1 = a 2 ,
2
(5.5)
yang dapat dituliskan dalam bentuk perkalian matriks sebagai berikut

(
 ω1 2 − ω 2 ) v12  c1   a1 
  =   ,

 v12 ( ω2 − ω 2
2
) c   a 
 2   2 
(5.6)
di mana pada pemodelan resonansi Fano ini kita meninjau mode terang (bright mode)
dan mode gelap (dark mode) sehingga koefisien a2 dipilih bernilai nol (a2 = 0) Maka
koefisien amplitudo c1 dan c2 dapat diperoleh dengan metode inversi matriks
menghasilkan
c1 =
(
a1 ω2 − ω 2 + iωb2 − a2 v12
2
)
(ω 1
2 2
)(
− ω + iωb1 ω2 − ω + iωb2 − v12
2 2
) 2 , (5.7a)
c2 =
(
a1v12 − ω1 − ω 2 + iωγ 2 a2
2
)
(
v12 − ω1 − ω + iωγ 1 ω 2 − ω 2 + iωγ 2
2 2 2
)( 2
). (5.7b)
5.3 Metode numerik

Metode numerik yang digunakan untuk menyelesaikan persamaan diferensial adalah
metode Runge-Kutta orde ke-4. Dibandingkan dengan metode Euler, metode ini
memberikan hasil perhitungan yang lebih teliti karena didasarkan pada pemanfaatan
suku-suku orde yang lebih tinggi dalam ekspansi deret Taylor. Selain itu, metode
Runge-Kutta juga memberikan hasil yang stabil, dan “self-starting” dalam arti bahwa
117
tidak diperlukan untuk melakukan metode integrasi awal sebagai kasus khusus dalam
proses integrasinya.
Metode Runge Kutta orde ke-4 digunakan dalam tulisan ini untuk memperoleh
besaran-besaran gerak pada sistem pegas terkopel dengan 2 massa yakni posisi sesaat
massa ke-i yakni xi(t) dengan i = 1 atau 2 dan kecepatan sesaat vi(t). Persamaan
defferensial orde dua dimodifikasi dengan menggunakan
u i = x& i , (5.12)
sehingga menjadi persamaan gerak osilasi terkopel yang melibatkan massa ke-i‘ ≠ i
u& i + γ i u i + ω i xi + vii′ xi′ = ai e iωt ,
2
(5.13)
Di mana u& i merepresentasikan percepatan massa ke-i dapat dituliskan dalam

u& i = f (vii ' , xi , xi′ , t ) . (5.14)
Kecepatan sesaat ui(t) dinyatakan dalam iterasi j dalam algoritma Runge-Kutta
sebagai uij sehingga saat (t+h) kecepatan dan posisi sesaat masing-masing dinyatakan
dalam uij+1 dan dalam xij+1 yang dapat diperoleh dari algoritma Runga Kutta orde ke-
4 melalui konstanta – konstanta berikut
l ij 0 = vij (5.15a)
k ij 0 = f (vij , xij , xi′j , t j ) (5.15b)
1
l ij1 = vij + k ij 0 h (5.15c)
2
 1 1 1 1 
k ij1 = f  vij + k ij 0 h, xij + l ij 0 h, xi′j + l i′j 0 h, t j + h  (5.15d)
 2 2 2 2 
1
l ij 2 = vij + k ij1 h , (5.15e)
2
 1 1 1 1 
k ij 2 = f  vij + k ij1 h, xij + lij1 h, xi′j + l i′j1h, t j + h  , (5.15f)
 2 2 2 2 
1
l ij 3 = vij + k ij 2 h , (5.15g)
2
 1 1 1 1 
k ij 3 = f  vij + k ij 2 h, xij + l ij 2 h, xi′j + l i′j 2 h, t j + h  (5.15h)
 2 2 2 2 
yang akan menghasilkan
u ij +1 = u ij + h(k ij 0 + 2k ij1 + 2k ij 2 + k ij 3 ),
1
(5.16a)
6
118
xij +1 = xij + h(lij 0 + 2l ij1 + 2l ij 2 + lij 3 ) .

1
(5.16b)
6
5.4 Algoritma
Simulasi gerak osilasi dua benda terkopel menggunakan metode komputasi Runge
Kutta untuk mendapatkan perubahan posisi benda setiap waktu
L1. m1, m2, k1, k2, k3, b1, b2, ω1, ω2, ω, A1, A2, x1, x2, x1’, x2’, v1, v2, v12?
L2. γ?
L3. dt?
L4. t=0.
L5. f1(v1, x1, x2, t) = A1 cos(ωt)-b1v1ω12- v12(x1’- x1)-( x2’- x2).
L6. f1(v2, x2, x1, t) = A2 cos(ωt)-b2v2ω22- v12(x2’- x2)-( x1’- x1).
L7. k10 = f1, k20 = f2, l10 = v1, l20 = v2.
L8. k11 = f1(v1+0.5k10 dt, x1+0.5l10 dt, x2+0.5l20 dt, dt).
L10. l11 = v1+0.5k11 dt.
L11. l21 = v2+0.5k21 dt.
L14. l12 = v1+0.5k11 dt.
L15. l22 = v2+0.5k21 dt.
L16. k13 = f1(v1+0.5k12 dt, x1+0.5l12 dt, x2+0.5l22 dt, t+dt).
L17. k23 = f2(v2+0.5k22 dt, x2+0.5l22 dt, x1+0.5l12 dt, t+dt).
L18. l13 = v1+k12 dt.
L19. l23 = v2+k22 dt.
L20. v1 = v1 + 1/6*h(k10+2k11+2k12+ k13.
L21. v2 = v2 + 1/6*h(k20+2k21+2k22+ k23.
L22. x1 = x1 + 1/6*h(l10+2l11+2l12+ l13.
L23. x2 = x2 + 1/6*h(l20+2l21+2l22+ l23.
L24. t = t+dt.
L25. Click ‘stop’ button? → No = L8, Yes = Finish.
119
5.5 Hasil dan Analisis

Untuk melihat fenomena asimetrik, sistem osilasi dibedakan menjadi mode terang
(bright mode) dan mode gelap (dark mode). Perbedaan mode ini didasarkan pada
besarnya gaya yang diberikan di masing – masing osilator di mana pada mode terang
diberikan a1 ≠ 0 sedangkan mode gelap diberikan oleh a2 = 0. Batasan yang digunakan
dalam RBL ini adalah massa kedua benda yang sama sehingga frekuensi alamiah
kedua benda ditentukan konstanta pegas yang terkait.
Seperti yang telah dijelaskan pada pendahuluan dan teori, bahwa karakteristik
resonansi Fano adalah memiliki lebar spektrum yang sempit. Untuk mencapai
karakteristik ini, frekuensi alami benda mode terang dan gelap tidak sama.
(a) (b)
Gambar 5.3. Grafik amplitudo terhadap frekuensi (a) ω1 = 1 dan ω2 = 1.21

(b) ω1 = ω2 = 1 dengan nilai a1 = 1, a2 = 0.
Terlihat pada Gambar 5.3a bahwa puncak spektrum berada di frekuensi yang sama
dengan frekuensi alami masing-masing benda. Lokasi puncak sprektrum inilah yang
digunakan untuk mengkarakterisasi material. Sedangkan pada Gambar 5.3b terlihat
bahwa jika digunakan frekuensi yang sama, pada frekuensi tersebut amplitudonya
bernilai minimum, karena sifatnya yang saling menghilangkan ketika digabungkan.
Sifat ini tidak dapat digunakan untuk mengkarakterisasi bahan, karena puncak
spektrun tidak dapat diketahui. Sehingga pada penelitian ini, nilai frekuensi alami
yang digunakan adalah ω1 = 1 dan ω2 = 1.21.
Parameter lainnya yang akan dibuat konstan diantaranya gaya eksternal untuk mode
gelap a2, massa benda, posisi awal benda xA dan xB dan simpangan awal benda xA‘
dan xB‘ . Parameter osilasi untuk beberapa kondisi diberikan dalam Tabel 5.1.
120
Tabel 5.1. Variasi parameter osilasi dengan parameter konstan m1=m2=1, a2=0, ω=2, ω1=1,
ω2=1.21, xA = 4, xB = 8, xA‘ = 4.5, xB‘ = 8.5.
Parameter I II III IV V VI VII VIII
a1 1 1 1 0.1 0.5 1.2 1 2
b1 0.02 0.02 0.02 0.02 0.02 0.02 0.4 2
b2 0 0 0 0 0 0 0 0
v12 0.1 0.5 1 0.1 0.1 0.1 0.1 0.1
Parameter yang dapat divariasikan adalah besar gaya yang dikenakan pada benda
mode terang a1, koefisien gesek benda terang b1, dan konstanta kopling v12.
(a)
(b)
(c)
Gambar 5.4. Pengaruh nilai konstanta kopling v12 dengan parameter konstan m1=m2=1, a2=0,
ω=2, ω1=1, ω2=1.21, xA = 4, xB = 8, xA‘ = 4.5, xB‘ = 8.5 (a) v12 = 0.1 (b) v12 = 0.5 (c) v12 = 1.
Konstanta kopling mereprentasikan perilaku dari pengaruh konstanta pegas yang
menghubungkan kedua massa. Berdasarkan hasil yang ditunjukkan pada Gambar 5.4,
kenaikan v12 memperjelas puncak gelombang. Saat v12 bernilai 0.1, terlihat dalam satu
gelombang terdapat dua puncak yang berimpit, kemudian saat v12 0.5, perbedaan
kedua puncak tersebut menjadi semakin jelas dan saat v12 bernilai 1, kontras antara
121
puncak satu dan puncak dua semakin besar dan membentuk satu gelombang baru,
jumlah gelombang lebih banyak dari konfigurasi nilai parameter sebelumnya.
(a) (b)
(c) (d)
Gambar 5.5. (a) Respon amplitudo terhadap frekuensi untuk mode terang, (b) respon amplitudo
terhadap frekuensi untuk mode gelap, (c) respon fasa terhadap frekuensi untuk mode terang,
dan (d) respon fasa terhadap frekuensi untuk mode terang m1=m2=1, a2=0, ω=2, ω1=1,
ω2=1.21, xA=4, xB=8, xA‘=4.5, xB‘=8.5 (a) v12=0.1
(b) v12=0.5 (c) v12=1.
Respon amplitudo dan fasa terhadap frekuensi ditunjukkan pada Gambar 5.5.
Resonansi mode terang terjadi pada frekuensi di sekitar frekuensi alamiah kedua
massa-pegas ( ω1=1 dan ω2=1.21) dimana puncak akan bernilai nol tepat pada
frekuensi alamiah ω2 sesuai dengan Persamaan (5.7a). Dari persamaan tersebut, dapat
terlihat bahwa amplitudo mode terang sangat sensitif terhadap perubahan frekuensi.
sedangkan mode gelap sangat sensitif terhadap kekuatan kopling.
Pada mode gelap puncak resonansi bergeser ke kiri akibat pengaruh kopling yang
diberikan berdasarkan Persamaan (5.7b). Untuk frekuensi di bawah ω1, baik mode
terang maupun mode gelap berada dalam satu fasa, sedangkan pada frekuensi di
antara ω1 dan ω2 terdapat perbedaan fasa sebesar π walaupun terdapat loncatan yang
tajam pada frekuensi di sekitar frekuensi alamiah. Pada frekuensi di atas ω2, kedua
122
mode kembali memiliki fasa yang sama. Dengan demikian frekuensi alamiah sangat
mempengaruhi perilaku respon amplitudo dan fasa osilasi.
(a)
(b)
(c)
Gambar 5.6. Pengaruh besar gaya eksternal a1 pada mode terang dengan parameter konstan
m1=m2=1, a2=0, ω=2, ω1=1, ω2=1.21, xA =4, xB = 8, xA‘=4.5, xB‘ =8.5, v12 = 0.1 (a) a1=0.1 (b)
a1=0.5 (c) a1=1.2.
Respon simpangan gerakan mode terang dan mode gelap berbeda terhadap gaya
eksternal a1. Jika pada mode terang, semakin besar gaya eksternal, semakin besar
simpangan gerakannya. Sedangkan untuk mode gelap, semakin besar gaya eksternal,
semakin kecil simpangan gerakannya serta modulasi amplitudo terhadap frekuensi
semakin terlihat. Namun demikian pengaruh gaya eksternal terhadap mode gelap
tidaklah sebesar mode terang. Fasa dan bentuk gelombang gerak sama, hanya berbeda
pada nilai amplitudonya. Sedangkan gaya eksternal pada benda mode terang dapat
memunculkan puncak baru dimana semakin besar gaya eksternalnya puncak baru
yang muncul semakin terlihat.
123
Mode Terang Mode Gelap
(a)
(b)
(c)
Gambar 5.7. Respon amplitudo terhadap frekuensi untuk benda mode terang dan mode gelap
dengan parameter konstan m1=m2=1, a2=0, ω=2, ω1=1, ω2=1.21, xA =4, xB = 8, xA‘=4.5, xB‘ =8.5,
v12 = 0.1 (a) a1=0.1 (b) a1=0.5 (c) a1=1.2.
Perbedaan respon ini dijelaskan dengan gambar respon amplitudo terhadap frekuensi.
Puncak spektrum pada mode terang dan mode gelap berada pada posisi yang berbeda.
Jika pada mode terang puncak tertinggi berada di ~1 atau di sekitar ω1=1, sedangkan
puncak tertinggi mode gelap berada di ~1.2 atau di sekitar ω2=1.21. Fitur respon fasa
baik mode terang maupun mode gelap tidak mengalami perubahan dari variasi
sebelumnya karena gaya eksternal a1 pada kasus ini (a2=0) mempengaruhi tinggi
resonansi bukan posisi frekuensi resonansi.
124
(a)
(b)
(c)
Gambar 5.8. Pengaruh koefisien gesek b1 pada mode terang dengan parameter konstan
m1=m2=1, a1=1, a2=0, ω=2, ω1=1, ω2=1.21, xA =4, xB = 8, xA‘=4.5, xB‘=8.5, v12 = 0.1 (a) b1=0.02
(b) b1=0.4 (c) b1=2.
Besarnya koefisien gesek berpengaruh pada perilaku gerak benda mode terang.
Berdasarkan grafik simpangan terhadap waktu, semakin besar koefisien gesek,
semakin kecil simpangan benda mode terang. Sedangkan mode gelap hanya
terpengaruh sedikit. Saat koefisien gesek besar, simpangan gerak osilasi benda mode
gelap cenderung stabil. Berbeda dengan perilaku benda mode gelap saat diberi
koefisien gesek kecil, yaitu pergerakannya memiliki amplitudo yang berubah-ubah.
Besarnya gaya gesek atau koefisien gesek juga berpengaruh pada grafik respon
amplitudo dan respon fasa benda, seperti yang ditampilkan pada Gambar 5.7.
125
(a) (b)
(c) (d)
Gambar 5.9. (a) Respon amplitudo terhadap frekuensi untuk mode terang, (b) respon amplitudo
terhadap frekuensi untuk mode gelap, (c) respon fasa terhadap frekuensi untuk mode terang,
dan (d) respon fasa terhadap frekuensi untuk mode terang m1=m2=1, a1=1, a2=0, ω=2, ω1=1,
ω2=1.21, xA =4, xB = 8, xA‘=4.5, xB‘=8.5, v12 = 0.1 b1=0.4.
Parameter damping dapat diatur berdasarkan orde kecepatannya, dinamakan damping
orde ke- n sebagai kebergantungan terhadap ≈vn. Selanjutnya kita meninjau faktor
orde damping di mana pada kasus sebelumnya kita gunakan pangkat 1 yakni ≈v.
Osilasi yang terjadi menunjukkan adanya fluktuasi amplitudo dengan periode tertentu
seolah-olah seperti peristiwa pelayangan. Gambar 5.9 menunjukkan hubungan antara
frekuensi sudut pada gaya luar yang kita berikan terhadap periode fluktuasi amplitudo
pada Semakin besar frekuensi yang diberikan, periode fluktuasi semakin kecil.
Amplitudo mode gelap mengalami fluktuasi atau modulasi sangat kecil. Hal ini
disebabkan karena benda 2 tidak mengalami gaya gesek dan tidak dikenai gaya luar
sehingga osilasi secara dominan ditentukan oleh frekuensi alamiah benda. Akan tetapi
karena pengaruh kopling, amplitudo juga akan mengalami fluktuasi di mana fluktuasi
akan semakin besar pada frekuensi lebih tinggi.
Sedangan pada benda 1 (mode terang), kita berikan gaya dan gaya gesek sehingga
gerakannya menjadi tidak simetris akibat adanya damping. Semakin besar orde
damping pada rentang frekuensi rendah ω = 0.1 – 0.5 perbedaan periode modulasi
126
semakin terlihat. Namun pada frekuensi sangat rendah yakni (0 – 0.2 ) , untuk orde 2,
3, dan 4 periode hampir berhimpit. Semakin tinggi frekuensi periode modulasi
semakin kecil.
Gambar 5.10 Periode modulasi amplitudo terhadap frekuensi osilasi dengan orde
damping bervariasi (a)ungu: orde dua (b) hijau: orde tiga (c) dan merah: orde 4.
5.6 Kesimpulan
Pemodelan klasik resonansi Fano sudah dilakukan dengan variasi parameter
frekuensi, konstanta kopling, faktor damping, dan gaya eksternal. Posisi resonansi
sangat ditentukan oleh frekuensi alamiah kedua pegas, faktor damping, dan konstanta
kopling, namun yang menjadi faktor utama adalah frekuensi alami. Sedangkan tinggi
resonansi sangat ditentukan oleh besar gaya eksternal. Variasi frekuensi osilasi
membuat perbedaan fasa antara gerak benda pertama (mode terang) dan benda kedua
(mode gelap) pada rentang di antara kedua frekuensi alami dan membuat loncatan
fasa yang cukup tajam di sekitar frekuensi alami. Berdasarkan grafik simpangan
terhadap waktu, semakin besar damping semakin kecil amplitudo simpangan. Orde
damping juga mempengaruhi periode modulasi amplitudo. Semakin tinggi frekuensi
periode modulasi semakin kecil. Akan tetapi diperlukan kajian dan penelitian lebih
mendalam untuk mempelajari perilaku resonansi dengan orde damping lebih dari 1.
Kelebihan dari program dalam penelitian ini adalah dijalakan dengan perangkat lunak
yang sangat familiar yaitu perambaan internet. Tidak dibutuhkan instalasi program
baru untuk menjalankan program. Tampilan yang atraktif dan memiliki gambaran
simulasi yang jelas memberikan bayangan lebih jelas kepada pengguna. Konsep yang
dekat dengan kehidupan sehari-hari yaitu dengan penggunaan variabel massa, faktor
gesekan, frekuensi natural dan posisi benda memberikan kemudahan kepada
pengguna untuk memahami konsep resonansi Fano. Kekurangan yang muncul
127
kemudian adalah tampilan yang masih kaku karena belum melibatkan aplikasi
pembuatan tampilan HTML yang lebih atraktif.
Penelitian selanjutnya diharapkan peneliti menggunakan aplikasi khusus untuk
melakukan desain tampilan serta memberikan pilihan simulasi dari penggunaan
Resonansi Fano yang terkait, misalnya yang terkait dengan kasus fotonik atau kasus
pergerakan partikel.
5.7 Referensi
1. Aminuddin, J. 2008. Dasar-dasar Fisika Komputasi Menggunakan Matlab.
Yogyakarta : Gava Media, pp 185-200 .
2. Fay 2003 Coupled spring equations int. J. Math. Educ. Sci. Technol. 34, no. 1,
65–793. B Lv, R Li, J Fu, Q Wu, K Zhang, W Chen, Z Wang, R Ma 2016
Analysis and modeling of Fano resonances using equivalent circuit elements
Nature 6 31884.
3. Joe, Y. S., Satanin, A. M., & Kim, C. S. (2006, July 2006). Classical analogy
of Fano resonances. Phys. Scr., 259-266.
4. Suparno, S. 2009. Komputasi untuk Sains dan Teknik. Depok : Departemen
Fisika-FMIPA, Universitas Indonesia.
5.8 Lampiran
Secara garis besar, proses pengolahan data untuk menjalankan simulasi resonansi
Fano terdiri dari tiga bagian, yaitu: proses memasukkan parameter, proses
menampilkan kurva respon amplitudo dan respon fasa, dan menampilkan pergerakan
benda yang berosilasi. Nilai parameter yang akan digunakan dimasukkan ke sistem
melalui text area. Setiap angka yang dimasukkan akan diberi label tertentu untuk
kemudian digunakan dalam proses perhitungan. Salah satu karakteristik khas pada
resonansi Fano adalah bentuk kurva respon amplitudo dan fasa terhadap frekuensi
yang berbeda dengan resonansi konvensional. Sehingga kurva tersebut penting untuk
ditampilkan pada halaman simulasi. Akan tetapi karena kurva ini tidak bergantung
waktu, maka ditampilkan hanya satu kali saja.
Persamaan gerak osilasi yang dihasilkan merupakan posisi dalam fungsi waktu.
Persamaan gerak ini dapat divisualisasikan dengan mengubah nilai fungsi waktu.
Posisi objek pada layar dapat diubah-ubah sesuai dengan persamaan gerak benda.
Untuk melakukan analisis secara kuantitatif, nilai simpangan atau posisi massa
terhadap posisi setimbang juga ditampilkan.
Pada kondisi awal, nilai waktu adalah nol. Saat program dijalankan, akan muncul
kurva respon amplitudo dan respon fasa, animasi, blok grafik perubahan simpangan
benda berikut dengan angkanya. Algoritma untuk animasi dan perubahan simpangan
benda terhadap waktu dilakukan secara berulang dengan penambahan nilai . Satu
langkah perulangan akan menambah nilai sebesar sekon. Proses perulangan
ini akan terus berlangsung hingga pengguna menekan tombol ‘Stop’.
128
Diagram Alir Program
Gambar 5.11. Diagram alir program.

Adapun layout program disajikan dalam Gambar 5.12. Komponen tampilan terdiri
dari 8 blok, dengan 1 blok input dan 7 blok output.
Gambar 5.12. Tampilan program: A blok parameter, B blok animasi, C blok grafik respon
amplitudo dan fasa, D blok hasil, E blok informasi waktu dan amplitudo saat itu,dan F blok
grafik simpangan terhadap waktu.
129
Gambar 5.13. Tata letak blok yang digunakan untuk menampilkan simulasi.
Pada pemodelan resonansi fano, terdapat dua osilator, yaitu osilator bright mode dan
dark mode. Dalam simulasi, bright mode divisualisasikan dengan objek berwarna
merah, dan dark mode dengan objek berwarna biru.
Blok Parameter
Besaran parameter dapat dituliskan pada elemen text area. Karena simulasi ini
menggunakan dua benda, maka besaran untuk masing-masing benda dipisahkan
dengan spasi.
Keterangan:
MASS = massa benda [kg]

SPRC = konstanta pegas [ ]
FRIC = koefisien gesek [ ]
FREQ = frekuensi alami [rad/s]
AMPL = gangguan/gaya eksternal [m]
BLNC = posisi setimbang benda terhadap
koordinat [m]
IPOS = simpangan awal benda terhadap
koordinat [m]
IVEL = kecepatan awal benda [m/s]
OMG = frekuensi yang ditinjau/gaya luar
[rad/s]
V12 = konstanta kopling [ ]
Gambar 5.14. Blok Parameter.
130
Sebagai contoh untuk massa (MASS), terdapat dua angka. Angka pertama adalah
massa benda 1 yang nilainya 1.0 kg, dan massa benda 2 nilainya 2.0 kg. Sedangkan
pada bagian konstanta pegas (SPRC – Spring Constants) terdapat tiga angka, karena
sistem ini menggunakan osilasi terkopel dengan dua benda dan tiga pegas. Pengguna
tidak dapat menambahkan besaran lainnya melalui frontend view.
Blok hasil
Blok hasil merupakan textarea yang menampilkan hasil perhitungan dengan metode
Runge Kutta yang telah diterapkan dalam program.
Gambar 5.15. Blok Hasil.

Hasil yang ditampilkan berupa nilai simpangan massa 1 dan massa 2 terhadap posisi
setimbang dalam setiap waktu (penambahan waktu 0.05 detik) dalam satuan cm.
Blok Animasi
Blok animasi ini terdiri dari satu container sebagai batas blok, dan dua objek
berwarna merah untuk bright mode dan biru untuk dark mode.
Gambar 5.16. Blok animasi.
Masing-masing objek diberi garis penanda posisi keadaan setimbang. Pergerakan ini
disesuaikan dengan persamaan gerak dari proses pengolahan data. Jika simpangan
131
bernilai positif, objek akan bergerak ke arah kanan, sebaliknya jika simpangan
negatif, objek akan bergerak ke kiri.
Blok grafik simpangan

Perubahan posisi benda terhadap posisi setimbang ditampilkan dalam bentuk grafik
simpangan terhadap waktu.
Gambar 5.17. Blok grafik simpangan.
Garis merah merepresentasikan osilasi bright mode dan garis biru merepresentasikan
dark mode. Skala yang digunakan untuk sumbu vertikal dalam satuan cm.
Blok grafik respon amplitudo dan respon fasa terhadap frekuensi

Pada blok ini akan ditampilkan grafik respon amplitudo dan fasa terhadap frekuensi
untuk masing-masing objek, sehingga terdapat 4 grafik.
Gambar 5.18. Blok grafik respon amplitudo dan respon fasa terhadap frekuensi.
132
Nilai parameter yang dimasukkan melalui textarea akan dikonversi menjadi nilai
array dengan jumlah yang sudah ditentukan. Sehingga jika pengguna memasukkan
nilai yang lebih banyak dari default parameters maka nilai tersebut tidak akan terbaca
oleh program. Sebagai contoh, parameter MASS memiliki 2 buah nilai pada default
parameters yaitu 1.0 dan 2.0. Jika pengguna menambahkan satu nilai, sehingga
menjadi MASS 1.0 2.0 1.0 maka angka setelah nilai kedua tidak akan terbaca.
Parameter yang tertera dalam textarea tidak dapat diubah. Perubahan yang tidak dapat
dilakukan adalah pengurangan atau penambahan jenis parameter, pengurangan atau
penambahan jumlah nilai parameter, dan mengganti tulisan atau istilah parameter.
Jika hal-hal tersebut dilakukan, maka hasil perhitungan akan tidak sesuai dengan yang
seharusnya, atau bahkan menimbulkan error.
Gambar 5.19. Error yang muncul saat salah satu parameter dikosongkan.
Perubahan yang dapat dilakukan hanya mengganti angka parameter. Namun

demikian, mengubah urutan parameter masih diperbolehkan. Terdapat 4 tombol yang
disediakan untuk pengguna, yaitu Run, Reset, Hint, dan About.
Gambar 5.20. Tombol pada program: Run, Reset, Hint dan About.
Untuk memulai simulasi, pengguna dapat menekan tombol ‘Run’. Sesaat setelah
tombol ini ditekan, akan berubah menjadi ‘Stop’ untuk menghentikan simulasi.
Tombol ‘Reset’ digunakan untuk mengembalikan tampilan ke keadaan awal, baik
posisi benda, grafik, dan default parameters dalam textarea. Pengguna dapat
memanfaatkan ‘Hint’ untuk menampilkan petunjuk pengisian kolom Parameters.
133
Setelah ‘Hint’ ditekan, akan muncul keterangan jenis parameter pada textarea dan
satuan yang digunakan.
Gambar 5.21. Informasi yang muncul setelah menekan tombol Hint.
Tombol ‘About’ berfungsi untuk menampilkan versi program dan kontak tim
penyusun program.
Gambar 5.22. Informasi yang muncul setelah menekan tombol About.
B. Program index.html
<!DOCTYPE html>
<html>
<title>Fano Resonance</title>
<style>
#amp1 {
position: absolute;
left:936px;
top: 100px;
}
#amp2 {
position: absolute;
left: 936px;
top: 335px;
}
#phase1 {
position: absolute;
134
left:1152px;
top: 100px;
}
#phase2 {
position: absolute;
left:1152px;
top: 335px;
}
#container {
width: 697px;
height: 200px;
position: absolute;
top: 100px;
left: 220px;
background: #fce302;
border: 2px solid orange;
}
#object1 {
width: 20px;
height: 20px;
position: relative;
left: 196px;
position: absolute;
top: 100px;
background-color: red;
}
#object2 {
width: 20px;
height: 20px;
position: relative;
left: 458px;
position: absolute;
top: 100px;
background-color: blue;
}
#grid1 {
width: 2px;
height: 130px;
position: relative;
left: 205px;
top: 50px;
background-color: black;
}
#grid2 {
width: 2px;
height: 130px;
position: relative;
left: 262px;
background-color: black;
}
135
#gridcaption1 {
width: 230px;
height: 30px;
font-size: 0.875em;
font-family: "Raleway", "Trebuchet MS", sans-serif;
font-weight: bold;
text-align: center;
position: absolute;
left: 90px;
top: 5px;
}
#gridcaption2 {
width: 190px;
height: 30px;
font-size: 0.875em;
font-weight: bold;
text-align: center;
position: absolute;
left: 370px;
top: 5px;
}
#myCanvas {
position: absolute;
left: 220px;
top: 335px;
background: white;
}
#captions {
font-size: 0.7em;
font-weight: bold;
position: absolute;
text-align: right;
left:948px;
top: 80px;
}
#results {
position: absolute;
left: 10px;
top: 400px;
}
#displayResult {
font-size: 0.73em;
font-weight: bold;
position: absolute;
left: 15px;
top:380px;
}
#current {
font-size: 0.7em;
font-weight: bold;
136
position:absolute;
left: 250px; top: 310px;
}
</style>
<body>
<h1 style="font-family:Trebuchet MS;">Fano Resonance Simulation</h1>
<script src="graph12_4.js"></script>
<script src="graph34_4.js"></script>
<script src="xychart_4.js"></script>
<div style="font-family:Trebuchet MS;"><b>Parameters</b></div>
<div id="container">
<div id="gridcaption1">Bright Mode<br>Initial Position</div>
<div id="gridcaption2">Dark Mode<br>Initial Position</div>
<div id="grid1">
<div id="grid2"></div>
</div>
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="captions" width="200" height="300">Amplitudo of the first
oscillator          &n
bsp; Phase behaviour of the first
oscillator  <br><br><br><br><br><br><br><br><br><br><br><br><b
r><br><br><br><br><br>Amplitudo of the second
oscillator       Phase behaviour of
the second oscillator</div>
<canvas id="amp1" width="200" height="200" style="border:2px solid
blue;"></canvas>
<canvas id="phase1" width="200" height="200" style="border:2px solid
blue;"></canvas>
<canvas id="amp2" width="200" height="200" style="border:2px solid
blue;"></canvas>
<canvas id="phase2" width="200" height="200" style="border:2px solid
blue;"></canvas>
<canvas id="myCanvas" width="700" height="200" style="border:2px
solid blue;"></canvas>
<div id="displayResult" width ="190"
height="50"> Time   Amplitudo1  Amplitudo2
</div>
<div id="current">t<sub>cur</sub> <input id="tcur" value="0"
size="3" readonly />s
x<sub>1</sub> <input id="X1" value="0" size="3" readonly
/>cm
x<sub>2</sub> <input id="X2" value="0" size="3" readonly
/>cm</div>
<script>
//insert textarea input
var timer;
var first = true;
var k1_0 = 0;
var k2_0 = 0;
var k1_1 = 0;
var k2_1 = 0;
var k1_2 = 0;
var k2_2 = 0;
var k1_3 = 0;
var k2_3 = 0;
137
var l1_0 = 0;
var l2_0 = 0;
var l1_1 = 0;
var l2_1 = 0;
var l1_2 = 0;
var l2_2 = 0;
var l1_3 = 0;
var l2_3 = 0;
var t = 0;
var h = 0.05;
var t_b = 0;
var t_c = 0;
var x1_c = 0;
var x2_c = 0;
var time = 0;
var amplitudo1 = 0;
var amplitudo2 = 0;
var ta = document.createElement("textarea");
ta.id = "textarea";
ta.style.height = "230px";
ta.style.width = "190px";
ta.style.padding = "5px";
ta.style.color = "black";
ta.style.background = "white";
ta.style.overflowY = "scroll";
ta.style.display = "block";
ta.value = defaultParams();
document.body.appendChild(ta);
var res = document.createElement("textarea");

res.id = "results";
res.style.height = "230px";
res.style.width = "190px";
res.style.padding = "5px";
res.style.color = "black";
res.style.background = "white";
res.style.overflowY = "scroll";
res.style.display = "block";
res.value = "";
var hasil = res.value;
//textarea hasil
document.body.appendChild(res);
//textarea inner function

function defaultParams() {
var params = "";
//params += "MASS 1.0 1.0\n"; //mass 1 amd 2
//params += "SPRC 0.1 0.3 0.2\n"; //spring constant
params += "FRIC 0.02 0\n"; //friction constants
params += "FREQ 1.0 1.21\n"; //omega 1 and 2
params += "AMPL 1.0 0\n"; //amplitudo
params += "BLNC 4.0 8.0\n"; //balance position 1 and 2
params += "IPOS 4.5 8.5\n"; //initial position object 1 and 2
params += "IVEL 0.0 0.0\n"; //initial velocity object 1 and 2
params += "OMG 2\n"; //the reviewed omega
params += "V12 0.1";
return params;
138
//call textarea inner function

function getParams() {
Nlines--;
}
var m1, m2, k1, k2, k3, b1, b2, w1, w2, a1, a2, x1m, x2m, x1, x2, v1,
v2, w, v12;
for (var l = 0; l < Nlines; l++) {
var cols = lines[l].split(" ");
if (cols[0] == "MASS") {
m1 = parseFloat(cols[1]);
m2 = parseFloat(cols[2]);
}
if (cols[0] == "SPRC") {
k1 = parseFloat(cols[1]);
}
if (cols[0] == "FRIC") {
b1 = parseFloat(cols[1]);
b2 = parseFloat(cols[2]);
}
if (cols[0] == "FREQ") {
w1 = parseFloat(cols[1]);
w2 = parseFloat(cols[2]);
}
if (cols[0] == "AMPL") {
a1 = parseFloat(cols[1]);
a2 = parseFloat(cols[2]);
}
if (cols[0] == "BLNC") {
x1m = parseFloat(cols[1]);
x2m = parseFloat(cols[2]);
}
if (cols[0] == "IPOS") {
x1 = parseFloat(cols[1]);
x2 = parseFloat(cols[2]);
}
if (cols[0] == "IVEL") {
v1 = parseFloat(cols[1]);
}
if (cols[0] == "OMG") {
w = parseFloat(cols[1]);
}
if (cols[0] == "V12") {
}
}
var values = new Array(Nlines);
values[0] = m1;
values[1] = m2;
139
values[2] = k1;
values[3] = k2;
values[4] = k3;
values[5] = b1;
values[6] = b2;
values[7] = w1;
values[8] = w2;
values[9] = a1;
values[10] = a2;
values[11] = x1m;
values[12] = x2m;
values[13] = x1;
values[14] = x2;
values[15] = v1;
values[16] = v2;
values[17] = w;
values[18] = v12;
return values;
}
var but1 = document.createElement("button");

document.body.appendChild(but1);
but1.innerHTML = "Run";
but1.style.width = "50px";
but1.onclick = function() {
if (but1.innerHTML == "Run") {
timer = setInterval(simulate, 100);
but1.innerHTML = "Stop";
} else {
but1.innerHTML = "Run";
}
graph12();
graph34();
}
function simulate() {
firstTime();
}
// Create clear button
but2.innerHTML = "Reset";
but2.id = "bClear";
location.reload();
}
// Create params button

but3.innerHTML = "Hint";
but3.id = "bParams";
var s = "";
s += "MASS = Object's Mass [kg] - 2 cols\n";
140
s +=
"SPRC = Spring Constants [ ] - 3 cols\n";
s +=
"FRIC = Coefficient of Friction [ ] - 2 cols\n";
s +=
"FREQ = Natural Frequency [rad/s] - 2 cols\n";
s +=
"AMPL = Amplitudo [cm] - 2 cols\n";
s +=
"BLNC = Objects's Balance Positions [cm] - 2 cols\n";
s +=
"IPOS = Initial Positions[cm] - 2 cols\n";
s +=
"IVEL = Initial Velocity [cm/s] - 2 cols\n";
s +=
"OMG = Frequency of External Force [rad/s] - 1 col\n";
s += "V12 = Coupling Constants [ ] - 1 col";
alert(s);
}

but4.innerHTML = "About";
but4.id = "bAbout";
var s = "";
s += "Fano Resonance Simulation\n";
s += "Version 1.0 (20170513)\n\n";
s += "Kelompok 5 Komputasi Sistem Fisis 2017:\n";
s += "========================================\n";
s += "Anna\nDina\nIrhas\nMomang\nMuthaharah\nPutri";
alert(s);
}
var elem = document.getElementById("object1");

var elem1 = document.getElementById("object2");
var path = document.getElementById("myCanvas");

var Graph = path.getContext("2d");
var Graphwidth = myCanvas.width;
var Graphheight = myCanvas.height;
var figureBackground = "white";
var xPadding = Graphwidth * 40 / 820;
var yPadding = Graphheight / 2;
function firstTime() {
if(first) {
first = false;
var values = getParams();
m1 = values[0];
m2 = values[1];
k1 = values[2];
k2 = values[3];
k3 = values[4];
b1 = values[5];
b2 = values[6];
omg1 = values[7];
omg2 = values[8];
a1 = values[9];
a2 = values[10];
x1m = values[11];
x2m = values[12];
141
x1 = values[13];
x2 = values[14];
v1 = values[15];
v2 = values[16];
omg = values[17];
v12 = values[18];
} else {
function f1(v1, x1, x2, t) {

return a1 * (Math.cos(omg * t)) - (b1 * v1 ) -
(Math.pow(omg1, 2) * (x1 - x1m)) - (v12 * ((x1 - x1m) - (x2 - x2m)));
}
function f2(v2, x2, x1, t) {

return a2 * (Math.cos(omg * t)) - (b2 * v2 ) -
(Math.pow(omg2, 2) * (x2 - x2m)) - (v12 * ((x2 - x2m) - (x1 - x1m)));
}
k1_0 = f1(v1, x1, x2, t);

k2_0 = f2(v2, x2, x1, t);
l1_0 = v1;
l2_0 = v2;
k1_1 = f1(v1 + 0.5 * k1_0 * h, x1 + 0.5 * l1_0 * h, x2 + 0.5 * l2_0 * h,
t + 0.5 * h);
k2_1 = f2(v2 + 0.5 * k2_0 * h, x2 + 0.5 * l2_0 * h, x1 + 0.5 * l1_0 * h,
t + 0.5 * h);
12_1 = v1 + 0.5 * k1_0 * h;
l2_1 = v2 + 0.5 * k2_0 * h;
k1_2 = f1(v1 + 0.5 * k1_1 * h, x1 + 0.5 * l1_1 * h, x2 + 0.5 * l2_1 * h,

t + 0.5 * h);
k2_2 = f2(v2 + 0.5 * k2_1 * h, x2 + 0.5 * l2_1 * h, x1 + 0.5 * l1_1 * h,
t + 0.5 * h);
l1_2 = v1 + 0.5 * k1_1 * h;
l2_2 = v2 + 0.5 * k2_1 * h;
k1_3 = f1(v1 + k1_2 * h, x1 + l1_2 * h, x2 + l2_2 * h, t + h);
k2_3 = f2(v2 + k2_2 * h, x2 + l2_2 * h, x1 + l1_2 * h, t + h);
l1_3 = v1 + k1_2 * h;
l2_3 = v2 + k2_2 * h;
v1 = v1 + (1 / 6) * h * (k1_0 + (2 * k1_1) + (2 * k1_2) + k1_3);
v2 = v2 + (1 / 6) * h * (k2_0 + (2 * k2_1) + (2 * k2_2) + k2_3);
x1 = x1 + (1 / 6) * h * (l1_0 + (2 * l1_1) + (2 * l1_2) + l1_3);
x2 = x2 + (1 / 6) * h * (l2_0 + (2 * l2_1) + (2 * l2_2) + l2_3);
t += h
}
console.log(v1 + "\n");
elem.style.left = ((x1-x1m)*262/4+196)+ 'px';

elem1.style.left = ((x2-x2m)*262/4+458) + 'px';
hasil += t;
Graph.fillStyle="black";
// label in y axis
Graph.moveTo(xPadding-4,Graphheight*1/8)
Graph.lineTo(xPadding+4,Graphheight*1/8)
142
Graph.fillText(3,23,Graphheight*1/8)
Graph.fillText(-1,23,Graphheight*5/8)
// x-y axis
Graph.moveTo(xPadding,yPadding)
Graph.lineTo(xPadding, 0);
Graph.lineTo(Graphwidth-xPadding, Graphheight-yPadding);
Graph.lineTo(xPadding,Graphheight);
//Graph.strokeStyle="black";
Graph.stroke();
document.getElementById("tcur").value = t.toFixed(3);
document.getElementById("X1").value = (x1-x1m).toFixed(3);
document.getElementById("X2").value = (x2-x2m).toFixed(3);
t_b = t_b + h;
x1_c = (x1 - x1m) * (-1) * Graphheight /8 + Graphheight / 2;
x2_c = (x2 - x2m) * (-1) * Graphheight /8 + Graphheight / 2;
t_c = t_b * (Graphwidth - xPadding) / 85 + xPadding;
Graph.beginPath();
Graph.arc(t_c, x1_c, 0.1, 0, Math.PI * 2, true);
Graph.moveTo
Graph.closePath();
Graph.strokeStyle = "red";
Graph.stroke();
Graph.beginPath();
Graph.arc(t_c, x2_c, 0.1, 0, Math.PI * 2, true);
Graph.moveTo
Graph.closePath();
Graph.strokeStyle = "blue";
143
Graph.stroke();
if (t_c > (Graphwidth - xPadding)) {

Graph.fillStyle = figureBackground;
Graph.fillRect(0, 0, Graphwidth,
Graphheight);
t_b = 0
}
time = t.toFixed(3);
amplitudo1 = (x1-x1m).toFixed(5);
amplitudo2 = (x2-x2m).toFixed(5);
display(time,amplitudo1,amplitudo2);
}
function display(time,x1,x2) {
document.getElementById("results").value =
document.getElementById("results").value + time + "\t" + x1 +
"\t" + x2 + "\n";
}
</script>
</body>
</html>
C. Skrip Graph12
function graph12() {
var ini = 1;
var v12 = 0.1;
var wbeg = 0.7;
var wend = 1.31;
var c1 = new Array();

var a = new Array();
var b = new Array();
var c = new Array();
var d = new Array();
var omg = new Array();
for (var i = 0.7; i <= 1.31; i += 0.0005) {

omg.push(i);
}
var aLength = omg.length;

a1 = values[9];
a2 = values[10];
b1 = values[5];
b2 = values[6];
144
omg1 = values[7];
omg2 = values[8];
a1 = repmat(a1, aLength);
omg1 = repmat(omg1, aLength);
b1 = repmat(b1, aLength);
v12 = repmat(v12, aLength);
//console.log(omg[0]);
for (var i = 0; i < aLength; i++) {

a[i] = (omg1[i] * omg1[i]) - (omg[i] * omg[i]);
b[i] = (omg2[i] * omg2[i]) - (omg[i] * omg[i]);
c[i] = ((b[i] * a[i]) - (omg[i] * omg[i] * b2[i] * b1[i]) -
(v12[i] * v12[i]));
d[i] = (omg[i] * b1[i] * b[i] + omg[i] * b2[i] * a[i]);
c1[i] = Math.sqrt((b[i] * b[i] + (omg[i] * b2[i] * omg[i] *
b2[i])) * (a1[i] * a1[i]) / (c[i] * c[i] + d[i] * d[i]));
c1.push(r);
}
var c2 = new Array();

a[i] = (omg1[i] * omg1[i]) - (omg[i] * omg[i]);
b[i] = (omg2[i] * omg2[i]) - (omg[i] * omg[i]);
c[i] = ((b[i] * a[i]) - (omg[i] * omg[i] * b2[i] * b1[i]) -
(v12[i] * v12[i]));
d[i] = (omg[i] * b1[i] * b[i] + omg[i] * b2[i] * a[i]);
c2[i] = Math.sqrt(((v12[i] * a1[i]) * (v12[i] * a1[i])) / (c[i]
* c[i] + d[i] * d[i]));
c2.push(r);
}
var A2_imag = new Array();

var r = b1[i] * omg[i] * ((omg2[i] * omg2[i]) - (omg[i] *
omg[i])) + b2[i] * omg[i] * ((omg1[i] * omg1[i]) - (omg[i] * omg[i]));
A2_imag.push(r);
}
var A2_re = new Array();
var r = ((omg2[i] * omg2[i]) - (omg[i] * omg[i])) * ((omg1[i] *
omg1[i]) - (omg[i] * omg[i])) - (b1[i] * b2[i] * (omg[i] * omg[i])) -
(v12[i] * v12[i]);
A2_re.push(r);
}
var z = new Array();
var r = 0,
pi = Math.PI;
if (A2_imag[i] > 0 && A2_re[i] > 0)
r = Math.atan2(A2_imag[i], A2_re[i]) / pi;
if (A2_imag[i] > 0 && A2_re[i] < 0)
if (A2_imag[i] == 0 && A2_re[i] < 0)
145
r = (Math.atan2(0, A2_re[i])) / pi;

if (A2_imag[i] < 0 && A2_re[i] < 0)
r = (Math.atan2(A2_imag[i], A2_re[i]) + 2 * pi) / pi;
if (A2_imag[i] < 0 && A2_re[i] > 0)
z.push(r);
}
var B2_re = new Array();
var r = (omg[i] * omg[i] - omg2[i] * omg2[i]);
B2_re.push(r);
}
var teta = new Array();
var r = Math.atan2(0, B2_re[i]) / Math.PI;
teta.push(r);
}
var z1 = new Array();
var a = repmat(1, aLength);
var r = z[i] + teta[i] - a[i];
z1.push(r);
}
function repmat(o, l) {
for (var i = 0; i < l; i++) {
result.push(o);
}
return result;
}
console.log(c1[3]);
// Membuat Chart
var chart1 = document.getElementById("amp1");
chart1.width = 200;
chart1.height = 200;
//document.body.appendChild(chart1);
var chartz1 = new XYChart(chart1, "Omega", "c1");
chartz1.setCoordinates(0.6, 0, 1.4, 60);
chartz1.changeData(omg, c1);
chartz1.clear();
chartz1.plotToCanvas();
var chart2 = document.getElementById("phase1");
chart2.width = 200;
document.body.appendChild(chart2);
var chartz = new XYChart(chart2, "Omega", "z");
chartz.setCoordinates(0.7, 0, 1.4, 60);
chartz.changeData(omg, c2);
chartz.clear();
chartz.plotToCanvas();
}
146
D. Skrip Graph34.js
function graph34() {
var v12 = 0.1;

var omg = new Array();

a1 = values[9];
a2 = values[10];
b1 = values[5];
b2 = values[6];
omg1 = values[7];
omg2 = values[8];
for (var i = 0.7; i <= 1.31; i += 0.01) {

omg.push(i);
}
var aLength = omg.length;
v12 = repmat(v12, aLength);
var A2_imag = new Array();
var r = b1[i] * omg[i] * ((omg2[i] * omg2[i]) - (omg[i] *
omg[i])) + b2[i] * omg[i] * ((omg1[i] * omg1[i]) - (omg[i] * omg[i]))
A2_imag.push(r);
}
var A2_re = new Array();
var r = ((omg2[i] * omg2[i]) - (omg[i] * omg[i])) * ((omg1[i] *
omg1[i]) - (omg[i] * omg[i])) - (b1[i] * b2[i] * (omg[i] * omg[i])) -
(v12[i] * v12[i]);
A2_re.push(r);
}
var z = new Array();
var r = 0,
pi = Math.PI;
if (A2_imag[i] > 0 && A2_re[i] > 0)
if (A2_imag[i] > 0 && A2_re[i] < 0)
if (A2_imag[i] == 0 && A2_re[i] < 0)
r = (Math.atan2(0, A2_re[i])) / pi;
if (A2_imag[i] < 0 && A2_re[i] < 0)
if (A2_imag[i] < 0 && A2_re[i] > 0)
z.push(r);
}
147
var B2_re = new Array();

var r = (omg[i] * omg[i] - omg2[i] * omg2[i]);
B2_re.push(r);
}
var teta = new Array();
var r = Math.atan2(0, B2_re[i]) / Math.PI;
teta.push(r);
}
var z1 = new Array();
var a = repmat(1, aLength);
var r = z[i] + teta[i] - a[i];
z1.push(r);
}
function repmat(o, l) {
for (var i = 0; i < l; i++) {
result.push(o);
}
return result;
}
// Membuat Chart
var chart1 = document.getElementById("amp2");
chart1.width = 200;
var chartz1 = new XYChart(chart1, "Omega", "z1");
chartz1.setCoordinates(0.6, 0, 1.4, 1);
chartz1.changeData(omg, z1);
chartz1.clear();
chartz1.plotToCanvas();
var chart2 = document.getElementById("phase2");
chart2.width = 200;
var chartz = new XYChart(chart2, "Omega", "z");
chartz.setCoordinates(0.6, 0, 1.4, 2);
chartz.changeData(omg, z);
chartz.clear();
chartz.plotToCanvas();
}
148
Simulasi 1d gerak osilasi terkopel
6 untuk menentukan amplitudo
maksimum benda terbawah
Adhi Kusumadjati | adhikusumadjati@gmail.com
Sri Hartati | srihartaty92@gmail.com
Nursakinah Annisa Lutfin | nursakinahlutfin@yahoo.co.id
Fitriah Bidalo | fitriahbidalo@gmail.com
Silvia Dona Sari | silviadonasari07@gmail.com
Nurlina | nurlinaphysics@gmail.com
Fauziah A. | fauziah.physics@gmail.com
Telah dibuat suatu program untuk menggambarkan gerakan osilator harmonis dan
osilator teredam terkopel 1D menggunakan bahasa pemrograman JavaScript. Program
dibangun berdasarkan metode Euler. Sistem pertama terdiri dari sebuah benda yang
berada dalam sistem pegas tanpa redaman sehingga osilasi yang terjadi berupa osilasi
harmonis sederhana. Sistem kedua terdiri dari 1 benda, 2 benda, dan 3 benda yang
diberikan redaman sehingga osilasi yang terjadi berupa osilasi teredam. Hasil
simulasinya berupa waktu dan posisi tiap benda yang digambarkan melalui grafik.
Diperoleh hubungan antara amplitudo maksimum terhadap banyaknya benda dalam
sistem osilasi terkopel.
6.1 Pendahuluan
Dengan berkembangnya ilmu pengetahuan dan teknologi, hampir semua fenomena
fisis dapat disimulasikan menggunakan komputer. Simulasi komputer dibuat agar
manusia dapat lebih mudah mempelajari, mengamati dan memahami fenomena-
fenomena fisis yang mungkin terjadi. Getaran atau osilasi merupakan salah satu
bentuk gerak benda yang cukup banyak dijumpai dalam kehidupan sehari - hari,
misalnya bagaimana getaran yang terjadi jika sebuah beban dikaitkan atau
digantungkan pada sebuah pegas. Getaran atau osilasi dapat terjadi jika suatu system
diganggu dari posisi kesetimbangannya. Getaran ini akan terjadi secara terus menerus
dan berulang-ulang selama sistem mendapatkan gaya. Gerak getaran benda yang
berulang dengan waktu yang tetap biasanya disebutsebagai gerak periodik [1].
Getaran atau osilasi tercouple terjadi ketika dua atau lebih sistem osilasi dihubungkan
sedemikian rupa sehingga memungkinkan energi dapat ditransfer di antara keduanya.
Pada osilasi tercouple, besarnya gaya sebanding dengan besarnya perpindahan dari
keseimbangan. Simulasi dalam satu dimensi osilasi tercouple mempelajari tentang
bagaimana gerak sebuah benda berosilasi dan jika beberapa benda berosilasi dalam
suatu sistem yang sama. Dimana ada dua benda A dan B yang dihubungkan dengan
149
Komputasi Fisika 3: 6 Simulasi 1d gerak osilasi terkopel ..
pegas, apabila sebuah benda berosilasi tanpa redaman amplitudonya tidak mengalami
penurunan hingga waktu yang telah ditentukan dan ketika diberi redaman amplitudo
berkurang secara eksponensial hingga mencapai posisi nol pada waktu tertentu.
Dalam tulisan ini dibahas simulasi berupa waktu dan posisi tiap benda yang
digambarkan melalui grafik serta menentukan hubungan antara amplitudo maksimum
dengan banyaknya benda.
6.2 Teori
Getaran didefinisikan sebagai gerak bolak balik pada suatu benda yang terjadi secara
berulang pada selang waktu tetap. Gerak benda yang terjadi secara periodik disebut
gerak harmonik. Contoh gerak harmonik adalah gerak getaran pegas yang terjadi jika
ada gaya luar yang bekerja pada pegas tersebut. Gerak harmonik sederhana digunakan
untuk sistem dengan benda dan pegas tunggal. Untuk kasus dimana jumlah benda dan
pegas lebih dari satu menggunakan sistem osilasi terkopel [2].
Tidak semua gerak periodik mengalami osilasi sempurna. Pada suatu titik tertentu
gerak periodik akan mengalami pelemahan dan pada akhirnya menjadi nol. Setiap
sistem yang berperilaku seperti ini dikenal sebagai osilator teredam. Terdapat tiga
jenis redaman yang dialami oleh benda yang berosilasi yaitu redaman rendah
(underdamped), redaman kritis (critical damping) dan redaman berlebihan (over
damping).
Tinjau benda A dan benda B yang dibuat bermassa sama m. Posisi awal benda A dan
B dinyatakan dengan xi. Untuk sistem perlu dicari gaya pegas Fp yang bergantung dari
posisi masing-masing benda penyusunnya ∆x dan bergantung pada konstanta pegas k
yang saling terkait melalui
F p = − k∆x , (6.1)
di mana
∆x = x f − x i . (6.2)
Posisi xi menyatakan posisi awal benda A dan B pada sumbu y dan xf menyatakan
seberapa panjang pegas setelah ditarik pada sumbu y [3].
Pada kedua benda masing-masing diberikan gaya luar Fext yang besarnya sama
dengan gaya berat yang dialami oleh kedua benda. Besarnya gaya luar tersebut
dituliskan
Fext = w = mg , (6.3)
sehingga
Fext = mg . (6.4)
Pada kasus ini benda mengalami redaman akibat adanya gaya hambat seperti gaya
gesekan di udara. Osilasi yang mengalami redaman disebut osilasi teredam. Gaya
teredam (damping) Ff diperoleh melalui
F f = −cv , (6.5)
150
dimana c menyatakan koefisien damping dan v merupakan kecepatan benda [4].

Gaya total yang bekerja pada sistem masing-masing terdiri atas F1 dan F2. Gaya F1
menyatakan gaya total yang bekerja pada sistem ketika benda A ditarik ke bawah
yang besarnya merupakan penjumlahan gaya pegas Fp1, gaya damping Ff1 d an Ff2,
dan gaya pegas Fp2 dituliskan melalui
F1 = F p 1 − F f 1− F p 2 + F f 2 . (6.6)
Sedangkan gaya F2 menyatakan gaya total yang bekerja pada sistem ketika benda B
ditarik kebawah yang besarnya merupakan penjumlahan dari gaya-gaya yang bekerja
pada sistem tersebut yaitu gaya pegas Fp2, gaya eksternal Fext dan gaya damping Ff2
dituliskan
F2 = F p 2 + F ext − F f 2 . (6.7)
Persamaan (6.1) dan (6.5) memenuhi hubungan dalam Persamaan (6.6). Dan
persamaan (6.1), (6.4), dan (6.5) memenuhi hubungan dalam Persamaan (6.7).
Ilustrasi bagaimana kedua benda ini, A dan B, berosilasi dan perubahan jarak antar
kedua benda diberikan dalam Gambar 1.1.
Gambar 6.1 Model osilasi tercouple dua benda:

sebelum osilasi dan setelah osilasi.
Benda A dan B memiliki percepatan yang diperoleh dari gaya total per massa kedua
benda. Besarnya percepatan untuk masing-masing benda diberikan oleh
a=
∑F . (6.8)
m
Kecepatan benda A dan B diberikan oleh turunan percepatan terhadap waktu
diberikan oleh
v = vo + at . (6.9)
151
Posisi kedua benda di arah sumbu y dituliskan melalui

x = x o + vt . (6.10)
6.3 Metode numerik

Jika besarnya gaya pegas yang bekerja pada suatu benda adalah F = - kx, maka
besarnya percepatan yang dialami benda adalah
d 2x k
a= = − x. (6.11)
dt 2 m
Dengan metode Euler, dimulai dari keadaan awal dan dihitung nilai a,v dan x dengan
iterasi, dengan perubahan waktu ∆t yang sangat kecil pada masing-masing iterasi,
sehingga digunakan persamaan
k
a (t ) = − x (t ) , (6.12)
m
 ∆t   ∆t 
v t +  = v t −  + a (t ) ∆t , (6.13)
 2  2
 ∆t 
x(t + ∆t ) = x(t ) + v t + ∆t . (6.14)
 2
Pada Persamaan (6.12), kecepatan pada interval waktu (t, t + ∆t) dihitung
menggunakan kecepatan pada interval waktu yang sebelumnya (t - ∆t, t). Percepatan
dianggap seragam, sementara diketahui bahwa sebenarnya percepatannya tidak
seragam, aproksimasi ∆t membuatnya menjadi lebih kecil. Pada Persamaan (6.13),
digunakan kecepatan sesaat v(t + ∆t/2), saat interval waktu pertengahan sebagai
kecepatan rata-rata dan percepatan dianggap seragam [5 - 7]. Selanjutnya dilakukan
iterasi untuk beberapa kali
Tabel 6.1 Iterasi osilasi tanpa redaman.
N t x V a
0 0 xo 0 -(k/m) xo
1 t1 xo + v1t1 vo + ½aot1 -(k/m) x1
2 t2 x1 + v2t1 v1 + a1t1 -(k/m) x2
3 t3 x2 + v3t1 v2 + a2t1 -(k/m) x3
Pada Tabel 1.1 dilakukan iterasi sebanyak tiga kali dengan waktu t = 0 sampai t3.,
sehingga dapat diperoleh simpangan (x), kecepatan (v), dan percepatan (a). Persamaan
di atas berlaku untuk osilasi tanpa redaman, untuk osilasi teredam, maka
persamaannya menjadi [8]
152
ma = − kx − bv , (6.15)
d2x k b dx
a = 2 =− x− (6.16)
dt m m dt ,
dengan bv adalah gaya gesek dan b adalah tetapan gaya gesek, sehingga
k b dx (t )
a (t ) = − x (t ) − (6.17)
m m dt ,
 ∆t   ∆t 
v t +  = v t −  + a (t )∆t (6.18)
 2   2 ,
 ∆t 
x(t + ∆t ) = x (t ) + v t + ∆t (6.19)
 2 ,
dengan iterasi,
Tabel 6.2 Iterasi osilasi dengan redaman.
N t X v a
0 0 xo 0 -(k/m) xo-(b/m) vo
1 t1 xo + v1t1 vo + ½aot1 -(k/m) x1-(b/m) v1
2 t2 x1 + v2t1 v1 + a1t1 -(k/m) x2-(b/m) v2
3 t3 x2 + v3t1 v2 + a2t1 -(k/m) x3-(b/m) v3
Sama seperti sebelumnya, pada Tabel 6.2 juga dilakukan iterasi sebanyak tiga kali
dengan waktu t = 0 sampai t3., sehingga dapat diperoleh simpangan (x), kecepatan (v),
dan percepatan (a).
6.4 Algoritma
Simulasi 1D gerak osilasi untuk n benda terkopel dilakukan dengan menggunakan
algoritma berikut ini.
L1. mass, k, damping ?
L2. particles[i] ?
L3. t, dt, tend?
L4. Fext, r?
L5. FP[0] = -k· (particles[i].y-holder.y), FP[i] = -k·( particles[i].y – particles[i-1].y)
L6. FR[i] = c· particles[i].vy
L7. F[0] = FP[i] - FR[i] - FP[i+1] + FR[i+1]
L8. F[i] = FP[i] - FR[i] - FP[i-1] + FR[i-1] + FP[i] + Fext - FR[i]
L9. F[i+1] = FP[i] - FR[i] - FP[i-1] + FR[i-1] - FP[i+1] + FR[i+1] + FP[i] - FR[i]
L10. a[i] = F[i] / mass
153
L11. particles[i].vy = particles[i].vy + a[i] * dt

L12. particles[i].y = particles[i].y + particles[i].vy * dt
L13. t = t + dt
L14. t ≥ tend → plot.

Simulasi 1D gerak osilasi terkopel telah dillakukan dengan menggunakan JavaScript.
Simulasi ini mempelajari tentang bagaimana gerak sebuah benda berosilasi dan jika
beberapa benda berosilasi dalam suatu sistem yang sama. Parameter-parameter
simulasi yang digunakan diberikan dalam Tabel 6.3 berikut.
Symbol Nilai Code

K 10 k
Fext -10 Fext
c 5 c
m1 x : 5, y : 7.0 Particles[i]
m2 x : 5, y : 6.0 Particles[i+1]
m3 x : 5, y : 5.0 Particles[i+2]
t 0 – 100 tend
Berikut grafik hubungan antara posisi dengan waktu untuk sebuah benda yang
berosilasi tanpa adanya redaman dan beberapa benda yang berosilasi dengan adanya
redaman.
Gambar 6.2 Posisi sebagai fungsi dari waktu.
154
155
Gambar 6.2 menunjukkan posisi sebagai fungsi waktu untuk sebuah benda berosilasi
tanpa adanya redaman. Pada kurva ini nilai redamannya = 0 sehingga tidak
mengalami penurunan amplitudo hingga waktu yang telah ditentukan (massa
berosilasi kontinu dengan amplitudo yang konstan). Setiap sistem yang berperilaku
seperti gambar tersebut dikenal sebagai osilator harmonik dimana solusi umum dari
persamaan osilator harmonik telah kita kenal sebagai y = A cos (ωt) + B sin (ωt).
Gambar 6.3 menunjukkan posisi sebagai fungsi waktu untuk sebuah benda berosilasi
dengan adanya perlambatan. Gerak osilator tersebut dipertahankan tetapi amplitudo
berkurang secara eksponensial hingga mencapai posisi nol pada waktu tertentu.
Pengurangan dalam amplitudo disebabkan oleh energi mekanik yang hilang akibat
perlambatan yang disebut redaman. Setiap sistem yang berperilaku seperti gambar
tersebut dikenal sebagai osilator teredam dimana solusi umumnya dapat dituliskan
sebagai y(t) = y0 eαt, dengan α merupakan faktor redaman.
Terdapat tiga jenis redaman yang dialami oleh benda yang berosilasi yaitu redaman
rendah (underdamped), redaman kritis (critical damping) dan redaman berlebihan
(over damping). Jenis redaman pada simulasi ini adalah osilasi redaman rendah
(underdamped) karena benda masih mengalami osilasi sebelum berhenti. Benda 1, 2,
maupun 3 masih melakukan getaran sebelum berhenti karena redaman yang
dialaminya tidak terlalu besar.
Benda yang mengalami critical damping biasanya langsung berhenti berosilasi (benda
langsung kembali ke posisi setimbangnya) karena redaman yang dialaminya cukup
besar. Untuk benda yang mengalami over damping, ini mirip seperti critical damping
hanya saja pada osilasi over damping benda lama sekali tiba di posisi setimbangnya.
Hal ini disebabkan karena redaman yang dialami oleh benda sangat besar.
Gambar 6.4 menunjukkan posisi sebagai fungsi waktu untuk dua buah benda
berosilasi dengan adanya redaman. Terlihat dari grafik, adanya ketidakteraturan posisi
156
di awal waktu (2 – 5) untuk benda 1 yang disebabkan oleh gerak benda 2. Gambar 6.5
menunjukkan posisi sebagai fungsi waktu untuk tiga buah benda yang berosilasi
dengan adanya redaman. Sama halnya dengan sistem dua benda pada Gambar 6.5,
benda 1 juga mengalami ketidakteraturan posisi di awal waktu yang disebabkan oleh
gerak benda 2 dan benda 3.
Gambar 6.6 Amplitudo maksimum terhadap jumlah benda
Gambar 6.7 Amplitudo maksimum terhadap jumlah benda

Gambar 6.6 menunjukkan grafik amplitudo maksimum terhadap jumlah benda.
Terlihat bahwa benda yang posisinya berada paling bawah memiliki amplitudo
terbesar. Hal ini disebabkan karena benda yang paling bawah memperoleh gaya luar
dan gaya berat yang dihasilkan partikel di atasnya. Dari grafik tersebut, diperoleh
persamaan garis
157
Amaks = 0,536 N + 0,691 .

Dari persamaan tersebut, dapat diprediksi nilai amplitudo maksimum benda terbawah.
Gambar 6.7 menunjukkan grafik amplitudo maksimum terhadap jumlah benda untuk
tiga konstanta pegas yang berbeda yaitu 10, 15 dan 20. Dari grafik dapat dilihat
bahwa semakin besar konstanta pegas, maka kemiringan kurvanya juga akan semakin
besar. Hal ini disebabkan karena nilai modulus elastisitas suatu pegas berbanding
lurus dengan konstanta pegasnya
A
Y =k .
L
Semakin besar konstanta pegas, maka modulus elastisitasnya juga akan semakin besar
dan menyebabkan nilai simpangan maksimumnya (amplitudo) juga semakin besar.
6.6 Kesimpulan
Dari hasil simulasi 1D osilasi terkopel baik itu osilator harmonik maupun teredam
diperoleh bahwa algoritma yang telah dilakukan dengan menggunakan perangkat
JavaScript telah berhasil mensimulasikan sistem osilator harmonik sederhana maupun
teredam (untuk 1, 2, dan 3 benda). Hasil simulasinya berupa waktu dan posisi tiap
benda serta grafik amplitudo maksimum dan jumlah benda yang digambarkan melalui
grafik. Benda yang posisinya berada paling bawah memiliki amplitudo terbesar.
Kemudian untuk kasus dengan nilai konstanta yang berbeda, semakin besar konstanta
pegas maka kemiringan kurvanya juga akan semakin besar.
6.7 Referensi
1. Da Costa, Jose. 2014. Analisis Numerik untuk Gerak Osilasi Bergandeng pada
Air Track dengan Metode Runge-Kutta. Prosiding Pertemuan Ilmiah XXVIII
HFI Jateng & DIY, Yogyakarta, 26 April 2014, ISSN: 0853-0823, halaman 14
- 17.
2. Pain, H.J. 2005. The Physics Of Vibrations And Waves Sixth Edition . John
Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex PO19
8SQ, England, halaman 79.
3. Rao, Singiresu S. 2011. Mechanical Vibrations 5th Edition. Pearson
Education, Inc, halaman 22.
4. Cahyadi, Melisa. 2015. Visualisasi Solusi Analitik dari Osilasi Pegas dengan
menggunakan Visual Basic For Application (VBA). Prosiding Simposium
Nasional Inovasi dan Pembelajaran Sains 2015 (SNIPS 2015) 8 dan 9 Juni
2015, Bandung, Indonesia, ISBN: 978-602-19655-8-0, halaman 9 - 12.
5. Robert Ehrlich. 2002. Euler's method for coupled differential equations; RLC
circuits. Physics Dept. George Mason University.
http://www.physnet.org/modules/pdf_modules/m351.pdf diakses tanggal 7
Mei 2017
158
6. http://courses.ncssm.edu/aphys/labs/elab3/elab3.html Finding the equation of

motion of an oscillating mass by a revised euler's method diakses tanggal 1
Mei 2017.
7. Anders W. Sandvik. 2016. PY 502, Computational Physics : Numerical
Solutions of Classical Equations of Motion. Department of Physics, Boston
University. http://physics.bu.edu/py502/lectures3/cmotion.pdf diakses tanggal
7 Mei 2017
8. M. Ilham. 2014. Laporan Praktikum Fisika Komputasi: Persamaan
Differensial Biasa Orde 2. https://muhammadilham99.files.wordpress.com/
diakses tanggal 1 Mei 2017
6.8 Lampiran
index2.1.html
HTML Tampilan layout
- script2.1.js
- graph.js
- plot.js Waktu, Posisi
JavaScript
- layout2.1.js Benda 1,2,&3
grafik.plt Gnuplot - Gambar 1.2

- Gambar 1.3
- Gambar 1.4
- Gambar 1.5
- Gambar 1.6
- Gambar 1.7
B. Program
File HTML
<!DOCTYPE html>
<html>
<head>
159
<meta charset="ISO-8859-1">
<title>Spring Forces 2.1</title>
</head>
<body>
<h1 style="font-family:sans-serif; font-size:24px; text-align:center;">
Simulasi 1D Gerak Osilasi n Partikel Terkopel </h1></br>
<p> Simulasi dibawah ini menunjukkan gerak n buah benda bermassa m yang
dihubungkan dengan suatu tali yang elastis dengan konstanta k </p>
<table>
<tr>
<th> Parameter Simulasi </th>
<th> Simulasi </th>
<th> Data Posisi Tiap Benda Terhadap Waktu </th>
<th> Plot Grafik Posisi Tiap Benda Terhadap Waktu </th>
</tr>
<tr>
<th> <textarea id="ta1" cols="35" rows="10"></textarea>
</th>
<th> <canvas id="canvas" width=200 height=400></canvas></th>
<th> <textarea id="textarea2" cols="30"
rows="20"></textarea> </th>
<th> <canvas id="canvas3" width=450 height=400
style="border:1px solid black"></canvas> </th>
</tr>
<tr>
<th> </th>
<th> <script src="layout2.1.js"></script> </th>
<th> </th>
<th> </th>
</tr>
<script src="script2.1.js"></script>
<script src= "graph.js"></script>
<script src= "plot.js"></script>
</table>
</body>
</html>
File Javascript
• Script2.1
160
var mass, mass1, mass2, mass3, particles;

var k, damping;
var t, dt, tend;
var holder;
var Fext;
var x, y, r;
// Define global variables for real world coordinates

var xwmin = 0;
var ywmin = 0;
var xwmax = 0;
var ywmax = 0;
// Define global variables for canvas coordinate

var xcmin = 0;
var ycmin = 0;
var xcmax = 0;
var ycmax = 0;
// Define figure
var currentFigure = "";
var figureBackground = "white";
// Define array for plot

var N = 100;
var iN = 0;
var data_t = new Array();
var data_x = new Array();
var data_x2 = new Array();
var data_x3 = new Array();
var ta1 = document.getElementById("ta1");
init();
draw();
function generateFromTextarea(){
var dataTa = ta1.value.split("\n");
var arrayData = new Array();
161
for(var i=0; i < dataTa.length - 1; i++){

var dsplit = dataTa[i].split("\t");
var pvar = parseFloat(dsplit[2]);
arrayData.push(pvar);
}
return arrayData;
}
function init() {
// Initialize drawing properties
setWorldCoordinates(0, 0, 10, 10);
setCanvasCoordinates("canvas");
// Ambil data textarea

ta1.innerHTML = "m\t=\t10\n";
ta1.innerHTML += "r\t=\t10\n";
ta1.innerHTML += "Fext\t=\t10\n";
ta1.innerHTML += "k\t=\t35\n";
ta1.innerHTML += "c\t=\t5\n";
ta1.innerHTML += "t\t=\t0\n";
ta1.innerHTML += "dt\t=\t0.1\n";
ta1.innerHTML += "t akhir\t=\t58\n";
var dataArray = generateFromTextarea();
// INITIAL SETTINGS of physical properties

mass = dataArray[0];
r = dataArray[1];
Fext = - 10;
particles = [ {x : 5, y : 7.0, vx : 0, vy : 0},
{x : 5, y : 6.0, vx : 0, vy : 0},
{x : 5, y : 5.0, vx : 0, vy : 0},
{x : 5, y : 4.0, vx : 0, vy : 0},
{x : 5, y : 3.0, vx : 0, vy : 0}
];
for(var i=0; i<particles.length; i++){
data_x[i] = new Array();
}
162
k = 35;
damping = 5;
t = 0;
dt = 0.1;
tend = 58;
holder = {x : 5, y : 9.0};
function animate() {
if(t < tend) {
requestAnimationFrame(animate); // request next timestep
}
update(); //update simulation to advance in time
clear();
draw(); //draw the simulation state
data();
if(t >= tend) {

plot();
}
}
function data() {
var ta2 = document.getElementById("textarea2");
var data = ta2.value;
data += t + ",";
data += particles[i].y + ",";
}
data += "\n";
ta2.value = data;
}
function update(){
var FP = new Array();
var FR = new Array();
163
var r;
if(i==0){
r = -k*(particles[i].y - holder.y);
FP.push(r);
} else {
r = -k*(particles[i].y - particles[i-1].y);
FP.push(r);
}
r = damping * particles[i].vy;
FR.push(r);
}
var F = new Array()

for(var i=0; i < particles.length; i++){
var r;
if(i==0){
r = FP[i] - FR[i] - FP[i+1] + FR[i+1];
} else if (i==particles.length-1){
r = FP[i] - FR[i] - FP[i-1] + FR[i-1] + FP[i] + Fext
- FR[i];
} else {
r = FP[i] - FR[i] - FP[i-1] + FR[i-1] - FP[i+1] +
FR[i+1] + FP[i] - FR[i];
}
F.push(r);
}
var a = new Array();

a.push(F[i]/mass);
}

particles[i].vy = particles[i].vy + a[i] * dt;
}

particles[i].y = particles[i].y + particles[i].vy * dt;
}
164
data_t[iN] = t;
var r = parseFloat(particles[i].y.toFixed(3));
data_x[i].push(r);
}
iN++;
t = t + dt;
function clear(){
var c = canvas.getContext("2d");
c.background = "white";
c.clearRect(0,0, canvas.width, canvas. height);
c.stroke();
}
function draw(){
var xx = transX(x);
var yy = transY(y);
}

canvas.style.border="1px black solid";
//holder
c.fillstyle = "black";
var holderWidth = 20;
var holderHeight = 10;
c.rect(transX(holder.x) - holderWidth / 2, transY(holder.y) -
holderHeight / 2 , holderWidth, holderHeight);
c.stroke();
c.fill();

if(i==0){
165
c.strokeStyle = "black";
c.beginPath();
c.moveTo(transX(holder.x), transY(holder.y));
c.lineTo(transX(particles[i].x),
transY(particles[i].y));
c.closePath();
c.stroke();
c.fillStyle = "rgb(183,0,"+i*50+")";
c.beginPath();
c.arc(transX(particles[i].x), transY(particles[i].y),
r, 0, Math.PI * 2);
c.closePath();
c.fill();
} else {
c.strokeStyle = "black";
c.beginPath();
c.moveTo(transX(particles[i-1].x), transY(particles[i-
1].y));
c.lineTo(transX(particles[i].x),
transY(particles[i].y));
c.closePath();
c.stroke();
c.fillStyle = "rgb(183,0,"+i*50+")";
c.beginPath();
c.arc(transX(particles[i].x), transY(particles[i].y),
r, 0, Math.PI * 2);
c.closePath();
c.fill();
}
}
}
// Set real world coordinates

function setWorldCoordinates(xmin, ymin, xmax, ymax) {
xwmin = xmin;
ywmin = ymin;
xwmax = xmax;
ywmax = ymax;
166
// Set canvas coordinates

function setCanvasCoordinates(canvas) {
currentFigure = canvas;
var c = document.getElementById(canvas);
xcmin = 0;
ycmin = c.height;
xcmax = c.width;
ycmax = 0;
}
// Transform x
function transX(x) {
var xx = (x - xwmin) / (xwmax - xwmin) * (xcmax - xcmin);
xx += xcmin;
var X = parseInt(xx);
return X;
}
// Transform y
function transY(y) {
var yy = (y - ywmin) / (ywmax - ywmin) * (ycmax - ycmin);
yy += ycmin;
var Y = parseInt(yy);
//console.log(Y);
return Y;
}
var canvas = document.getElementById(currentFigure);
c.fillStyle = figureBackground;
c.fillRect(xcmin, ycmax, xcmax, ycmin);
}
• Layout
167
var b1 = document.createElement("button"); b1.innerHTML = "START

SIMULATION ";
b1.onclick = function () {
animate();
}
document.body.appendChild(b1); //button
• Graph
/* Reference:
Ramtal, Dev; Dobre, Adrian. 2011. Physics for Javascript Games,
Animation, and Simulations. New York, United States: Apress
*/
function Graph(context,xmin,xmax,ymin,ymax,x0,y0,xwidth,ywidth) {
// VARIABLE DECLARATIONS
// canvas context on which to draw graph instance
var ctx = context;
// location of origin (in pixels) in parent document
var x_orig;
var y_orig;
// overall width and height of graph in pixels
var x_width;
var y_width;
// min and max of x and y relative to origin (in pixels)
var x_min_rel;
var x_max_rel;
var y_min_rel;
var y_max_rel;
// obvious
var x_tick_major;
var x_tick_minor;
var y_tick_major;
var y_tick_minor;
// scaling used in displaying values on the axes
var x_displ_scal;
var y_displ_scal;
// width and height of textbox used for displaying values on the
axes
// this should not have to be tampered with (I hope)
var tw=15;
var th=20;
// declarations for quantities to be used later
var x_min;
var x_max;
var y_min;
var y_max;
var xx;
var yy;
var x_displ;
var y_displ;
var txpos;
var typos;
// PARAMETER ASSIGNMENTS
168
// assign parameter values based on specified arguments
x_orig=x0;
y_orig=y0;
x_width=xwidth;
y_width=ywidth;
//
x_displ_scal=(xmax-xmin)/xwidth;
y_displ_scal=(ymax-ymin)/ywidth;
//
x_min_rel=xmin/x_displ_scal;
x_max_rel=xmax/x_displ_scal;
y_min_rel=ymin/y_displ_scal;
y_max_rel=ymax/y_displ_scal;
// convert to absolute coordinates
x_min=x_min_rel + x_orig;
x_max=x_max_rel + x_orig;
y_min=y_orig - y_min_rel;
y_max=y_orig - y_max_rel;
txpos=x_orig - tw;
typos=y_orig;
// METHODS
// DRAW GRID: draw major, minor lines and display values
this.drawgrid = function(xmajor,xminor,ymajor,yminor){
x_tick_major=xmajor/x_displ_scal;
x_tick_minor=xminor/x_displ_scal;
y_tick_major=ymajor/y_displ_scal;
y_tick_minor=yminor/y_displ_scal;
// draw major grid lines
ctx.strokeStyle = '#999999';
ctx.lineWidth = 1;
ctx.beginPath() ;
yy=y_max;
do {
ctx.moveTo(x_min,yy);
ctx.lineTo(x_max,yy);
yy+= y_tick_major;
} while (yy <= y_min);
xx=x_min;
do {
ctx.moveTo(xx,y_min);
ctx.lineTo(xx,y_max);
xx+= x_tick_major;
} while (xx <= x_max);
ctx.stroke();
// draw minor grid lines
ctx.strokeStyle = '#cccccc';
ctx.lineWidth = 1;
ctx.beginPath() ;
yy=y_max;
do {
ctx.moveTo(x_min,yy);
ctx.lineTo(x_max,yy);
yy+= y_tick_minor;
xx=x_min;
do {
169
ctx.moveTo(xx,y_min);
ctx.lineTo(xx,y_max);
xx+= x_tick_minor;
ctx.stroke();
//display values
ctx.font = "10pt Arial";
ctx.fillStyle = '#000000';
ctx.textAlign = "right";
ctx.textBaseline = "top";
yy=y_max;
do {
y_displ=((y_orig - yy) * y_displ_scal).toFixed(2);
ctx.fillText(y_displ,txpos + 5,yy - th / 2);
yy+= y_tick_major;
ctx.textAlign = "left";
xx=x_min;
do {
x_displ=(xx - x_orig) * x_displ_scal;
ctx.fillText(x_displ,xx - tw + 10,typos + 5);
xx+= x_tick_major;
};
// DRAW AXES: draw axes and labels

this.drawaxes = function (xlabel,ylabel){
if(typeof(xlabel)==='undefined') xlabel = 'x';
if(typeof(ylabel)==='undefined') ylabel = 'y';
ctx.strokeStyle = '#000000';
ctx.lineWidth = 2;
ctx.beginPath() ;
ctx.moveTo(x_min,y_orig);
ctx.lineTo(x_max,y_orig);
ctx.moveTo(x_orig,y_min);
ctx.lineTo(x_orig,y_max);
ctx.stroke();
//axis labels
ctx.font = "12pt Arial";
ctx.fillStyle = '#000000';
ctx.textAlign = "left";
ctx.fillText(xlabel,x_max + 0.75 * tw,typos - th / 2);
ctx.fillText(ylabel,txpos + tw / 2 +5,y_max - 1.5 * th);
};
// PLOT DATA: plot data

this.plot = function (xArr, yArr, pColor, pDots, pLine){
// the last three arguments have default values
if(typeof(pColor)==='undefined') pColor = '#0000ff';
if(typeof(pDots)==='undefined') pDots = true;
if(typeof(pLine)==='undefined') pLine = true;
var xpos=x_orig+xArr[0]/x_displ_scal;
var ypos=y_orig-yArr[0]/y_displ_scal;
ctx.strokeStyle = pColor;
ctx.lineWidth = 1;
170
ctx.beginPath() ;
ctx.moveTo(xpos,ypos);
ctx.arc(xpos,ypos,1,0,2*Math.PI,true);
for (var i=1; i<xArr.length; i++){
xpos=x_orig+xArr[i]/x_displ_scal;
ypos=y_orig-yArr[i]/y_displ_scal;
if (pLine){
ctx.lineTo(xpos,ypos);
}else{
ctx.moveTo(xpos,ypos);
}
if (pDots){
ctx.arc(xpos,ypos,1,0,2*Math.PI,true);
}
}
ctx.stroke();
};
}
• Plot Grafik
function plot(){
var canvas3 = document.getElementById('canvas3');
var context3 = canvas3.getContext('2d');
var graph3 = new Graph(context3,-
0.5*tend,tend,0,15,70,380,450,350);
graph3.drawgrid(tend / 10, tend / 20,1,0.25);
graph3.drawaxes('t','y');

graph3.plot(data_t, data_x[i], "rgb(183,0,"+i*50+")", true,
true);
}
}
File GNUPLOT
Plot Posisi-Waktu untuk Benda 1 Tak Teredam
gnuplot> cd 'D:\VIVIDITY\S2\SEMESTER 2\Komputasi Sistem Fisis\RBL\Script
Benda 1 Tak Teredam'
gnuplot> set xlabel “{/Italic t)" font “Times,12”
gnuplot> set ylabel “{/Italic y)" font “Times,12”
gnuplot> plot'data.dat't""
Plot Posisi-Waktu untuk Benda 1 Teredam

Benda 1 Teredam'
gnuplot> plot'data.dat't""
171
Plot Posisi-Waktu untuk Benda 1&2 Teredam

Benda 2 Teredam'
gnuplot> plot'benda 1.dat't"m1",'benda 2.dat't"m2"
Plot Posisi-Waktu untuk Benda 1,2&3 Teredam

Benda 3 Teredam'
gnuplot> plot'benda1.dat't"m1",'benda2.dat't"m2",'benda3.dat't"m3"
Plot Amaks-N
gnuplot> cd 'D:\VIVIDITY\S2\SEMESTER 2\Komputasi Sistem Fisis\RBL'
gnuplot> set xlabel “{/Italic Amaks)" font “Times,12”
gnuplot> set ylabel “{/Italic N)" font “Times,12”
gnuplot> plot’ksama.dat’t””
Plot Amaks-N
gnuplot> cd 'D:\VIVIDITY\S2\SEMESTER 2\Komputasi Sistem Fisis\RBL'
gnuplot> set xlabel “{/Italic Amaks)" font “Times,12”
gnuplot> set ylabel “{/Italic N)" font “Times,12”
gnuplot> plot’ksama.dat’t”k = 10”, ’ksama2.dat’t”k = 15”,
’ksama3.dat’t”k = 20”
C..Tampilan Antarmuka Program
1 3
2
4
Gambar 6.8 Tampilan Antarmuka Program: (1) Paremeter Simulasi, (2) Simulasi, (3) Grafik
posisi setiap partikel terhadap waktu, (4) Grafik posisi setiap partikel terhadap waktu, dan (5)
Tombol “START SIMULATION”.
172
Simulasi reflektansi, transmitasi,
7 absorbansi gelombang EM melalui N
medium
Ahmad Suaif| ahmadsuaif@gmail.com
Yonathan Priambada Purwasunu | yonathanpp@gmail.com
Marisa Ulfa| marisaulfax@gmail.com
Gigih Pamungkas | pamungkas.gigih@gmail.com
Ahmad Zatnika Purwalaksana | purwalaksa@gmail.com
Nuraina Fika Lubis | nurainafikalubis@gmail.com
Philin Yolanda Dwi Sagita | philinyolanda.92@gmail.com
Terdapat tiga jenis interaksi yang umum terjadi saat suatu berkas gelombang
elektromagnetik mengenai suatu medium material: reflektansi, transmitansi, dan
absorbansi. Tiga jenis interaksi gelombang elektromagnetik pada medium dapat
diselesaikan dengan memperhatikan nilai panjang gelombang elektromagnetik yang
datang dan indeks bias internal dari material referensi. Perhitungan nilai-nilai
koefisien ini dilakukan dengan menggunakan metode numerik berupa deret perkalian
matriks. Hasil akhir dari perhitungan ini secara umum menunjukkan besaran
intensitas pada titik-titik diskrit yang telah ditentukan kemudian diinterpolasi untuk
memperhalus hasil. Untuk menggambarkan secara fisis interaksi antara gelombang
elektromagnetik dengan medium, telah dilakukan simulasi dengan dukungan
Javascript. Selain itu, dilakukan pula visualisasi grafik nilai koefisien-koefisien
reflektansi, transmitansi, dan absorbansi berbasis Javascript.
7.1 Pendahuluan
Perilaku gelombang EM yang melintasi suatu interface dapat direpresentasikan
melalui koefisien reflektansi (R), transmitansi (T), dan absorbansi (A). Variabel R
menunjukkan amplitudo, intensitas dan total gelombang yang dipantulkan balik ke
arah gelombang datang, T menunjukkan banyaknya gelombang yang ditransmisikan,
dan A menunjukkan seberapa banyak proporsi gelombang datang yang tidak
ditransmisikan maupun dipantulkan, melainkan diserap dalam medium [1].
Pada kasus dimana gelombang EM dengan propagasi modus TE dilewatkan pada
struktur material yang memiliki indeks bias berbeda yang disusun sedemikian
sehingga memiliki ketebalan ∆L dengan sejumlah N lapis material, maka akan
terdapat hubungan antara indeks bias campuran tersebut terhadap nilai R, T, dan A [2].
173
KomputasiFisika 3: 7 Simulasi reflektansi, transmitasi, absorbansi ..
7.2 Teori
Propagasi gelombang elektromagnetik (EM) yang menjalar melalui beberapa medium
tidak dapat diselesaikan hanya menggunakan rumus propagasi gelombang biasa,
tetapi harus menggunakan metode matriks transfer. Metode matriks transfer adalah
metode pembagian daerah perhitungan dimana masing-masing daerah dihitung
dengan menggunakan matriks propagasi gelombang elektromagnetik [3]. Metode ini
digunakan untuk memudahkan perhitungan pada gelombang yang merambat melalui
beberapa medium.
Gambar 7.1 Propagasi gelombang EM pada beberapa medium.

Energi total pada gelombang elektromagnetik diuraikan menjadi
r
E ( x ) = Re − ik1 x x + Le ik1 x x ≡ A( x ) + B ( x ) , (7.1)
dengan nilai dari masing-masing koefisien penyerta

1/ 2
 n ω  2  ω 
k ix =  l  − β 2  =  ni cosθ i , (7.2)
 c   c
di mana
ω 
β =  ni sin θ i . (7.3)
c
Sehingga, matriks solusi dituliskan
r r r r
 A0   M 11 M 12  A's  , (7.4)
 r = r r  r 
B  M M 22  B 's 
 0   21
di mana
r r
 r
M r [
 M 11 M 12  r −1 N r r r −1 r ,
 = D0 ∏l =1 Dl Pl Dl Ds
 ] (7.5)
 21 M 22 
174
r r
A0 dan B0 adalah amplitudo gelombang berdiri pada medium 0 di x = x 0 , sedangkan
r r
pada x = x N amplitudo gelombang berdiri pada medium s berupa vektor A's dan B's .
Matriks transmisi pada interface medium 0, medium l dan medium s masing-masing
r r r
disimbolkan D0 , Dl , Ds , sedangkan matriks propagasi rambatan gelombang pada bulk
r
medium dinotasikan sebagai Pl .
Dalam suatu medium, matriks transmisi pada interface medium s adalah sebagai
berikut:
 1 1  untuk TE,
 
r  n s cos θ s − n s cos θ s 
Ds =  (7.6)
  cos θ s cos θ s 
 
  ns − n s  untuk TM,
r  e iϕ l 0 
Pl =   (7.7)
 0 e 
− iϕ l
dengan
2πd
ϕ i = k ix d = ni cos θ i . (7.8)
λ
Koefisien reflektansi dirumuskan sebagai

r
M , (7.9)
r = r 21
M 11
sedangkan transmitansi koefisien dirumuskan sebagai

1 , (7.10)
t=
M 11
dengan demikian diperoleh nilai reflektransi baku interaksi gelombang

elektromagnetik pada medium berupa
2
2 M 21 , (7.11)
R= r =
M 11
dengan transmitansi gelombang elektromagnetik adalah

2
n s cos θ s 2 n s cos θ s 1 , (7.12)
T = t =
n 0 cos θ 0 n 0 cos θ 0 M 11
oleh karena R+T+A=1, koefisien absorbansinya menjadi
175
2 2
M 21 n s cos θ s 1 . (7.13)
A = 1− −
M 11 n0 cos θ 0 M 11
Pada kasus ini, telah disimulasikan untuk jumlah layer sebanyak l = 3 dan
diasumsikan θ0 = θ1 = θ2 = θ3 = 0, sehingga akan didapatkan Mij pada gelombang s
dan gelombang p berdasarkan persamaan (7.14, 7.15, 7.16, 7.17) yaitu
r 1 n  1 n n 
M 11 = 1 + 3  cos ϕ + i sin ϕ  2 + 3  , (7.14)
2  n1  2  n1 n1 
r 1 n  1 n n 
M 12 = 1 − 3  cos ϕ + i sin ϕ  2 − 3  , (7.15)
2  n1  2 n
 1 n 2 
r 1 n  1 n n 
M 21 = 1 − 3  cos ϕ − i sin ϕ  2 − 3  , (7.16)
2 n1  2 n
 1 n2 
r 1 n  1 n n 
M 22 = 1 + 3  cos ϕ − i sin ϕ  2 + 3  , (7.17)
2 n1  2 n
 1 n2 
dengan
2πn2 d . (7.18)
ϕ=
λ
7.3 Metode numerik

Pada kasus N layer digunakan metoda transfer matriks, dengan asumsi bahwa sinar
datang tegak lurus terhadap bidang layer Anggap bidang layer normal terhadap
sumbu-z, sehingga medan di dalam satu layer dapat dituliskan sebagai berikut:
E ( z ) = Er e(ikz ) + El e(− ikz ) , (7.19)
r
di mana E (z ) dimodelkan sebagai superposisi daripada gelombang yang menjalar ke
kiri (ke arah sinar datang) dan gelombang yang menjalar ke kanan (ke arah penjalaran
transmisi gelombang).
Dari syarat batas persamaan Maxwell dapat ditentukan kalau E dan F = dE/dz mesti
kontinyu ketika gelombang melintasi interface layer. Dengan mengambil L sebagai
ketebalan satu layer dan z sebagai arah jalar gelombang, dapat dituliskan
r
M = coskL (1 / k )sinkL , (7.20)
 
− ksinkL coskL 
176
di mana
r r r
 E ( z + L ) = M  E ( z ) . (7.21)
   
 Fr ( z + L )  Fr ( z )
   
Matriks M merupakan matriks yang memodelkan penjalaran gelombang melewati

satu lapisan layer. Untuk memodelkan penjalaran gelombang melewati sejumlah
layer, misalnya N-layer, kita dapat menggunakan perkalian matriks tiap-tiap layernya
karena mekanisme matriks M untuk setiap layer tidak bergantung kepada matriks
penjalaran di layer yang lain
r r r r r
M s = M N .M N −1 L M 2 .M 1 . (7.22)
Untuk studi sistem fisis semacam ini, biasanya yang diamati adalah propagasi energi
gelombang, yaitu dengan mencari tahu banyak energi yang akan ditransmisikan
melalui sistem layers ini dan juga banyak energi yang akan di refleksikan kembali ke
arah sinar datang. Besaran energi dipilih karena secara eksperimen, jumlah energi
yang keluar dan masuk sistem dapat dibaca dengan cukup mudah. Untuk keperluan
simulasi ini, besaran energi yang dibawa gelombang ini akan dipelajari melalui
besaran transmitansi (atau transmittance T) dan juga reflektansi (atau reflectance R).
Anggaplah tumpukan layer kita mulai dari posisi z = 0. Pada posisi z < 0, yang
merupakan daerah udara (atau vakum, tergantung dari aproksimasi kita), medan listrik
dapat kita tuliskan sebagai
r ik z − ik z
E L (z ) = E0 e L + rE 0 e L , z < 0 , (7.23)
dimana E0 adalah amplitudo gelombang datang dan KL adalah bilangan gelombang di

medium datang dan r adalah amplitudo koefisien reflektansi. Suku kedua Persamaan
(7.22) ada karena selain sinar datang (suku pertama) di zona ini juga ada sinar yang
dipantulkan, yang diwakilkan oleh ekspresi suku kedua.
Sebaliknya, pada sisi system lainnya (sisi sebelah kanan, setelah sistem layers kita),
medan dapat dituliskan
r ik z
E R ( z ) = tE 0 e R , z > L' , (7.24)
di mana L’ adalah tebal keseluruhan sistem layers. Mengingat keberlakuan syarat

batas
177
dE L dE R
FL = ; FR = , (7.25)
dz dz
dapat dituliskan sebuah hubungan seperti
r r r
 E ( z R ) = M  E (0 ) . (7.26)
   
 Fr ( z )  Fr (0 )
 R   
Mengingat bahwa M disini merupakan agregat dari semua matrix transfer tiap layer
yang ada dari titik z =0 sampai ke titik zR , kita dapat menuliskan amplitudo koefisien
refleksi dan amplitudo koefisien transmitansi sebagai
− ik R L'  1 
 r r  , (7.27)
( )
t = 2ik L e r r
 − M 21 + k L k R M 12 + i k R M 11 + k L M 22 
( ) ( )
r r r r
 M 21 + k L k R M 12 + i k L M 22 − k R M 11 
r= r r ,
( ) ( )
r r (1.28)
 − M 21 + k L k R M 12 + i k L M 22 + k R M 11 
dari nilai t dan r ini, maka dapat dihitung nilai transmitansi (T) dan reflektansi R
dengan menggunakan hubungan berikut
kR 2
T= |t | , (7.29)
kL
R = |r | .
2
(7.30)
7.4 Algoritma
Simulasi transmitasi, reflektansi, dan absorbansi gelombang EM melalui tiga layer

dilakukan dengan menggunakan algoritma berikut ini untuk memperoleh R, T dan A.
L1. ?
L2. , , ?
L3. d/λ ?
L4. k1x= k.n1, k2x= k.n2, k3x=k.n3
178
L5.
, D23
L6. =
L7.
L8.
L9. ,
L10.
L11.
L12. A = 1 - R –T
Simulasi transmitasi, reflektansi, dan absorbansi gelombang EM melalui sistem N

layer dilakukan dengan menggunakan algoritma berikut ini untuk memperoleh R, T
dan A.
L1. k? L? N?kR ? kL?

L2. k =2π/λ
L3. L,N (ditentukan oleh user. Nilai bisa divariasikan)
L4. kR = kL=2π/λ0
L5. M =[M11 M12 M21 M22]
L6. M11 = cos (kL)
L7. M12 = (1/k) sin (kL)
L8. M21 = -k sin (kL)
L9. M22 = cos (kL)
N
L10. Ms =
∏M
i
i
L11. −ik R L'  1 

t = 2ik L e  − M + k k M + i (k M + k M ) 
 21 L R 12 R 11 L 22 
L12.  (M 21 + k L k R M 12 ) + i(k L M 22 − k R M 11 ) 
r= 
 (− M 21 + k L k R M 12 ) + i (k L M 22 + k R M 11 ) 
179
L13. kR 2
T= |t|
kL
R = |r|
2
L14.

Dalam simulasi dan visualisasi dari interaksi gelombang elektromagnetik terhadap
sejumlah N-medium dengan indeks bias bervariasi, diinisialisasi beberapa parameter
berikut.
Symbol Nilai Code

(Panjang Gelombang 700 nm L
Cahaya Sumber)
(Indeks Bias 0.186 + 3.302i n2
Emas)
(Indeks Prisma) 1.5 n1
(Indeks Bias 4.01 n3
Silika)
d (Ketebalan Logam 50 – 10nm d
pada Medium 2)
Paramater standar yang digunakan merupakan parameter baku. Variabel peubah dari
eksperimen komputasi ini adalah indeks bias dari medium yang digunakan. Indeks
bias dari medium pertama dan ketiga berupa bilangan real, sedangkan indeks bias
medium kedua berupa bilangan real dan imajiner. Bilangan imajiner
merepresentasikan sifatdispersif suatu bahan.
Tampilan perambatan gelombang EM (Cahaya tampak) yang terjadi pada medium 1,
2 dan 3 ditunjukkan pada ilustrasi berikut.
180
(a)
(b)
(c)
Gambar 7.2 Hasil simulasi transmitansi (atas), absorbansi (tengah) dan reflektansi (bawah)
gelombang cahaya pada tiga medium yang memiliki indeks bias yang berbeda, (a) keadaan
normal, (b) keadaan saat gelombang transmitansi, absorbansi dan reflektansi akan memasuki
medium ketiga, (c) keadaan saat terjadi transmitansi yang menembus medium ketiga (kuning),
absorbansi yang hanya menembus medium kedua (hijau tosca), serta reflektansi ketika
menembus medium kedua, laser terpantul menuju medium pertama (biru).
181
Pada peristiwa transmitansi, reflektansi, dan absorbansi ini, terjadi fenomena

kekekalan energi dimana energi elektromagnetik yang masuk ke sistem material yang
dilewati oleh gelombang elektromagnetik tersebut sama dengan energi yang keluar
dari sistem. Secara eksperimen hal ini dapat dibuktikan dengan menyediakan lapisan
sensitif foton di sekeliling material, sehingga akan didapatkan data persentase jumlah
foton yang dihamburkan/dipantulkan (R) dan diteruskan (T). Berdasarkan dengan
hukum kekekalan energi yang menyatakan bahwa energi masuk harus sama dengan
energi keluar, maka 1 – R – T = A, di mana A menunjukkan nilai persentase jumlah
foton yang diserap oleh sistem material terhadap jumlah foton yang diberikan. Jumlah
foton ini biasanya ditunjukkan dengan nilai intensitas cahaya.
Data hasil perhitungan nilai transmitansi, absorbansi, dan reflektasi dengan ketebalan
d/λ) yang divariasikan pada range 0 - 0.2 ditunjukkan pada Gambar 7.3 berikut.
Gambar 7.3 Data hasil perhitungan nilai refleksi, transmitansi, dan absorbansi pada nilai n1 =
1.5, n2 = 0.186 + 3.302i, n3 = 4.01.
Grafik hubungan reflektansi, transmitansi, dan absorbansi terhadap ketebalan bahan
per panjang gelombang untuk n1 = 1.5, n2 = 0.186 + 3.302i, n3 = 4.01, ditunjukkan
secara berturut-turut pada gambar 7.4, 7.5, dan 7.6 berikut.
d/λ
Gambar 7.4 Grafik reflektansi untuk n1 = 1.5, n2 = 0.186 + 3.302i, n3 = 4.01.

182
d/λ
Gambar 7.5 Grafik Transmitansi pada n1 = 1.5, n2 = 0.186 + 3.302i, n3 = 4.01.
d/λ
Gambar 7.6 Grafik Absorbsi untuk n1 = 1.5, n2 = 0.186 + 3.302i, n3 = 4.01.
Seperti yang telah di bahasa pada bagian landasan teori, diketahui bahwa persamaan
untuk nilai persentase reflektansi, transmitansi, dan absorbansi bergantung pada nilai
φ dimana nilai φ bergantung pada ketebalan bahan per panjang gelombang (d/λ).
Sehingga dengan persamaan dibuat grafik yang menghubungkan antara nilai
persentase reflektansi, transmitansi, dan absorbansi terhadap nilai d/λ.
Pada Gambar 7.4 ditunjukkan grafik persentase reflektansi untuk ketiga lapisan
material dengan indeks bias n1 = 1.5, n2 = 0.186 + 3.302i, n3 = 4.01. Peristiwa
reflektansi ini terjadi di semua batas lapisan material. Sehingga grafik tersebut
menginterpretasikan nilai reflektansi total yang terjadi pada sistem bergantung pada
panjang gelombang dan ketebalan lapisan. Sumbu y pada grafik menunjukkan nilai
persentase reflektansi sedangkan sumbu x menginterpretasikan perbandingan antara
ketebalan lapisan dan panjang gelombang cahaya d/λ, sehingga dapat disimpulkan
bahwa persentase reflektansi sistem meningkat secara eksponensial terhadap d/λ
antara 0 – 0.1 µm dan untuk panjang gelombang dan ketebalan selanjutnya nilai
183
persentase reflektansi menjadi tetap, yaitu sebesar ~ 1 atau ~ 100% ketika sinar sudah
melewati lapisan ketiga dan akan bernilai nol ketika cahaya belum memasuki lapisan
pertama.
Pada Gambar 1.5, grafik menunjukkan hubungan persentase transmitansi untuk ketiga
lapisan material dengan indeks bias n1 = 1.5, n2 = 0.186 + 3.302i, n3 = 4.01. Peristiwa
transmitansi ini terjadi di semua batas lapisan material. Sehingga grafik tersebut
menginterpretasikan nilai transmitansi total yang terjadi pada sistem bergantung pada
panjang gelombang dan ketebalan lapisan bahan. Sumbu y pada grafik menunjukkan
nilai persentase transmitansi sedangkan sumbu x mengintrepretasikan perbandingan
ketebalan lapisan bahan dan panjang gelombang d/λ. Gambar 1.5 menunjukkan
bahwa persentase transmitansi sistem menurun secara eksponensial terhadap d/λ pada
titik 0 - 0,1µm dan untuk panjang gelombang dan ketebalan selanjutnya akan
memiliki nilai persentase transmitansi tetap sebesar 0 atau 0% ketika sinar sudah
melewati lapisan ketiga dan bernilai 1 atau 100% ketika cahaya belum memasuki
lapisan pertama. Seperti telah diketahui sebelumnya, transmitansi adalah
perbandingan antara nilai intensitas cahaya yang masuk dibandingkan dengan nilai
intensitas cahaya yang keluar. Ketika nilai persentase transmitansi bernilai 1 pada
Gambar 1.6 tersebut, disimpulkan bahwa nilai intensitas cahaya yang masuk memiliki
nilai sama dengan intensitas cahaya yang keluar karena cahaya masih belum melalui
lapisan 1, 2, dan 3. Setelah cahaya melewati lapisan 1, 2, dan 3 pada d/λ sebesar 0,1
didapatkan bahwa persentase transmitansi sebesar 0 atau 0% sehingga dapat
disimpulkan bahwa tidak ada intensitas cahaya yang keluar, semua cahaya diserap
dan dipantulkan oleh ketiga lapisan.
Pada Gambar 1.6 ditunjukkan grafik persentase absorbansi untuk ketiga lapisan
material dengan indeks bias n1 = 1.5, n2 = 0.186 + 3.302i, n3 = 4.01. Peristiwa
absorbansi ini terjadi di semua batas lapisan material. Sehingga grafik tersebut
menginterpretasikan tentang persentase absorbansi total yang terjadi pada sistem
bergantung pada panjang gelombang dan ketebalan lapisan. Sumbu y pada grafik
menunjukkan nilai persentase absorbansi sedangkan sumbu x menginterpretasikan
tentang d/λ. Persentase absorbansi sistem sedikit mengalami kenaikan terhadap d/λ,
sehingga dapat disimpulkan bahwa cahaya akan diserap oleh lapisan 1, 2, dan 3 dalam
jumlah sedikit, sebagian besar cahaya akan dipantulkan sehingga tidak ada cahaya
yang akan diteruskan.
Analisis data selanjutnya saat dilakukan variasi terhadap indeks bias material, baik
bagian real maupun imajiner, maka akan kita dapatkan grafik berikut.
184
n
Gambar 7.7 Grafik perubahan nilai transmitansi gelombang pada perubahan nilai indeks bias
material.
Berdasarkan Gambar 7.7 di atas, diketahui bahwa variasi indeks bias material (nilai
real maupun imajiner) akan menyebabkan terjadinya osilasi dan terbentuknya puncak-
puncak gelombang nilai transmitansi untuk masing-masing indeks bias yang
diberikan. Sehingga dapat dikatakan bahwa untuk 1 nilai indeks bias, terdapat 1 nilai
transmitansi gelombang dan semakin kecil nilai indeks biasnya, maka nilai
transmitansinya justru akan semakin besar.
Sementara itu, grafik perubahan nilai reflektansi maupun absorbansi gelombang pada
variasi indeks bias material (real maupun imajiner) akan didapatkan sebagai berikut:
Gambar 7.8 Grafik perubahan nilai reflektansi gelombang pada variasi indeks bias material.
185
Gambar 7.9 Grafik perubahan nilai absorbansi gelombang pada variasi indeks bias material.
Berdasarkan kedua grafik (Gambar 7.8 dan Gambar 7.9) pengaruh nilai reflektansi
dan absorbansi gelombang pada variasi indeks bias material (real maupun imajiner)
di atas dapat diketahui bahwa terjadi juga osilasi nilai reflektansi maupun absorbansi.
Akan tetapi, pada Gambar 7.8, terdapat range nilai reflektansi gelombang untuk 1
nilai indeks bias dan range nilai reflektansi tersebut cenderung tetap untuk semua
variasi indeks bias. Sementara itu pada Gambar 7.9, tidak terdapat nilai range
absorbansi gelombang, namun membentuk puncak-puncak nilai absorbansi
gelombang untuk masing-masing variasi indeks bias, sehingga dapat disimpulkan
bahwa untuk 1 indeks bias material, hanya terdapat 1 nilai absorbansi gelombang dan
nilainya akan semakin besar ketika indek bias materialnya juga semakin besar.
Sehingga secara sederhana, variasi indeks bias material pada ketiga grafik (Gambar
7.7, 1.8 dan 7.9) di atas dapat dikatakan bahwa.
• Terjadi osilasi nilai transmitansi, reflektansi, dan absorbansi gelombang pada
variasi indeks bias yang memiliki nilai real maupun imajiner.
• Untuk 1 indeks bias material, masing-masing memiliki 1 nilai transmitansi, 1
nilai absorbansi gelombang tertentu, dan beberapa nilai reflektansi (dalam
range tertentu).
• Semakin besar nilai indeks bias material, maka nilai transmitansinya akan
semakin kecil.
• Semakin besar nilai indeks bias material, maka nilai reflektansinya akan
cenderung tetap.
• Semakin besar nilai indeks bias material, maka nilai absorbansinya akan
semakin besar pula.
186
Sementara itu, untuk mengetahui pengaruh variasi nilai real maupun nilai imajiner
indeks bias material terhadap perubahan nilai transmitansi, reflektansi, maupun
absorbansi, maka dilakukanlah variasi nilai real maupun nilai imajiner indeks bias
dibawah ini. Bagian imajiner dari indeksbias menunjukkan koefisien absorbsi suatu
material logam.
Tabel 7.2 Nilai Transmitansi, Reflektansi, dan Absorbansi gelombang EM pada variasi nilai
real dari indeks bias material.
Indeks Bias
(Variasi nilai real) Transmitansi (T) Reflektansi (R) Absorbansi (A)
0.01+i 0.809 0.008 0.183
0.02+i 0.802 0.017 0.181
0.03+i 0.796 0.025 0.179
0.04+i 0.79 0.033 0.177
0.05+i 0.785 0.04 0.175
Untuk variasi bagian real dari indeks bias material, maka akan didapatkan grafik
pergerakan perubahan nilai Transmitansi (T), Reflektansi (R), maupun Absorbansi (A)
material sebagai berikut.
R, T
T,
R
A
A
Gambar 7.10 Grafik perubahan transmitansi (T), reflektansi (R), dan absorbansi (A).
Berdasarkan Gambar 7.10 tersebut dapat dilihat bahwa perubahan nilai real pada
indeks bias material menyebabkan nilai transmitansinya cenderung bergerak turun.
Nilai reflektansi cenderung tetap, dan absorbansi cenderung naik. Hal ini sesuai
dengan hasil grafik sebelumnya yang menunjukkan pergerakan kecenderungan nilai
transmitansi, reflektansi, maupun absorbansi.
187
Sementara itu, untuk perubahan bagian imajiner dari indeks bias material, akan
menghasilkan grafik sebagai berikut.
T, T
R,
A R
A
Gambar 7.11 Grafik perubahan nilai transmitansi (T), reflektansi (R), dan absorbansi (A)
terhadap variasi nilai imajiner indeks bias material.
Berdasarkan Gambar 7.11 di atas, dapat simpulkan bahwa variasi nilai imajiner dari
indeks bias material hanya berpengaruh pada pergerakan osilasi nilai transmitansi,
reflektansi, dan absorbansi gelombang yang diterjadi. Sementara itu, nilai dari
transmitansi, reflektansi, dan absorbansi untuk masing-masing material dipengaruhi
oleh bagian real dari nilai indeks biasnya.
Untuk analisis menggunakan N layer, hasil belum didapatkan karena masih terdapat
kesalahan dalam coding. Nilai R + T masih bisa meledak jauh lebih besar daripada 1.
Dugaan kemungkinan terdapat kesalahan/overlap di dalam loop yang digunakan.
7.6 Kesimpulan
1. Fenomena fisika yang disimulasikan dalam jurnal ini adalah peristiwa
transmitansi, reflektansi, dan absorbansi gelombang elektromagnetik pada 4
material dengan indeks bias yang berbeda dimana fenomena ini
membuktikan tentang terjadinya kekekalan energi pada peristiwa penjalaran
gelombang elektromagnetik.
2. Telah berhasil dibuat coding JavaScript tentang penjalaran gelombang EM
(proses reflektansi, transmitansi dan absorbansi) pada tiga lapisan dengan
indeks bias yang berbeda.
188
3. Telah berhasil didapatkan data hasil penjalaran gelombang EM pada proses

reflektansi, transmitansi dan absorbansi pada tiga lapisan dengan indeks bias
yang berbeda.
4. Telah berhasil didapatkan kurva untuk masing-masing proses reflektansi,
transmitansi dan absorbansi gelombang pada tiga lapisan dengan indeks bias
berbeda beserta analisisnya.
5. Nilai persentase reflektansi, transmitansi, dan absorbansi memiliki hubungan
yang linier dengan perbandingan antara ketebalan lapisan dan panjang
gelombang EM yang diberikan dan dapat diinterpretasikan ke dalam grafik.
6. Pada kondisi saat nilai indeks bias ketiga lapisan adalah n1 = 1.5, n2 = 0.186
+ 3.302i, n3 = 4.01, didapatkan bahwa sebagian besar cahaya akan
mengalami pemantulan di semua lapisan, mengalami sedikit penyerapan
gelombang cahaya dan tidak ada cahaya yang diteruskan oleh ketiga lapisan.
7. Untuk satu indeks bias material, masing-masing memiliki satu nilai
transmitansi, satu nilai absorbansi tertentu, dan beberapa nilai reflektansi
(dalam range tertentu).
8. Semakin besar nilai indeks bias material, maka nilai transmitansinya akan
semakin kecil.
9. Semakin besar nilai indeks bias material, maka nilai reflektansinya akan
cenderung tetap.
10. Semakin besar nilai indeks bias material, maka nilai absorbansinya akan
semakin besar pula.
11. Variasi nilai imajiner dari indeks bias material hanya berpengaruh pada
pergerakan osilasi nilai transmitansi, reflektansi, dan absorbansi gelombang
yang diterjadi. Sementara itu, nilai dari transmitansi, reflektansi, dan
absorbansi untuk masing-masing material dipengaruhi oleh bagian real dari
nilai indeks biasnya.
7.7 Referensi
1. Yeh, Pochi, 1988, Optical Waves in Layered Media, New York: Wiley.
2. Launer, Herbert F., 1941, Reflection-Transmission Relations in Sheet
Materials, Journal of Research of the National Bureau of Standards, Vol 27,
pp. 429-441.
3. McLean, 1994, A Polarized Transfer Matrix for Electromagnetic Waves in
Structured Media, Journal of Modern Physics, Vol 41, No. 9, pp. 1781-1802.
7.8 Lampiran
A. Program HTML Utama
Program ini menampilkan simulasi reflektansi, absorbansi dan transmitansi
gelombang cahaya melewati tiga medium yang berbeda, serta masing-masing kurva
reflektansi, absorbansi dan transmitansi.
189
simulation in layer. html HTML Gambar 1.2 B
math.js Javascript Gambar 1.3, C

Gambar 1.4,
Gambar 1.5,
dan Gambar
1.6
credit.html HTML D
TMM2.html HTML E
NewMatrix.js Javascript F
B. Program Javascript XYChart
Program ini berguna untuk mengatur layout kurva transmitansi, absorbansi dan
reflektansi.
/*
xychart.js
20170313
Create this library only with xmin..ymax and
XMIN..YMAX definitions.
20170318
Continue creating after recovery from sick and a bunch
of activities.
Tested for travelling wave and ok.
*/
// Class of XYChart
function XYChart() {
this.pointSize = 1;
this.lineWidth = 1;
190
// Fonts properties
// Axis
this.ticsWidth = 5;
this.nTicsX = 10;
this.nTicsY = 6;
this.xLabel1 = "d/ \u03BB";
this.yLabe1l = "y";
this.digitX = 2;
this.digitY = 2;

this.xmin = -1;
this.ymin = -1;
this.xmax = 1;
this.ymax = 1;
this.XMIN = 0;
this.YMIN = 0;
this.XMAX = 1;
this.YMAX = 1;
// Number of data
this.N = 0;
var canvas;
var ctx;
// Raw data
191
} else {
}
} else {
this.datax = [];
this.dataY = [];
}
// Plotting data
this.dataX = [];
this.dataY = [];

this.xmin = xmin;
this.ymin = ymin;
this.xmax = xmax;
this.ymax = ymax;
}

X += this.XMIN;
return X;
}

Y += this.YMIN;
return Y;
}
// Update data
this.datax = datax;
this.datay = datay;
} else {
192
}
}
// Clear canvas
//var ctx = canvas.getContext("2d");
}

this.plotTo = function(canvaso) {
canvas = canvaso;

}
ctx = canvas.getContext("2d");
// Plot axis
ctx.beginPath();
ctx.moveTo(XO, YO);
ctx.moveTo(XO, YO);
ctx.stroke();

193
}
}
ctx.beginPath();
}
}
ctx.stroke();
// Draw grid
ctx.beginPath();
}
}
ctx.stroke();

}
194

}

ctx.font = font;

ctx.beginPath();
ctx.stroke();
}
ctx.beginPath();
if(i == 0) {
ctx.moveTo(X, Y);
} else {
ctx.lineTo(X, Y);
}
}
ctx.stroke();
}
}
}
195
C. Program simulasi dan visualisasi

<!DOCTYPE html>
<html>
<head>
<script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.3.0/math.min.js></script>
<title>Simulasi dan Visualisasi T, R, & A pada N Medium</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<h1>Simulasi dan Visualisasi T, R, & A pada N Medium</h1>

</td>
</tr>
<tr valign="top">
<td bgcolor="#aaa" width="120" height="300">
<h3> Simulasi </h3>

<textarea id="tarea2" style="width:30px; height:100px;"></textarea><br>
<button id ="cekin" onclick="Laser(); cek()">Start</button>
<td bgcolor="#eee" width="200" height="300">
<h3> Ilustrasi </h3>

<canvas id="myCanvas" width="500" height="220" style="border:1px solid
#2222FF;"></canvas>
<script>
var v=document.getElementById("myCanvas");
var vtx=v.getContext("2d");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Laser
vtx.beginPath();
vtx.scale(1,1);
vtx.rect(60,60,80,15);
vtx.fillStyle = "red";
vtx.fill();
vtx.fillText("LASER", 80, 90);
196
vtx.position = "relative";
vtx.stroke();
//Medium
ctx.beginPath();
ctx.rect(150,20,80,100);
ctx.fillStyle = "teal";
ctx.fill();
ctx.fillText("Medium 1", 170, 130);
ctx.beginPath();
ctx.rect(230,20,80,100);
ctx.fillStyle = "navy";
ctx.fill();
ctx.beginPath();
ctx.rect(310,20,80,100);
ctx.fillStyle = "olive";
ctx.fill();
//Keterangan
vtx.beginPath();
vtx.fillStyle = "black";
vtx.fill();
vtx.fillText("============ KETERANGAN ============", 150, 170);
vtx.beginPath();
vtx.scale(1,1);
vtx.rect(160,180,60,10);
vtx.fill();
vtx.fillText("Trasmitansi", 160, 200);
vtx.fillStyle = "yellow";
vtx.fill();
vtx.beginPath();
vtx.scale(1,1);
vtx.rect(240,180,60,10);
vtx.fill();
vtx.fillText("Absorbansi", 240, 200);
197
vtx.fillStyle = "aqua";
vtx.fill();
vtx.beginPath();
vtx.scale(1,1);
vtx.rect(320,180,60,10);
vtx.fill();
vtx.fillText("Reflektansi", 320, 200);
vtx.fillStyle = "blue";
vtx.fill();
</script>
<textarea id="tarea" style="width:450px;height:150px; float:right; padding:20px;

padding-left:20px"></textarea><br><br>
<script>
var tarea = document.getElementById("tarea");
tarea.innerHTML = " d/\u03BB \t T \t A \t R\n"";
var ta = document.getElementById("tarea2");
//ta.id = "data";
ta.style.width = '160px';
ta.style.height = '180px';
ta.float = 'left';
ta.value = n1\t1.5\n;
ta.value += ' n2R\t0.186\n;
ta.value += ' n2i\t3.302\n';
ta.value += ' n3\t4.01\n';
ta.value += ' \u03BB\t700\n';
//document.body.appendChild(ta);
// Create a canvas document with id "chart0"

var canvas1 = document.createElement("canvas");
document.body.appendChild(canvas1);
canvas1.id = "chart1";
canvas1.width = "420";
canvas1.height = "230";
//canvas.style.border = "1px #ccc dashed";

var canvas2 = document.createElement("canvas");
198
//var canvas3 = document.createElement("canvas");

//Define variable for timer

var t = 0;
var dt = 0.01;
var tf = 200;
var timer;
//Define some parameters

var N = 201;
var tf = N;
//var dN = 0.0001;
var xmin = 0;
var xmax = 0.2;
var dx = (xmax - xmin) / (N - 1);
var A = 2;
var lambda = 5;
var k = 2 * Math.PI / lambda;
var T = 1;
//generateData();
var chart1 = new XYChart;
chart1.setCoordinates(xmin, -1.5 , xmax, 1.5 );
var tempx = new Array();

var tempy = new Array();
//
var tempx2 = new Array();

var tempy2 = new Array();
//
var tempx3 = new Array();
199
var tempy3 = new Array();

// Show data for the first time
chart1.changeData(new Array(), new Array());
//chart1.clear();
chart1.plotTo(canvas1);
//
//chart2.clear();
//
//chart3.clear();
//Create button object

/*var button = document.createElement("button");
document.body.appendChild(button);
button.innerHTML = "Start";
button.onclick = */
function cek () {
var button = document.getElementById("cekin");
if(button.innerHTML == "Start") {
//timer2 = setInterval(simulate2, 10);
button.innerHTML = "Refresh";
} else {
history.go(0);
//clearInterval(timer2);
}
}
//N += 0.1;
//generateData();
var c = document.getElementById("tarea2").value.split("\n");
var na = new Array();
for(var i=0; i< c.length; i++){
var d = c[i].split("\t");
r = parseFloat(d[1]);
na.push(r);
}
200
var n1 = math.complex(na[0], 0);

var n2 = math.complex(na[1], na[2]);
var n3 = math.complex(na[3], 0);
var k1x = n1;
var k2x = n2;
var k3x = n3;
var lamda = na[4]*0.000000001;
var dpl = (0.000000001/lamda)*t;
var dpl2 = (0.001*t).toFixed(3);
var cd = (Math.PI/180);
var fi= (n2.mul((2*Math.PI*dpl))).mul(math.complex(0,-1));
var fi2= (n2.mul((2*Math.PI*dpl))).mul(math.complex(0,1));
var f00=((math.complex(1,0)) .add(((((n2).mul(n2)) .mul(k1x)))
.div(((math.complex((n1*n1))) .mul(k2x))))) .mul(math.complex(0.5, 0));
var f01=((math.complex(1, 0)) .sub(((((n2).mul(n2)) .mul(k1x)))
var f02=((math.complex(1, 0)) .sub(((((n2).mul(n2)) .mul(k1x)))
var f03=((math.complex(1, 0)) .add(((((n2).mul(n2)) .mul(k1x)))
//
var f20=((math.complex(1, 0)).add(((math.complex((n3*n3), 0)) .mul(k2x))
.div((((n2) .mul(n2)) .mul(k3x))))) .mul(math.complex(0.5, 0));
var f21=((math.complex(1, 0)).sub(((math.complex((n3*n3), 0)) .mul(k2x))
var f22=((math.complex(1, 0)).sub(((math.complex((n3*n3), 0)) .mul(k2x))
var f23=((math.complex(1, 0)).add(((math.complex((n3*n3), 0)) .mul(k2x))
//
var f10= fi.exp();
var f11= 0;
var f12= 0;
var f13= fi2.exp();
var h00=(((f00).mul(f10))).add(((f01).mul(f12)));
var h10=(((h00).mul(f20))).add(((h01).mul(f22)));
/* var datx = t;// dx melambangkan perubahan

var daty = 2*0.1*t;
201
*/
var r = (h12).div(h10);
var t1 = (math.complex(1,0)).div(h10)
var R= (r).mul(r);
var Rabs= (R.abs()).toFixed(3);
var T = (math.complex((n3/n1), 0)).mul(((t1).mul(t1)));
var Tabs= (T.abs()).toFixed(3);
var A = ((((math.complex(1,0)).sub(Rabs)).sub(Tabs)).abs()).toFixed(3);
tarea.innerHTML += dpl2 + "\t" + Tabs+"\t" + A +"\t"+ Rabs + "\n";

//
t += 1;
tempx.push(dpl);
tempy.push(Tabs);
tempx2.push(dpl);
tempy2.push(A);
tempx3.push(dpl);
tempy3.push(Rabs);
chart2.changeData(tempx2, tempy2);
chart3.changeData(tempx3, tempy3);
chart1.changeData(tempx, tempy);
console.log(tempy);
chart1.clear();
chart2.clear();
chart3.clear();
if(t >= tf){

}
}
</script>
<script>
function draw(x){
//Laser Transmitansi
var R = 255;
var G = 255;
//var B = 0;
var n = 0;
202
n += 3;
vtx.beginPath();
vtx.rect(x,40,1,10);
vtx.fillStyle = "rgb("+R+","+G+","+n+")";
vtx.fill();
vtx.closePath();
var y = x;
var z = x;
//Laser Absorbansi
if (x>=310){
y = 310;
}
vtx.beginPath();
vtx.rect(y,60,1,10);
vtx.fillStyle = "rgb(0,255,255)";
vtx.fill();
vtx.closePath();
//Laser Reflektansi
vtx.beginPath();
if (x>=310){
z = 310-(x-310);
}
vtx.rect(z,80,1,10);
vtx.fill();
vtx.closePath();
function Laser() {
//draw(150);
//draw(230);
//draw(310);
var iv = setInterval(animation, 10);
var dx = 1;
var pxs = 150;
var pxf = 470;
var px = pxs;
203
function animation(){
draw(px);
px += dx;
if(px >= pxf){
clearInterval(iv);
}
}
}
</script>
</td>
</td>
</tr>
</table>
</table>
<br>
<span style="display:inline-block; width:200px;"></span>Transmitansi
<span style="display:inline-block; width:340px;"></span>Absorbansi

<span style="display:inline-block; width:340px;"></span>Reflektansi
</body>
</html>
D. Program HTML Credit
Program ini berguna untuk menampilkan pembuat coding program.
<!DOCTYPE html>
<html>
<head>
<title>Credit</title>
</head>
<body>
<table border="1">
<br><br>
<img src="itb.png" alt="Test Image" width="120" height="120" align="center"/>
<h1>RBL Komputasi Fisis</h1>
204
Tim Kelompok 7
<br><br>
<tr>
<th>Nama</th>
<th>Email</th>
</tr>
<tr>
<td>1. Ahmad Suaif</td>
<td>| ahmadsuaif@gmail.com</td>
</tr>
<tr>
<td>2. Yonathan Priambada P</td>
<td>| yonathanpp@gmail.com</td>
</tr>
<tr>
<td>3. Marisa Ulfa</td>
<td>| marisaulfax@gmail.com</td>
</tr>
<tr>
<td>4. Gigih Pamungkas </td>
<td>| pamungkas.gigih@gmail.com</td>
</tr>
<tr>
<td>5. Ahmad Zatnika Purwalaksana </td>
<td>| purwalaksa@gmail.com </td>
</tr>
<tr>
<td>6. Nuraina Fika Lubis </td>
<td>| nurainafikalubis@gmail.com </td>
</tr>
<tr>
<td>7. Philin Yolanda D </td>
<td>| philinyolanda.92@gmail.com </td>
</tr>
</body>
</html>
205
E. TMM2.html
<!DOCTYPE html>

<html>
<head>
<title>Transmitansi Lapisan Banyak</title>
<script src="NewMatrix.js"></script>
<meta charset="UTF-8">
<body>
<p id="OutputTester"></p>
<p id="Output2"></p>
<script>
/*
PARAMETER-PARAMETER GLOBAL
*/
//Jumlah layer
var N = [10,20,30,40,50,60,70,80,90,100];
//Ketebalan layer
var d = [1e-6,2e-6,3e-6,4e-6,5e-6,6e-6,7e-6,8e-6,9e-
6,10e-6];
//Nilai indeks bias masing2 layer
var n = [1.5, 1, 1, 1, 1, 1, 1, 1, 1, 1];
//Nilai wave number di vakum. Nilai lambda 6e-6
var lamb0 = [1e-8, 2e-8, 3e-8, 4e-8, 5e-8, 6e-8, 7e-8,8e-
8, 9e-8, 10e-8];
/*
SIMULASI TIPE 1: VARIASI PANJANG GELOMBANG LAMB0, JUMLAH
LAYER TETAP
Variasi Lambda-d,n, dan N tetap (vakum-medium paling kiri
dan paling kanan)
Kita lihat daerah stasioner terhadap lambda sebelum
menyelidiki perubahan terhadapp n atau d
*/
var b = 5; //nilai indeks arbitrary ~convenience
var K0= [];
//Nilai wave number dalam setiap layer
206
var K = [];
var T = [];//Transmitansi
var R = [];//Reflektansi
var Ms = eye();
//Untuk kasus ketebalan layers sama, n beda terkontrol,
lambda0 divariasikan
//MATRIKS TRANSFER SISTEM
for (i = 0; i < 10; i++)//LOOP UNTUK LAMBDA
{
K0[i] = 2 * Math.PI / lamb0[i];
for (j = 0; j < 1; j++)//variasi jumlah layer j

adalah indeks layer
{
var nx = n[0];
var kx = K0[i];
K[j] = nx * kx; //K dari 10 lambda yang melalui
1 layer tsb
Ms = mMult( Layer(K[j], d[b]),Ms);
}
//MENGHITUNG TRANSMITANSI T
//Wavenumber di layer pertama (KL) dan layer terakhir
(KR)
var KR = K0[0];
var KL = K0[0];
//At, Bt, Ct, Dt adalah variabel input untuk fungsi
absComplex2 dari NewMatrix.js yang fungsinya adalah
mencari nilai kuadrat dari absolut sebuah bilangan
kompleks.
var At = 2*KL*Math.sin(KR*d[b]);
var Bt = 2*KL*Math.cos(KR*d[b]);
var Ct = KL*KR*Ms[1] - Ms[2];
var Dt = KR*Ms[0] + KL*Ms[3];
//Maka nilai T dapat dihitung sebagai
T[i] = (KR/KL)*absComplex2(At,Bt,Ct,Dt);
//MENGHITUNG REFLEKTANSI R
var Ar = Ms[2] + KL*KR*Ms[1];
var Br = KL*Ms[3] - KR*Ms[0];
var Cr = -1*Ms[2] + KL*KR*Ms[1];
var Dr = KL*Ms[3] + KR*Ms[0];
//Maka nilai R dapat dihitung sebagai
R[i] = absComplex2(Ar,Br,Cr,Dr);
//Ar, Br, Cr, Dr adalah variabel input untuk fungsi
absComplex2 dari NewMatrix.js yang fungsinya adalah
207
mencari nilai kuadrat dari absolut sebuah bilangan

kompleks.
}
//Berikut adalah output untuk mengecek nilai2 variabel

yang dipakai di perhitungan. Mostly untuk keperluan
debugging.
document.getElementById("OutputTester").innerHTML =
"Nilai n <br>"+ n + "<br>" + "Nilai K di vakum <br>"+ K0
+ "<br>"+"Nilai lambda vakum <br>"+ lamb0+"<br>"+"Nilai
pi <br>"+ Math.PI+ "<br> Nilai K medium beda"
+"<br>"+K+"<br>"+"Nilai iterasi matriks tiap layer
<br>"
document.getElementById("Output2").innerHTML = "Matriks
Transfer Ms&nbsp&nbsp&nbsp&nbsp
<br>"+Ms[0]+"&nbsp&nbsp&nbsp"+Ms[1]+"<br>"+Ms[2]+"&nbsp&n
bsp&nbsp"+Ms[3]+"<br>"+"Reflektansi
&nbsp&nbsp&nbsp"+R+"<br>"+"Transmitansi&nbsp&nbsp&nbsp"+T
</script>

<h1>Matriks Transfer Sistem</h1>

<textarea id="matriks"></textarea>
<script>
var matriks_t = document.getElementById("matriks");
matriks_t.style.width = '800px';
matriks_t.style.height = '50px';
matriks_t.style.overflowY = "scroll"
matriks_t.float = 'right';
matriks_t.value +=Ms[0] +'\t\t'+ Ms[1] + '\n' + Ms[2]

+'\t\t'+ Ms[3]
</script>
<h2> Hasil R dan T Terhadap Lambda </h2>

<textarea id="out_table"></textarea>
<script>
var mytable = document.getElementById("out_table");
mytable.style.width = '800px';
mytable.style.height = '250px';
208
mytable.style.overflowY = "scroll"
mytable.float = 'left';
mytable.value = 'Lambda\t\t\t R \t\t\t T\n';
for(i = 0; i < 10; i++)
{
mytable.value += lamb0[i] +'\t\t\t'+ R[i]+
'\t\t\t'+ T[i]+'\n';
}
</script>
</body>
F. NewMatrix.js
/*BEBERAPA FUNGSI OPERASI MATRIKS KOMPLEKS DI DALAM

JAVASCRIPT.
(C)YONATHAN P. PURWASUNU INSTITUT TEKNOLOGI BANDUNG 2017
REVISI TERAKHIR 5/22/2017
*/
function mMult(A,B)//2x2 matriks sebagai array isi 8. 4

pertama untuk komponen real, 4 terakhir imajiner
//| A[0] A[1]| untuk real dan | A[4] A[5]| untuk imajiner
//| A[2] A[3]| | A[6] A[7]|
// keluaran bentuk |c[0] c[1] c[2] c[3] c[4] c[5] c[6]
c[7]|
{
var c = new Array(8);
c[0]=A[0]*B[0]+A[1]*B[2]-A[4]*B[4]-A[5]*B[6];
c[1]=A[0]*B[1]+A[1]*B[3]-A[4]*B[5]-A[5]*B[7];
c[2]=A[2]*B[0]+A[3]*B[2]-A[6]*B[4]-A[7]*B[6];
c[3]=A[2]*B[1]+A[3]*B[3]-A[6]*B[5]-A[7]*B[7];
c[4]=A[0]*B[4]+A[1]*B[6]+A[4]*B[0]+A[5]*B[2];
c[5]=A[0]*B[5]+A[1]*B[7]+A[4]*B[1]+A[5]*B[3];
c[6]=A[2]*B[4]+A[3]*B[6]+A[6]*B[0]+A[7]*B[2];
c[7]=A[2]*B[5]+A[3]*B[7]+A[6]*B[1]+A[7]*B[3];
return c;
}
function sMult(s,A) // operasi perkalian skalar s dengan

matriks A, i.e nilai s dikalikan ke semua elemen A.
seperti A.*B pada MATLAB
{
var c = 0;
209
function Layer(k,L)//fungsi matriks transfer tiap layer

{
var M = new Array(8);
M[0]=Math.cos(k * L);
M[1]=(1/k)*Math.sin(k * L);
M[2]=-k*Math.sin(k * L);
M[3]=Math.cos(k * L);
M[4]=0;
M[5]=0;
M[6]=0;
M[7]=0;
return M;
}
function eye()//fungsi pembuat matriks identitas 2x2
dalam bentuk array 1x8
{
var I = [1,0,1,0,0,0,0,0];
return I;
}
function absComplex2(a,b,c,d)//fungsi mencari nilai

absolut kuadrat r = (a+ib)/(c+id)--> |r|^2
{
var A = Math.pow(((a*c)+(b*d)),2)+Math.pow(((b*c)-
(a*d)),2);
var B = Math.pow((c*c + d*d),2);
var C = A/B;
return C;
}
210
Analisis pengaruh gravitasi terhadap
8 fenomena efek kacang Brazil
Zaky Yudha Rabbani | zaky.yudhar@gmail.com
Reinaldo Giovanni | r.giovanni.aldo@gmail.com
Thariq Warsahemas | thariqwarsahemas@gmail.com
Simulasi efek kacang brazil dengan satu intruder dan bed butiran dengan
menggunakan metode dinamika molekuler, interaksi yang digunakan adalah gaya
gravitasi antara butiran yang ditinjau dan interaksi dengan bidang datar. Variasi
parameter yang dilakukan adalah percepatan gravitasi g. Simulasi ini mendapatkan
hasil bahwa percepatan gavitasi belum terlihat pengaruhnya secara signifikan
terhadap waktu tempuh intruder untuk mencapai ketinggian yang relatif tinggi
terhadap titik awal danmendapatkan informasi bahwa dalam rentang percepatan
gravitasi bernilai 5-20, didapatkan kecepatan intruder bersifat inverse parabolic
terhadap percepatan gravitasi.
8.1 Pendahuluan
Fenomena efek kacang brazil (EKB) muncul di sistem campuran butiran (granular)
yang memiliki ukuran yang berbeda. Sistem terdiri dari butiran berukuran besar
(intruder) yang dikelilingi butiran berukuran kecil (bed butiran). Apabila sistem ini
digetarkan, intruder secara perlahan akan bergerak keatas sampai berada diatas bed
butiran. Kecepatan partikel bergerak ke atas dipengaruhi beberapa faktor, diantaranya
kedalaman intruder, gaya gesek antar partikel, frekuensi dan amplitudo getaran,
gerakan udara di sela-sela bed [1], dan perepatan gravitasi [2]. EKB cukup penting
dalam campuran partikel granular dalam industri, khususnya dalam segregasi
(pemisahan) ukuran. Selain itu, EKB menjelaskan bagaimana batuan muncul ke
permukaan akibat pergerakan bumi [3].
Analisis pergerakan partikel pada fenomena EKB secara analitik cukup sulit.
Sehingga, diperlukan komputasi untuk mensimulasikan fenomena EKB. Terdapat dua
metode komputasi yang dapat digunakan, yaitu Metode Monte Carlo dan Molecular
Dynamic. Metode Molecular Dynamic akan dipilih karena dapat mengarah pada
karakteristik dinamik sistem, yaitu koefisien transport, respon sistem terhadap
peturbasi yang tak bergantung waktu, dan aliran material [4].
Tugas ini bertujuan mensimulasikan EKB pada partikel granular serta menentukan
pengaruh percepatan gravitasi dan gaya Tarik gravitasi antar partikel terhadap
kecepatan apung intruder.
211
Komputasi Fisika 3: 8 Analisis pengaruh gravitasi .. EKB
8.2 Teori
Secara umum, pada tugas ini, teori yang digunakan untuk mensimulasikan EKB pada
sistem granular adalah gerak newton dan molecular dynamic.
Simulasi molecular dynamic terdiri dari solusi numerik dari persamaan gerak newton
pada partikel sebagai berikut [4]
r
ma = F (8.1)
atau
∂
F =− U (8.2)
∂r
Dari Persamaan (8.2), untuk mendapatkan gaya yang bekerja pada partikel, potensial
U perlu ditentukan terlebih dahulu. Simulasi pada tugas ini menggunakan potensial
gravitasi. Jika terdapat partikel A dan B yang memilki massa mA dan mB berjarak rAB,
potensial gravitasi yang bekerja adalah sebagai berikut [4]
Gm A m B
Ug = − (8.3)
rAB
Selain interaksi akibat gravitasi, interkasi lain yang diperhitungkan adalah tumbukan
akibat kontak antar partikel granular. Untuk menghitung tumbukan antar partikel,
mula-mula perlu ditentukan vektor normal permukaan bidang. Secara umum, vektor
normal suatu bidang pada titik (x, y, z) adalah sebagai berikut [5]
r
∇f ( x, y , z )
nˆ = r (8.4)
| ∇f ( x, y , z ) |
Untuk menggambarkan interaksi partikel dengan partikel yang berbentuk bola, gaya
normal dapat disederhanakan menjadi sebagai berikut [5]
r
rij
nˆ ij = rˆij = r (8.5)
| rij |
r r r
rij = ri − r j (8.6)
r r r
rij =| rij |= rij .rij (8.7)
Misalkan terdapat partikel berbentuk bola pada titik x, y, z dan berjarak h dari suatu
permukaan bidang f(x,y,z). Mula-mula, ambil sembarang titik pada bidang yang
212
memenuhi persamaan permukaan bidan tersebut, misalnya titik (xs,ys,zs). Lalu, cari
posisi relatif benda terhadap titik tersebut
r
rbs = ( x − x s )iˆ + ( y − y s ) ˆj + ( z − x s )kˆ (8.8)
Lalu, cari komponen pada jarak h melalui
r
h = rbs ⋅ nˆ (8.9)
Sehingga, gaya normal pada benda dapat diperoleh melalui [5]
η = max(0, R − h) (8.10)
dan
dη
FN = − k Nη − γN (8.11)
dt
Getaran wadah disimulasikan dengan merubah posisi batas bawah menjadi suatu
fungsi periodik. Fungsi periodik yang digunakan adalah sebagai berikut
y = abs (sin(ωt )) (8.12)
8.3 Metode Numerik

Metoda numerik yang digunakan dalam simulasi ini adalah metoda integrasi verlet.
Metoda verlet sering digunakan dalam penyelesaian permasalahan persamaan gerak
Newton. Metoda verlet yang digunakan pada simulasi ini adalah metoda kecepatan
verlet. Metoda ini mempunyai kemiripan dengan metoda Leapfrog dimana adanya
penggunaan prediktor [4]. Algoritma yang digunakan adalah sebagai berikut
r r r 1r
x (t + ∆t ) = x (t ) + v (t )∆t + a (t )∆t 2 (8.13)
2
r r
r r a (t ) + a (t + ∆t )
v (t + ∆t ) = v (t ) + ∆t (8.14)
2
213
8.4 Algoritma
Simulasi efek kacang brazil untuk mendapatkan kecepatan kenaikan intruder dapat
dilakukan dengan menggunakan algoritma berikut
L1. Input gA from the input box.

L2. Declare some constants and variables (dt, nP, data, grains)
L3. Initializing particles positions.
L4. Plot the positions
L5. i=1.
L6. Calculate the weight force of the i-th grain.
L7. Calculate the normal force of the i-th grain to the bottom, left, and right
boundary.
L8. j=1
L9. If j!=i, then Calculate the interaction between the i-th particls with the j-th
particle.
L10. If j<nP, then j = j+ 1 then go to L9.
L11. Calculate the new positions.
L12. Calculate the sum of force for the i-th particle in the new position
L13. Calculate the new velocities
L14. If i <nP, then i = i+1 then go to L6.
L15. Save the intruder particle position and the current time in data variable.
L16. If stop is pushed then go to L17. else go to L4.
L17. Stop.
214

Symbol Nilai Code

kNW 1000 -
kNP 500 -
G 1000 -
0 -
-
D 1 dan 2 Grain.D
M 1 dan 2 Grain.m
∆t 0.001 dt
Beberapa parameter-parameter yang digunakan tidak mempunyai simbol dalam kode

dikarenakan dia dimasukan dalam bentuk angka. Diameter dan massa dari partikel
intruder adalah 2, sedangkan diameter dan massa dari partikel filler adalah 1.
Tampilan program pada saat simulasi dimulai dapat dilihat dibawah ini:
Gambar 8.1. Tampilan saat pertama awal-awal start.
Lalu simulasi dibiarkan berjalan hingga t mencapai 5 detik. Setelah 5 detik, data
diambil dengan menggunakan tombol Print Data lalu data pada textarea di-copy
kedalam excel untuk diolah. Tampilan program saat t = 5 detik dapat dilihat dibawah
ini.
215
Gambar 8.2. Tampilan saat t = 5 detik
Dengan memvariasikan percepatan gravitasinya, didapatkan data-data dalam Tabel

8.2 berikut.
Tabel 8.2. Cuplikan data yang didapatkan dari program.
Gacc -10 Gacc -15 Gacc -20 Gacc -5 Gacc -7.5 Gacc -12.5
t(s) Ypos t(s) Ypos t(s) Ypos t(s) Ypos t(s) Ypos t(s) Ypos
0.001 0.999995 0.001 0.999993 0.001 0.99999 0.001 0.999998 0.001 0.999996 0.001 0.999994
0.002 0.999981 0.002 0.999971 0.002 0.999961 0.002 0.999991 0.002 0.999986 0.002 0.999976
0.003 0.999959 0.003 0.999936 0.003 0.999914 0.003 0.999981 0.003 0.99997 0.003 0.999948
0.004 0.999931 0.004 0.999891 0.004 0.999851 0.004 0.999971 0.004 0.999951 0.004 0.999911
0.005 0.999899 0.005 0.999836 0.005 0.999774 0.005 0.999961 0.005 0.99993 0.005 0.999867
0.006 0.999863 0.006 0.999774 0.006 0.999684 0.006 0.999953 0.006 0.999908 0.006 0.999818
0.007 0.999827 0.007 0.999705 0.007 0.999582 0.007 0.999949 0.007 0.999888 0.007 0.999766
0.008 0.999791 0.008 0.999631 0.008 0.999471 0.008 0.99995 0.008 0.99987 0.008 0.999711
0.009 0.999756 0.009 0.999554 0.009 0.999353 0.009 0.999958 0.009 0.999857 0.009 0.999655
0.01 0.999725 0.01 0.999476 0.01 0.999227 0.01 0.999974 0.01 0.99985 0.01 0.999601
Dan dari Tabel 8.2 berikut, dapat diplot grafik posisi terhadap waktu seperti dalam
Gambar 8.3 berikut.
216
Gambar 8.3. Grafik posisi terhadap waktu untuk g = -5
Gambar 8.4. Grafik posisi terhadap waktu untuk g=-7.5.
Gambar 8.5. Grafik posisi terhadap waktu untuk g = -10.
217
Gambar 8.6. Grafik posisi terhadap waktu untuk g = -12.5.
218
Dalam pembuatan grafik pada gambar 3-8, sekalian juga dilakukan perhitungan
regresi linear dari data-data tersebut. Kecepatan adalah gradient dari posisi terhadap
waktu, sehingga dengan melihat gradient pada persamaan-persamaan hasil regresi
pada gambar 3-8, dapat dibuat plot kecepatan naiknya partikel intruder terhadap
percepatan gravitasinya.
Gambar 8.9. Grafik kecepatan terhadap percepatan gravitasi

Dapat dilihat bahwa hubungan antara kecepatan naiknya intruder terhadap percapatan
gravitasi diduga mempunyai bentuk fungsi inverse parabolic. Semakin besar
percepatan gravitasinya maka semakin rendah kecepatan naiknya dan semakin kecil
percepatan gravitasinya maka semakin rendah juga kecepatan naiknya. Sehingga
untuk mendapatkan kondisi dimana partikel intruder naik paling cepat, perlu
dilakukan optimasi. Secara kualitatif dari Gambar 8.9, kecepatan maksimum didapat
pada saat percepatan gravitasinya berkisaran ~ -12.5.
Untuk hasil yang didapatkan secara keseluruhan pada percobaan simulasi efek kacang
brazil dengan variasi pengaruh percepatan gravitasi adalah terdapatnya pengaruh pada
sistem yang bekerja. Pengaruh dalam waktu intruder mencapai ketinggian yang relatif
tinggi terhadap titik awal belum dapat didefinisikan dengan baik karakteristiknya, hal
ini dikarenakan data yang bersifat acak. Hal ini dapat diantisipasi dengan
pengambilan data dengan rentang variasi yang besar ataupun variasi dengan cara yang
ekstrem. Selain itu, untuk pengaruh kecepatan intruder belum dilakukan dengan
banyak cara pengolahan data. Pengolahan data dan analisis yang dilakukan ini
merupakan cara yang paling simple dan relatif mudah. Untuk kedepannya dapat
dilakukan pengolahan data kecepatan dengan lebih detail, seperti menganalisis dari
data kecepatan tiap waktu yang diperoleh dari program. Selain itu, dapat pula
kedepannya menganalisis seperti kecepatan rms, kecepatan paling mungkin (most
probable), atau mungkin melihat kecepatan resiproknya.
219
8.6 Kesimpulan
Simulasi efek kacang brazil dengan variasi percepatan gravitasi ini mendapatkan hasil
bahwa percepatan gavitasi belum terlihat pengaruhnya secara signifikan terhadap
waktu tempuh intruder untuk mencapai ketinggian yang relatif tinggi terhadap titik
awal. Selain itu, simulasi efek kacang brazil ini mendapatkan informasi bahwa dalam
rentang percepatan gravitasi bernilai 5-20, didapatkan kecepatan intruder bersifat
inverse parabolic terhadap percepatan gravitasi.
8.7 Referensi
1. Dianita Nanda Persia, Catra Novendia Utama, Siti Nurul Khotimah, Sparisoma
Viridi. 2013. Pengamatan Waktu Apung Efek Kacang Brazil Pada Cakram
Tunggal, Ganda Berhimpit, dan Ganda Bergerak. The 1st ISCSM 2013.
2. Carsten Guttler, Ingo von Bostel, Rainer Schrapler, Jurgen Blum. 2013.
Granular Convection and the Brazil Nut Effect in Reduced Gravity. Germany:
Physical Review E87. DOI : 10.1103/PhysRevE.87.044201
3. Granular Convection. URL: https://en.wikipedia.org/wiki/Granular_convection
4. Michael P Allen. 2004. Introduction to Molecular Dynamics Simulations. John
von Neumann Institute for Computing. Computational Soft Matter: From
Synthetic Polymers to Proteins, Lecture Notes.
5. Viridi, Sparisoma. 2017. Objek Bidang Datar. Bandung: Catatan Kuliah
Komputasi Sistem Granular, Program Studi Fisika, Institut Teknologi Bandung
8.8 Lampiran
A. Keterangan penggunaan program dan subprogram
Tabel 8.3 Program dan subprogram yang digunakan dalam simulasi.
main.html Google Chrome Data tabel 1.2 B
interaction.js Notepad++ Normal Force. & C

Gravitational force.
grains.js Notepad++ Class Grain. D
math.js (menggunakan Notepad++ Panjang Vektor -

class dari suatu referensi) (math.norm())
layout.js (menggunakan Notepad++ Tampilan pada -

class perkuliahan) Google Chrome
draw2d.js (menggunakan Notepad++ Gambar 1 dan 2. -

class perkuliahan)
220
B. Source code program main.html
<html>
<head>
<title>Pseudo Brazilian Nut Effect</title>
<script src="grains.js"></script>
<script src="interaction.js"></script>
<script src="math.js"></script>
<script src="draw2d.js"></script>
<script src="layout.js"></script>
</head>
<body>
Gravitational Acceleration <input id="gA" value="-10" style="width:
100px"></input>
<script>
//Initializing layouts
layout();
//Defining some constants

var gA = 0;
var dt = 0.001;
var T = 5;
var nP = 21;
var t = 0;
var data="t(s) \t Ypos\n";
var cv = document.getElementById("canvas")
var grains = new Array(nP);
//Declaring the grains

for(var i=0; i < grains.length; i++)
{
if(i!=grains.length-1)//Filler particles
{
grains[i] = new Grain(1);
}
else//Intruder particles
{
grains[i] = new Grain(0);
}
}
//Initializing the particles position

var c = 0;
221
for(var i=0; i<4; i++)

{
for(var j=0; j<6; j++)
{
if(i<2)
{
if (!(j>=2&&j<=3))
{
grains[c].r[0] = 0.5 + j*1;
grains[c].r[1] = 0.5 + i*1;
c++;
}
}
else
{
grains[c].r[0] = 0.5 + j*1;
grains[c].r[1] = 0.5 + i*1;
c++;
}
}
}
grains[20].r = [3,1];
//Running the simulation
function run()
{
//Taking the gravitational acceleration from the input box.
gA = document.getElementById("gA").value;
gA = parseFloat(gA);
//Moving the bottom boundary to simulate the shaking movement.
var y = 0;
if(t<=5)
{
y = Math.abs(Math.sin(Math.PI*t));
}
t = t+dt;
clearCurrentFigure();
for(var i=0; i<grains.length; i++)
{
//Plotting the particles
plotParticle(grains[i]);
//Defining sum of force variables

var sigF = [0,grains[i].m*gA]; // sigF = [sigFx, sigFy];
//Normal force against the bottom of the container.
222
var bNorm = pInteraction.fWNorm(grains[i].r, [grains[i].r[0],y], grains[i].v, [0,0],

grains[i].D,0);
//Normal force against the right side of the container.
var rNorm = pInteraction.fWNorm(grains[i].r, [6,grains[i].r[1]], grains[i].v, [0,0],
grains[i].D,0);
//Normal force against the left side of the container.
var lNorm = pInteraction.fWNorm(grains[i].r, [0,grains[i].r[1]], grains[i].v, [0,0],
grains[i].D,0);
//Adding the normal forces to the sum of force

sigF[0] = sigF[0] + bNorm[0] + rNorm[0] + lNorm[0];
sigF[1] = sigF[1] + rNorm[1] + lNorm[1] + bNorm[1];
for(var j=0; j<grains.length; j++)//Brushing every particles

{
if(i!=j)//To avoid self-interaction.
{
//Normal force felt by particle-i from the contact with particle-j
var nForce = pInteraction.fNorm(grains[i].r, grains[j].r, grains[i].v, grains[j].v,
grains[i].D, grains[j].D);
//Gravitational pull between each particles.

var Grav = pInteraction.fNorm(grains[i].r, grains[j].r, grains[i].m, grains[j].m);
sigF[0] = sigF[0] + nForce[0] + Grav[0];
}
}
//Verlet integration
grains[i].r[0] = grains[i].r[0]+ dt*grains[i].v[0] + 0.5*(sigF[0]/grains[i].m)*dt*dt;
grains[i].r[1] = grains[i].r[1]+ dt*grains[i].v[1] + 0.5*(sigF[1]/grains[i].m)*dt*dt;
{//Calculating the acceleration based on the new position
var sigF1 = [0,grains[i].m*gA];
var bNorm = pInteraction.fWNorm(grains[i].r, [grains[i].r[0],y], grains[i].v, [0,0],
grains[i].D,0);
var rNorm = pInteraction.fWNorm(grains[i].r, [6,grains[i].r[1]], grains[i].v, [0,0],
grains[i].D,0);
var lNorm = pInteraction.fWNorm(grains[i].r, [0,grains[i].r[1]], grains[i].v, [0,0],
grains[i].D,0);
sigF1[0] = sigF1[0] + bNorm[0] + rNorm[0] + lNorm[0];
sigF1[1] = sigF1[1] + rNorm[1] + lNorm[1] + bNorm[1];
for(var j=0; j<grains.length; j++)
{
if(i!=j)
{
223
var nForce = pInteraction.fNorm(grains[i].r, grains[j].r, grains[i].v, grains[j].v,

grains[i].D, grains[j].D);
var Grav = pInteraction.fNorm(grains[i].r, grains[j].r, grains[i].m, grains[j].m);
}
}
}
grains[i].v[0] = grains[i].v[0]+ dt*0.5*(sigF[0]+sigF1[0])/grains[i].m;
grains[i].v[1] = grains[i].v[1]+ dt*0.5*(sigF[1]+sigF1[1])/grains[i].m;
}
var disp = "t: " + t + "\n" + "Intruder Post(y): " + grains[20].r[1];
//Saving position and current time for data analyzing.
data += t + "\t" + grains[20].r[1]+"\n";
document.getElementById("hout").value = disp;
}
document.getElementById("button").onclick = function(){
document.getElementById("hout").value = data;
};
</script>
</body>
C. Source code program interaction.js
pInteraction.fGrav = function(r1,r2,m1,m2)
{
//Gravitation pull felt by particle 1 because of particle 2.
var rx = r2[0] - r1[0];
var ry = r2[1] - r1[1];
var r = [rx, ry];
var rl = math.norm(r);
var u = [rx/rl,ry/rl];
var k = -1000*m1*m2/(math.norm(r))^2;
var fGrav = [k/u[0], k/u[1]];
return fGrav;
}
pInteraction.fNorm = function(r1,r2,v1,v2,D1,D2)
{
//Normal force felt by particle 1 when in contact with particle 2.
var rx = r2[0] - r1[0];
var ry = r2[1] - r1[1];
var r = [rx, ry];
var D = (D1/2 + D2/2);
224
if(rl<=D)
{
var u = [rx/rl, ry/rl];
var vx = v2[0] - v1[0];
var vy = v2[1] - v2[1];
var v = [vx, vy];
var eta = D - rl;

var deta = math.norm(v);
var k = (-5E2*eta - 0*deta);
var nForce = [k*u[0], k*u[1]];
}
else
{
var nForce = [0, 0];
}
return nForce;
}
pInteraction.fWNorm = function(r1,r2,v1,v2,D1,D2)
{
//Normal force felt by particle 1 when in contact with the boundary.
var rx = r2[0] - r1[0];
var ry = r2[1] - r1[1];
var r = [rx, ry];
var D = (D1/2 + D2/2);
if(rl<=D)
{
var u = [rx/rl, ry/rl];
var vx = v2[0] - v1[0];
var vy = v2[1] - v2[1];
var v = [vx, vy];
var eta = D - rl;

var deta = math.norm(v);
var k = (-1E3*eta - 0*deta);
var nForce = [k*u[0], k*u[1]];
}
else
{
var nForce = [0, 0];
}
225
return nForce;
}
D. Source code program grain.js
function Grain(pType)
{
if(pType==1) //Filler Particles

{
this.m = 1;
this.D = 1;
this.v = [0,0];
this.r = [0,0];
}
else
{ //Intruder Particles
this.m = 2;
this.D = 2;
this.v = [0,0];
this.r = [0,0];
}
}
226
Simulasi sifon dengan metode elemen
9 volume fluida tunggal (single volume
fluid element method)
Meiliany Pranolo | mei.pranolo@gmail.com
Kevin Frankly Samuel Pardede | kevinfrankly@students.itb.ac.id
Ramadhiansyah | rama.raikhan@gmail.com
Gerak siphoning fluida dapat disimulasikan dengan menggunakan persamaan

sederhana Newton dan metode elemen colume fluida tunggal. Persamaan gaya
Newton yang ditinjau berupa gaya gravitasi dan gaya viskositas, serta ditinjau gaya
percepatan elemen fluida m dan volume kecil V. Parameter fluida yang digunakan
berupa massa jenis ρf dan konstanta viskositas η dengan parameter elemen fluida
dalam pipa berupa diameter D dan infinitesimal ∆h. Pada pipa lurus vertikal, fluida
bergerak dengan gerakan harmonik teredam sesuai dengan analisa. Pada pipa ∩ dan
M-like, ditinjau keadaan alir/tidak mengalir fluida dengan variasi diameter dan setiap
panjang pipa sehingga didapat kecenderungan bagaimana konfigurasi pipa yang
mungkin agar terjadi siphoning.
9.1 Pendahuluan
Sifon adalah sebuah alat berbentuk pipa yang berguna untuk mengalirkan fluida dari
suatu tempat ke posisi akhir yang lebih rendah [2]. Aliran dapat terjadi karena adanya
perbedaan tekanan di ketinggian yang berbeda [1]. Sifon memiliki beberapa aplikasi
praktis, contohnya adalah sebagai salah satu metode untuk mengosongkan tangki air
(tanpa perlu melubanginya) [3]. Beberapa metode untuk melakukan simulasi sifon
antara lain adalah metode elemen hingga, metode elemen volume fluida tunggal, dan
lain lain.. Pada makalah ini, akan dilakukan simulasi sifon menggunakan metode
elemen volume fluida tunggal, yang pada dasarnya ekivalen dengan menyelesaikan
persamaan Newton untuk suatu volume fluida tunggal [1].
9.2 Teori
Simulasi aliran fluida pada sifon dilakukan dengan meninjau batas antara fluida
dengan udara. Tinjau sebuah elemen volume fluida di perbatasan tersebut.
Diasumsikan bahwa pada elemen volume tersebut bekerja tiga buah gaya : gaya
gravitasi, gaya gesekan, serta gaya hidrostatik. Sebelumnya, perhatikan bahwa suatu
konfigurasi sifon tertentu merupakan gabungan dari pipa lurus, dan pipa setengah
lingkaran. Sekarang definisikan sebuah koordinat s yang didefinisikan sebagai jarak
yang telah ditempuh sebuah elemen volume fluida relatif ujung awal pipa/sifon. Jadi,
perbedaan pipa lurus dan pipa setengah lingkaran adalah bahwa pada pipa setengah
227
Komputasi Fisika 3: 9 Simulasi sifon .. SFVE method
lingkaran, sudut relatif pipa terhadap sumbu horizontal θ(s) merupakan fungsi
terhadap s. Dengan demikian, untuk mempermudah kita hanya perlu meninjau
diagram gaya untuk pipa lurus.
Gambar 9.1 Diagram gaya untuk sebuah elemen volume fluida pada pipa lurus [1].
Dari Gambar 9.1 dan hukum Newton, disimpulkan bahwa persamaan gerak untuk
sebuah elemen fluida dengan massa m dan volume V, yang mengalir pada sebuah pipa
dengan luas permukaan A, adalah [1]
m
d 2s
2
ds
[ ]  3 
+ 8πη∆h − ρ f g y f ( s ) − y ( s ) A − mg cos θ ( s ) − π  = 0 (9.1)
dt dt  2 
Dengan m=ρf A∆h, adalah koefisien gesek fluida, dan adalah densitas fluida.
Pada pipa lurus, persamaan di atas dapat ditulis ulang dalam bentuk
d 2s ds
2
+ c1 + c0 s + c = 0 (9.2)
dt dt
dengan
8πη∆h 8πη
c1 = = , (9.3)
m ρf A
ρ f gA sin θ g sin θ
c0 = = , (9.4)
m ∆h
  3π  ρ f As f sin θ   sf 
c = − g cosθ − +  = g sin θ 1 − . (9.5)
  2  m   ∆h 
9.3 Metode numerik

Metode dinamika molekular digunakan dalam tulisan ini, dengan menerapkan hukum
II Newton
∑ F = ma (9.6)
228
dan besaran-besaran gerak lainnya dihitung menggunakan algoritma Euler untuk

menghitung percepatan, kecepatan, dan posisi dari elemen fluida :
 d ns   d n s   d n +1 s 
 n  =  n  +  n+1  ∆t (9.7)
 dt  t + ∆t  dt  t  dt  t
9.4 Algoritma
L1. Isikan nilai parameter pipa ( , l)
L2. t = 0; dt=0.001;
L3. Hitung s (jarak yang ditempuh balok)
L4. Hitung posisi balok (x,y)
L5. Hitung a =
L6. Hitung v = v + a*dt
L7. Hitung s = s + v*dt
L8. Hitung y = y + v*dt*sin( )
L9. Hitung x = l * cos( )
L10. Evaluasi t = t + dt
L11. posisi balok > l ? end : go to L3.

Symbol Nilai Code

0.001 rho_f
1e-5 eta
1e-4 delta_h
980 g
0.4 – 0.6 diam
7 y_f
Selain itu, ujung pipa sebelah kiri berada dalam keadaan teredam air sedalam
dengan keadaan awal kedua ujung pipa tertutup (tak ada air masuk) lalu dibuka
bersamaan.
229
Pipa Lurus – Gerak Harmonik

Dari persamaan (9.2), dapat diambil sudut tertentu sehingga persamaan tersebut
menjadi persamaan gerak osilasi harmonik. Dengan mengambil sudut θ=π/2→y=s
sin(π/2)=s dan y’=y+(c/c0)θ=π/2, persamaan tersebut menjadi :
d 2 y '  8πη∆h  dy '  ρ f gA 
+  +  y ' = 0. (9.8)
dt 2  m  dt  m 
yang merupakan persamaan gerak harmonik teredam. Dengan mengambil ρf=1.10-4
dan yf=6agar jelas terlihat redamannya, didapat hasil :
Gambar 9.2 Grafik gerak harmonik teredam.
Pipa ∩-Variasi Diameter Pipa
Gambar 9.3 Definisi L dan U pada sebuah pipa U [1].

Definisikan L dan U sebagai bagian dari pipa yang tercelup dan tidak secara berurutan
(lihat gambar 1.2). Misalkan bahwa jari-jari kelengkungan pipa-II adalah 1 cm. Pada
230
bagian ini, dilakukan variasi terhadap kedua parameter tersebut untuk menentukan
kondisi yang menyebabkan terjadinya aliran. Dari gambar 1.3 didapatkan bahwa hasil
yang didapakan tidak bergantung pada diameter pipa. Dengan melakukan regresi
linear terhadap titik batas kondisi mengalir/tidak, didapat persamaan L=1.5U+2.3
dengan R2=0.9868. Dengan demikian disimpulkan bahwa untuk mengalirkan air pada
ujung pipa III, sekitar 60% dari pipa harus dalam keadaan terendam di wadah
Gambar 9.4 Ruang kondisi terjadi aliran (lingkaran)/tidak(segitiga) terhadap berbagai nilai U
dan L, untuk berbagai diameter pipa.
Pipa ∩-Variasi L dan R
Pada bagian ini dilakukan variasi panjang pipa (L) dan jari-jari pipa lengkung R untuk
menentukan ruang konfigurasi yang menyebabkan aliran. Pada eksperimen ini,
ketinggian air dalam wadah diambil bernilai 7 cm. Dari Gambar 9.4 didapatkan
bahwa, semakin panjang pipa, untuk dapat mengalirkan air ke pipa III (Gambar 9.2)
dibutuhkan jari-jari pipa lengkung yang semakin kecil. Dengan melakukan regresi
linear, didapat pula hubungan konfigurasi L dan R yang dapat mengalirkan air, yaitu
L=-1.5R+11.722 dengan R2=0.972.
Gambar 9.5 Ruang kondisi terjadi aliran (o) / tidak(∆) terhadap berbagai nilai R dan L.
231
Pipa M-like – Variasi L1 dan L2

Pada bagian ini, akan dilakukan variasi panjang pipa L1 dan L2 pada pipa M-like,
dengan mengambil L3 dan L4 konstan (lihat Gambar 9.6).
Gambar 9.6 Desain pipa M-like [3].

Dari Gambar 9.7, dapat disimpulkan apabila L1 > L2, maka air tidak akan mengalir.
Hal ini dikarenakan panjang L1 akan mempengaruhi posisi L2, apakah berada didalam
wadah atau diluar wadah. Apabila L2 berada didalam wadah, maka air akan mengalir
dan memungkinkan untuk mengalir ke pipa selanjutnya. Sebaliknya, apabila L2
berada diluar wadah (di atas air, tidak terendam) maka air tidak akan mengalir,
sehingga dapat disimpulkan bahwa air mengalir apabila posisi akhir pipa lebih bawah
dari ketinggian air.
Gambar 9.7 Ruang kondisi terjadi aliran (o ) / tidak (∆) terhadap berbagai nilai L1 dan L2.
232
9.6 Kesimpulan
Gerak siphoning fluida dapat terjadi pada saat terjadi perbedaan tekanan pada kedua
ujung pipa. Perbedaan tekanan ini terjadi karena adanya tekanan akibat kedalaman air
yf pada elemen m dan tekanan atmosfer (tidak dimasukkan ke persamaan karena
saling menghilangkan). Parameter ρf,∆h,η,D menentukan kondisi fluida dan elemen m
yang bersangkutan di bawah pengaruh percepatan gravitasi g. Program ini bekerja
sesuai dengan analisa seperti yang terlihat pada bagian pipa lurus, maka dengan
asumsi tersebut, program ini dapat digunakan untuk menentukan kondisi alir/tidak
mengalir fluida dengan melakukan variasi pada pipa ∩ dan M-like sehingga didapat
hasilnya pada bagian yang bersangkutan.
9.7 Referensi
1. Viridi, S., Novitrian, Nurhayati, Hidayat, W., Latief, F.D.E., Zen, F.P.
"Development of single fluid volume element method for simulation of
transient fluid flow in self-siphons." AIP Conference Proceedings. Eds. Zaki
Su'ud, and A. Waris. Vol. 1615. No. 1. AIP, 2014.
2. Nurhayati, Hidayat, W., Novitrian, Viridi, S., Zen, F.P. "Simulation of fluid
flow in a U-shape self-siphon and its working space." AIP Conference
Proceedings. Eds. Mitra Djamal, et al. Vol. 1589. No. 1. AIP, 2014.
3. Viridi, Sparisoma, Siti Nurul Khotimah, dan Fannia Masterika. "Self-Siphon
Simulation Using Molecular Dynamics Method." arXiv preprint
arXiv:1104.1847 (2011).
9.8 Lampiran
general.html HTML t,a,v,s B
changel.js Javascript - C
compute.js Javascript s,posisi D
draw2d.js Javascript - E
simulate.js Javascript - F
Pipa u.txt Text Parameter pipa u G
Pipa m.txt Text Parameter pipa m G
233
B. Tampilan User Interface
Gambar 9.8 Tampilan User Interface program.
C. Data masukan beserta tampilan bentuk pipa
Gambar 9.9 Pipa Lurus.
234
Gambar 9.10 Pipa ∩ menggunakan pipa u.txt.
Gambar 9.11 Pipa M-like menggunakan pipa m.txt.
D. Program general.html
<!DOCTYPE html>
<html>
<head>
<title>Siphon Simulation</title>
</head>
<body>
235
<div style="width:300px; float: left; margin: 10px;"> <b>Parameter

for pipe drawing</b>
<div style="width:300px">
<div style="width: 100%;">
<div style="width: 100%; display: inline-block;">
<label style="float: left" for="theta">Theta</label>
<input style="float: right" type="number" name="theta"
id="theta">
</div>
<label style="float: left" for="l">L</label>
<input style="float: right" type="number" name="l"
id="l">
</div>
<button id="add2operand">Add</button>
</div>
<div style="width: 100%;">
<label style="float: left" for="theta_i">Theta
awal</label>
<input style="float: right" type="number" name="theta_i"
id="theta_i">
</div>
<label style="float: left" for="theta_f">Theta
akhir</label>
<input style="float: right" type="number" name="theta_f"
id="theta_f">
</div>
<label style="float: left" for="r">R</label>
<input style="float: right" type="number" name="r"
id="r">
</div>
<button id="add3operand">Add</button>
</div>
<button id="removeLastLine">Remove Last Line</button>
</div>
</div>
<div style="width:300px; float: left; margin: 10px;"> <b>Input
parameter pipa from file </b> <br>
<input type="file" id="fileinput" />
</div>
<div style="width:300px; float: left; margin: 10px;"> <b>Parameter
physic</b>
<div style="width:300px">
<label style="float: left" for="ketinggian_air">Ketinggian
air</label>
<input style="float: right" type="number"
name="ketinggian_air" id="y_air" value="5.5">
</div>
<label style="float: left" for="diameter_pipa">Diameter
pipa</label>
<input style="float: right" type="number"
name="diameter_pipa" id="d_pipa" value="0.4">
</div>
236
</div>
</div>
<div style="width:100%; display: inline-block;">

<textarea id="ta" style="width: 250px; height: 300px; overflow-y:
scroll;"></textarea>
<canvas id="ca" width="200" height="200" style="width: 300px;
height: 300px; border: 1px solid #000;"></canvas>
<textarea id="hout" style="width: 350px; height: 300px; overflow-
y: scroll;"></textarea>
</div>
<br>
<button id="clearButton">Clear</button>
<button id="parameterButton">Parameter</button>
<button id="drawButton">Draw</button>
<button id="simulateButton">Simulate</button>
<script src = "draw2d.js"></script>

<script src = "changel.js"></script>
<script src = "compute.js"></script>
<script src = "simulate.js"></script>
<script>
var str = "t(s)" + "\t"
+ "a(cm/s^2)" + "\t" + "v(cm/s)" + "\t"
+ "s(cm)" + "\n";
var hout = document.getElementById("hout");
hout.innerHTML += str;
var ta = document.getElementById("ta");
var ca = document.getElementById("ca");
var clearButton = document.getElementById("clearButton")
var parameterButton = document.getElementById("parameterButton");
var drawButton = document.getElementById("drawButton");
var simulateButton = document.getElementById("simulateButton");
var add2operand = document.getElementById("add2operand");
var add3operand = document.getElementById("add3operand");
var removeLastLine = document.getElementById("removeLastLine");
setWorldCoordinates(-6, -6, 30,30);

setCanvasCoordinates("ca");
var deg2rad = function(deg){

return (deg/180*Math.PI);
}
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
document.getElementById("ta").value= contents;
}
r.readAsText(f);
} else {
237
alert("Failed to load file");

}
}
document.getElementById('fileinput').addEventListener('change',
readSingleFile, false);
//button untuk form

add2operand.onclick = function(){
var theta = document.getElementById("theta").value;
var l = document.getElementById("l").value;
ta.value += "" + deg2rad(theta) + " " + l + "\n";
document.getElementById("theta_i").value = theta;
clearCanvas("ca");
drawPipe();
}
add3operand.onclick = function(){
var theta_i = document.getElementById("theta_i").value;
var theta_f = document.getElementById("theta_f").value;
var r = document.getElementById("r").value;
ta.value += "" + deg2rad(theta_i) + " " + deg2rad(theta_f) + "
" + r + "\n";
document.getElementById("theta").value = theta_f;
document.getElementById("theta_i").value = theta_f;
clearCanvas("ca");
drawPipe();
}
removeLastLine.onclick = function(){
ta.value = "";
var last_theta;
for (var i = 0 ; i < lines.length - 2; i++) {
ta.value += lines[i] + "\n";
operands = lines[i].split(" ");

console.log(operands.length);
switch (operands.length) {
case 2:
last_theta = operands[0]*180/Math.PI;
break;
case 3:
last_theta = operands[1]*180/Math.PI;
break;
}
}
document.getElementById("theta").value = last_theta;
document.getElementById("theta_i").value = last_theta;
clearCanvas("ca");
drawPipe();
238
drawButton.onclick = drawPipe;
clearButton.onclick = function() {
clearTextarea("ta");
clearCanvas("ca");
t = 0;
dt = 1e-3;
v = 0;
s = 0;
pos = new Position(0,0)
y = 0;
}
simulateButton.onclick = function(){
if(simulateButton.innerHTML == "Simulate") {
simulateButton.innerHTML = "Stop";
simulate(ta.value,ca.getContext("2d"));
}
else {
simulateButton.innerHTML = "Simulate";
}
}
parameterButton.onclick = function(){
ta.value = "eta = " + eta + "\ndiameter pipa =" + diam +
"\ndelta h =" + delta_h + "\nrho =" + rho_f + "\ngravitasi =" + g + "\nA
=" + A + "\nmassa " + m;
}
</script>
</body>
</html>
E. Skrip changel.js
/*
changel.js
Library of functions for changing element property
20170417
Create this library with following functions:
changeButtonCaption()
clearTextarea()
clearCanvas(id)
*/
// Change button caption

function changeButtonCaption(id, caption) {
var b = document.getElementById(id);
b.innerHTML = caption;
}
// Clear textarea content
239
function clearTextarea(id) {
var ta = document.getElementById(id);
ta.value = "";
}
// Clear canvas
function clearCanvas(id) {
var ca = document.getElementById(id);
var bgc = ca.backgroundColor;
var width = ca.width;
var height = ca.height;
var ct = ca.getContext("2d");
ct.clearRect(0, 0, width, height);
}
F. Skrip compute.js
//class pipa lurus
var PipaLurus = function(theta, l){
this.theta = theta;
this.l = l;
}
//class pipa lengkung

var PipaLengkung = function(theta_i, theta_f, r){
this.theta_i = theta_i;
this.theta_f = theta_f;
this.r = r;
}
var parse = function(script){
var pipe = new Array();

var lines = new Array();
lines = script.split("\n");
for (var n = 0; n < N; n++) {
var terms = lines[n].split(" ");
switch (terms.length) {
case 2:
var theta = parseFloat(terms[0]);
var l = parseFloat(terms[1]);
pipe.push(new PipaLurus(theta,l))
break;
case 3:
var theta_i = parseFloat(terms[0]);
var theta_f = parseFloat(terms[1]);
var r = parseFloat(terms[2]);
pipe.push(new PipaLengkung(theta_i, theta_f, r))
240
break;
}
return pipe;
}
var computeS_i = function(pipe){

var S_i = [];
var S = 0;
for (var i = 0; i < pipe.length; i++) {
S_i.push(S);
switch (pipe[i].constructor) {
case PipaLengkung :
S = S + Math.abs(pipe[i].theta_f - pipe[i].theta_i) *
pipe[i].r;
break;
case PipaLurus :
S = S + pipe[i].l;
break;
}
}
S_i.push(S);
return S_i;
}
// kelas posisi
var Position = function(x,y) {
this.x = x;
this.y = y;
}
var computePos_i = function(pipe){

var Pos_i = [];
var P = new Position(0,0);
for (var i = 0; i < pipe.length; i++) {
Pos_i.push(new Position(P.x, P.y));
var dx = 0;
var dy = 0;
switch (pipe[i].constructor) {
case PipaLengkung :
var theta_i = pipe[i].theta_i;
var theta_f = pipe[i].theta_f;
var halfPI = Math.PI/2;
dx = pipe[i].r * (Math.cos(theta_f - halfPI)-
Math.cos(theta_i - halfPI));
dy = pipe[i].r * (Math.sin(theta_f - halfPI)-
Math.sin(theta_i - halfPI));
241
if (theta_f < theta_i) {

dx = -dx;
dy = -dy;
}
break;
case PipaLurus :
dx = pipe[i].l * Math.cos(pipe[i].theta);
dy = pipe[i].l * Math.sin(pipe[i].theta);
break;
}
P.x += dx;
P.y += dy;
}
return Pos_i;
}
// pada posisi S, partikel berada di pipa mana

var indexPipa = function(S, S_i){
var index = 0;
while (S > S_i[index + 1]){
index++;
}
return index;
}
var computeXY = function(S, S_i, Pos_i, pipe) {

var index = indexPipa(S, S_i);
var S_0 = S_i[index];

var Pos_0 = Pos_i[index];
var dx = 0;
var dy = 0;
switch (pipe[index].constructor) {
case PipaLengkung:
var r = pipe[index].r;
var theta_i = pipe[index].theta_i;
var theta_f = pipe[index].theta_f;
var Dtheta = (S - S_0)/r;

Dtheta = -Dtheta;
}
var theta = theta_i + Dtheta;

var halfPI = Math.PI/2;
dx = r * (Math.cos(theta - halfPI)-Math.cos(theta_i - halfPI));
dy = r * (Math.sin(theta - halfPI)-Math.sin(theta_i - halfPI));

dx = -dx;
dy = -dy;
242
break;
case PipaLurus:
var theta = pipe[index].theta;
dx = (S - S_0) * Math.cos(theta)
dy = (S - S_0) * Math.sin(theta)
break;
}
return new Position(Pos_0.x + dx, Pos_0.y + dy);

}
G. Skrip draw2d.js
/*
draw2d.js
Set drawing environment in 2d using canvas object
20170117
Create drawing environment for draw demonstration in
a lecture, with functions
setWorldCoordinates()
setCanvasCoordinates()
transX()
transY()
clearCurrentFigure()
20170215
Integrate and adjust previous work to Grains.
20160216
Add text for particle identification with center for
horizontal alignment and middle for vertical alignment.
20170228
Change drawing text from id (i) to name (n).
20170502
Erase plotParticle()
*/

var xwmin = 0;
var ywmin = 0;
var xwmax = 0;
var ywmax = 0;

var xcmin = 0;
var ycmin = 0;
var xcmax = 0;
var ycmax = 0;
// Define current canvas

var figureBackground = "#fff";
243

xwmin = xmin;
ywmin = ymin;
xwmax = xmax;
ywmax = ymax;
}

function setCanvasCoordinates(canvasId) {
currentFigure = canvasId;
var c = document.getElementById(canvasId);
xcmin = 0;
ycmin = c.height;
xcmax = c.width;
ycmax = 0;
}
// Transform x
xx += xcmin;
return xx;
}
// Transform y
yy += ycmin;
return yy;
}
// Clear current figure

var c = document.getElementById(currentFigure);
var ctx = c.getContext("2d");
ctx.fillStyle = figureBackground;
ctx.fillRect(xcmin, ycmax, xcmax, ycmin);
}
//Draw the pipe

function drawPipe(){
var ctx = ca.getContext("2d");
ctx.strokeStyle = "#0f0";
ctx.lineWidth = "6";
var xi = 0;
var yi = 0;
var ta = document.getElementById("ta");
var lines = new Array();
for (var n = 0; n < N; n++) {
var terms = lines[n].split(" ");
var T = terms.length;
if(T == 2){
244
var theta = parseFloat(terms[0]);

var L = parseFloat(terms[1]);
var Ns = 200;
var ds = L / Ns;
var x = xi;
var y = yi;
ctx.beginPath();
for (var i = 0; i < Ns; i++) {
var dx = ds * Math.cos(theta);
var dy = ds * Math.sin(theta);
var X = transX(x);
var Y = transY(y);
if (i == 0){
ctx.moveTo(X,Y);
} else {
ctx.lineTo(X,Y);
}
x += dx;
y += dy;
}
ctx.stroke();
xi = x;
yi = y;
} else if(T == 3){
qi = parseFloat(terms[0]);
qf = parseFloat(terms[1]);
var R = parseFloat(terms[2]);
var Nq = 200;
dq = (qf - qi) / Nq;
var q = qi;
for (var i = 0; i < Nq; i++) {
var ds = R * Math.abs(dq);
var dx = ds * Math.cos(q);
var dy = ds * Math.sin(q);
var X = transX(x);
var Y = transY(y);
if (i == 0){
ctx.moveTo(X,Y);
} else {
ctx.lineTo(X,Y);
}
x += dx;
y += dy;
q += dq;
}
ctx.stroke();
xi = x;
yi = y;
}
}
}
//draw parameter on canvas

function drawParams(t,a,v,s){
245
ctx.fillStyle="#FFF";
ctx.fillRect(0,0,xcmax,16);
ctx.fillStyle="#000";
ctx.font = "8px Arial";
ctx.fillText("t = " + t.toFixed(3)
+ " a = " + a.toFixed(3)
+ " v = " + v.toFixed(3)
+ " s = " + s.toFixed(3) , 0, 6);
}
//draw ketinggian air

function drawyf(y_f){
ctx.strokeStyle="#f00";
ctx.beginPath();
ctx.moveTo(0,transY(y_f));
ctx.lineTo(xcmax,transY(y_f));
ctx.stroke();
}
H. Skrip simulate.js
var timer;
var t = 0;
var dt = 1e-3;
var v = 0;
var s = 0;
var pos = new Position(0,0)
var y = 0;
var ctx;
var pipes;
var s_i;
var pos_i;
//constants
var eta = 1e-7;
var diam;
var delta_h = 1e-4;
var rho_f = 0.001;
var g = 980;
var A;
var m;
var y_f; // akan diset pada fungsi simulate
var drawParticle = function(){

var width = 3;
ctx.fillStyle = "#000";
246
ctx.fillRect(transX(pos.x)-(width/2),transY(pos.y)-
(width/2),width,width);
}
var eraseParticle = function(){

var width = 4;
ctx.fillStyle = "#00F";
ctx.fillRect(transX(pos.x)-(width/2),transY(pos.y)-
(width/2),width,width);
}
var simulate = function(script, _ctx){
y_f = document.getElementById("y_air").value;
diam = document.getElementById("d_pipa").value;
A = Math.PI*(diam/2)*(diam/2);
m = A*delta_h*rho_f;
pipes = parse(script);
s_i = computeS_i(pipes);
pos_i = computePos_i(pipes);
ctx = _ctx;
drawParticle();
timer = setInterval(run,100);
}
var run = function() {

eraseParticle();
index = indexPipa(s,s_i);
switch (pipes[index].constructor) {
case PipaLengkung :
var delta;
if (pipes[index].theta_f > pipes[index].theta_i) {
delta = 1;
} else {
delta = -1;
}
theta_s = delta * (s - s_i[index])/pipes[index].r +

pipes[index].theta_i;
break;
case PipaLurus :
theta_s = pipes[index].theta;
break;
}
//Integrasi Euler
a = -8*Math.PI*eta*delta_h*v/m + rho_f*(y_f - y)*A/m +
g*Math.sin(theta_s);
v = v + a*dt;
s = s + v*dt;
y = y + v*dt*Math.sin(theta_s);
247
t = t + dt;
if (s > s_i[pipes.length]) {
return
}
pos = computeXY(s, s_i, pos_i, pipes);
drawParticle();
drawParams(t,a,v,s);
drawyf(y_f);
var str = t.toFixed(3) + "\t"

+ a.toFixed(3) + "\t" + v.toFixed(3) + "\t"
+ s.toFixed(3) + "\n";
}
I. Skrip pipa u.txt

1.5707963267948966 7
1.5707963267948966 -1.5707963267948966 1
-1.5707963267948966 7
J. Skrip pipa m.txt

1.5707963267948966 5
1.5707963267948966 -1.5707963267948966 1
-1.5707963267948966 7
-1.5707963267948966 1.5707963267948966 1
1.5707963267948966 9
1.5707963267948966 -0.7853981633974483 1
-0.7853981633974483 6
248
Simulasi gerak sistem pendulum
10 ganda dengan gravitasi yang berubah
terhadap waktu
Ahmad Sibaq Ukhrowi Ulwi | mulwiisibaq@students.itb.ac.id
Ginanjar Syahfia | ginanjar_syahfia@students.itb.ac.id
Rio Harapan Pangarihutan | mharapan@arc.itb.ac.id
Sistem pendulum ganda merupakan system variasi dari sebuah system pendulum
dengan ditambahkan beberapa beban tambahan yang terhubung dengan beban
pertama. Gerak yang dihasilkan oleh system multi pendulum akan menghasilkan
bentuk gerak “chaos”. Gerak chaos ini akan disimulasikan secara numerik dengan
memvariasikan nilai massa dan sudut awal masing-masing beban. Hasilnya akan
dianalisis dengan plot terhadap waktu. Sehingga dapat diamati kecenderungan chaos
nya dari system pendulum ganda.
10.1 Pendahuluan
Sistem pendulum ganda adalah variasi dari system multi pendulum yang paling
sederhana dengan hanya menggunakan 2 buah beban, system pendulum ganda dengan
jumlah yang sangat banyak dapat memodelkan bentuk gerak kompleks dari rantai.
System pendulum ganda merupakan system dinamik yang menuknjukkan gerak
chaos. Pada system pendulum ganda, apabila diberi energy rendah, menunjukkan
gerak periodic. Sementara pada energy menengah, system menunjukkan gerak yang
seolah-olah periodic. Dan pada energy yang tinggi, system menghasilkan gerak chaos.
Gerak chaos adalah fenomena fisis dimana system dinamik menghasilkan gerakan
yang acak dan hasilnya bergantung pada kondisi awal(Baker and Gollub, 1990).
Gambar 10.1. Trajectory gerak chaos pendulum ganda dengan memberikan LED pada beban.
249
Komputasi Fisika 3: 10 Simulasi gerak sistem pendulum ganda ..
10.2 Dasar Teori

Dalam fisika dan matematika, di area system dinamik, sebuah pendulum ganda adalah
sebuah pendulum dengan sebuah pendulum lain yang terhubung pada ujungnya.
Pendulum ganda merupakan system fisis sederhana yang menunjukkan gerak dinamik
yang sangat bervariasi dengan keterkaitan yang kuat pada kondisi awal.1 gerak dari
pendulum ganda dijelaskan dengan serangkaian persamaan diferensial biasa juga
gerak chaos.
Gambar 10.2. Sistem pendulum ganda.

Gambar 10.2 merupakan skema pendulum ganda, dengan dan
adalah massa, panjang tali, dan perubahan sudut dari pendulum atas dan bawah
berturutan. Dengan meninjau titik porosnya sebagai titik pusat koordiant dengan
sumbu x dan sumbu y, pendulum ganda akan berada pada kuadran keempat dari
system koordinat. Posisi pendulum atas dan bawah memenuhi
…..(10.1)
……(10.2)
Energy kinetic dari pendulum ganda adalah sebagai berikut:

(10.3)
Dan energy potensial sebesar
(10.4)
Lagrangian dari dua pendulum sederhana yang saling terkoneksi

dijelaskan pada persamaan dibawah ini
250
(10.5)
Dengan menurunkan dan memodifikasi kembali persamaan-persamaan diatas,
diperoleh sebagai berikut
(10.6)
(10.7)
Dengan beberapa langkah penururan, kemudian dengan P adalah momentum dari
pendulum ganda dijelaskan dengan dengan
(10.8)
(10.10)
Dan Hamiltonian dari pendulum ganda dijelaskan dengan ( )
(10.11)
10.3 Metode Numerik

Hasil perumusan dinamika diatas akan sangat sulit untuk diselesaikan dengan cara
analitik sehingga akan diselesaikan dengan metode euler-kromer. Persamaan berikut
ini akan diselesaikan dengan metode numeric.
(10.12)
(10.13)
(10.4)
(10.15)
Dimana adalah kecepatan sudut, dan adalah percepatan sudut, dan dan adalah
posisi ke berapa dari salah satu pendulum. dan .
Kemudian kecepatan dan percepatan sudut digunakan untuk metode numerik Euler-
Cramer.
Sebelum metoda numeric digunakan, terlebih dahulu dilakukan konversi dari
koordinat kartesian ke koordinat bola, kemudian setelah hasil diperoleh diubah
kembali menjadi koordinat kartesian untuk mengetahui posisi x dan y setiap
pendulum.
251
10.4 Algoritma
Simulasi system n-pendulum, dilakukan dengan menggunakan algoritma berikut
untuk memperoleh;
L1. menentukan koordinat pada kanvas
L2.
L3. ?
L4.
L5.
L6.
L7.
L8.
L9.
L10. , = Iterasi ke-n
L11.
L12. Posisibandul_1.x =
Posisibandul_1.y =
L13. Posisibandul_2.x =
Posisibandul_2.y =
L14. Drawline
L15. Write posisibandul_1.x, Posisibandul_1.y, Posisibandul_2.x, Posisibandul_2.y
L16. t=t+0.05
L17. g=g+0.01
252
10.5 Hasil simulasi dan diskusi

Berikut adalah parameter fisis yang digunakan pada program simulasi kali ini
tercantum pada Tabel 10.1.
Tabel 10.1 Parameter simulasi
Symbol Nilai Code

100, 100 l1, l2
1-50 m1, m2
Phi1, Phi2
g0 9.8 g
dt 0.05 time
(koordinat 400, 100 X0, Y0
kanvas)
Sebelum simulasi dijalankan, tampilan HTML program tersebut akan nampak seperti
dibawah ini.
Gambar 10.3. Tampilan awal simulasi.

Pada tampilan simulasi diatas, bagian kiri merupakan bagian dimana parameter
massa, dan sudut masing-masing pendulum dapat diatur sebelum simulasi dimulai.
Bagian tengah adalah kanvas dimana simulasi akan berjalan, dan bagian kanan akan
menampilkan data hasil pengolahan secara numerik sehingga dapat diolah untuk
dianalisis kemudian.
253
Gambar 10.4. Tampilan setelah simulasi dimulai.

Gambar di atas adalah ketika simulasi dijalankan, massa pendulum direpresentasikan
ukurannya yang berubah-ubah. Pada bagian kanan terlihat rangkaian data dari hasil
simulasi ini.
Untuk percobaan simulasi ini digunakan variasi pasangan massa pendulum 1 dan 2,
serta variasi sudut kedua pendulum. Hasil dari simulasi ini dapat dilihat pada grafik-
grafik dibawah ini.
Gambar 10.5(a). Grafik time series dengan , ,
254
Gambar 10.5(b). Grafik time series dengan , ,
Gambar 10.5(c). Grafik time series dengan , ,
255
Gambar 10.5(d). Grafik time series dengan , ,

Dari grafik diatas, pada gambar a, data simulasi menunjukkan gerakan bandul bagian
atas memiliki gerakan yang sedikit acak namun apabila dilihat pada rentang waktu
tertentu geraknya berulang sementara bandul bagian bawah tetap menunjukkan
gerakan periodik. Variasi sudut ke 2 dan ke 4 pun nampak mempertahankan gerak
periodiknya. Pada grafik variasi sudut ke 3 terlihat bentuk gerakan yang sangat acak
pada bandul bagian bawah, sedangkan bandul atas masih memunculkan gerak yang
periodik.( series 1 adalah bandul atas, dan series 2 adalah bandul bawah).
Gambar 10.6(a). Grafik time series dengan , ,
256
Gambar 106(b). Grafik time series dengan , ,
Gambar 10.6(c). Grafik time series dengan , ,
257
Gambar 10.6(d). Grafik time series dengan , , .
Pada grafik untuk variasi massa secara umum hamper semua tidak jauh berbeda,
bandul atas menunjukkan gerakan yang quasi-periodik, dengan bentuk yang berbeda.
Sementara pada bandul kedua masih mmenunjukkan pola gerakan periodic.(series 1
adalah bandul pertama dan series 3 adalah bandul kedua)
Secara umum dari hasil simulasi gerakan bandul dengan gravitasi berubah seiring
waktu menunjukkan gerak yang cukup serupa. Dengan salah satu bandul
menunjukkan gerak quasi periodic dan bandul lainnya menunjukkan gerak yang
periodic. Hasil variasi sudut baru menunjukkan gerakan yang terlihat chaos pada
variasi perbedaan sudut yang ekstrem( dan ). Sementara variasi massa, gerakan
chaos masih belum terlihat. gravitasi yang terus bertambah pun mempengaruhi
gerakan yang seharusnya menunjukkan pola yang acak, menyebabkan pola gerakan
tetap pada pola periodiknya.
Untuk menganalisa gerak pendulum pada simulasi ini lebih jauhnya perlu ditinjau
pula variasi lainnya, seperti panjang tali antar bandul, maupun variasi kombinasi.
Selain itu, lama waktu tinjau juga mempengaruhi, pada t=120 disini sudah mulai
terlihat polanya, namun apabila diperpanjang kembali akan lebih menunjukkan
karakteristik gerakan dari kedua bandul.
10.6 Kesimpulan
Simulasi gerak pendulum ganda dengan gravitasi yang berubah seiring waktu
dilakukan dengan mengatur energy potensial awal dari pendulum(massa dan sudut)
tanpa diberikan gaya awal. Gerak pendulum ganda dimodelkan dengan menghitung
percepatan sudut, kecepatan sudut dan posisi sudut masing-masing bandul
menggunakan metode euler-kromer. Hasil yang diperoleh gravitasi yang berubah
cenderung mempertahankan pola gerakan yang periodic.
258
10.7 Referensi
1. Levien RB and Tan SM. Double Pendulum: An experiment in chaos.American
Journal of Physics 1993; 61 (11): 1038
2. G. Mukul, B. Kamal, S. Arun. Mass and Length Dependent Chaotic Behavior
of a Double Pendulum. IFAC. India. 2014.
3. URL http://googolblog.blogspot.co.id/2015/05/n-tuple-pendulum-matlab-code-
double.html , diakses pada 19 mei 2017.
10.8 Lampiran
a. Keterangan penggunaan program dan skrip
Tabel 10.2 Program dan skrip beserta keluarannya
index.css css - B
Pendulum.js javascript C
Index.html HTML Tampilan D

simulasi
b. Index.css
.sidebar {
background: #fafafa;
float: left;
font-family: Helvetica, Arial, sans-serif;
min-width: 200px;
height: 100%;
margin: 0;
padding: 10px 5px;
}
.sidebar label {
margin: 10px 0 5px 10px;
display: block;
}
.sidebar input {
margin: 10px 0 5px 10px;
display: block;
259
margin-bottom: 10px;
width: 90%;
}
.phys-canvas {
float: left;
}
.submit-btn {
width: 80%;
padding: 5px;
text-align: center;
}
body {
font-family: "CMS", "Droid Serif", Georgia, Times, serif;
font-size: 16px;
padding: 20px;
max-width: 650px;
margin: 0 auto;
}
h1, h2, h3, p {

-webkit-font-smoothing: antialiased;
}
h1 {
color: rgba(0, 0, 0, 0.9);
font-size: 3em;
font-weight: 400;
}
h2 {
color: rgba(0, 0, 0, 0.6);
font-weight: 500;
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
font-weight: 500;
}
260
p{
color: rgba(0, 0, 0, 0.9);
line-height: 1.5;
font-size: 1.1em;
}
a{
font-weight: 600;
color: #55acee;
text-decoration: none;
}
h4 {
font-size: 20px;
color: #55acee;
}
ul {
list-style-type: none;
}
li {
font-weight: 600;
color: #55acee;
}
a:hover, a:visited {
color: #55acee;
}
footer {
margin-top: 50px;
}
c. Pendulum.js
var timer1;
261
// Create right division

var rdiv = document.createElement("div");
document.body.appendChild(rdiv);
rdiv.style.border = "1px black solid";
rdiv.style.height = "402px";
rdiv.style.float = "right";
// Create text area for data

rdiv.appendChild(ta);
ta.rows = "20";
ta.cols = "32";
ta.id = "hout";

var xwmin = -4;
var ywmin = -7;
var xwmax = 4;
var ywmax = 1;

var xcmin = 0;
var ycmin = 0;
var xcmax = myCanvas.width;
var ycmax = myCanvas.height;
//Transform function from canvas coordinate to Cartesian coordinate

// Transform x
var xx = x * ((xwmax - xwmin) / (xcmax - xcmin));
xx += xwmin;
var X = parseFloat(xx);
return X;
}
// Transform y
var yy = -y * ((ywmax - ywmin) / (ycmax - ycmin));
262
yy += ywmax;
var Y = parseFloat(yy);
return Y;
}
//Physics Constants
var d2Phi1 = 0;
var d2Phi2 = 0;
var dPhi1 = 0;
var dPhi2 = 0;
var Phi1 = 0*(Math.PI)/2;
var Phi2 = 2.3*(Math.PI)/2;
var m1 = 10;
var m2 = 10;
var l1 = 100;
var l2 = 100;
var X0 = 400;
var Y0 = 100;
var g = 9.8;
var time = 0.05;
var t = 0;
var b1 = document.getElementById("subm");
b1.onclick = function() {
m1 = $('#mass1').val();
m2 = $('#mass2').val();
Phi1 = $('#Phi1').val()/180*(Math.PI);
Phi2 = $('#Phi2').val()/180*(Math.PI);
d2Phi1 = 0;
d2Phi2 = 0;
dPhi1 = 0;
dPhi2 = 0;
run();
b2.style.visibility = "visible";
if(b1.value == "Simulasi") {
b1.value = "Atur Ulang";
timer1 = setInterval(run, 5);
g = 9.8;
} else {
b2.style.visibility = "hidden";
b1.value = "Simulasi";
b2.value = "Tunda";
263
hout.innerHTML = "";
}
}
var b2 = document.getElementById("pause");
b2.style.visibility = "hidden";
run();
if(b2.value == "Tunda") {
b2.value = "Lanjut";
} else {
b2.value = "Tunda";
timer1 = setInterval(run, 5);
}
}
var mass1 = document.getElementById("mass1");

m1 = mass1.value;
var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');
var init = {};
//Draw Circle Pendulum

function drawCircle(myCircle, context) {
context.beginPath();
context.arc(myCircle.x, myCircle.y, myCircle.mass, 0, 2 * Math.PI, false);
context.fillStyle = 'rgba(0,0,0,1)';
context.fill();
}
//Draw Line Pendulum

function drawLine(myLine, context) {
context.beginPath();
context.moveTo(myLine.x0, myLine.y0);
context.lineTo(myLine.x, myLine.y);
context.strokeStyle = 'red';
context.lineWidth = 5;
context.stroke();
}
264
var i = 0;
//Animate Pendulum
function animate(myCircle1, myCircle2, myLine1, myLine2, canvas, context)
{
mu = 1+m1/m2;
d2Phi1 = (g*(Math.sin(Phi2)*Math.cos(Phi1-Phi2)-mu*Math.sin(Phi1))-
(l2*dPhi2*dPhi2+l1*dPhi1*dPhi1*Math.cos(Phi1-Phi2))*Math.sin(Phi1-
Phi2))/(l1*(mu-Math.cos(Phi1-Phi2)*Math.cos(Phi1-Phi2)));
d2Phi2 = (mu*g*(Math.sin(Phi1)*Math.cos(Phi1-Phi2)-
Math.sin(Phi2))+(mu*l1*dPhi1*dPhi1+l2*dPhi2*dPhi2*Math.cos(Phi1-
Phi2))*Math.sin(Phi1-Phi2))/(l2*(mu-Math.cos(Phi1-Phi2)*Math.cos(Phi1-
Phi2)));
dPhi1 += d2Phi1*time;
dPhi2 += d2Phi2*time;
Phi1 += dPhi1*time;
Phi2 += dPhi2*time;
myCircle1.x = X0+l1*Math.sin(Phi1);
myCircle1.y = Y0+l1*Math.cos(Phi1);
myCircle2.x = X0+l1*Math.sin(Phi1)+l2*Math.sin(Phi2);
myCircle2.y = Y0+l1*Math.cos(Phi1)+l2*Math.cos(Phi2);
myLine1.x = myCircle1.x;
myLine1.y = myCircle1.y;
myLine2.x0 = myCircle1.x;
myLine2.y0 = myCircle1.y;
myLine2.x = myCircle2.x;
myLine2.y = myCircle2.y;
context.clearRect(0, 0, canvas.width, canvas.height);
drawLine(myLine1, context);
drawLine(myLine2, context);
drawCircle(myCircle1, context);
drawCircle(myCircle2, context);
i++;
g+=0.01;
console.log("g = ",g);
}
265
var str = "";

//Calling this
function run(){
var myLine1 = {x0: X0, y0: Y0, x: 0, y: 0};
var myLine2 = {x0: 0, y0: 0, x: 0, y: 0};
var myCircle1 = {x: X0+l1*Math.sin(Phi1), y: Y0+l1*Math.cos(Phi1),
mass: m1};
var myCircle2 = {x: X0+l1*Math.sin(Phi1)+l2*Math.sin(Phi2), y:
Y0+l1*Math.cos(Phi1)+l2*Math.cos(Phi2), mass: m2};
clearInterval(init);
context.clearRect(0, 0, canvas.width, canvas.height);
//show the coordinates on the text area
var XX1 = transX(myCircle1.x);

var YY1 = transY(myCircle1.y);
var XX2 = transX(myCircle2.x);
var YY2 = transY(myCircle2.y);
//show the coordinates on the text area

str += time*i + "\t" + XX1 + "\t" + YY1 + "\t" + XX2 + "\t" + YY2 + "\n";
hout.innerHTML = str;
animate(myCircle1, myCircle2, myLine1, myLine2, canvas, context)

}
d. Index.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>RBL Pendulum N diubah</title>
<meta charset='ISO-8859-1'>
<script type='text/javascript' src='js/resize.js'></script>
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'
type='text/javascript'></script>
<link rel='stylesheet' type='text/css' href='css/index.css'>
266
</head>
<body style='margin: 0; max-width: 100%; padding: 0'>

<div class='sidebar'>
<form id='set_variables_form'>
<label for='mass1'>Massa Pendulum 1</label>
<input id='mass1' type='range' max='50' min='1'
value='10' onmousemove = "show_mass1()">
<label for='mass2'>Massa Pendulum 2</label>

<input id='mass2' type='range' max='50' min='1'
value='10' onmousemove = "show_mass2()">
<label for='Phi1'>Sudut Pendulum 1</label>

<input id='Phi1' type='range' max='180' min='0'
value='30' onmousemove = "show_Phi1()">
<label for='Phi2'>Sudut Pendulum 2</label>

<input id='Phi2' type='range' max='180' min='0'
value='30' onmousemove = "show_Phi2()">
<input class='submit-btn' id='subm' type='button'

value='Simulasi'>
<input class='submit-btn' id='pause' type='button'
value='Tunda'>
</form>
<footer style='padding-left: 3px'>
<h4>Oleh : </h4>
<ul>
<li>Ulwi</li>
<li>Rio</li>
<li>Ginanjar</li>
</ul>
</footer>
</div>
<canvas class='phys-canvas' height='800' id='myCanvas'
width='800'></canvas>
<script type='text/javascript' src='js/pendulum.js'></script>
<script type="text/javascript">
function show_mass1()
{
console.clear();
267
var sl_mass1 = document.getElementById("mass1");

console.log("Mass1 = ",sl_mass1.value);
}
function show_mass2()
{
console.clear();
var sl_mass2 = document.getElementById("mass2");
console.log("Mass2 = ",sl_mass2.value);
}
function show_Phi1()
{
console.clear();
var sl_Phi1 = document.getElementById("Phi1");
console.log("Phi1 = ",sl_Phi1.value);
}
function show_Phi2()
{
console.clear();
var sl_Phi2 = document.getElementById("Phi2");
console.log("Phi2 = ",sl_Phi2.value);
}
</script>
</body>
</html>
268
Pergerakan flagella dengan gaya
11 pegas
Aufa Nu’man Fadhilah Rudiawan | aufanu39man@gmail.com
Florentin Anggraini Purnama | florenpan@gmail.com
Muhammad Fauzan Girindra | fauzangir@hotmail.com
Jamaludin Muchtar | jamalmuchtar7@gmail.com
Mensimulasikan pergerakan flagella dengan menggunakan model grains yang

dihubungkan dengan sebuah pegas sebagai ekor flagella. Variasi parameter dilakukan
untuk kecepatan U, densitas fluida ρ, konstanta gaya drag (KDRAG), konstanta gaya
lift (KL), konstanta pegas (KS), dan frekuensi dari kecepatan. Pergerakan flagella
dipengaruhi oleh variabel kecepatan U dan rasio antara konstanta gaya drag
(KDRAG), konstanta gaya lift (KL),
11.1 Pendahuluan
Mempelajari pergerakan ikan membuat peneliti dapat mendesain kendaraan dan robot
yang dapat menavigasi lingkungan perairan dengan lihai. Untuk mempelajari hal
tersebut diperlukan analisis interaksi struktur fluida ikan dan lingkungannya. Selama
beberapa juta tahun, fenomena evolusi membuat ikan dapat bergerak dengan cepat
dan mudah melewati lingkungan perairan yang mereka sebut ‘rumah’. Lingkungan
seperti itu, memberikan tantangan bagi kendaraan dan robot buatan manusia,
sebagaimana perairan yang kelam kabut dan kurang cahaya menyulitkan mereka
dalam navigasi. Untuk mengatasi masalah ini, seringkali ikan digunakan sebagai
sumber inspirasi bagi perkembangan desain robot air.[1] Akan tetapi, dalam artikel ini,
kelompok kami menggunakan pergerakan flagella untuk dipelajari, dengan
menggunakan beberapa parameter acuan seperti frekuensi dan amplitudo.
11.2 Teori
Seperti dilansir pada referensi untuk kasus pergerakan thunniform[2], kami
menggunakan penjelasan yang serupa untuk menjelaskan mekanisme pergerakan dari
flagella. Ekor dari flagella dapat kita gambarkan sebagai butiran-butiran (granular)
yang berosilasi. Dari sisi samping, ekor tersebut berosilasi ke atas dan ke bawah.
Diagram bebas dari sisi pandang ini ditunjukkan dalam Gambar 11.1.
Skema pada gambar kiri mengilustrasikan ketika butiran bergerak ke bawah dengan
gaya W dan secara keseluruhan (flagella) bergerak ke depan dengan kecepatan V0.
Kemudian laju yang tampak merupakan penjumlahan dari kedua vektor V0 dan W.
Laju U dihasilkan dari gaya ‘angkat’ yang tegak lurus terhadap U.
Komputasi Fisika 3: 11 Pergerakan flagella ..
Untuk menambah daya dorong, dapat dilakukan dengan memperbesar W, yang

bertujuan untuk memperbesar U dan α. Untuk butiran flagella yang berosilasi, W
dapat diperbesar dengan cara menambah frekuensi osilasi f atau amplitudo osilasi H.
Sebagai contoh, untuk nilai frekuensi tetap, ketika nilai H bertambah maka nilai W
juga bertambah karena butiran harus bergerak lebih banyak dalam waktu yang sama.
Demikian pula, ketika memperbesar f dalam H tetap, maka nilai W akan bertambah
karena butiran tersebut kekurangan waktu untuk menjangkau jarak yang sama. Maka,
menambah frekuensi dan/atau amplitude dapat menambah daya dorong.
Gambar 11.1. Diagram bebas ketika butiran berosilasi ke bawah (kiri) dan ke atas (kanan).
Efisensi daya dorong diperoleh dengan menggunakan rumusan berikut, dengan rata-
rata berkisar 0.3.
(11.1)
Pertama-tama, 50 grain (termasuk kepala flagellum) digambar. Metode dinamika
grain yang digunakan dalam makalah ini menerapkan 3 hukum gaya, yaitu gaya lift,
(11.2)
gaya drag,
(11.3)
dan gaya pegas
(11.4)
dengan adalah kecepatan grain relatif terhadap aliran fluida, adalah luas
penampang melintang dari grain, adalah densitas fluida, adalah konstanta gaya
270
lift, adalah konstanta gaya drag, adalah konstanta gaya pegas, dan adalah
jarak antara suatu grain dan grain yang terletak di depannya.
Karena gerakan flagellum sangat kompleks dan sangat bervariasi, maka digunakan
pergerakan ikan untuk mendekati pergerakan flagellum, meskipun pada
perhitungannya tidak begitu persis. Pusat pergerakkan seluruh flagellum bergantung
pada grain ke-2 dari kepala yang ditandai dengan warna merah.
Untuk sudut pergerakan flagellum, digunakan agar gerakannya melingkar
bervariasi secara smooth terhadap waktu.
11.3 Metode numerik

Untuk menggambarkan posisi setiap grain pada setiap waktu, digunakan metode
algoritma Euler yang menjumlahkan semua gaya
v i (t + ∆t ) = vi (t ) + a i (t )∆t (11.5)
x i (t + ∆t ) = x i (t ) + vi (t )∆t (11.6)
11.4 Algoritma
Simulasi pergerakan flagella dengan model butiran-butiran yang berosilasi dilakukan
dengan menggunakan algoritma berikut ini:
L1. U, freq, kS, kDrag, ρ, kL ?
L2. N=50, dt=1E-3
L3. M=0.1, D=0.2, x0=-13.3, xi=x0+i*D, yi=-7, v=0
L4. Ux = U*cos(2*PI*freq*t)
L5. Uy = U*sin(2*PI*freq*t)
L6. V[N-2] = Ux + Uy
L7. A= PI*(D*0.5)*(D*0.5)
L8. SF[i] = (0.5*kL*rho*A*Ux*Ux)+( 0.5*kL*rho*A*Uy*Uy,), i:0~N
L9. SF[i] = SF[i]+ (0.5*kD*rho*A*Ux*Ux)+( 0.5*kD*rho*A*Uy*Uy,),
i:0~N
L10. SF[i] = SF[i]+(-kS*((ri-r0i)-( ri-1-r0i-1))) i:N
L11. SF[i] = SF[i]+(-kS*((ri-r0i)-( ri+1-r0i+1))) i:0
L12. SF[i] = SF[i]+(-kS*((ri-r0i)-( ri+1-r0i+1)))+(-kS*((ri-r0i)-(ri-1-r0i-1)))
i:1~N-1
L13. ai=SF[i]/m, i:0~N
L14. Vi=vi+ai*dt
271
L15. ri=ri+vi*dt

Gerak umum dari flagellum diberikan dalam Gambar 11.2 untuk empat waktu yang
berbeda. Terlihat bahwa gaya-gaya yang digunakan membuat flagellum bergerak ke
arah kanan atas bidang gambar. Parameter yang digunakan adalah
U 100
FREQ 30.0
KS 5E4
KDRAG 0.499
RHO 50
KL 0.50
(a) (b)
(c) (d)
Gambar 11.2. Pergerakan flagellum untuk t: (a) 2.40 s, (b) 2.65 s, (c) 3.66 s, (d) 4.56 s.
Variasi kecepatan sesuai dengan fisis, yaitu ketika U dinolkan, flagellum tidak
berpindah tempat. Ketika dibesarkan, flagellum bergerak ke arah kanan atas dengan
cepat dan ketika dikecilkan, flagellum bergerak ke arah kanan atas dengan kecepatan
yang lebih lambat. Flagellum terus bergerak ke arah kanan atas karena komponen y
dari gerak flagellum yang lebih besar dari komponen x dari gerak flagellum.
Ketika densitas fluida (ૉ) dikecilkan, gerak flagellum semakin lambat, sesuatu yang
bertentangan dengan fakta fisis. Seharusnya ketika densitas fluida semakin kecil,
semakin sulit flagellum bergerak dalam fluida. Hal ini mungkin karena semakin kecil
fluida, semakin kecil contact force yang didapatkan dari fluida untuk gaya lift
flagellum sehingga gerakannya pun juga menjadi semakin lambat.
272
Ketika konstanta gaya drag (KDRAG) dan konstanta gaya lift (KL) disamakan,
flagellum tidak bergerak. Hal ini sesuai dengan kenyataan fisisnya, yang artinya
flagellum sedang berada dalam keadaan cruise. Ketika KL lebih besar dari KDRAG,
flagellum dapat bergerak ke arah kanan atas. Hal ini juga sesuai dengan kenyataan
fisisnya. Ketika KDRAG lebih besar dari KL, flagellum malah bergerak ke arah kiri
bawah. Hal ini karena belum dilakukan pengaturan bahwa gaya drag tidak bisa lebih
besar dari gaya lift.
Ketika konstata gaya pegas (KS) diperbesar, struktur flagellum hancur dan kode pun
menjadi error. Ketika KS diperkecil, grain dari flagellum menjadi tercecer dan
gerakannya menjadi tidak sinkron. Hal ini karena ketika KS kecil, artinya sedikit saja
gaya akan menghasilkan perubahan posisi yang besar terhadap grain.
Ketika frekuensi dinaikkan, gerak flagellum semakin lama menjadi ke arah
horizontal. Ketika frekuensi diturunkan, gerak flagellum malah melayang ke atas. Hal
ini mungkin karena kesalahan metode numerik.
11.6 Kesimpulan
Hasil simulasi gerak flagellum belum cukup mendekati keadaan sebenarnya, karena
masih terdapat kekurangan dari metode numerik.
11.7 Referensi
1. “Undulatory Swimming”, Southern Methodist University Lyle School of
Engineering, URL lyle.smu.edu/propulsion/Pages/undulatory.htm [20170521].
2. Fairclough, Caty, “Studying the Swimming Patterns of Fish with Simulation”,
Blogs, January, 4th 2016, URL https://www.comsol.com/blogs/studying-the-
swimming-patterns-of-fish-with-simulation/ [20170521].
3. https://www.grc.nasa.gov/www/K-12/airplane/ldrat.html [20170522]
4. https://www.grc.nasa.gov/www/K-12/airplane/drag1.html [20170522]
11.8 Lampiran
index4a.html HTML vf B
draw2da.js Javascript Gambar 11.2 C
forcea.js Javascript Gambar 11.3 D
graina.js Javascript Gambar 11.4 E
273
layouta.js Javascript Gambar 11.5 F
mydyanmicsa.js Javascript Gambar 11.6 G
vect3a.js Javascript H
B. Skrip program index4a.html
<!DOCTYPE html>
<html>
<head>
<title>vect3</title>
<script src="Grains4/vect3a.js"></script>
<script src="Grains4/graina.js"></script>
<script src="Grains4/forcea.js"></script>
<script src="Grains4/mdynamicsa.js"></script>
<script src="Grains4/draw2da.js"></script>
<script src="Grains4/layouta.js"></script>
</head>
<body>
<script>
var timer1;
var N = 50;
var grains = new Array(N);
var kL; //lift constant
var magU; //flow speed
var theta; //angle
layout();
initiate();
Mdynamics.setdt(1E-3); //set timestep
//initiate all positions and parameters

of the head and grains
function initiate() {
m1 = 0.1; //mass of all grains

c1 = "#000"; //border color of
all grains
D = 0.2; //diameter of the tails
x0 = -13.3; //initial position
var i = 0;
for(var ix = 0; ix <= N; ix++) {
274
if (ix==N){ //this is for

head
grains[i] = new
Grain;
grains[i].i = i;
x = x0 + ix*D + 0.12;
//head position
grains[i].r = new
Vect3(x, -7, 0);
grains[i].r0 = new
Vect3(x, -7, 0); //initial head position
grains[i].m = m1;
grains[i].c = c1;
grains[i].D = D +
0.4; //diameter of head
}else{ //this is for
tail grains
grains[i] = new
Grain;
grains[i].i = i;
x = x0 + ix*D; //tail
grain position
grains[i].r = new
Vect3(x, -7, 0);
grains[i].r0 = new
Vect3(x, -7, 0); //initial tail grain position
grains[i].m = m1;
grains[i].c = c1;
grains[i].D = D;
}
i++;
}
//plot everything initially

for(var iN = 0; iN <= N; iN++) {
plotParticle(grains[iN]);
}
}
iter = 0;
function run() {
grains[N-2].c = "#f50";//make the
locomotor grain red
275
getParams();//get parameters like

freq, ampl and so on
/*let's input U and angle

if(iter%2 == 0)
{
theta = -Math.PI/3; //tail
goes down
}else if(iter%2 != 0)
{
theta = Math.PI/3; //tail
goes up
}*/
Ux =
magU*Math.cos(2*Math.PI*freq*t); //horizontal of U
Uy =
magU*Math.sin(2*Math.PI*freq*t); //vertical of U
vecU = new Vect3(Ux,Uy,0);
//vector components of flow speed
//pake grain N-2 sbg locomotor

krn nanti kepalanya putus dr tail
grains[N-2].v = vecU;
// Prepare variable for saving

sum of forces
SF = new Array(N);
SF[iN] = new Vect3;
}
//calculate lift force

for(var iN = 0; iN <= N; iN++)
{
var f =
Force.lift(grains[iN]);
SF[iN] = Vect3.add(SF[iN],
f);
}
// Calculate drag force

var f =
Force.drag(grains[iN]);
276
f);
}
// Calculate spring force

for(var iN = N; iN >= 0; iN--) {
var f = new Vect3;
if (iN==(N)){
f =
Force.spring(grains[iN], grains[iN-1]);
}else if (iN==0){
f =
Force.spring(grains[iN], grains[iN+1]);
}else{
f =
Vect3.add(Force.spring(grains[iN],
grains[iN+1]),Force.spring(grains[iN], grains[iN-1]));
}
f);
}
var hout =
document.getElementById("hout");
hout.innerHTML = grains[N-
1].r.y; //show the position
var str = "\nt = " + t + " s";
//put current time in textarea
//this one is simply to
draw the grains and head
}
//make it come again from left,

infinite loop
if(grains[N-1].r.x >= 8)
{
initiate();
}
277
Mdynamics.Euler(SF[iN],
grains[iN]);
}
Mdynamics.inct(); //increase time
void
iter++;
}
</script>
</body>
</html>
C. Skrip program draw2da.js

var xwmin = 0;
var ywmin = 0;
var xwmax = 0;
var ywmax = 0;

var xcmin = 0;
var ycmin = 0;
var xcmax = 0;
var ycmax = 0;


xwmin = xmin;
ywmin = ymin;
xwmax = xmax;
ywmax = ymax;
}

xcmin = 0;
ycmin = c.height;
xcmax = c.width;
ycmax = 0;
278
// Transform x
var xx = (x - xwmin) / (xwmax - xwmin) * (xcmax -
xcmin);
xx += xcmin;
return X;
}
// Transform y
var yy = (y - ywmin) / (ywmax - ywmin) * (ycmax -
ycmin);
yy += ycmin;
return Y;
}
// transform angle
// always put true in plots because real angles are drawn
anticlockwise
var rangle;
var vangle;
function transAngle(rangle)
{
if(rangle == 0)
{
vangle = 0;
}else if(rangle == 1 || rangle == -1)
{
vangle = 1;
}else if(rangle == 2 || rangle == -2)
{
vangle = 2;
}
else if(rangle > 0 && rangle < 1) // lower half
positive
{
vangle = 2-rangle;
}else if(rangle > 1 && rangle < 2) // upper half
positive
{
vangle = 2-rangle;
279
}else if(rangle < 0 && rangle > -1) // lower half

negative
{
vangle = -rangle;
}else if(rangle < -1 && rangle > -2) // upper half
negative
{
vangle = -rangle;
}
return vangle;
}

}
// Plot particle
function plotParticle(p) {
var x = p.r.x;
var y = p.r.y;
var D = p.D;
var xx = transX(x);
var yy = transY(y);
var DD = transX(D) - transX(0);
ctx.strokeStyle = p.c;
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.arc(xx, yy, 0.5 * DD, 0, 2 * Math.PI);
ctx.stroke();
/*
ctx.font = "10px Times New Roman"
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.textBaseline="middle";
ctx.fillText(p.i, xx, yy);
*/
280
D. Skrip program forcea.js

// Class of Force
function Force() {
//spring force is physically correct already

// Define Spring force
Force.spring = function(p1, p2) {
var m1 = p1.m;
var m2 = p2.m;
var r1 = p1.r;
var r2 = p2.r;
var r10 = p1.r0;
var r20 = p2.r0;
var r = Vect3.sub(Vect3.sub(r1, r10),Vect3.sub(r2,
r20));
var u = Vect3.uni(r);
var f = Vect3.mul(-kS,r);
return f;
}
//should be parallel to locomotor movement... 1D

assumption totally wrong
//define drag force
Force.drag = function(p) {
var v = p.v;
var D = p.D;
var A = Math.PI*(D*0.5)*(D*0.5);
v2 = new Vect3 (-v.x*v.x,v.y*v.y,0);
var f = new Vect3(-0.5*kD*rho*A*Uy*Uy, -
0.5*kD*rho*A*Ux*Ux, 0);
return f;
}
//define lift force

Force.lift = function(p)
{
var v = p.v;
var D = p.D;
var A = Math.PI*(D*0.5)*(D*0.5);
var f = new Vect3(0.5*kL*rho*A*Uy*Uy,
0.5*kL*rho*A*Ux*Ux, 0);
281
return f;
}
E. Skrip program graina.js

// Class of Grain
function Grain() {
this.i = arguments[0];
this.m = arguments[1];
this.D = arguments[2];
this.q = arguments[3];
this.c = arguments[4];
this.r = arguments[5];
this.v = arguments[6];
} else if(arguments.length == 1) {
this.i = arguments[0].i;
this.m = arguments[0].m;
this.D = arguments[0].D;
this.q = arguments[0].q;
this.c = arguments[0].c;
this.r = arguments[0].r;
this.v = arguments[0].v;
//still don't get this, probably the input is
an array or
//function or class?
} else {
this.i = 0;
this.m = 1.0;
this.D = 1.0;
this.q = 1.0;
this.c = "#000";
this.r = new Vect3;
this.r0 = new Vect3;
this.v = new Vect3;
}
this.strval = function() { //this is to return the
components
var str = "("
str += this.i + ", ";
str += this.m + ", ";
str += this.D + ", ";
str += this.q + ", ";
str += this.c + ", ";
str += this.r.strval() + ", ";
str += this.v.strval() + ")";
282
return str;
}
}
F. Skrip program layouta.js

function layout() {
// Create left division
var ldiv = document.createElement("div");
document.body.appendChild(ldiv);
ldiv.style.border = "0px black solid";
ldiv.style.height = "402px";
ldiv.style.float = "left";
ldiv.style.width = "252px";
// Create right division

var rdiv = document.createElement("div");
document.body.appendChild(rdiv);
rdiv.style.border = "0px black solid";
rdiv.style.height = "402px";
rdiv.style.float = "left";
// Create text area for showing time

var ta1 = document.createElement("textarea");
ldiv.appendChild(ta1);
ta1.style.color = "black";
ta1.style.background = "white";
ta1.rows = "2";
ta1.cols = "32";
ta1.style.overflowY = "scroll";
ta1.style.display = "block";
ta1.id = "hout";
//text area for input

var ta2 = document.createElement("textarea");
ldiv.appendChild(ta2);
ta2.id = "ta2";
ta2.style.color = "black";
ta2.style.background = "white";
ta2.rows = "9";
ta2.cols = "32";
ta2.style.overflowY = "scroll";
ta2.style.display = "block";
ta2.value = defaultParams();
// Create canvas for drawing

var c = document.createElement("canvas");
rdiv.appendChild(c);
c.id = "canvas";
c.style.border = "1px solid #999";
c.style.background = "white";
283
c.width = "800";
c.height = "400";
//c.style.float = "left";
// Prepare canvas
setCanvasCoordinates("canvas");
setWorldCoordinates(-8, -8, 8, 8);
// Create start button

var b1 = document.createElement("button");
ldiv.appendChild(b1);
b1.innerHTML = "Start";
if(b1.innerHTML == "Start") {
b1.innerHTML = "Stop";
timer1 = setInterval(run, 1); //run the
function 'run'
} else {
}
}
// Create default Button

ldiv.appendChild(b2);
b2.innerHTML = "Default";
var ta = document.getElementById("ta2");
}
}
// Generate default parameters

var params = "";
params += "U\t 50\n";
params += "FREQ\t 30.0\n";
params += "KS\t 5E4\n";
params += "KDRAG\t 0.47\n";
params += "RHO\t 50\n";
params += "KL\t 0.50\n";
return params;
}
// Get parameters from textarea nText

function getParams()
{
var ta = document.getElementById("ta2");
284
var lines = ta.value.split("\n"); //idk what these're for

/*if (lines[Nlines - 1].length == 0) {
Nlines--;
}*/
//you can change the parameters with these in textarea
//var Ncols = cols.length;
//still don't get what above is for
if(cols[0] == "U\t")
{
magU = parseFloat(cols[1]);
}
if(cols[0] == "FREQ\t") {
freq = parseFloat(cols[1]); //convert string
to float
}
if(cols[0] == "AMPL\t") {
Amp = parseFloat(cols[1]);
}
if(cols[0] == "KS\t") {
kS = parseFloat(cols[1]);
}
if(cols[0] == "KDRAG\t") {
kD = parseFloat(cols[1]);
}
if(cols[0] == "RHO\t") {
rho = parseFloat(cols[1]);
}
if(cols[0] == "KL\t")
{
kL = parseFloat(cols[1]);
}
}
G. Skrip program mdynamicsa.js

// Define some global constants
dt = 0.01;
t = 0;
// Class of Mdynamics
function Mdynamics() {
//this function can hold many things, depends on
how many
//arguments it can have, it's just a different way
compared
285
//to grain.js
}
// Set time step and reset time

Mdynamics.setdt = function(dtt) {
dt = dtt;
t = 0;
}
// Perform Euler integration

Mdynamics.Euler = function(SF, p) {
var m = p.m;
var r = p.r;
var v = p.v;
var a = Vect3.div(SF, m); //get acceleration
v = Vect3.add(v, Vect3.mul(a, dt));//add it with
current speed
r = Vect3.add(r, Vect3.mul(v, dt));
p.r = r;//make it current grain position
p.v = v;//make it current grain velocity
}
// Increase time
Mdynamics.inct = function() {
t += dt;
}
H. Skrip program vect3.js
// Class of Vect3
function Vect3() {
// Define some constructor types
this.x = arguments[0];
this.y = arguments[1];
this.z = arguments[2];
} else if(arguments.length == 1){
this.x = arguments[0].x;
this.y = arguments[0].y;
this.z = arguments[0].z;
} else {
this.x = 0;
this.y = 0;
this.z = 0;
}
this.strval = function() { //to return the vector
components
286
var str = "(";

str += this.x + ", ";
str += this.y + ", ";
str += this.z + ")";
//document.write(str);
return str;
}
}
// Define addition of Vect3

Vect3.add = function(r1, r2) {
var r = new Vect3;
r.x = r1.x + r2.x;
r.y = r1.y + r2.y;
r.z = r1.z + r2.z;
return r;
}
// Define substraction of Vect3

Vect3.sub = function(r1, r2) {
var r = new Vect3;
r.x = r1.x - r2.x;
r.y = r1.y - r2.y;
r.z = r1.z - r2.z;
return r;
}
// Define dot product of Vect3

Vect3.dot = function(r1, r2) {
var l = r1.x * r2.x;
l += r1.y * r2.y;
l += r1.z * r2.z;
return l;
}
// Define cross product of Vect3

Vect3.crs = function(r1, r2) {
var r = new Vect3;
r.x = r1.y * r2.z - r1.z * r2.y;
r.y = r1.z * r2.x - r1.x * r2.z;
r.z = r1.x * r2.y - r1.y * r2.x;
return r;
}
// Define multiplication with scalar

Vect3.mul = function(a, b) {
var r = new Vect3;
if(a instanceof Vect3) {
r.x = a.x * b;
r.y = a.y * b;
r.z = a.z * b;
287
} else if(b instanceof Vect3) {

r.x = a * b.x;
r.y = a * b.y;
r.z = a * b.z;
}
return r;
}
// Define division with scalar

Vect3.div = function(a, b) {
var r = new Vect3;
r.x = a.x / b;
r.y = a.y / b;
r.z = a.z / b;
return r;
}
// Define length of Vect3

Vect3.len = function(r) {
var l2 = Vect3.dot(r, r);
var l = Math.sqrt(l2);
return l;
}
// Define unit vector

Vect3.uni = function(a) {
var l = Vect3.len(a);
var r = Vect3.div(a, l);
return r;
}
// Define negative of a vector

Vect3.neg = function(a) {
var r = Vect3;
r.x = -a.x;
r.y = -a.y;
r.z = -a.z;
return r;
}
288
Lampiran A: Berkas JavaScript
A.1 vect3.js
/*
vect3.js
Library of Vect3 class in JavaScript
20170214
Create this library with following functions defined for
Vect3 class
add() add two Vect3,
sub() subtract two Vect3,
dot() dot product of two Vect3,
crs() cross product of two Vect3,
mul() multiplication of Vect3 with scalar,
div() division of Vect3 with scalar,
len() length of a Vect3,
uni() unit vector of a Vect3,
neg() negative of a Vect3.
All are tested and works.
*/
// Class of Vect3
function Vect3() {
// Define some constructor types
this.z = arguments[2];
} else if(arguments.length == 1){
this.x = arguments[0].x;
this.y = arguments[0].y;
this.z = arguments[0].z;
} else {
this.x = 0;
this.y = 0;
this.z = 0;
}
this.strval = function() {
var str = "(";
str += this.x + ", ";
str += this.y + ", ";
str += this.z + ")";
return str;
}
}
// Define addition of Vect3

Vect3.add = function(r1, r2) {
var r = new Vect3;
r.x = r1.x + r2.x;
r.y = r1.y + r2.y;
289
Komputasi Fisika 3: Lampiran A: Berkas JavaScript
r.z = r1.z + r2.z;

return r;
}
// Define substraction of Vect3

Vect3.sub = function(r1, r2) {
var r = new Vect3;
r.x = r1.x - r2.x;
r.y = r1.y - r2.y;
r.z = r1.z - r2.z;
return r;
}
// Define dot product of Vect3

Vect3.dot = function(r1, r2) {
var l = r1.x * r2.x;
l += r1.y * r2.y;
l += r1.z * r2.z;
return l;
}
// Define cross product of Vect3

Vect3.crs = function(r1, r2) {
var r = new Vect3;
r.x = r1.y * r2.z - r1.z * r2.y;
r.y = r1.z * r2.x - r1.x * r2.z;
r.z = r1.x * r2.y - r1.y * r2.x;
return r;
}
// Define multiplication with scalar

Vect3.mul = function(a, b) {
var r = new Vect3;
if(a instanceof Vect3) {
r.x = a.x * b;
r.y = a.y * b;
r.z = a.z * b;
} else if(b instanceof Vect3) {
r.x = a * b.x;
r.y = a * b.y;
r.z = a * b.z;
}
return r;
}
// Define division with scalar

Vect3.div = function(a, b) {
var r = new Vect3;
r.x = a.x / b;
r.y = a.y / b;
r.z = a.z / b;
return r;
}
// Define length of Vect3

Vect3.len = function(r) {
var l2 = Vect3.dot(r, r);
var l = Math.sqrt(l2);
290
return l;
}
// Define unit vector

Vect3.uni = function(a) {
var l = Vect3.len(a);
var r = Vect3.div(a, l);
return r;
}
// Define negative of a vector

Vect3.neg = function(a) {
var r = Vect3;
r.x = -a.x;
r.y = -a.y;
r.z = -a.z;
return r;
}
A.2 grain.js
/*
grain.js
Library of grain as granular particle
20170214
Create this library consists of only Grain class.
20170216
Add field for particle ID with type of integer.
20170228
Add field n for name and correct number of fields.
*/
// Class of Grain
function Grain() {
this.i = arguments[0];
this.n = arguments[1];
this.m = arguments[2];
this.D = arguments[3];
this.q = arguments[4];
this.c = arguments[5];
this.r = arguments[6];
this.v = arguments[7];
} else if(arguments.length == 1) {
this.i = arguments[0].i;
this.n = arguments[0].n;
this.m = arguments[0].m;
this.D = arguments[0].D;
this.q = arguments[0].q;
this.c = arguments[0].c;
this.r = arguments[0].r;
this.v = arguments[0].v;
} else {
this.i = 0;
291
this.n = "";
this.m = 1.0;
this.D = 1.0;
this.q = 1.0;
this.c = "#000";
this.r = new Vect3;
this.v = new Vect3;
}
this.strval = function() {
var str = "("
str += this.i + ", ";
str += this.m + ", ";
str += this.D + ", ";
str += this.q + ", ";
str += this.c + ", ";
str += this.r.strval() + ", ";
str += this.v.strval() + ")";
return str;
}
}
A.3 force.js
/*
force.js
Library of some types of physical force.
20170214
Create this library and define some constants,
e.g. kG, kR, kV, kE and some functions
grav() gravitation force,
norm() normal force,
coul() Coulomb force.
These two are tested for value only and not yet in
simulation.
20170215
Test the grav() and norm() in a simulation. They worked.
20170417
Define magnetic force and test it.
*/
// Define some constants

kG = 5E0;
kR = 1E5;
kV = 1.0;
kE = 1.0;
kV2 = 40.0;
// Class of Force
function Force() {
// Define gravitation force

Force.grav = function(p1, p2) {
292
var m1 = p1.m;
var m2 = p2.m;
var r1 = p1.r;
var r2 = p2.r;
var r = Vect3.sub(r1, r2);
var f = Vect3.mul(-kG * m1 * m2 / Vect3.dot(r, r), u);
return f;
}
// Define normal force

Force.norm = function(p1, p2) {
var R1 = 0.5 * p1.D;
var R2 = 0.5 * p2.D;
var r1 = p1.r;
var r2 = p2.r;
var v1 = p1.v;
var v2 = p2.v;
var v = Vect3.sub(v1, v2);
var xi = Math.max(0, R1 + R2 - Vect3.len(r));
var xidot = Vect3.len(v);
var f = Vect3.mul(kR * xi - kV * xidot, u);
if(xi == 0) {
f = new Vect3;
}
return f;
}
// Define Coulomb force

Force.coul = function(p1, p2) {
var q1 = p1.q;
var q2 = p2.q;
var r1 = p1.r;
var r2 = p2.r;
var f = Vect3.mul(kE * q1 * q2 / Vect3.dot(r, r), u);
return f;
}
// Define viscous force

Force.visc = function(p) {
var v = p.v;
var f = Vect3.mul(-kV2, v);
return f;
}
// Define magnetic force

Force.magn = function(p, B) {
var q = p.q;
var v = p.v;
var f = Vect3.mul(q, Vect3.crs(v, B));
return f;
}
293
A.4 mdynamics.js
/*
mdynamics.js
Library of simple molecular dynamics
20170214
Create this library.
20170215
There is bug in using Timer object, where it was twice
called, then it could not be stopped. A condition must
be set to avoid creating another object incidentally.
*/
// Define some global constants

var dt = 0.01;
var t = 0;
// Class of Mdynamics
function Mdynamics() {
// Set time step and reset time

Mdynamics.setdt = function(dtt) {
dt = dtt;
t = 0;
}
// Perform Euler integration

Mdynamics.Euler = function(SF, p) {
var m = p.m;
var r = p.r;
var v = p.v;
var a = Vect3.div(SF, m);
r = Vect3.add(r, Vect3.mul(v, dt));
v = Vect3.add(v, Vect3.mul(a, dt));
p.r = r;
p.v = v;
}
// Increase time
Mdynamics.inct = function() {
t += dt;
}
A.5 debug.js
/*
debug.js
Parameters for debuggin process
20170417
294
Create this file for the first time, which includes

CONSOLE
*/
// Define debugging parameter for showing in console

var CONSOLE = false;
A.6 changel.js
/*
changel.js
Library of functions for changing element property
20170417
Create this library with following functions:
changeButtonCaption()
clearTextarea()
clearCanvas(id)
*/
// Change button caption

function changeButtonCaption(id, caption) {
var b = document.getElementById(id);
b.innerHTML = caption;
}
// Clear textarea content

function clearTextarea(id) {
var ta = document.getElementById(id);
ta.value = "";
}
// Clear canvas
function clearCanvas(id) {
var ca = document.getElementById(id);
var bgc = ca.backgroundColor;
var width = ca.width;
var height = ca.height;
var ct = ca.getContext("2d");
ct.clearRect(0, 0, width, height);
}
A.7 draw.js
/*
draw2d.js
Set drawing environment in 2d using canvas object
20170117
Create drawing environment for draw demonstration in
a lecture, with functions
setWorldCoordinates()
295
setCanvasCoordinates()
transX()
transY()
clearCurrentFigure()
20170215
Integrate and adjust previous work to Grains.
20160216
Add text for particle identification with center for
horizontal alignment and middle for vertical alignment.
20170228
Change drawing text from id (i) to name (n).
*/

var xwmin = 0;
var ywmin = 0;
var xwmax = 0;
var ywmax = 0;

var xcmin = 0;
var ycmin = 0;
var xcmax = 0;
var ycmax = 0;


xwmin = xmin;
ywmin = ymin;
xwmax = xmax;
ywmax = ymax;
}

xcmin = 0;
ycmin = c.height;
xcmax = c.width;
ycmax = 0;
}
// Transform x
xx += xcmin;
return X;
}
// Transform y
296
yy += ycmin;
return Y;
}

}
// Plot particle
function plotParticle(p) {
var x = p.r.x;
var y = p.r.y;
var D = p.D;
var xx = transX(x);
var yy = transY(y);
var DD = transX(D) - transX(0);
ctx.strokeStyle = p.c;
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.arc(xx, yy, 0.5 * DD, 0, 2 * Math.PI);
ctx.stroke();
ctx.font = "16px Times New Roman"

ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.textBaseline="middle";
ctx.fillText(p.n, xx, yy);
ctx.stroke;
}
A.8 timer.js
/*
timer.js
Template for periodic event triggering
20170417
Start creating this template for reference in creating
simulation using JavaScript.
20170418
Problem by -Math.log10(dt) if dt is not 1E-x and it is
fixed using -Math.floor(Math.log10(dt)).
20170426
Modify previous version for drawing only.
*/
297
// Define function to activate and deactivate timer

function toggle() {
draw();
}
// Define global parameters (if necessary)
// Define function for drawing

function draw() {
// Put your functions below this line
// Read parameters and store them in global parameters

var Nx = values[0];
var Ny = values[1];
var xmin = values[2];
var xmax = values[3];
var ymin = values[4];
var ymax = values[5];
var tmin = values[6];
var tmax = values[7];
var tminc = values[8];
var tmaxc = values[9];
data = values[10];
// Verbose for debugging

if(CONSOLE) {
console.clear();
console.log("gridx: " + Nx);
console.log("gridy: " + Ny);
console.log("xmin: " + xmin);
console.log("xmax: " + xmax);
console.log("ymin: " + ymin);
console.log("ymax: " + ymax);
console.log("tmin: " + tmin);
console.log("tmax: " + tmax);
console.log("tminc: "
+ tminc.x + " "+ tminc.y + " "+ tminc.z);
console.log("tminc: "
+ tmaxc.x + " "+ tmaxc.y + " "+ tmaxc.z);
}
//
}
A.9 layout.js
/*
layout.js
Template for design layout of HTML containing some elements
for simulation in Physics using JavaScript
20170417
298
Start creating this template for toggle button and canvas.

20170418
Finish for charged particle motion in perpendicular homogenous
magnetic field.
20170426
Modify previous version for displaying temperature contour.
*/
// Define graphic-out and text-out elements

var nDraw = "gout";
var nText = "tout";
// Define layout
function layout() {
// Create some text
var t1 = document.createElement("div");
t1.style.padding = "5px";
t1.innerHTML = "Parameter(s)";
// Create texarea for data and fill it with initial data

ta.id = nText;
ta.style.height = "250px";
ta.style.padding = "5px";
// Create toogle button according to declaration timer.js

b1.innerHTML = "Draw";
b1.id = "bDraw";
b1.style.width = "62px";
toggle();
}

b2.innerHTML = "Clear";
b2.id = "bClear";
clearCanvas(nDraw);
clearTextarea(nText);
sState = 0;
console.clear();
}

b3.innerHTML = "Params";
b3.id = "bParams";
299
var ta = document.getElementById(nText);
}

b4.innerHTML = "About";
b4.id = "bAbout";
var s = "";
s += "Example for drawing temperature distribution\n";
s += "Version 1.1 (20170426)\n"
s += "Sparisoma Viridi | dudung@gmail.com";
alert(s);
}
var d1 = document.createElement("div");
//d1.style.border = "1px solid #999";
d1.style.width = "248px";
d1.appendChild(t1);
d1.appendChild(ta);
d1.appendChild(b1);
d1.appendChild(b2);
d1.appendChild(b3);
d1.appendChild(b4);
d1.style.float = "left";
document.body.appendChild(d1);
var d2 = document.createElement("div");
//d2.style.border = "1px solid #999";
d2.style.width = "565px";
document.body.appendChild(d2);
d2.appendChild(d1);
// Create canvas
var c1 = document.createElement("canvas");
c1.style.border = "1px solid #999";
c1.id = nDraw;
c1.width = "311";
c1.height = "311";
c1.style.width = c1.width + "px";
c1.style.height = c1.height + "px";
c1.backgroundColor = "white";
c1.style.float = "right";
d2.appendChild(c1);
// Prepare canvas
setCanvasCoordinates("gout");
setWorldCoordinates(-1.5, -1.5, 1.5, 1.5);
}
// Generate default parameters

var params = "";
params += "GRIDXY 4 4\n";
params += "XRANGE 0.0 1.0\n";
params += "YRANGE 0.0 1.0\n";
300
params += "TRANGE 0.0 100.0\n";

params += "TMINC 0 0 255\n";
params += "TMAXC 255 0 0\n";
params += "X Y T\n";
params += "0.00 0.00 0.0\n";
params += "0.00 0.25 0.0\n";
params += "0.00 0.50 0.0\n";
params += "0.00 0.75 0.0\n";
params += "0.00 1.00 0.0\n";
params += "0.25 0.00 50.0\n";
params += "0.25 0.25 20.0\n";
params += "0.25 0.50 25.0\n";
params += "0.25 0.75 30.0\n";
params += "0.25 1.00 40.0\n";
params += "0.50 0.00 50.0\n";
params += "0.50 0.25 50.0\n";
params += "0.50 0.50 47.5\n";
params += "0.50 0.75 45.0\n";
params += "0.50 1.00 40.0\n";
params += "0.75 0.00 50.0\n";
params += "0.75 0.25 80.0\n";
params += "0.75 0.50 75.0\n";
params += "0.75 0.75 70.0\n";
params += "0.75 1.00 40.0\n";
params += "1.00 0.00 100.0\n";
params += "1.00 0.25 100.0\n";
params += "1.00 0.50 100.0\n";
params += "1.00 0.75 100.0\n";
params += "1.00 1.00 100.0";
return params;
}
// Get parameters from textarea nText

function getParams()
{
var ta = document.getElementById(nText);
Nlines--;
}
if(CONSOLE) {
console.log("Nlines: " + Nlines);
}
var Nx, Ny;
var xmin, xmax, ymin, ymax, tmin, tmax;
var tminc, tmaxc;
var Dline = 6;
var NxyT = Nlines - Dline;
var xyT = new Array(NxyT);
var ixyT = 0;
if(cols[0] == "GRIDXY") {
Nx = parseFloat(cols[1]);
Ny = parseFloat(cols[2]);
}
301
if(cols[0] == "XRANGE") {
xmin = parseFloat(cols[1]);
xmax = parseFloat(cols[2]);
}
if(cols[0] == "YRANGE") {
ymin = parseFloat(cols[1]);
ymax = parseFloat(cols[2]);
}
if(cols[0] == "TRANGE") {
tmin = parseFloat(cols[1]);
tmax = parseFloat(cols[2]);
}
if(cols[0] == "TMINC") {
var r = parseFloat(cols[1]);
var g = parseFloat(cols[2]);
var b = parseFloat(cols[3]);
tminc = new Vect3(r, g, b);
}
if(cols[0] == "TMAXC") {
tmaxc = new Vect3(r, g, b);
}
// Read temperature spatial distribution

if(l >= Dline) {
xyT[ixyT] = new Vect3(r, g, b);
ixyT++;
}
}
var Ndata = 11;
var values = new Array(Ndata);
values[0] = Nx;
values[1] = Ny;
values[2] = xmin;
values[3] = xmax;
values[4] = ymin;
values[5] = ymax;
values[6] = tmin;
values[7] = tmax;
values[8] = new Vect3(tminc);
values[9] = new Vect3(tmaxc);
values[10] = xyT;
return values;
}
A.10 xychart.js
/*
xychart.js
302
20170313
Create this library only with xmin..ymax and
XMIN..YMAX definitions.
20170318
Continue creating after recovery from sick and a bunch
of activities.
Tested for travelling wave and ok.
*/
// Class of XYChart
function XYChart() {
this.pointSize = 1;
this.lineWidth = 1;
// Fonts properties
// Axis
this.ticsWidth = 5;
this.nTicsX = 10;
this.nTicsY = 6;
this.xLabel = "x";
this.yLabel = "y";
this.digitX = 1;
this.digitY = 1;

this.xmin = -1;
this.ymin = -1;
this.xmax = 1;
this.ymax = 1;
this.XMIN = 0;
this.YMIN = 0;
this.XMAX = 1;
this.YMAX = 1;
// Number of data
this.N = 0;
// Raw data
303
} else {
}
} else {
this.datax = [];
this.dataY = [];
}
// Plotting data
this.dataX = [];
this.dataY = [];

this.xmin = xmin;
this.ymin = ymin;
this.xmax = xmax;
this.ymax = ymax;
}

X += this.XMIN;
return X;
}

Y += this.YMIN;
return Y;
}
// Update data
this.datax = datax;
this.datay = datay;
} else {
}
}
// Clear canvas
}
304
this.plotTo = function(canvas) {

}
// Plot axis
ctx.beginPath();
ctx.moveTo(XO, YO);
ctx.moveTo(XO, YO);
ctx.stroke();

}
}
ctx.beginPath();
}
}
ctx.stroke();
// Draw grid
ctx.beginPath();
305
}
}
ctx.stroke();

}
}

ctx.font = font;

ctx.beginPath();
ctx.stroke();
}
ctx.beginPath();
if(i == 0) {
ctx.moveTo(X, Y);
} else {
ctx.lineTo(X, Y);
306
}
}
ctx.stroke();
}
}
}
A.11 matrix.js
/*
matrix.js
Matrix and related operations
Sparisoma Viridi | dudung@fi.itb.ac.id
20170208
Start creating this library: strval(), add().
*/
// Add two matrix

function add(M, N) {
var isMArray = (M instanceof Array) ? true : false;
var isNArray = (N instanceof Array) ? true : false;
if(!isMArray | !isNArray) {
return "Error: One of the arguments is not matrix";
}
var ROWSM = M.length;

var ROWSN = N.length;
var COLSM = M[0].length;
var COLSN = N[0].length;
if(ROWSM != ROWSN) {
return "Error: number of rows are not the same";
}
if(COLSM != COLSN) {
return "Error: number of columns are not the same";
}
var val = M;
for(var r = 0; r < ROWSM; r++) {
for(var c = 0; c < COLSM; c++) {
val[r][c] = M[r][c] + N[r][c];
}
}
return val;
}
// Display matrix in pre formatted environment

function strval(M) {
if(M instanceof Array) {
str = "<pre>"
var ROWS = M.length;
var COLS = M[0].length;
307
for(var r = 0; r < ROWS; r++) {

for(var c = 0; c < COLS; c++) {
str += M[r][c];
if(c < COLS - 1) {
str += " ";
}
}
if(r < COLS) {
str += "<br>";
}
}
str += "</pre>";
} else {
str = M;
}
return str;
}
// Define matrix
/*
var x = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
[13, 14, 15, 16],
];
*/
A.12 parabol.js
var xwmin = 0;
var ywmin = 0;
var xwmax = 0;
var ywmax = 0;

var xcmin = 0;
var ycmin = 0;
var xcmax = 0;
var ycmax = 0;
// Define global simulation parameters

var dt = 0;
var tbeg = 0;
var tend = 0;
var tcur = 0;
var xcur = 0;
var ycur = 0;
var vxcur = 0;
var vycur = 0;
var gacc = 0;
var firstTime = true;

308
var figureBackground = "#ddd";

xwmin = xmin;
ywmin = ymin;
xwmax = xmax;
ywmax = ymax;
}

xcmin = 0;
ycmin = c.height;
xcmax = c.width;
ycmax = 0;
}
// Define time object

var timer1;
// Transform x
xx += xcmin;
return X;
}
// Transform y
yy += ycmin;
return Y;
}
// Toggle button for simulation

function toggleButton() {
if(event.target.innerHTML == "Stop") {
// Stop simulation
event.target.innerHTML = "Run";
} else {
// Run simulation
event.target.innerHTML = "Stop";
timer1 = setInterval(simulate, 100);
}
}

309
}
// Reset simulation
function resetSimulation() {
firstTime = true;
document.getElementById("tcur").value = tbeg;
document.getElementById("run").disabled = false;
}
// Do simulation
// Perform simulation
if(firstTime) {
firstTime = false;
// Get all parameters

gacc = parseFloat(document.getElementById("gacc").value);
var x0 = parseFloat(document.getElementById("x0").value);
var y0 = parseFloat(document.getElementById("y0").value);
var vx0 = parseFloat(document.getElementById("vx0").value);
var vy0 = parseFloat(document.getElementById("vy0").value);
tbeg = parseFloat(document.getElementById("tbeg").value);
tend = parseFloat(document.getElementById("tend").value);
dt = parseFloat(document.getElementById("dt").value);
// Set coordinates
var xmin = parseFloat(document.getElementById("xmin").value);
var ymin = parseFloat(document.getElementById("ymin").value);
var xmax = parseFloat(document.getElementById("xmax").value);
var ymax = parseFloat(document.getElementById("ymax").value);
setWorldCoordinates(xmin, ymin, xmax, ymax);
setCanvasCoordinates("fig1");
// Set initial condition

xcur = x0;
ycur = y0;
vxcur = vx0;
vycur = vy0
tcur = tbeg;
} else {
// Euler integration
xcur = xcur + vxcur * dt;
vxcur = vxcur;
vycur = vycur + gacc * dt;

ycur = ycur + vycur * dt;
}
// Draw results
var xx = transX(xcur);
var yy = transY(ycur);
ctx.beginPath();
ctx.arc(xx, yy, 2, 0, 2 * Math.PI);
310
ctx.stroke();
document.getElementById("tcur").value = tcur;
// Increase time
tcur += dt;
if(tcur > tend) {
document.getElementById("run").innerHTML = "Run";
document.getElementById("run").disabled = true;
}
}
A.13 sirkular.js
var xwmin = 0;
var ywmin = 0;
var xwmax = 0;
var ywmax = 0;

var xcmin = 0;
var ycmin = 0;
var xcmax = 0;
var ycmax = 0;
// Define global simulation parameters

var dt = 0;
var tbeg = 0;
var tend = 0;
var tcur = 0;
var xcur = 0;
var ycur = 0;
var vxcur = 0;
var vycur = 0;
var Bz = 0;
var q = 0;
var m = 0;
var firstTime = true;

var figureBackground = "#ddd";

xwmin = xmin;
ywmin = ymin;
xwmax = xmax;
ywmax = ymax;
311

xcmin = 0;
ycmin = c.height;
xcmax = c.width;
ycmax = 0;
}
// Define time object

var timer1;
// Transform x
xx += xcmin;
return X;
}
// Transform y
yy += ycmin;
return Y;
}
// Toggle button for simulation

function toggleButton() {
if(event.target.innerHTML == "Stop") {
// Stop simulation
event.target.innerHTML = "Run";
} else {
// Run simulation
event.target.innerHTML = "Stop";
timer1 = setInterval(simulate, 100);
}
}

}
// Reset simulation
function resetSimulation() {
firstTime = true;
document.getElementById("tcur").value = tbeg;
document.getElementById("run").disabled = false;
312
// Do simulation
// Perform simulation
if(firstTime) {
firstTime = false;
// Get all parameters

m = parseFloat(document.getElementById("mass").value);
Bz = parseFloat(document.getElementById("Bz").value);
q = parseFloat(document.getElementById("charge").value);
var x0 = parseFloat(document.getElementById("x0").value);
var y0 = parseFloat(document.getElementById("y0").value);
var vx0 = parseFloat(document.getElementById("vx0").value);
var vy0 = parseFloat(document.getElementById("vy0").value);
tbeg = parseFloat(document.getElementById("tbeg").value);
tend = parseFloat(document.getElementById("tend").value);
dt = parseFloat(document.getElementById("dt").value);
// Set coordinates
var xmin = parseFloat(document.getElementById("xmin").value);
var ymin = parseFloat(document.getElementById("ymin").value);
var xmax = parseFloat(document.getElementById("xmax").value);
var ymax = parseFloat(document.getElementById("ymax").value);
setWorldCoordinates(xmin, ymin, xmax, ymax);
setCanvasCoordinates("fig1");
// Set initial condition

xcur = x0;
ycur = y0;
vxcur = vx0;
vycur = vy0
tcur = tbeg;
} else {
// Newton second law of motion
var Fx = q * vycur * Bz;
var ax = Fx / m;
var Fy = -q * vxcur * Bz;
var ay = Fy / m;
// Euler integration
vxcur = vxcur + ax * dt;
xcur = xcur + vxcur * dt;
vycur = vycur + ay * dt;

ycur = ycur + vycur * dt;
}
// Draw results
var xx = transX(xcur);
var yy = transY(ycur);
ctx.beginPath();
ctx.arc(xx, yy, 2, 0, 2 * Math.PI);
ctx.stroke();
313
document.getElementById("tcur").value = tcur;
// Increase time
tcur += dt;
if(tcur > tend) {
document.getElementById("run").innerHTML = "Run";
document.getElementById("run").disabled = true;
}
}
A.14 ode.js
/*
ode.js
Ordinary Differential Equation
20170213
Create this JS library and there is problem with MathJax.
20170214
Found that MathJax should be called to typeset the page.
*/
// Define coefficients of a power series

c = [2, -4.6, 1, 1, 1];
function differentiatePowerSeries() {
var c = document.getElementById("coeff").value.split(",");
var N = c.length;
var str = "";
for(var n = 0; n < N; n++) {
var labelf = "";
if(n == 0) {
labelf = "f(x) = ";
} else if(n == 1) {
labelf = "\frac{df(x)}{dx} = ";
} else {
labelf = "\frac{df^" + n + "(x)}{dx^" + n + "} = ";
}
str += strvalPowerSeries(c, labelf);
c = diff(c);
}

MathJax.Hub.Queue(["Typeset",MathJax.Hub, hout]);
}
// Create string represent a power series

function strvalPowerSeries(c, eqn) {
var N = c.length;
314
var str = "$$" + eqn;
for(var i = 0; i < N; i++) {
/*
if(c[i] != 0) {
if(i > 0) {
if(Math.abs(c[i]) != 1) {
str += Math.abs(c[i]);
}
} else {
str += c[i];
}
}
if(i == 1 && c[i] != 0) {

str += "x";
} else if(i > 1 && c[i] != 0) {
str += "x^" + i;
}
var op = "";
if(i < N - 1) {
if(c[i + 1] < 0) {
op = " - ";
} else if(c[i + 1] > 0) {
op = "+";
}
str += op;
}
*/
str += c[i] + "x^" + i + " + ";

}
str += "$$";
return str;
}
/*
var op = new Array(N);
var val = new Array(N);
var xx = new Array(N);
op[i] = "";
val[i] = "";
xx[i] = "";
if(Math.abs[c[i]] != 1) {
val[i] = Math.abs(c[i]);
}
if(c[i] < 0) {
op[i] = " - ";
} else if(c[i] > 0) {
op[i] = " + ";
} else if(c[i] == 0) {
op[i] == "";
315
val[i] == "";
xx[i] == "";
}
if(i == 0 && c[i] > 0) {

op[i] = "";
}
if(i == 0) {
xx[i] = "";
} else if(i == 1) {
xx[i] = "x";
} else {
xx[i] = "x^" + i;
}
*/
// Convert content of 1-d array into a string

function strval1xN(x) {
var N = x.length;
var str = "";
for(var i = 0; i < N; i++) {
str += x[i];
if(i < N - 1) {
str += " ";
}
}
return str;
}
// Calculate differential of power series

function diff(c) {
var N = c.length;
var d = new Array(N - 1);
for(var i = 0; i < N - 1; i++) {
d[i] = (i + 1) * c[i + 1];
}
return d;
}
// Calculate product of integer from i to f

function prod(i, f) {
var N = f - i + 1;
var x = 1;
for(var j = i; j < i + N; j++) {
x *= j;
}
return x;
}
A.15 hello.js
// hello0.js
/*
document.write("Hello, world!");
*/
316
// hello1.js
/*
var par = document.createElement("p");
par.innerHTML = "Hello world!";
document.body.appendChild(par);
*/
// hello2.js
/*
par.innerHTML = "<i>Hello</i>, <b>world</b>!";
*/
// hello3.js
/*
par.innerHTML = "<font color='red'>Hello</font>, \
<font color='blue'>world</font>!";
*/
// hello4.js
/*
par.innerHTML = "Hel<br />lo, <br />world<br />!";
*/
// hello5.js
/*
var par1 = document.createElement("p");
par1.id = "par1";
document.body.appendChild(par1);
var par2 = document.getElementById("par1");

par2.innerHTML = "This is object with id 'par1' accessed \
through par2 variable<br /><br />Hello again!";
*/
// hello6.js
/*
var par1 = document.createElement("p");
par1.id = "par0";
document.body.appendChild(par1);
par1.style.borderTop = "1px solid black";

par1.style.borderRight = "2px dotted blue";
par1.style.borderBottom = "3px dashed red";
par1.style.borderLeft = "10px solid green";
par1.innerHTML = "Well, hello again, world!";
var par2 = document.getElementById("par0");

var content = par2.innerHTML;
par2.innerHTML = content + "<br /> <br /> New line \
of content";
*/
317
// hello7.js
/*
par.id = "par1";
par.style.border = "1px solid red";
par.style.width = "100px";

par.id = "par2";
par.style.border = "1px solid green";

par.id = "par3";
par.style.border = "1px solid blue";
var pRed = document.getElementById("par1");

var pGreen = document.getElementById("par2");
var pBlue = document.getElementById("par3");
pRed.innerHTML = "Hello, Red!";

pGreen.innerHTML = "Hello, Green!";
pBlue.innerHTML = "Hello, Blue!";
pRed.style.backgroundColor = "#fdd";
pGreen.style.backgroundColor = "#dfd";
pBlue.style.backgroundColor = "#ddf";
*/
// hello8.js
/*
var sp = document.createElement("span");
sp.id = "span1";
sp.style.border = "1px solid red";
sp.style.display = "inline-block";
sp.style.width = "80px";
sp.style.textAlign = "center";
document.body.appendChild(sp);
var t = document.createTextNode(" ");

document.body.appendChild(t);
sp.id = "span2";
sp.style.border = "1px solid green";

318
sp.id = "span3";
sp.style.border = "1px solid blue";
var sRed = document.getElementById("span1");

var sGreen = document.getElementById("span2");
var sBlue = document.getElementById("span3");
sRed.innerHTML = "Hi, Red!";

sGreen.innerHTML = "Hi, Green!";
sBlue.innerHTML = "Hi, Blue!";
sRed.style.backgroundColor = "#fdd";
sGreen.style.backgroundColor = "#dfd";
sBlue.style.backgroundColor = "#ddf";
*/
// hello9.js
/*
ta.id = "span1";
ta.style.border = "1px solid red";
ta.rows = "5";

ta.id = "span2";
ta.style.border = "1px solid green";
ta.rows = "4";

ta.id = "span3";
ta.style.border = "1px solid blue";
ta.rows = "3";
var taRed = document.getElementById("span1");

var taGreen = document.getElementById("span2");
var taBlue = document.getElementById("span3");
taRed.innerHTML = "Hello, Red!";

taGreen.innerHTML = "Hi, Green! How are you?";
taBlue.innerHTML = "Nice to meet you, Blue!";
319
taRed.style.backgroundColor = "#fdd";
taGreen.style.backgroundColor = "#dfd";
taBlue.style.backgroundColor = "#ddf";
*/
// click4.js
/*
var obj = document.createElement("textarea");
obj.cols = "80";
obj.rows = "25";
obj.style.background = "#000";
obj.style.border = "1px #fff solid";
obj.style.display = "block";
obj.style.color = "white";
obj.style.padding = "10px";
obj.style.overflowY = "scroll";
obj.id = "con";
document.body.appendChild(obj);
var obj = document.createElement("button");

obj.innerHTML = "Run";
obj.style.width = "50px";
obj.id = "run";
var obj = document.createElement("button");

obj.innerHTML = "Clear";
obj.style.width = "50px";
obj.id = "clear";
var b1 = document.getElementById("run");
var b2 = document.getElementById("clear");
var ta = document.getElementById("con");
var timer1;
var it = 0;
var state = b1.innerHTML;
if(state == "Run") {
timer1 = setInterval(hello, 1);
} else {
b1.innerHTML = "Run";
}
}
b1.innerHTML = "Run";
ta.value = "";
}
function hello() {
var x = parseInt(10 * Math.random());
ta.value = ta.value + x;
320
var y = parseInt(10 * Math.random());

if(y == 0) {
ta.value = ta.value + "\n";
ta.scrollTop = ta.scrollHeight;
}
}
*/
// tacon2.js
// Create textarea object as console part
/*
ta.style.color = "white";
ta.style.background = "black";
ta.rows = "25";
ta.cols = "80";
// Define time variable

var timer1;
// Create start/stop button
document.body.appendChild(b1);
timer1 = setInterval(randnum, 10);
} else {
}
}

ta.value = "";
ta.focus();
}
// Define random content

function randnum() {
var i = parseInt(Math.random() * 10);
display(i);
var j = parseInt(Math.random() * 10);

if(j == 0) {
display("\n")
}
321
function display(line) {
ta.value = ta.value + line;
}
ta.onkeypress = function() {
var x = event.keyCode;
if(x == 13) {
//display(x);
var lines = ta.value.split('\n');
var L = lines.length;
var cl = lines[L - 1];
if(cl == "clear") {
ta.value = "";
}
//display("\nLast line:" + lines[L - 1]);

//var lines = ta.value.split('\n');
//diplay(lines.length);
//var ll = lines[lines.length - 1];
//diplay(ll + "\n");
}
}
*/
// tacon2.js
/*
*/
var c = document.createElement("canvas");
document.body.appendChild(c);
c.id = "canvas";
//c.style.border = "1px solid black";
c.style.background = "black";
c.width = "580";
c.height = "250";

ta.style.color = "white";
ta.style.background = "black";
ta.rows = "10";
ta.cols = "80";
// Define time variable

var timer1;
// Create start/stop button
322
timer1 = setInterval(randnum, 10);
} else {
}
}

ta.value = "";
ta.focus();
}
// Define random content

function randnum() {
var i = parseInt(Math.random() * 10);
display(i);
var j = parseInt(Math.random() * 10);

if(j == 0) {
display("\n")
}
}
function display(line) {
ta.value = ta.value + line;
}
var READING = false;

var i = 0;
ta.onkeypress = function() {
var x = event.keyCode;
if(x == 13) {
//display(x);
var lines = ta.value.split('\n');
var L = lines.length;
var cl = lines[L - 1];
if(cl == "clear") {
ta.value = "";
}
if(cl == "clearg") {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 580, 250);
}
323
if(cl == "whoami") {
ta.value += "\nuser";
}
if(cl == "**") {
for(i = 0; i < 100; i++) {
display(i + "\n");
}
}
if(cl.substr(0,4) == "line") {
var p = cl.split(/[ ,]+/);
ctx.strokeStyle = "#fff";
ctx.moveTo(p[1], p[2]);
ctx.lineTo(p[3], p[4]);
ctx.stroke();
}
if(cl == "<") {
READING = true;
}
//display("\nLast line:" + lines[L - 1]);

//var lines = ta.value.split('\n');
//diplay(lines.length);
//var ll = lines[lines.length - 1];
//diplay(ll + "\n");
}
}/*
*/
324
Lampiran B: Berkas HTML & tampilannya
B.1 parabol.html
<html>
<head>
<title>Gerak Parabola</title>
<script src="parabol.js"></script>
</head>
<body>
<h1>Gerak Parabola</h1>
<div>
<canvas id="fig1" width="330" height="330"></canvas>
</div>
<div>
<b>World coordinates</b> <br />
x<sub>min</sub> <input id="xmin" value="0" /> m

y<sub>min</sub> <input id="ymin" value="0" /> m <br />
x<sub>max</sub> <input id="xmax" value="80" /> m

y<sub>max</sub> <input id="ymax" value="20" /> m <br />
<br />
<b>Constant(s)</b> <br />
g <input id="gacc" value="-10" /> m/s<sup>2</sup> <br />
<br />
<b>Initial conditions</b> <br />
x<sub>0</sub> <input id="x0" value="0" /> m

y<sub>0</sub> <input id="y0" value="0" /> m <br />
v<sub>x0</sub> <input id="vx0" value="20" /> m/s

v<sub>y0</sub> <input id="vy0" value="20" /> m/s <br />
<br />
<b>Simulation parameters</b> <br />
t<sub>beg</sub> <input id="tbeg" value="0" /> s

t<sub>end</sub> <input id="tend" value="4" /> s <br />
Δt <input id="dt" value="1E-1" /> s

t<sub>cur</sub> <input id="tcur" value="0" readonly />
s <br />
<br />
<button id="run" onclick="toggleButton()">
Run
</button>
<button id="reset" onclick="resetSimulation()">
Reset
</button>
</div>
</body>
</html>
325
Komputasi Fisika 3: Lampiran B: Berkas HTML & tampilannya
Gambar B.1 Perhitungan gerak parabola menggunakan algoritma Euler.
B.2 sirkular.html
<html>
<head>
<title>Gerak Melingkar</title>
<script src="sirkular.js"></script>
</head>
<body>
<h1>Gerak Melingkar Partikel Bermuatan dalam Medan Magnetik
Tegak Lurus Kecepatan Awal</h1>
<div>
<canvas id="fig1" width="330" height="330"></canvas>
</div>
<div>
<b>World coordinates</b> <br />
x<sub>min</sub> <input id="xmin" value="-2.5" /> m

y<sub>min</sub> <input id="ymin" value="-2.5" /> m <br />
x<sub>max</sub> <input id="xmax" value="2.5" /> m

y<sub>max</sub> <input id="ymax" value="2.5" /> m <br />
<br />
<b>Constant(s)</b> <br />
m <input id="mass" value="1" /> kg

326
Bz <input id="Bz" value="1" /> T


q <input id="charge" value="1" /> C <br />
<br />
<b>Initial conditions</b> <br />
x<sub>0</sub> <input id="x0" value="0" /> m

y<sub>0</sub> <input id="y0" value="0" /> m <br />
v<sub>x0</sub> <input id="vx0" value="1" /> m/s

v<sub>y0</sub> <input id="vy0" value="0" /> m/s <br />
<br />
<b>Simulation parameters</b> <br />
t<sub>beg</sub> <input id="tbeg" value="0" /> s

t<sub>end</sub> <input id="tend" value="6.28" /> s <br />
Δt <input id="dt" value="1E-1" /> s

t<sub>cur</sub> <input id="tcur" value="0" readonly />
s <br />
<br />
<button id="run" onclick="toggleButton()">
Run
</button>
<button id="reset" onclick="resetSimulation()">
Reset
</button>
</div>
</body>
</html>
Gambar B.2 Perhitungan gerak melingkar dengan algoritma Euler.
327
B.3 matrix.html
<html>
<head>
<title>Matrix</title>
<script src="matrix.js"></script>
</head>
<body>
<script>
var x = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
//[13, 14, 15, 16],
];
document.write(strval(x));
var y = [
[5, 6, 7, 8],
[9, 10, 11, 12.8],
[13.8, 14, 15, 16],
];
document.write(strval(y));
var z = add(x, y);

document.write(strval(z));
</script>
</body>
</html>
Gambar B.3 Tampilan hasil penjumlahan matriks blok pertama + blok kedua = blok ketiga.
328
B.4 ode.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-
AM_CHTML"></script>
<script type="text/javascript" async src="file:///C:/js/MathJax-
2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script src="ode.js"></script>
<title>DPS</title>
</head>
<body>
<h1>Differentiate Power series</h1>
<div style="float: left;">
Coefficients:

<input type="text" value="0, -1, 0, 2, 0, 4" id="coeff"
style="border: 0;">
<br>
<button onclick="differentiatePowerSeries();">Render</button>
</div>
<div style="float: left; padding-left: 40px;" id="hout">
</div>
</body>
</html>
Gambar B.4 Diferensiasi deret pangkat dengan bantuan visualisasi a la LaTex dari MathJax.
329
B.5 grains.html
<!DOCTYPE html>
<html>
<head>
<title>vect3</title>
<script src="Grains4/vect3.js"></script>
<script src="Grains4/grain.js"></script>
<script src="Grains4/force.js"></script>
<script src="Grains4/mdynamics.js"></script>
<script src="Grains4/draw2d.js"></script>
<script src="Grains4/layout.js"></script>
</head>
<body>
<script>
var timer1;
var N = 64;
var grains = new Array(N);
layout();
initiate();
function initiate() {
Mdynamics.setdt(1E-3);
var m1 = 1;
var c1 = "#f00";
var m2 = 4;
var c2 = "#00f";
var D = 1;
var Nx = Math.sqrt(N);
var Ny = Math.sqrt(N);
var x0 = -4;
var y0 = -4;
var i = 0;
for(var iy = 0; iy < Ny; iy++) {
var y = y0 + (iy + 0.5) * D;
for(var ix = 0; ix < Nx; ix++) {
grains[i] = new Grain;
grains[i].i = i;
var x = x0 + (ix + 0.5) * D;
grains[i].r = new Vect3(x, y, 0);
var cR = 128;
var cG = (16 - i) * 16;
var cB = i * 16;
if(i < 0.5 * N) {
grains[i].m = m1;
grains[i].c = c1;
} else {
grains[i].m = m2;
grains[i].c = c2;
}
330
grains[i].D = 0.9 * D;
i++;
}
}
for(var iN = 0; iN < N; iN++) {

}
}
function run() {
// Prepare variabel for saving sum of forces
var SF = new Array(N);
SF[iN] = new Vect3;
}
// Calculate viscous force

var f = Force.visc(grains[iN]);
SF[iN] = Vect3.add(SF[iN], f);
}
// Calculate gravitation force

for(var jN = 0; jN < N; jN++) {
var f = new Vect3;
if(jN != iN) {
f = Force.grav(grains[iN], grains[jN]);
}
}
}
// Calculate normal force

for(var jN = 0; jN < N; jN++) {
var f = new Vect3;
if(jN != iN) {
f = Force.norm(grains[iN], grains[jN]);
}
}
}
var str = "t = " + t + " s";

}

Mdynamics.Euler(SF[iN], grains[iN]);
}
Mdynamics.inct();
331
}
</script>
</body>
</html>
Gambar B.5 Simulasi partikel yang berinteraksi dengan gaya normal dan gaya gravitasi.
B.6 draw2dmolecules.html
<!DOCTYPE html>
<html>
<head>
<title>Draw 2-d molecules</title>
<script src="Grains/vect3.js"></script>
<script src="Grains/grain.js"></script>
<script src="Grains/draw2d.js"></script>
<script src="Grains/layout.js"></script>
</head>
<body>
<script>
layout();
</script>
</body>
</html>
332
Gambar B.6 Draw 2-d molecules.
B.7 xychart.html
<!DOCTYPE html>
<html>
<head>
<title>XYChart</title>
<script src="Grains/xychart.js"></script>
</head>
<body>
<script>
// Create a canvas document with id "chart0"
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.id = "chart0";
canvas.width = "600";
canvas.height = "250";
//canvas.style.border = "1px #ccc dashed";
// Define variable for timer

var t = 0;
var dt = 0.01;
var timer;
// Define some parameters

var N = 201;
var xmin = 0;
333
var xmax = 20;

var dx = (xmax - xmin) / (N - 1);
var A = 2;
var lambda = 5;
var k = 2 * Math.PI / lambda;
var T = 1;
var omega = 2 * Math.PI / T;
var datax = new Array(N);
var datay = new Array(N);
generateData();
var chart = new XYChart;
chart.setCoordinates(xmin, -1.5 * A, xmax, 1.5 * A);
// Show data for the first time

chart.changeData(datax, datay);
chart.clear();
chart.plotTo(canvas);
// Create button object

var button = document.createElement("button");
document.body.appendChild(button);
button.onclick = function() {
if(button.innerHTML == "Start") {
button.innerHTML = "Stop";
} else {
}
}
function generateData() {
for(var i = 0; i < N; i++) {
datax[i] = i * dx;
datay[i] = A * Math.sin(k * datax[i] - omega * t);
}
}
t += dt;
generateData();
chart.changeData(datax, datay);
chart.clear();
chart.plotTo(canvas);
}
</script>
</body>
</html>
334
Gambar B.7 Visualisasi travelling wave dengan xychart.js.
B.8 jumlah.html
<!DOCTYPE html>
<html>
<head>
<title>Penjumlahan</title>
</head>
<body>
<script>
var t1 = document.createElement("text");
t1.innerHTML = " + ";
t2.innerHTML = " = ";
t3.innerHTML = " ";
var i1 = document.createElement("input");
i1.style.width = "3em";
var o1 = document.createElement("input");
o1.style.width = "3em";
b1.innerHTML = "Hitung";
var x = parseInt(i1.value);
var y = parseInt(i2.value);
var z = x + y;
o1.value = z;
}
document.body.appendChild(i1);
document.body.appendChild(t1);
document.body.appendChild(o1);
335
</script>
</body>
</html>
Gambar B.8 Penjumlahan dengan form dalam JavaScript.
B.9 complex.html
<!DOCTYPE html>
<html>
<head>
<title>Complex</title>
</head>
<body>
<script>
t11.innerHTML = " z<sub>1</sub> = ";
t13.innerHTML = "i";
var lb1 = document.createElement("text");

lb1.innerHTML = "<br>";
document.body.appendChild(lb1);

t21.innerHTML = " z<sub>2</sub> = ";
336

var lb2 = document.createElement("text");

lb2.innerHTML = "<br>";
document.body.appendChild(lb2);

t31.innerHTML = "z<sub>1</sub>";
t32.innerHTML = "z<sub>2</sub> = ";
b31.innerHTML = "+";
b32.innerHTML = "-";
b33.innerHTML = "*";
var x1 = parseFloat(i11.value);
var y1 = parseFloat(i12.value);
/* var x3 = x1 + x2;
var y3 = y1 + y2;
i31.value = x3;
i32.value = y3; */
var z1 = new Complex(x1, y1);
var z2 = new Complex(x2, y2);
var z3 = Complex.add(z1, z2);
i31.value = z3.x;
i32.value = z3.y;
}
337
var x3 = x1 - x2;
var y3 = y1 - y2;
i31.value = x3;
i32.value = y3;
}
var x3 = x1 * x2 - y1 * y2;
var y3 = x1 * y2 + x2 * y1;
i31.value = x3;
i32.value = y3;
}
function Complex() {
this.x = 0;
this.y = 0;
} else {
}
}
Complex.add = function(z1, z2) {

var z3 = new Complex;
z3.x = z1.x + z2.x;
z3.y = z1.y + z2.y;
return z3;
}
Complex.sub = function(z1, z2) {
z3.x = z1.x - z2.x;
z3.y = z1.y - z2.y;
return z3;
}
Complex.mul = function(z1, z2) {
z3.x = z1.x * z2.x - z1.y * z2.y;
z3.y = z1.x + z2.y + z1.y + z2.x;
return z3;
}
</script>
</body>
</html>
338
Gambar B.9 Operasi bilangan kompleks.
B.10 sampling_simulation_with_input_area.html
<!DOCTYPE html>
<html>
<head>
<title>Timer-triggering event and sampling</title>
</head>
<body>
<script src="Grains/debug.js"></script>
<script src="Grains/changel.js"></script>
<script src="Grains/timer.js"></script>
<script src="Grains/draw2d.js"></script>
<script src="Grains/vect3.js"></script>
<script src="Grains/grain.js"></script>
<script src="Grains/force.js"></script>
<script src="Grains/mdynamics.js"></script>
<script src="Grains/layout.js"></script>
<script>
layout();
</script>
</body>
</html>
Gambar B.10 Ilustrasi sampling data dengan masukan dari input area dan visualisasinya.
339
Gambar B.11 Lintasan dengan: ∆t kecil dan waktu sampling kecil (kiri), ∆t kecil dan waktu
sampling besar (tengah), dan ∆t besar dan waktu sampling besar (kanan).
B.11 time_triggered.html
<!DOCTYPE html>
<html>
<head>
<title>Time triggered event</title>
</head>
<body>
<script>
var timer; var period = 1000;
var t = document.createElement("text");
var b = document.createElement("button");
t.innerHTML = "0";
t.style.position = "relative"; t.style.left = "0px";
b.innerHTML = "Start";
b.onclick = function() {
if(b.innerHTML == "Start") {
b.innerHTML = "Stop";
timer = setInterval(update, period)
} else {
b.innerHTML = "Start";
}
}
document.body.appendChild(b); document.body.appendChild(t);
function update() {
var i = parseInt(t.innerHTML); i++; t.innerHTML = i;
var x = parseInt(t.style.left);
if(i < 10) { x += 10;} else { x-= 10};
t.style.left = x + "px";
}
</script>
</body>
</html>
340

Komputasika 3 2017

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Komputasika 3 2017

Diunggah oleh

Hak Cipta:

Format Tersedia

Komputasi Fisika 3

Simulasi dan Visualisasi Fisika

Departemen Fisika, FMIPA, Institut Teknologi Bandung

Departemen Fisika, FMIPA, Institut Teknologi Bandung

Lisensi ITB 2017

Penyebaran dalam bentuk aslinya diperbolehkan selama untuk tujuan

Bandung, 30 Mei 2017 | 4 Ramadhan 1438

Nama_Penulis_1, Nama_Penulis_2, .., "Judul bab" dalam Komputasi Fisika 3:

R. E. S. Fauzi, E. S. Rahayu, D. S. Maulana, N. Wahida, K. Pertiwi, A. Yuneldi,

9 Simulasi sifon dengan metode elemen volume fluida tunggal 227

B.8 jumlah.html 335

Simulasi pergerakan bumi mengelilingi matahari dapat mempermudah proses

merupakan konstanta gravitasi universal yang besarnya 6,67 x 10-11 (Nm/kg), M

1.2.3 Gaya sentripetal

1.2.4 Hukum kekekalan momentum sudut

antara bumi-matahari ketika revolusi terjadi. Perubahan jarak antara bumi-matahari

1.2.5 Gerak lurus berubah beraturan

1.3 Metode numerik

1.5 Hasil dan diskusi

Simbol Nilai Awal Kode

7. Earth Fact Sheet, tersedia online pada

Program / Skrip Piranti lunak Keluaran Lampiran

<br /><br />

//menghitung nilai berikutnya

//metode finite different orde 2

if(Math.abs(xn-x0) < 1 && Math.abs(yn-y0) < 1){

var mli = document.getElementById("maxLengthInput");

while(orbitChart.datax.length > orbitChart.dataMaxLength){

var sun = {x:0, y:0, m: 1.989e+30};

var rmax = 1e13;

//Set real world coordinate

var canvas = document.getElementById("canvas");

//Mencetak nilai x dan y pada textarea

//Set nilai awal pada textarea (default values)

//Membaca nilai-nilai yang ada pada text area

//Coordinate Transformation: from real to canvas

//Draw the Sun

function drawRealData(t, x, y){

var a = Math.sqrt(earth.x*earth.x + earth.y*earth.y);

if(a > tc.ymax) tc.ymax = a;

if(earth.t > tc.xmax){

//Membuat Grafik Orbit planet

function drawOrbit(x, y){

if(orbitChart.xmax > orbitChart.ymax) orbitChart.ymax =

if(Math.abs(orbitChart.xmax) > Math.abs(orbitChart.xmin))

* this is a modified version, by Roni Stiawan *

var ctx = canvas.getContext("2d");

// Real world coordinates

// Set world coodinates

// Transform datax to dataX

// Transform datay to dataY

//cleaning unnecessary data

// Plot data to a canvas

// Convert raw data to plotting data

//var ctx = canvas.getContext("2d");

// Calculate and plot tics

// Plot axis numbers

var T = formatTickLabel(this.xTics[i] , this.digitX);

var font = "italic " + this.fontSize + " ";

// Draw plotting data

//Mengubah format tick label menjadi seperti 2.3e6 (2.3x10^6)

dengan gaya tekan sebagai berikut

Tekanan sebesar p pada saat s − ∆h / 2 berdasarkan tekanan hidrostatik yang diukur

2.3 Metode numerik

var a = Math.sqrt(earth.xearth.x + earth.yearth.y);