Correctif d'un script matrix sous ff

Version imprimable

26/09/2014, 09h46
MatrixiaN

Correctif d'un script matrix sous ff

Bonjour, je suis venu ici pour solliciter votre aide afin de corriger un script qui décorait mon site internet il y a une dizaine d'années :calim2: et que j'adorais, il s'agissait d'une petite pluie de matrice (seulement composé de 1 et de 0) qui se calait à droite des pages et qui coulait tout doucement indéfinement.

Je me suis toujours débrouillé pour bidouiller le mysql, le php, le html, le design, mais je suis dans l'impasse totale pour ce qui est de corriger un javascript et le rendre compatible sous firefox. J'ai tenté Firebug mais ça ne m'a pas éclairé. J'ai essayé aussi de comprendre le langage et j'ai appris qu'il y a plein de choses qui merdouillaient, notamment avec les document.write contenu dans le code etc...

ce que je sais c'est qu'il peut certainement fonctionner mais qu'il est très très vieux et son codage doit être totalement infâme.

je voudrais donc trouver quelqu'un capable de le modifier de A à Z pour le rendre parfaitement fonctionnel avec les normes html d'aujourd'hui et compatible avec n'importe quel navigateur

Je tiens à préciser que je n'en suis pas le créateur, et que je suis fan de l'effet donné par ce script, c'est le meilleur javascript de décoration que j'ai jamais trouvé (et pourtant j'en ai vu des tonnes qui envoyaient du lourd sur le net mais rien de tel que la simplicité)

il y a plein de scripts et d'effets matrix sur le net mais je les trouve tous inutiles et juste tape-à-l'oeil :roll:

Donc voilà, ça donne ça avec mon aperçu d'éditeur html (ça marche sous ie mais pas firefox)

page de démo (l'effet marche nikel sous ie) : http://matrixemxs.cluster007.ovh.net/matrix.php

2 gros screenshots :

http://matrixemxs.cluster007.ovh.net/gni.png

http://matrixemxs.cluster007.ovh.net/gni2.png

VOICI MON CODE ORIGINEL QUI NE MARCHE PLUS SOUS FIREFOX MAIS TOUJOURS SUR IE (seulement maintenant, qui utilise ie ? :/ ) :

(à placer après la balise body, marche sous ie et n'importe quel aperçu d'éditeur html mais pas sous firefox)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<SCRIPT language=JavaScript>
if (document.all){
Cols=4;
Cl=20;
Cs=15;
Ts=14;
Tc='#008800';
Tc1='#00ff00';
MnS=6;
MxS=6;
I=Cs;
Sp=new Array();S=new Array();Y=new Array();
C=new Array();M=new Array();B=new Array();
RC=new Array();E=new Array();Tcc=new Array(0,0);
document.write("<div id='Container' style='position:absolute;top:0;right:-"+Cs+"'>");
document.write("<div style='position:relative'>");
for(i=0; i < Cols; i++){
S[i]=I+=Cs;
document.write("<div id='A' style='position:absolute;top:0;font-family:comic sans ms;font-size:"
+Ts+"px;right:"+S[i]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden'></div>");
}
document.write("</div></div>");
 
for(j=0; j < Cols; j++){
RC[j]=1+Math.round(Math.random()*Cl);  
Y[j]=0;
Sp[j]=Math.round(MnS+Math.random()*MxS); 
for(i=0; i < RC[j]; i++){
 B[i]='';
 C[i]=Math.round(Math.random()*1)+' ';
 M[j]=B[0]+=C[i];
 }
}
function Cycle(){
Container.style.top=window.document.body.scrollTop;
for (i=0; i < Cols; i++){
var r = Math.floor(Math.random()*Tcc.length);
E[i] = '<font color='+Tc1+'>'+Tcc[r]+'</font>';
Y[i]+=Sp[i];
 
if (Y[i] > window.document.body.clientHeight){
 for(i2=0; i2 < Cols; i2++){
 RC[i2]=1+Math.round(Math.random()*Cl);  
 for(i3=0; i3 < RC[i2]; i3++){
 B[i3]='';
 C[i3]=Math.round(Math.random()*1)+' ';
 C[Math.floor(Math.random()*i2)]=' '+' ';
 M[i]=B[0]+=C[i3];
 Y[i]=-Ts*M[i].length/1.5;
 A[i].style.visibility='visible';
 }
 Sp[i]=Math.round(MnS+Math.random()*MxS);
 }
}
A[i].style.top=Y[i];
A[i].innerHTML=M[i]+' '+E[i]+' ';
}
setTimeout('Cycle()',20)
}
Cycle();
}
<!--Fin du Script-->
</SCRIPT>

26/09/2014, 11h46
devyan
Bonjour,

Étant donné que tout le code est encadré de if (document.all) c'est absolument normal qu'il ne fonctionne que sur IE. :mrgreen:

Ensuite :
- Le code tire partie des "largesses" de IE pour l'accès aux éléments.
  Conteneur.style et A[i]
- Firefox n'aime pas les affectations de position sans unité.
  A[i].style.top = Y[i];
26/09/2014, 13h53
SpaceFrog

Voici une implémentation d'un petit plugin Jquery qui rend pas mal
http://fiddle.jshell.net/rvh2ca69/
26/09/2014, 21h16
Watilin

J'avais commencé à essayer de « traduire » le code mais les noms de variables de maximum 3 lettres ça m'a découragé. C'est comme si le code était obfusqué. JavaScript c'est pas Fortran hein, on peut choisir des noms de variable explicites !
27/09/2014, 13h30
sekaijin

voyant document.write j'ai abandonné

ce code est bon pour la poubelle.
A+JYT
27/09/2014, 18h47
MatrixiaN

Merci de votre part juste ne serait-ce que pour vous y être intéressé.

Surtout à toi Watilin ;):mrgreen:

C'est dommage que vous abandonniez car le rendu sur un site (pour l'avoir expérimenté) est juste superbe

Mais n'y connaissant rien en javascript et passant moi-même des heures la tête dans les codages je peux vous comprendre.

Après c'est sûr, je me doute que le créateur du script a rien fait pour rendre les choses faciles mais je vous demande de ne pas baisser les bras :roll::ptdr:

Encore une fois, je rappelle que je n'en suis pas l'auteur, ce "code" "poubellique" ( ;) sekaijin ) n'est pas de moi

