477 Flares 477 Flares

Now a days I am playing around with HTML5 Canvas API and Java Script. It’s an amazing option to create animations.

This weekend I saw The Matrix movie.This film known for it’s visual effect.

Then I thought is it possible to Create Matrix effects using HTML5 and JavaScript   something like below.

Matrix Effect

First I wrote some JavaScript code as mentioned below.

I wrote one Matrix function In which I am filling canvas with “Matrix” word at random locations using Canvas fillText method(Line 10). And I am calling that function using Javascript setInterval Method (Line  12)(Interval Time 30.)

Line 7 and 8 will fill the screen with background color black and opacity of 0.05.

When each time the Matrix function is called,Canvas fillStyle will draw the background on the screen.Because of this you can see text has different colors at different places on canvas.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 Matrix is called

Line 10 will draw “Matrix” word at random locations. I am using JavaScript Math.random() to do the same. Here is the Simple Matrix Effect Demo.

But this is not what we expected,Carefully observe the above Matrix Effect Gif Image: All alphabets are drawn along Y-Axis while X-Coordinates are constant.So I changed my code little bit as shown below.This is the key point in our Algorithm to Create Matrix effect using HTML5

### Algorithm Behind Matrix Effects using HTML5 Canvas And JavaScript:

Here I declared an array (YPositions) to store Y-Coordinates.Initially array will contain all zero’s.And Inside draw() function I am using Java script Array Map function, basically It Creates a new array with the results of calling a provided function on every element in this array.

Here is the quick Example of Java Script Array Map

The Array index starts at ‘0’ zero so, For X -co ordinate I am adding 10,Our X coordinates are (10,20,30,40………290)(Line 12)

And Y co-ordinates will vary from (0 to 110) If  Y value > 100 I am resetting array element to ‘0’ otherwise incrementing 10.(Line 14 to 21). Here I am not using new Array I am changing existing(YPositions) array itself using Java Script Array Map function.

I am drawing ‘a’ character on canvas at (x,y) locations. (Line 13).

• i.e., on first Iteration we will draw “a” at (10,10)(20,10)(30,10)……(290,10)
• Second Iteration  (10,20)(20,20)(30,20)……….(290,20) and this goes until Y >100 then we will reset the value to ‘0’

Also Read   :  Simple Algorithm to Draw Polygon using HTML5 Canvas

I think now you understood the Logic behind this implementation if you are still in doubt refer below image.

HTML5CanvasTutorial

I think now your clear with Logic.

Now we have to replace “a” with random alphabets and Y positions to some random coordinates to create actual Matrix Effect using HTML5 and javaScript  Here is the final Code.

I am using Java script String Char from Code Method(Line 27) to generate random alphabets which take ASCII Value as input and gives corresponding character. In short it will convert ASCII Codes to Characters.

And also I added two buttons to Play and Pause Matrix Effects. I prefer you to read Simple Snake Game using HTML5 Canvas to understand this buttons mechanism.

Here is the Final demo of Matrix effects using HTML5 and JavaScript

Learn how to implement  Google Hangout webcam Effects using HTML5 getUserMedia

I prefer you to read this awesome book on Canvas
Core HTML5 Canvas: Graphics, Animation, and Game Development (Core Series)

I hope you’ve enjoyed this article and that it gives you more ideas on how we can implement animations using the HTML5 Canvas API.If so share this post with your friends and also join our mailing list I will be sharing my learnings and experiments with HTML5

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me.

### Author : Arunkumar Gudelli

I am a Simple Guy, Standing Infront of the World, asking you to Follow Me.
Don't miss any posts from Me,Subscribe to the RSS Feed.

• Andrew

I see where you’ve used random number to convert to a character. Is there any way to further restrict those possible numbers so it looks more like Matrix (i.e. fewer of the ‘random’ characters and more alpha-numerics?– your current awesome version has characters like ; ‘ ” , etc. that I would like to get rid of.).

• @Andrew: seems like you could easily filter the character set in this line:
`text = String.fromCharCode(1e2+Math.random()*33);`

you could either supply a list of acceptable characters, then pick a random value from that list, or apply filter to the result, re-doing if its a value you don’t like.

the first option seems like it would be better performing.

Atg

• You can do something Like this, Create one function
` function random_character() { var chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ"; return chars.substr( Math.floor(Math.random() * 62), 1); } `
use this function to generate Random number or character.

• Gudelli, this is cool! the only, admittedly lame, recommendation i would make is to use requestAnimationFrame instead of setInterval, this should make for smoother, more consistent animations across devices.

oh, and would also be cool to be able to go fullscreen with this… 🙂

but really, it’s cool, nice job!

Atg

• Thank you for your valuable suggestion Aaron.I have not tried requestAnimationFrame,I will try to implement with that.

• Nice image effect in behind the scenes of Just a few lines of code. I appreciate your sharing.

• Thank you karen..

• This is very nice informative tutorial. Thanks for share.

Optimization WordPress Plugins & Solutions by W3 EDGE
477 Flares 477 Flares