CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 06 01:10:43

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

EFFET MATRIX

Information sur la source

Note :

9,71 / 10

Catégorie :Graphique Niveau :Débutant Date de création :02/06/2003 Date de mise à jour :17/06/2003 17:15:58 Vu / téléchargé :19 139 / 1 095

Auteur : undine

Ecrire un message privé

Commentaire sur cette source (28)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Ce code génère un effet à la matrix : des lettres descendent verticalement de l'écran. La vitesse est presque potable.

Source

<html>
<head>
<style>
BODY {
cursor:default;
}
</style>
<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="#000000" 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>
</html>

<html>
<head>
<style>
	BODY {
		cursor:default;
	}
</style>
<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="#000000" 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>
</html>

Conclusion

C'est mon premier code sur ce site, je ne l'ai pas beaucoup commenté.
Si vous ne copiez que le code ci-dessus, je vous conseille de mettre la page contenant ce code dans un frame dont la hauteur et la largeur sont égales à 100% avec l'option scrolling="no" (cela enlèvera les barres de scrolling).
Résolution conseillée : 1028 X 768.
J'ai regardé ce que cela dnnait avec Netscape, étant donné que cela fait pitié à voir j'ai décidé d'intégrer le tab scroll à la balise body comme cela m'a été conseillé. Plus besoin de frame donc.

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

effet_matrix.htm 2 914 octets
effet_matrix2.htm 2 775 octets

Télécharger le zip

Sources du même auteur

MENU ANIMÉ

Toutes les sources de undine

Sources de la même categorie

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

DRAG & DROP VERS UN CANVAS par kazma

ROTATION D'UNE IMAGE, ANIMATION par william voirol

FRACTALES, FOUGÈRE, TRIANGLE, CARRÉ par william voirol

Toutes les sources de la catégorie Graphique

Commentaires et avis

Commentaire de revinc le 03/06/2003 09:37:16

le meilleur "effet matrix" de tout le site lol
pas mal du tout...

Commentaire de undine le 03/06/2003 11:23:50

merci revinc

Commentaire de GuilleW le 03/06/2003 18:07:39

hello ... et bien ... Que dire .. c'est magnifique ... on dira pas que tu à piquer les signes chinois pour cela mais ... ;)
je voudrai juste (si tu les accepte) te donner deux truc a rajoutter dans ton code .. pour le mettre a jour :

- Tu met un <body OnLoad="selec()"> pour eviter qu'on puisse selectionner ton code ... :)

<body OnLoad="selec()">
function selec(){
function disableselect(e){return false}
function reEnable(){return true}
document.onselectstart=new Function ("return false")
if (window.sidebar){document.onmousedown=disableselect
document.onclick=reEnable}}


- Et puis dans le style tu met un :
<style>
BODY {cursor:default;}
</style>

