Matematika Rotasi untuk Animasi OpenTK 2D

Klik disini untuk menuju ke artikel

Pagi hari...weekend di bulan juni...

Selamat Pagi semuanya, aku berharap rekan-rekan dalam keadaan baik-baik saja. Kali ini aku akan meneruskan obrolan kita tentang Visual Basic .Net dan OpenTK. Pada obrolan terdahulu ogut telah menjelaskan tentang tekstur dan teknik masking di OpenTK.

Dan kali ini ogut akan memberikan contoh animasi yang sangat sederhana dengan menggunakan matematika yang sederhana pula, tetapi manfaatnya banyak sekali.
Pada gambar berikut Anda dapat melihat hasil program animasi kipas yang berputar, untuk memutar kipas tersebut caranya sangat sederhana (download source code program).

Rotasi adalah memutar sebuah titik koordinat dengan sudut tertentu yang arah putarannya berlawanan dengan arah jarum jam.

Gambar di atas adalah gambar yang menerangkan tentang proses rotasi yang berpusat di titik (0, 0).

x‟ = x Cos θ˚ - y Sin θ˚
y‟ = x Sin θ˚ + y Cos θ˚

Rumus di atas dapat digunakan untuk rotasi yang berpusat di titik pusat sumbu. Di dalam program game jarang sekali diperlukan rotasi yang berpusat pada titik pusat sumbu.

Pada gambar di atas terlihat rotasi yang berpusat di titik (M, N), agar rumus rotasi dapat lebih bermanfaat di pemrograman game maka rumus tersebut harus dimodifikasi supaya pusat rotasinya di titik (M, N).

Public Sub Rotasi(ByRef XKoord As Single, ByRef YKoord As Single, ByVal M As Single, ByVal N As Single, ByVal Sudut As Double)
    Dim Save_X, Save_Y As Single
    'ubah sudut rotasi ke radian
    Sudut = Sudut / 180.0# * 3.1415926535
    Save_X = XKoord
    Save_Y = YKoord
    XKoord = ((Save_X - M) * Math.Cos(Sudut)) – ((Save_Y - N) * Math.Sin(Sudut)) + M
    YKoord = ((Save_X - M) * Math.Sin(Sudut)) + ((Save_Y - N) * Math.Cos(Sudut)) + N
End Sub

Sebagai implementasi dari rumus rotasi, ogut menyertakan program animasi kincir angin berputar, untuk membuat animasi seperti ini Anda hanya perlu memutar poligon segiempat yang bertekstur kipas.

Sangat sederhana bukan, hanya dengan menggunakan rumus sesederhana ini Anda bisa membuat berbagai macam animasi berputar seperti roda mobil atau peluru bumerang.

Berikut ini adalah kode program animasi kincir angin yang harus Anda perhatikan, kode program secara lengkap dapat Anda download di bagian akhir dari artikel ini.

Tentukan nilai awal koordinat poligon.

Private Sub SettingNilaiAwal()
    'kincir1
    Kincir1.Ax = -210 : Kincir1.Ay = -510
    Kincir1.Bx = 210 : Kincir1.By = -510
    Kincir1.Cx = 210 : Kincir1.Cy = 80
    Kincir1.Dx = -210 : Kincir1.Dy = 80
   
    'kipas1
    Kipas1.Ax = -300 : Kipas1.Ay = -300
    Kipas1.Bx = 300 : Kipas1.By = -300
    Kipas1.Cx = 300 : Kipas1.Cy = 300
    Kipas1.Dx = -300 : Kipas1.Dy = 300
    ...
    ...
    ...
End Sub

Rotasikan dan render poligon.

