Efek Matrik dengan HTML5 dan Javascript

HTML , javascript 1 komentar

Sekarang kita akan bermain-main dengan HTML5 Canvas API dan Java Script . Ini adalah nspirasi dari dosen aku yang dalam perkuliahan apapun selalu mengaitkan dengan matriks

JIka kalian melihat film matrix maka akan bisa melihat bagaimana efek yang ada dalam movie tersebut..

Lalu aku berpikir apakah mungkin untuk membuat efek Matrix menggunakan HTML5 dan JavaScript sesuatu seperti di bawah ini.

Efek Matrix

Pertama aku tulis beberapa kode JavaScript seperti di bawah ini.

<canvas id="myCanvasMatrix" width="500" height="200"
style="border:1px solid #c3c3c3;">
Please Upgrade your browser
</canvas>
var c1=document.getElementById("myCanvasMatrix");
var ctx1=c1.getContext("2d"); 
var Matrix=function(){
ctx1.fillStyle='rgba(0,0,0,.05)'; 
ctx1.fillRect(0,0,500,500); 
ctx1.fillStyle="#0f0";
ctx1.fillText('Matrix', Math.random()*(500), 
Math.random((500));
};
setInterval(Matrix,30);

Kemudian menulis satu fungsi Matrix dimana diisi dengan kanvas "Matrix" kata pada lokasi secara acak menggunakan metode kanvas fillText . Dan mengunakan metode Javascript setInterval.

ctx1.fillStyle='rgba(0,0,0,.05)'; 
ctx1.fillRect(0,0,500,500);

akan mengisi layar dengan latar belakang warna hitam dan opacity dari 0,05.

Bila setiap kali fungsi Matrix disebut, kanvas fillStyle akan menarik latar belakang pada screen.Because ini Anda dapat melihat teks memiliki warna yang berbeda di tempat yang berbeda pada teks canvas.Some akan memiliki warna hijau tanpa warna latar belakang transparan. Hal ini karena akan ada layer baru digambar di layar setiap kali Matrix disebut

Baris 10 akan menarik "Matrix" kata pada lokasi acak. Saya menggunakan javascrip t Math.random () melakukan hal yang sama.

Tapi ini bukan apa yang kita harapkan, Hati-hati mengamati di atas Matrix Effect Gif Gambar: Semua huruf diambil sepanjang Y-Axis sementara X-Koordinat adalah constant.Jadi aku mengubahbeberapa kode seperi berikut.Ini adalah titik kunci dalam Algoritma untuk membuat efek Matrix menggunakan HTML5

<canvas id="myCanvas" width="500" height="200" style="border:1px solid #c3c3c3;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
var YPositions= Array(30).join(0).split(''); 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var draw=function(){ 
ctx.fillStyle='rgba(0,0,0,.05)'; 
ctx.fillRect(0,0,500,500); 
ctx.fillStyle="#0f0"; 
YPositions.map(function(y,index){ 
x=(index*10)+10; 
ctx.fillText('a', x, y); 
if(y>100) 
{ 
YPositions[index]=0; 
} 
else 
{ 
YPositions[index]=y+10; 
} 
}); 
}; 
setInterval(draw,30); 

Dibalik Algoritma Efek Matrix yang  menggunakan HTML5 Canvas dan JavaScript:

Di sini aku menyatakan array (YPositions) untuk menyimpan Y-Coordinates.Initiallisasi array akan berisi semua nol . Dan dalam fungsi draw () aku menggunakan Array Java Script fungsi map, pada dasarnya adalah Membuat array baru dengan  memanggil fungsi yang disediakan pada setiap elemen dalam array tesebut. 
Berikut adalah Contoh Array Java Script  
var numbers = [1, 4, 9]; 
/* roots is now [1, 2, 3], numbers is still [1, 4, 9] */ 
var roots = numbers.map(Math.sqrt); 

/* math sqrt method called on each element */ 

Indeks Array dimulai pada '0 'nol sehingga, Untuk X-co ordinat aku tambahkan 10, koordinat X (10,20,30,40 ......... 290) 
Dan Y koordinat akan bervariasi dari (0-110) Jika nilai Y> 100 Aku ulang elemen array ke '0 'jika tidak incrementing 10. Di sini aku tidak menggunakan Array baru aku hanya mengubah array yang sudah ada (YPositions) dengan menggunakan Array Java Script Array  fungsi map. 
 Aku menggambar 'a' karakter di atas kanvas di (x, y) lokasi.

yaitu, pada Iterasi pertama kita akan menarik "a" di (10,10) (20,10) (30,10) ...... (290,10) 
Iterasi kedua (10,20) (20,20) (30,20) .......... (290,20) dan ini berlangsung sampai Y> 100 maka kita akan me-reset nilai ke '0 '

  
Saya pikir sekarang Anda memahami Logika di balik pelaksanaan ini jika masih ragu lihat gambar di bawah ini. 
 
Tutorial HTML5Canvas 
Sekarang kita harus mengganti "a" dengan huruf acak dan posisi Y beberapa koordinat acak untuk membuat aktual Matrix Effect menggunakan HTML5 dan javascript   Berikut adalah Kode terakhir. 
<html><head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<meta charset="utf-8"> 
<title>Matrix</title> 
</head> 
<body> 
<div align="center"> 
<h3>Matrix dengan html5 dan javascript</i></h3> 
<canvas id="q" width="500" height="500">Sorry Browser Won't Support</canvas><br/><br/> 
<button id="play">Play</button> 
<button id="pause">pause</button> 
</div> 
<script> 
$(document).ready(function(){ 
var s=window.screen; 
var width = q.width=s.width; 
var height = q.height; 
var yPositions = Array(300).join(0).split(''); 
var ctx=q.getContext('2d'); 
var draw = function () { 
ctx.fillStyle='rgba(0,0,0,.05)'; 
ctx.fillRect(0,0,width,height); 
ctx.fillStyle='#0F0'; 
ctx.font = '10pt Georgia'; 
yPositions.map(function(y, index){ 
text = String.fromCharCode(1e2+Math.random()*33); 
x = (index * 10)+10; 
q.getContext('2d').fillText(text, x, y); 
if(y > 100 + Math.random()*1e4) 
{ 
yPositions[index]=0; 
} 
else 
{ 
yPositions[index] = y + 10; 
} 
}); 
}; 
RunMatrix(); 
function RunMatrix() 
{ 
if(typeof Game_Interval != "undefined") clearInterval(Game_Interval); 
Game_Interval = setInterval(draw, 33); 
} 
function StopMatrix() 
{ 
clearInterval(Game_Interval); 
} 
//setInterval(draw, 33); 
$("button#pause").click(function(){ 
StopMatrix();}); 
$("button#play").click(function(){RunMatrix();}); 
}) 
</script> 
</body></html>