Transformasi Geometri: Pencerminan atau Refleksi Terhadap Garis Sembarang Titik Grafik pada Javascript dengan Canvas

Transformasi Geometri: Pencerminan atau Refleksi Terhadap Garis Sembarang Titik Grafik pada Javascript dengan Canvas

Posted by Clevo

Sunday, September 22, 2019

Algoritma Grafik Javascript Pemrograman

Selamat siang, hari ini saya akan membagikan mengenai algoritma refleksi atau pencerminan. Saat kita SMA kita sudah di kenalkan dengan bidang datar segitiga, lingkaran, belah ketupat dan sebagainya. Pengoperasian bidang tersebut ada beberapa diantaranya seperti translasi, rotasi, scaling dan juga refleksi.

Sebelum masuk ke dalam coding, kita harus mengenal dulu apa itu Refleksi atau pencerminan.

Baca Juga: Membuat Grafik Kurva kuadrat dengan Canvas Javascript
Baca Juga: Membuat Lingkaran dan Garis Bergerak Seperti Menggambar pada Java

Refleksi atau Pencerminan

Refleksi atau pencerminan adalah transformasi yang memindahkan titik titik pada bidang datar dengan menggunakan sifat bayangan cermin dari titik-titik yang dipindahkan. Cermin memiliki sifat bayangan yang jarak antara benda asli dan cermin akan sama dengan jarak setiap titik bayangan ke cermin, serta ukuran dan bentuknya sama.

Karena kita akan menggunakan input dua titik berupa klik, kita hanya membahas mengenai rumus dari transformasi refleksi terhadap garis lurus. Perlu diketahui bahwa transformasi dua dimensi memerluka garis untuk melakukan pencerminan, sementara untuk 3 dimensi diperlukan bidang untuk melakukan transformasi refleksi atau pencerminan ini.

Garis diatas memiliki rumus umum $y = mx + c$, dengan m adalah gradien dari garis tersebut. Gradien suatu garis dapat di dapatkan dengan cara $m = (y_2-y_1)/(x_2-x_1)$.

Masalah selanjutnya kita tidak mengetahui c ? Bagaimana cara mendapatkan nilai c? Menggunakan sifat matematika kita dapat memperoleh $c = y - mx$. Dengan m gradien serta x dan y merupakan sembarang titik yang melewati garis tersebut.

Rumus garis ini nanti akan digunakan sebagai rumus dari matriks transformasi. Rumus transformasi sembarang titik adalah :

$\left(\begin{array}{c}{x}^{\mathrm{\prime <!--\; \prime \; -->}}\\ y^{\mathrm{\prime <!--\; \prime \; -->}}\end{array}\right)=\left(\begin{array}{cc}\cos <!--\; \; -->2\mathrm{\theta <!--\; \theta \; -->}& \sin <!--\; \; -->2\mathrm{\theta <!--\; \theta \; -->}\\ \sin <!--\; \; -->2\mathrm{\theta <!--\; \theta \; -->}& -<!--\; -\; -->\cos <!--\; \; -->2\mathrm{\theta <!--\; \theta \; -->}\end{array}\right)\left(\begin{array}{c}x\\ y-<!--\; -\; -->c\end{array}\right)+\left(\begin{array}{c}0\\ c\end{array}\right)$

Setelah mengetahui rumus dari refleksi selanjutnya menyederhanakan rumus tersebut agar dapat dimengerti komputer.

$x' = cos 2\theta * x + sin 2\theta * (y - c)$

$y' = sin 2\theta * x - cos 2/theta * (y - c) + c$

Sekarang kita sudah mengetahui rumus dari mencari titik titik pencerminan di garis y = mx + c. Lalu bagaimana apabila x2 sama dengan x1.

$x_2 - x_1$ akan menghasilkan nilai nol. Karena kita memperoleh nol, maka nilai m akan tidak dapat terdefinisikan. Untuk mengatasinya kita hanya perlu menggunakan sedikit logika. Caranya kita cukup menghitung jarak titik ke garis dan mengalikannya 2 selanjutnya ditambahkann letak titik.

$x' = 2*(garis_x - x) + x$ atau $x' = 2*garis_x - x$

Sekarang saatnya kita masuk dalam coding javascript untuk membuat grafik refleksi atau pencerminan menggunakan bahasa pemrograman komputer kali ini javascript dan canvas sebagai penampilnya.

Source code Transformasi Refleksi atau Pencerminan terhadap Garis

Klik canvas dibawah ini:

Tiga titik segitiga
Mouse position
Clicked p1
Clciked p2

inputan click
Created ZonaPemrograman.Blogspot.com

Karena inputan berupa klik kita harus mendapatkan dua klik sebelum melakukan transformasi. 

Itu tadi adalah Transformasi Geometri: Pencerminan atau Refleksi Terhadap Garis Sembarang Titik Grafik pada Javascript dengan Canvas. Semoga dapat memahami yang telah dijelaskan diatas.

Ditulis Clevo Pada September 22, 2019 1 Komentar