Private Sub Render_Kincir1()
    GL.Enable(EnableCap.Blend)
    GL.BlendFunc(BlendingFactorSrc.DstColor, BlendingFactorDest.Zero)

    'Mask
    GL.BindTexture(TextureTarget.Texture2D, KincirBMP_Mask)
    GL.Begin(BeginMode.Quads)
    GL.TexCoord2(0.0, 0.0) : GL.Vertex2(Kincir1.Ax, Kincir1.Ay)
    GL.TexCoord2(1.0, 0.0) : GL.Vertex2(Kincir1.Bx, Kincir1.By)
    GL.TexCoord2(1.0, 1.0) : GL.Vertex2(Kincir1.Cx, Kincir1.Cy)
    GL.TexCoord2(0.0, 1.0) : GL.Vertex2(Kincir1.Dx, Kincir1.Dy)
    GL.End()
    GL.BlendFunc(BlendingFactorSrc.One, BlendingFactorDest.One)

    'BMP
    GL.BindTexture(TextureTarget.Texture2D, KincirBMP)
    GL.Begin(BeginMode.Quads)
    GL.TexCoord2(0.0, 0.0) : GL.Vertex2(Kincir1.Ax, Kincir1.Ay)
    GL.TexCoord2(1.0, 0.0) : GL.Vertex2(Kincir1.Bx, Kincir1.By)
    GL.TexCoord2(1.0, 1.0) : GL.Vertex2(Kincir1.Cx, Kincir1.Cy)
    GL.TexCoord2(0.0, 1.0) : GL.Vertex2(Kincir1.Dx, Kincir1.Dy)
    GL.End()
    GL.Disable(EnableCap.Blend)

    If CheckBox2.Checked = True Then
        'warna merah untuk garis
        GL.BindTexture(TextureTarget.Texture2D, Red)
        GL.Begin(BeginMode.LineLoop)
        GL.Vertex2(Kincir1.Ax, Kincir1.Ay)
        GL.Vertex2(Kincir1.Bx, Kincir1.By)
        GL.Vertex2(Kincir1.Cx, Kincir1.Cy)
        GL.Vertex2(Kincir1.Dx, Kincir1.Dy)
        GL.End()
    End If
End Sub

Private Sub Render_Kipas1()
    Rotasi(Kipas1.Ax, Kipas1.Ay, 0, 0, 7.5)
    Rotasi(Kipas1.Bx, Kipas1.By, 0, 0, 7.5)
    Rotasi(Kipas1.Cx, Kipas1.Cy, 0, 0, 7.5)
    Rotasi(Kipas1.Dx, Kipas1.Dy, 0, 0, 7.5)
    GL.Enable(EnableCap.Blend)
    GL.BlendFunc(BlendingFactorSrc.DstColor, BlendingFactorDest.Zero)

    'Mask
    GL.BindTexture(TextureTarget.Texture2D, KipasBMP_Mask)
    GL.Begin(BeginMode.Quads)
    GL.TexCoord2(0.0, 0.0) : GL.Vertex2(Kipas1.Ax, Kipas1.Ay)
    GL.TexCoord2(1.0, 0.0) : GL.Vertex2(Kipas1.Bx, Kipas1.By)
    GL.TexCoord2(1.0, 1.0) : GL.Vertex2(Kipas1.Cx, Kipas1.Cy)
    GL.TexCoord2(0.0, 1.0) : GL.Vertex2(Kipas1.Dx, Kipas1.Dy)
    GL.End()
    GL.BlendFunc(BlendingFactorSrc.One, BlendingFactorDest.One)

    'BMP
    GL.BindTexture(TextureTarget.Texture2D, KipasBMP)
    GL.Begin(BeginMode.Quads)
    GL.TexCoord2(0.0, 0.0) : GL.Vertex2(Kipas1.Ax, Kipas1.Ay)
    GL.TexCoord2(1.0, 0.0) : GL.Vertex2(Kipas1.Bx, Kipas1.By)
    GL.TexCoord2(1.0, 1.0) : GL.Vertex2(Kipas1.Cx, Kipas1.Cy)
    GL.TexCoord2(0.0, 1.0) : GL.Vertex2(Kipas1.Dx, Kipas1.Dy)
    GL.End()
    GL.Disable(EnableCap.Blend)

    If CheckBox2.Checked = True Then
        'warna merah untuk garis
        GL.BindTexture(TextureTarget.Texture2D, Red)

        GL.Begin(BeginMode.LineLoop)
        GL.Vertex2(Kipas1.Ax, Kipas1.Ay)
        GL.Vertex2(Kipas1.Bx, Kipas1.By)
        GL.Vertex2(Kipas1.Cx, Kipas1.Cy)
        GL.Vertex2(Kipas1.Dx, Kipas1.Dy)
        GL.End()
    End If
End Sub

Tuntas sudah obrolan tentang matematika rotasi, sampai jumpa di artikel yang lain, kepada rekan-rekan yang mempunyai ide dan ingin menyumbangkan ke blog ini akan diterima dengan tangan terbuka, tetapi hasil karya sendiri ya bukan jiplakan. Nama penyumbang akan ogut tulis dengan jelas tanpa rekayasa dan tulisan juga tidak akan ogut edit-edit.

Salam Sukses Selalu


Heriady
heriady.yoh@gmail.com

Download program matematika rotasi dengan VB. Net dan OpenTK ada disini.

Artikel terkait

	VB . Net dan OpenTK 2D Klik link ini untuk menuju ke artikel
	Tekstur di OpenTK 2D Klik link ini untuk menuju ke artikel
	Teknik masking pada OpenTK 2D Klik link ini untuk menuju ke artikel
	Animasi Game 2D dengan Translasi Klik link ini untuk menuju ke artikel