Comme sa ... plus de selection ni de pointeur | qui dit que c'est du texte... :)
Je dit Félicitation sa vaut un 20/10 et continue comme sa c'est du bon boulot chef :)
( PS. j'adore ton icone :) )

Commentaire de Clem le 03/06/2003 21:45:47

oui, c kler kil est meilleur que le mien !!!
juste une chose a dire (fo bien kan meme que je passe pas pour un idiot !!! lol) : rajoute juste dans le body de main.htm le tag scroll="no" et ça va enlever les scollbar, sans devoir passer par des frames !!!

Commentaire de undine le 04/06/2003 08:41:49

Bon alors déjà merci à tous pour vos commentaire.
Pour les signes chinois, je ne les ai pas piqué j'ai juste utilisé leurs code sur l'alphabet étendu (je crois que ça s'appelle comme ça). C'est l'équivalent du code ascii mes codé sur 4 octet je crois.
Regarde mon code, je l'ai utilisé à la ligne 27 et 28 : tu fais précéder le code de la lettre de &# et tu rajoute un ; à la fin (comme pour les caractères spéciaux). La je crois que j'ai utilisé les caractères chinois (j'ai pioché aléatoirement dans les 5000 premiers mais il y a en a plus 20000 !!!) mais il y a aussi des caractère arabes hébreu ...
Pour les visialiser tu peut te creér un programme, tu va voir c'est impressionnant tous les caractères qu'il y a !!!

En suite je suis passé par des ma

Commentaire de undine le 04/06/2003 08:48:00

Oups je me suis trompé de touche.
Je disais donc que j'ai utilisé des frames car le tag scroll n'est compatible qu'avec Internet Explorer.

Pour le pointeur de la souris, je le fais dès que possible.

Encore merci pour vos commentaires

Commentaire de revinc le 04/06/2003 13:59:02

tu saurais pas où trouver une liste des caractères &#xxx; parce que ça m'intéresse ?

Commentaire de Clem le 04/06/2003 16:51:29

pour avoir une liste des caractères, suffit de la faire soit meme :
<script language="Javascript">
document.write("<table border="0">");
for (var i=1; i<10000; i++) {
document.write("<tr><td><font color="#00AA00">&#"+i+";</font></td><td><font color="#0000AA">&#"+i+";</font></td></tr>");
}
document.write("</table>");
</script>

Commentaire de Clem le 04/06/2003 16:55:08

arg, vbfr transforme mes " par des " !!!
bon, voici une correction :
<script language="Javascript">
document.write("<table border='0'>");
for (var i=1; i<10000; i++) {
document.write("<tr><td><font color='#00AA00'>&#"+i+";</font></td><td><font color='#0000AA'>&#"+i+";</font></td></tr>");
}
document.write("</table>");
</script>

Commentaire de revinc le 04/06/2003 16:57:23

c bon c les antislashs que ce cher javascriptfr ne prend pas.
ta solution, c tout con, j'aurais du y penser.

merci en tout cas...

++

revinc

Commentaire de panpan le 10/06/2003 21:00:48

J'aurai moi aussi une petite question, serais-ce possible de faire en sorte que à la place des cignes chinois qui défile, je puisse inserer un mot de 14 caractère et dans les colones qui tombe???

Merci d'avance

Panpan

Commentaire de revinc le 11/06/2003 08:05:03

panpan > pourkoi pas mais ça va être plutôt chaud, il va falloir recoder une bonne partie du script car les caractères sont choisis au hasard..

Commentaire de panpan le 11/06/2003 21:27:58

Et tu suarais me dire comment faire, et ce que je dois faire??? ce serais cool.

Commentaire de undine le 12/06/2003 08:43:44

En fait ç va pas être trop dur.
LE but c'est d'initialiser la matrice correctement et et aprés de géner les bonnes lettres durant l'effet

D'abord tu supprime les ligne 29 à 36 et tu les remplace par :
for (a=0 ; a<nbr_col ; a++)
{
'ici ii te faut initialiser les colonnes avec ton mot, exemple ton mon mot est undine tu initialiser avec : matrice[a][0]='u'; matrice[1][1]='n';...;matrice[a][5]='5';matrice[a][6]=' ';...et que des espace jusqu'a la fin(tu peut aussi décaler par centrer to mot)'
}

Aprés tu supprime les lignes de la 52 à la 58.
Normalement ça devrait marcher mais la prochaine fois essai de chercher tout seul, c'est plus marrant et ça prouvera que tu maitrise l'algo (ce qui te permettra de le modifier comme tu veux).

Commentaire de panpan le 16/06/2003 08:58:40

je te remercie beaucoup, tu a raison, mais le prob c'est que je débute, j'arrive déjà a modifier dertaine choses, mais certaines autres c'est encore pas mal compliqué pour moi. Alors j'aprend gentiment.

Merci encore.

@++

Commentaire de undine le 16/06/2003 12:39:55

Il y a un mois et demi je ne connaissait javascript que de nom mais bon, je sais ce que s'est que de devoir comprendre un algorithme (complexe) codé par quelqu'un d'autre donc ne t'en fait pas ma dernière n'était pas méchante rassures-toi.

Commentaire de panpan le 16/06/2003 17:53:40

Merci pour ton idée de modif pour le code, mais j'ai essayer, ça ne marche pas. ça fait un truc trop bizzard.

Regarde:

http://www.calipanpan.ch/matrix4.php3

@++

Commentaire de undine le 17/06/2003 09:05:56

Tu es sur ? Parce que chez moi ça marche.
Tu as 3 choses à faire :
1 - supprime le code suivant :
    for (b=0 ; b<nbr_car ; b++)
      {
        strtemp = "";
        num_lettre = 19968 + Math.floor(Math.random()*5000);
        strtemp = "&#" + num_lettre + "; ";
        matrice[a][b] = strtemp;
      }
qui se trouve aux lignes 24 à 30 du code que tu as dans le zip ou aux lignes 30 à 36 du code ci-dessus et dans le for (a=0...)qu'il te reste tu doit initialiser une colonne entière (n'oublie pas de case ou tu va voir des "undifined" s'afficher à l'écran).

2 - tu supprime (ou met en commentaire) le code suivant :
for (b=0 ; b<nbr_car ; b++)
{
strtemp = "";
num_lettre = 19968 + Math.floor(Math.random()*5000);
strtemp = "&#" + num_lettre + "; ";
matrice[a][b] = strtemp;
}
qui se trouve aux lignes 45 à 51 du code téléchargé ou aux lignes 52 à 58 du code ci-dessus.

3 - remplace les -23 et 23 des lignes 52 et 59 du code téléchargé par -19 et 19. C'est un détail mais si tu ne le fais pas l'effet sera moins jolie (je te laisse voir ce que ça fait par toi-même).

A oui une dernière chose remplace la ligne 68 du code téléchargé par la ligne suivante :
strtemp += "<font Color=" + coul_deg[b] + "> " + matrice[a][num_deg] + " </font>";

La ça devrait marcher.

Commentaire de undine le 17/06/2003 09:07:37

Pour la dernière ligne fait d'abord un copier coller dans le bloc-notes

Commentaire de panpan le 17/06/2003 12:49:21

j dois vraiment etre un incompétant, car ça ne marche tjr pas. j sais pas ce que je fait faut. tu pourais pas me donnée l'url de l'endroit ou tu l'a placé, pour que je puisse voir ton code stp.

merci

@++

Commentaire de undine le 17/06/2003 17:18:39

télécharge le zip et le fichier c'est effet_matrix2

Commentaire de WindPowa le 26/05/2004 02:59:33

Dis c'est aussi cool ton "truc bizarre" sur le site http://www.calipanpan.ch/matrix4.php3 !

Commentaire de undine le 26/05/2004 09:00:35

??? J'ai pas tout compris à ton message (c'est le "truc bizarre dont tu parle).
En tout cas si tu te demande si mon script fait la même chose que sur le site dont tu a donné l'adresse et bien pas tout à fait, tu n'as qu'a voir la capture d'écran pour te faire une idée.

Commentaire de WindPowa le 26/05/2004 21:48:53

Mais non je parlais du truc bizarre dont a parlé panpan...

Et il a donné une adresse pour voir cet "effet bizarre"...
C'a n'a aucun lien avec ta source !!

Commentaire de Snake75015 le 03/07/2004 10:14:44

Bonjour,

J'aimerai bien mettre cet effet Matrix en fond d'écran mais je ne sais pas comment faire. Mon site est http://www.actujeuxvideo.com !

Aidez-moi, svp !

Commentaire de ayoud le 14/09/2004 07:07:40

Bonjour, je trouve ce script vraiment très bien fait. Mais j'ai un petit probleme je l'ai essayé sur 2 machine différentes et sur la première ça marche très bien mais sur la deuxième j'ai des des petit rectangle au lieu des caractère chinois et c'est tres lent. je n'est pas de connexion internet sur cet ordinateur est ce que quelqu'un saurait d'ou vient le problème en sachant que j'ai installé java 2 Runtime Environnement et que ça n'a rien changé. Merci de vos réponse.

Commentaire de undine le 14/09/2004 13:52:16

Pour les rectangles c'est normal, c'est parce que sur ta deuxième machine les caractères asiatiques n'étaient pas gérés. Tu as deux solution :
- Soit tu instanle les polices asiatiques sur ton ordinateur (normalement dès qu'il en a besoin ton navigateur internet te demande si tu veux instanler telle ou telle police afin que la page s'affiche correctement).
- Soit tu ne fait afficher à l'effet que les caractères de la table ASCII. Pour faire cela c'est très simple. Il y a deux ligne dans le code qui sont identiques et qui ont la syntaxe suivante :
"num_lettre = 19968 + Math.floor(Math.random()*5000);"
Il te suffit de remplacer 19968 par 32 et 5000 par 234.
Pour ce qui est des ralentissements cela doit venir de la puissance de ta machine. En effet le Javascript est TRES gourmant en ressource machine, notamment en ce qui concerne la concaténation des chaines de caractères qui sont légions dans mon programme. J'ai essayé d'optimiser le code mais c'est assez difficile car il me faut utiliser des fonctions très spéciales.
Enfin pour java c'est normal que cela ne te change rien étant donné que mon script est en javascript et non en java. Même si les noms se ressembles ces deux langages n'ont rien à voir (il y a autant de différences voir plus avec java qu'avec le C ou le C++).

Commentaire de ayoud le 23/09/2004 12:25:32

Merci, pour tes réponses et pour la solution.
J'ai une autre petite question, est ce qu'il y a la possibilité d'afficher la barre de défilement, car quand je place ton code sur une page, je n'ai plus la barre de défilement, du coup je ne vois que la partie haute de la page.
Merci encore!!!

Ajouter un commentaire

Nos sponsors

Derniers Blogs

CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY

MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice

Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks

[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET

IIS7 - COMPRESSION GZIP par cyril

Forum

METTRE L'ARRIERE PLAN DE SITE WEB CHANGEABLE par hassen87

RE : AFFICHER UN IFRAME SELON UN SELECT par pascalito92140

RE : VéRIFICATION FORMULAIRE par jmeunier

RE : AFFICHER UN TABLEAU CACHé SUR UNE IMAGE par Julien39

COPIER / COLLER JAVASCRIPT PHP par fregeal

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche referenceur astucieux
Budget : 1 500€
Recherche expert advisor sous mql4 hedging
Budget : 200€
Creation boutique en ligne iphone- android - Republication.
Budget : 4 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011