Encore un effet matrix différent

Soyez le premier à donner votre avis sur cette source.

Snippet vu 11 650 fois - Téléchargée 27 fois

Contenu du snippet

Effet Matrix, chacun fait une version différente, moi j'ai choisi de faire un fondu avant et aprés le symbole blanc et que les lettres aient un mouvement à peu prés statique. Si vous les voulez totalement statiques, il suffit de remplacer la variable aléatoire de vitesse par une constante. Le gros problème c'est la vitesse, si on met trop de matrice, ça devient vite trés lent ...
PS : si vous voulez accélérer un peu le script (ou le ralentir !) il suffit de modifier la variable "NumMatrix" ! (merci xactionx59)

Source / Exemple :


<html>
<!-- date de creation: 15/06/2003 -->
<head>
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="delord_19">
<meta name="Generator" content="">
</head>
<script>
var NumMatrix = 10;
var Top = new Array();
var Vit = new Array();
var Left = new Array();
var CARS = new Array('P','*','b','Q','Y','@','S','l','à','D','X','F','c','G','L','å','W','1','w','À');
var turn = 0;
var Buf = '&nbsp;.&nbsp;:&nbsp;[ Matrix 1 . 4 ]&nbsp;:&nbsp;.<br>J\'ai ralongé les matrices et inversé le fondu. Je trouve ça -personnellement- encore plus beau ... en tout cas mon script doit surement pouvoir être accéléré, alors si quelqu\'un se sent l\' âme de le faire il est le bien venu et est prié de bien vouloir me communiquer ses améliorations.<fondu><titre>';
var Txt;

function tableau (n) {
    var nb;
    this.length = n;
    for (var i = 1; i <=n; i++)
        if (i<10)
           {nb = i+"";
            nb = nb.substring(0,1);       
            this[i] = nb;}
   return this;
}
function conversion(couleur) {   
    var reste=1;
    var indice;
    var hexa1;
    var hexa2;
    var couleurHexa;
    tabHex = new tableau(16);
    tabHex[10]="A"; tabHex[11]="B"; tabHex[12]="C"; tabHex[13]="D"; tabHex[14]="E"; tabHex[15]="F";
    indice = 1;
    hexa2 = (couleur%16);
    hexa1 = parseInt(couleur/16);
    hexa2 = tabHex[hexa2];
    if (hexa2 == null)
        hexa2 = "0";
    hexa1 = tabHex[hexa1];
    if (hexa1 == null)
        hexa1 = "0";
    couleurHexa = hexa1 + hexa2;
    return couleurHexa;
}

function Creer() {
var R,V,B;
	for (var k = 0;k<NumMatrix;k++) {
		Vit[k] = Math.round(Math.random()*20)+15;
		var t = Math.round(screen.width/NumMatrix);
		var spaceD = k*t;
		var spaceA = k+1*t;
		Left[k] = Math.round(Math.random()*spaceA)+spaceD;
		Top[k] = Math.round(Math.random()*-600)-400;
		document.write('<div id="Mat'+k+'" style="position:absolute;left:'+Left[k]+'px;top:-400px"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">');
		for (var l = 0;l<14;l++) {
			if (l<=7) {
        		V=l/7*255 
        		if (l>=4.5) { 
           		 R=(l-4.5)/3*255; 
           		 B=(l-4.5)/3*255; 
        		} else {
           		 R=0; 
           		 B=0;  
       			}
			}
			if (l>=7) {
				var n = l-7
				var m = 7-n;
				V=m/7*255
				if (m>=4.5) {
				 R=(m-4.5)/3*255;
				 B=(m-4.5)/3*255;
				} else {
				 R=0;
				 B=0;
				}
			}
			document.write('<tr><td><font  size="4" face="Symbol" color="#'+conversion(R)+conversion(V)+conversion(B)+'"><b><div id="char'+l+'a'+k+'">W</div></b></font></td></tr>');
		} 
		document.write('</table></div>');
	}
Move();
}
function Move() {
	for (k=0;k<NumMatrix;k++) {
		Top[k]=Top[k]+Vit[k];
		if (Top[k]>screen.height) {
			Top[k]=Math.round(Math.random()*-600)-400;
			Vit[k]=Math.round(Math.random()*15)+10;
			Left[k]=Math.round(Math.random()*screen.width);
			eval("document.all.Mat"+k+".style.left=Left[k]+'px';");
		}
		eval("document.all.Mat"+k+".style.top=Top[k]+'px';");
		for (l=0;l<14;l++) {
			Letr = turn+l;
			if (Letr>=14) Letr-=14;
			eval("document.all.char"+l+"a"+k+".innerHTML='"+CARS[Letr]+"';");
		}
	}
turn++;
if (turn==14) turn=0;
setTimeout('Move()',1);
}