J'en ai trouvé un autre qui lui ressemblait et qui fonctionne sous firefox mais il ne donne pas l'effet escompté et est buggé (lignes qui s'inversent, fenêtré, vitesse folle, apparition de scrollbar intempestive lors de la mise en place vers la droite etc...)

mais il y a déjà quelques trucs corrigés dans le codage général

si vous parvenez à le reconfigurer (j'ai testé mais j'ai eu des problèmes avec beaucoup de petits trucs), il faudrait que le code se cale seulement avec 4-5 lignes à droite d'une page (ça je peux le faire), à une vitesse lente (ça je peux le faire), et en continue du top au bottom de la page (ça je peux pas !!! et non pas dans une fenêtre qui limite toute son utilisation comme ici, mais ça c'est peut-être dû aux normes de firefox et donc peut-être impossible à mettre en place) sans faire apparaitre une scrollbar et surtout sans que certaines lignes aillent en sens inverse mais uniquement vers le bas, mais ça je pense que c'est un souci dans le codage de base et pas la configuration du script

voici une page de démo : http://matrixemxs.cluster007.ovh.net/matrix4.htm

http://matrixemxs.cluster007.ovh.net/gni5.png

voici son code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script langage="Javascript">
	var nbr_col = 57;//nombre de colonnes
	var nbr_car = 28;//nombres de lignes(nombre de caractères par colonne)
 
	var nbr_degrade = 10;//nombre de couleur dans le dégradé du noir vers le blanc en passant par le vert
	var coul_deg = new Array(nbr_degrade);//tableau qui contient les couleur du dégradé
	coul_deg[0]="#003300";coul_deg[1]="#006600";coul_deg[2]="#009900";coul_deg[3]="#00CC00";coul_deg[4]="#00FF00";
	coul_deg[5]="#33FF33";coul_deg[6]="#66FF66";coul_deg[7]="#99FF99";coul_deg[8]="#CCFFCC";coul_deg[9]="#FFFFFF";
 
	var nbr_car_aff = new Array(nbr_col);//indique combien de caractèers on doit afficher dans une colonne(nombre de lignes)
	var matrice = new Array(nbr_col);
 
	for (a=0 ; a<nbr_col ; a++)
		matrice[a] = new Array(nbr_car);
 
	for (a=0 ; a<nbr_col ; a++)
		for (b=0 ; b<nbr_car ; b++)
			{
				strtemp = "";
				num_lettre = 19968 + Math.floor(Math.random()*5000);
				strtemp = "&#" + num_lettre + "; ";
				matrice[a][b] = strtemp;
			}
 
	for (a=0 ; a<nbr_col ; a++)
		nbr_car_aff[a] = 10000;
 
	function aff()
	{
		var num_deg;
		var strtemp;
 
		for (a=0 ; a<nbr_col ; a++)
		{
			if (nbr_car_aff[a] > nbr_car + nbr_degrade)
			 {
				nbr_car_aff[a] = Math.floor(Math.random()*4*nbr_car) - 5*nbr_car;
				for (b=0 ; b<nbr_car ; b++)
				{
					strtemp = "";
					num_lettre = 19968 + Math.floor(Math.random()*5000);
					strtemp = "&#" + num_lettre + "; ";
					matrice[a][b] = strtemp;
				}
				document.getElementById("col" + a).style.pixelTop = -23;
				document.getElementById("col" + a).innerHTML = "";
			}
			else
				nbr_car_aff[a] ++;
 
			if (nbr_car_aff[a] > nbr_degrade)
				document.getElementById("col" + a).style.pixelTop += 23;
 
			if (nbr_car_aff[a] >0)
			{
				num_deg = nbr_car_aff[a]-nbr_degrade;
				strtemp = "";
				for (b=0 ; b<nbr_degrade ; b++)
				{
					if ((num_deg >= 0)&&(num_deg<=nbr_car-1))
						strtemp += "<font Color=" + coul_deg[b] + ">" + matrice[a][num_deg] + "</font>";
					num_deg++;
				}
				document.getElementById("col" + a).innerHTML = strtemp;
			}
 
		}
	}
 
