Today's Question: 

Hide

Different programming are similar in helping people build staff work as people want them to. But they all have their own features which differentiate them from other programming languages. The language type may be different, for example Java is OOP, some may have different syntax. A programming motto usually can best describe the characteristic of the programming language. For example, "Write once Run everywhere" for Java.Do you know any other programming language motto?
Do you know the mottos of programmig languages?
Description My Answer

Technical Article => HTML5 =>  HTML5

Cool HTML5 matrix effect

Source : sonic0002    Date : 2013-08-14 08:03:34  

Do you still remember the movie The Matrix? Do you still remember the cool matrix effect in that movie? How is that effect achieved? Shaun Dunne shared a piece of HTML5 code which displays a cool matrix effect. The matrix demo can be found here.

Below is the code which he achieves this effect: with

var s = window.screen;
var width = q.width = s.width;
var height = q.height = s.height;
var letters = Array(256).join(1).split('');

var draw = function () {
  q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
  q.getContext('2d').fillRect(0,0,width,height);
  q.getContext('2d').fillStyle='#0F0';
  letters.map(function(y_pos, index){
    text = String.fromCharCode(3e4+Math.random()*33);
    x_pos = index * 10;
    q.getContext('2d').fillText(text, x_pos, y_pos);
    letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
  });
};
setInterval(draw, 33);

Let's get to understand this piece of code line by line:

The first 3 lines are easy to understand, line 2 and line 3 will store the width and height of the screen to the variable width and height.

Line 4 will create a 256 elements array where each element in the array is "1".

Line 6 to the second last line is the callback function of the setInterval() function in the last line.

Line 7 and 8 will fill the screen with background color of black and an alpha factor of 0.05. When each time the draw function is called, this will draw the background on the screen. This is why we can see the text has different color at different places. Some text will have green color without transparent background color. This is because there will be a new layer drawn on the screen each time the draw is called

Line 9 will change the fill color to green so that the the text drawn on the screen will be green.

Line 10 call the Array.prototype.map() function, this will apply the callback function on each element of the letters array. The two parameters y_pos and index are the value and index of each element of the array respectively. The initial y_pos is 1 for all elements.

Line 11 will generate a random character to be drawn next

Line 12 will set the x position of each text to be drawn from left to right.

Line 13 will draw the text at respective x and y position.

Line 14 will set the next y position for each element. The y position will be randomly generated so that we can see each element in the array will show at different y positions. This will create the cool matrix effect.

The last line will start to draw the matrix with a time interval of 33 milliseconds.

Save as PDF Mark as read Mark as important
By clicking the "Mark as read" button, this article will be marked as read. It will be removed from the homepage's latest news and the article list on the "Technical article" page in following visits and it will be put to your read list which you can find in "Amin->Article read list". There you can unmark the read articles.
By clicking the "Mark as important" button, this article will be put to your important article list which you can find in "Amin->Article important list". Later when you want reread this article, it's easier for you to find it by checking the "Article important list".

Tags : Matrix,HTML5   Read(9918) Comment(0) Version(29)

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious 

 Previous : Migrate from MySQL to MariaDB in Ubuntu
 Next : Windows 8.1 will be released on October 18

  ::Related Articles

  ::Comment Zone  (Total 0 comment)

No comment for this article.

  ::Comment

Nickname  
Email 
Comment

:: Other versions

View all

:: Recent articles

:: Most read

:: Contribute

Want to share with the world your understanding about technology? Want to record the process you solve a technical problem? Want to make the world benefit from your understanding and solution? Write them down. You make the world better, the world makes us better.

Write article

:: Find us

Back to top