Canvas HTML5: Model Kubus Atraktif Menggunakan Canvas HTML5

Berikut ini adalah tutorial bagaimana membuat sebuah kubus 3 Dimensi yang atraktif. Seperti pada pemodelan menggunakan delphi pada Model Kubus Atraktif Menggunakan Delphi, namun model kali ini menggunakan bahasa pemrograman Javascript pada Canvas HTML5. Pemodelan ini menggunakan matematika geometri melalui metode vektor dan matriks. Kubus atraktif menggunakan matriks rotasi seperti pada gambar berikut

Kubus akan berrotasi mengikuti mouse, hal ini karena menggunakan event onmousemove, script dan hasilnya terlihat seperti berikut:

Show/Hide Editor

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <canvas id="contoh1" style="" width="300" height="300"></canvas>
    <script>
      var canvas = document.getElementById('contoh1');
   var garis = canvas.getContext('2d');
      var sumbux,xumbuy,sumbuz;
      var titikkotak;
      var pusat=[150,150];
      var titik0=[0,0,0];
      
      function perkalianmatriksvektor(matriks,vektor){
        var hasil=[0,0,0];
        for(i=0;i<3;i++)
          for(j=0;j<3;j++)
            hasil[i]+=matriks[i][j]*vektor[j];
        return hasil;
      }
        
      var rotasi=function(vektor,sudut,arah){
        switch(arah){
    case 'x':matriks=[[1,0,0],[0,Math.cos(sudut),-Math.sin(sudut)],[0,Math.sin(sudut),Math.cos(sudut)]];break;
  case 'y':matriks=[[Math.cos(sudut),0,Math.sin(sudut)],[0,1,0],[-Math.sin(sudut),0,Math.cos(sudut)]];break;
  case 'z':matriks=[[Math.cos(sudut),-Math.sin(sudut),0],[Math.sin(sudut),Math.cos(sudut),0],[0,0,1]];break;
        }
  return perkalianmatriksvektor(matriks,vektor);
      }

drawline(titikkotak[4],titikkotak[5]);
          drawline(titikkotak[5],titikkotak[6]);
          drawline(titikkotak[6],titikkotak[7]);
          drawline(titikkotak[7],titikkotak[4]);

drawline(titikkotak[1],titikkotak[5]);
          drawline(titikkotak[2],titikkotak[6]);
          drawline(titikkotak[3],titikkotak[7]);
          drawline(titikkotak[0],titikkotak[4]);

drawteks('A',titikkotak[0]);
          drawteks('B',titikkotak[1]);
          drawteks('C',titikkotak[2]);
          drawteks('D',titikkotak[3]);
          drawteks('E',titikkotak[4]);
          drawteks('F',titikkotak[5]);
          drawteks('G',titikkotak[6]);
          drawteks('H',titikkotak[7]);
        },
        draw:function(){
          this.bg();
          this.sumbu();
          this.kotak();
        }
      }
      var gmb=gambar;
      gmb.init();
      
      var sudut=Math.PI/6;

for(k=0;k<2;k++){
       sumbux[k]=rotasi(sumbux[k],sudut,'z');
       sumbuy[k]=rotasi(sumbuy[k],sudut,'z');
       sumbuz[k]=rotasi(sumbuz[k],sudut,'z');
        
       sumbux[k]=rotasi(sumbux[k],-sudut,'x');
       sumbuy[k]=rotasi(sumbuy[k],-sudut,'x');
       sumbuz[k]=rotasi(sumbuz[k],-sudut,'x');
      }
      
      for(k=0;k<8;k++){
        titikkotak[k]=rotasi(titikkotak[k],sudut,'z');
        titikkotak[k]=rotasi(titikkotak[k],-sudut,'x');
      }

Canvas HTML5

Laman

Senin, 28 April 2014

Model Kubus Atraktif Menggunakan Canvas HTML5

Tidak ada komentar:

Posting Komentar