function select(){
	function disableselect(e){return false}
	function reEnable(){return true}
	document.onselectstart=new Function ("return false")
	if (window.sidebar){
		document.onmousedown=disableselect
		document.onclick=reEnable
	}
}
 
</script>
</head>
<body text="#FFFFFF" bgcolor="#336699" OnLoad="select()" scroll="no">
<div id="label" style="position: absolute; left: 200px; top: 10px"></div>
<script langage="Javascript">
	for(a=0 ; a<nbr_col ; a++)
		document.write('<DIV STYLE="position: absolute; width: 10px; height: 800px; top: 0px; left: ' + a*16 + 'px" ID="col' + a + '"></DIV>');
	clkid = setInterval("aff();", 10);
</script>
</body>

27/09/2014, 19h18
yahiko

Je ne comprends pas pourquoi tu ne t'inspires pas du code posté par SpaceFrog. Il m'a l'air très bien et surtout il fonctionne :)
27/09/2014, 19h32
MatrixiaN

Citation:

Envoyé par yahiko

Je ne comprends pas pourquoi tu ne t'inspires pas du code posté par SpaceFrog. Il m'a l'air très bien et surtout il fonctionne :)

je ne peux pas mettre ce code sur mes pages car le fond est noir alors que le mon background est bleu, il est aussi très très lent, saccadé, avec des lettres grosses et difformes, l'effet de pluie (ou plutot de "lourde descente torturée) est ratée, ça ne coule pas fluidement ...

désolé Spacefrog mais merci beaucoup pour ta réponse :roll: mais il ne se fondra pas dans les pages et dans l'ensemble du contenu de mes pages, il n'y a pas harmonie, ça n'a pas l'effet apaisant que je recherche (voir screens plus haut)

mais je vous remercie pour chaque réponse et suggestion de votre part, je suis déjà content que l'on s'intéresse à mon sujet
27/09/2014, 20h09
NoSmoking

Bonjour,
reprends ton code en te servant des méthodes de construction du DOM, cela devrait te prendre moins de temps que d'en chercher un qui te convienne parfaitement.

Citation:

je ne peux pas mettre ce code sur mes pages car le fond est noir alors que le mon background est bleu,

:koi: change la couleur du fond!

IMPORTANT : avant de reprendre ton code mets un DOCTYPE à ton document, dans 10 ans il aura plus de chance de marcher
28/09/2014, 05h05
MatrixiaN

Je savais pas si changer la couleur de fond sur celui-là était possible, je l'ai pas vraiment exploré.

Je pense que comme tu dis Nosmoking, au pire je vais mettre les mains dans le cambouis et apprendre ces méthodes.

pour le doctype c'est noté.

La partie construction est des plus triviale
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var tabElem = [], oBody = document.body, oDiv, oDest = document.createElement('DIV'); // création des éléments for (i = 0; i < Cols; i++) { oDiv = document.createElement('DIV'); oDiv.className = 'matrix'; oDiv.style.right = i*Cs +'px'; oDest.appendChild( oDiv); // récup. référence pour gestion tabElem.push(oDiv); } // ajout élément final au BODY oBody.appendChild( oDest);
tu noteras que
- tu peux passer par une classe pour les DIVs créées ce qui est plus souple
- il ne faut pas oublier de spécifier les unités, trop souvent signe de bug
- il n'est point nécéssaire d'ID, qui doivent être UNIQUE dans une page

29/09/2014, 16h05
devyan

Citation:

Envoyé par Watilin

J'avais commencé à essayer de « traduire » le code mais les noms de variables de maximum 3 lettres ça m'a découragé. C'est comme si le code était obfusqué. JavaScript c'est pas Fortran hein, on peut choisir des noms de variable explicites !

Moi je l'ai fait fonctionner vendredi matin : http://jsfiddle.net/ymx80m5L/

Mais je n'étais pas sûr que c'était vraiment lui rendre service que de faire fonctionner ce code :aie:

Plus sérieusement, j'ai été dérangé puis j'ai oublié :oops:
29/09/2014, 17h25
MatrixiaN

c'est bon les gars !!!! :mrgreen: il y a quelqu'un qui me l'a refait. Le résultat est parfait ;) ;) ;)