function AddCAR() {   
    var ReDoAddCar=1; 
    if (Buf.substr(0,4)=="<br>") {   
        document.all.txt.innerHTML=document.all.txt.innerHTML+"<br><p>"; 
        Buf=Buf.substr(4) 
    } else {
        if (Buf.substr(0,6)=="&nbsp;") {   
            document.all.txt.innerHTML=document.all.txt.innerHTML+"&nbsp;";    
            Buf=Buf.substr(6)  
        } else {   
            if (Buf.substr(0,5)=="<cls>") {   
                document.all.txt.innerHTML="";
                Buf=Buf.substr(5)
            } else {
                if (Buf.substr(0,7)=="<fondu>") {   
                    Txt=document.all.txt.innerHTML;
                    Buf=Buf.substr(7)
                    FonduLev=255;
                    doRapid_Fondu_noir();
                    ReDoAddCar=0;
                 } else {
				     if (Buf.substr(0,7)=="<titre>") {
						document.all.txt.innerHTML="";
						Buf="";
						FonduLev = 0;
						titre();
                     } else {
                        document.all.txt.innerHTML=document.all.txt.innerHTML+Buf.substr(0,1);  
                        Buf=Buf.substr(1);
                    }
                }
            }
        }
    }
    if (ReDoAddCar==1) {setTimeout("AddCAR()", Math.round(Math.random()*1)+40);} 
}
function doRapid_Fondu_noir() {   
    document.all.txt.innerHTML="<font color=\"00" + conversion(FonduLev) + "00\">" + Txt + "</font>";
    FonduLev=FonduLev-10;   
    if (FonduLev>0) {setTimeout("doRapid_Fondu_noir()", 41);} else {
        document.all.txt.innerHTML="";
        setTimeout("AddCAR()", Math.round(Math.random()*1)+1);
    }
}
function titre() {
document.all.txt.innerHTML="<center><b><font color=\"00" + conversion(FonduLev) + "00\" size=6>.&nbsp;:&nbsp;[&nbsp;M&nbsp;a&nbsp;t&nbsp;r&nbsp;i&nbsp;x&nbsp;&nbsp;1&nbsp;.&nbsp;4&nbsp;]&nbsp;:&nbsp;.</font></b><br><font color=\"00" + conversion(FonduLev) + "00\">Par delord_19</font></center>";
FonduLev=FonduLev+5;
if (FonduLev<256) {setTimeout("titre()", 20);}
}
setTimeout("AddCAR()", 1);
</script>
<body text="#00FF00" bgcolor="black" scroll="no" style="cursor:crosshair">
<font face="Courier New"><div id="txt" style="position:absolute;width:100%"> </div></font>
</body>
<script>
Creer();
</script>
</html>

A voir également

Ajouter un commentaire Commentaires
Messages postés
27
Date d'inscription
mercredi 23 août 2006
Statut
Membre
Dernière intervention
28 octobre 2008

bonsoir,
problème résolut, par contre je cherche comment modifier la longueur des lignes afin de les raccourcir.
merci
Messages postés
27
Date d'inscription
mercredi 23 août 2006
Statut
Membre
Dernière intervention
28 octobre 2008

Bonjour,
d'abbord merci pour ce code, ensuite il y a un detail qui me deplait, le curseur souris se transforme en viseur, peut on eviter cela?
merci d'avance la source date mais avec un peut de chance peut etre quelqun apssera t'il par ici ^^

ps: c'est vraiment un tres beau code.
Messages postés
1
Date d'inscription
dimanche 8 août 2004
Statut
Membre
Dernière intervention
8 août 2004

Salut delord_19 bravo pour ton code, mais le problème qui me pose c'est que je le veut en format vidéo tu ne serais pas comment faire par hazard j'ai essayer de le réaliser avec after effect avec un site ou il expliquais mais c'est trop mal expliquer si tu pourais m'aider ce serait gentil de ta part.
Messages postés
208
Date d'inscription
mardi 13 avril 2004
Statut
Membre
Dernière intervention
26 janvier 2009

merci, delord_19. je vais le faire, mais je ne peux pas te dire sur quel site je vais le mettre, ce n'est pas encore prevu. je pense que je le mettrais sur http://www.kidiwi.com/azeaze2/, mais seulement quand j'aurais fini mes mises à jour sur www.gondolin.new.fr.
Messages postés
12
Date d'inscription
vendredi 4 juin 2004
Statut
Membre
Dernière intervention
8 juin 2004

Salut loozcor alors pour ça il faut que tu modifie la fonction titre() :
- au début du script défini la variable step ( var step=5;)
- tu remplace "FonduLev = Fondulev + 5" par "FonduLev += step ;"
- aprés le "if (FonduLev<256) {setTimeout("titre()",20);}" rajoute
"else {step=-5;setTimeOut("titre()",5000);}"
ET voila, si ça marche pas c'est que j'ai oublié quelques chose alors redemande moi !
Afficher les 10 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.