Jeu de couleurs dans un tableau à 3 dimension

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 683 fois - Téléchargée 18 fois

Contenu du snippet

Un tableau à 3 dimensions(Plusieurs tableau de 2 dimensions) des couleurs existante sur un PC. Jusqu'à 2^24 soit 16 777 216 couleurs avec leur niveau de rouge vert et bleu(sur 255, 255, 255).

Source / Exemple :


<style type="text/css">
	
	table
	{
		
		border-collapse: collapse;
		
	}
	
	{
	td
		
		padding: 10px;
		
	}
	
</style>

<script type="text/javascript">

	function initColor( _divContent)
	{
		
		var a=1; 
		var b=12; 
		
		var max=256; 
		var x=0; 
		var y=0; 
		var z=0; 
		
		var div=Math.pow(2, (1/3*b)); 
		div = Math.round(div)-1; 
		var mult = max/div; 
		mult = Math.round(mult); 
		
		while(z <= div) 
		{ 
			
			var _table= document.createElement("table"); 
			// Ajoute la table 
			document.getElementById(_divContent).appendChild(_table); 
			
			if(a==1){_table.border="1"} 
			
			y=0; 
			while(y <= div) 
			{ 
				
				x=0; 
				// insère une ligne 
				var _row = _table.insertRow(y); 
				
				while(x <= div) 
				{ 
					
					// insère une cellule. 
					var _cell = _row.insertCell(x); 
					_cell.style.backgroundColor = "rgb("+x*mult+", "+y*mult+", "+z*mult+")"; 
					_cell.style.color = "rgb("+(max-x*mult)+", "+(max-y*mult)+", "+(max-z*mult)+")"; 
					if(a==1) 
					{ 
						
						_cell.innerHTML = (x*mult+"/"+y*mult+"/"+z*mult); 
						
					}
					
					x++; 
				}
				
				y++; 
			
			}
			
			z++; 
		} 
	}

</script>

<body onload="initColor('divContent')"> 

<div id="divContent" ></div> 
</body>

Conclusion :


/*Pas d'archive Zip*/

var a=1; <- Si 1 alors affichage du tableau, sinon ont affiche juste les couleurs
var b=9; <- De 1 à 24, 2^b couleurs (Plus exactement Math.round(2^(1/3*b)))^3) ATTENTION: Ne mettez pas trop haut sinon pauvre PC..

Merci à Zobibol pour le document.write() ;)

A voir également

Ajouter un commentaire

Commentaires

jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4
Bonjour,

Pour remplacer les document.write(), tu peux avoir dans ta page un
dont tu modifie le contenu HTML à l'aide de la propriété innerHTML ;)

JDMCreator
Niidhogg
Messages postés
43
Date d'inscription
dimanche 8 février 2009
Statut
Membre
Dernière intervention
11 octobre 2015

Ok, merci. Mais j'aurai encore une petite question. innerHTML() rajouter a la suite du contenue du div, ou le remplace ?
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4
innerHTML est une propriété et non une fonction. On l'écrira ainsi :
document.getElementById(id).innerHTML=nouvellevaleur;
Elle remplace le contenu. Pour l'ajouter, tu peux faire :
document.getElementById(id).innerHTML=document.getElementById(id).innerHTML+nouvellevaleur;

JDMCreator
Niidhogg
Messages postés
43
Date d'inscription
dimanche 8 février 2009
Statut
Membre
Dernière intervention
11 octobre 2015

document.write coriger.
LeFauve42
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

Salut,

C'est un bon exemple d'utilisation du DOM, bien que pas super utile (un background png elargi a la bonne taille peut faire la meme chose).
De plus, c'est quoi ces valeurs de 259 pour les composantes ? En principe, ca s'arrete a 255.
Pour info, il est generalement aquis qu'il vaut mieux se limiter aux 216 couleurs "WebSafe" pour plus de portablite, mais pourquoi pas si tu veux vraiment plus de couleurs.

A propos du code, j'ai deux remarques (et demi) :
- document.getElementById() est assez couteux. Tu aurais donc interet a cacher le resultat dans une variable plutot que de le reexecuter a chaque iteration de ta boucle.
- Dans ce type d'utilisation, tu peux remplacer tes while par des for.
Au lieu de :
y=0;
while(y <= div)
{
// Ton code ici
y++;
}
tu peux avoir:
for(y=0; y <= div; ++y)
{
// Ton code ici
}

- Derniere demi remarque: Quand tu n'utilises pas le code de retour, la preincrementation est plus rapide que la postdecrementation. En clair, utilise "++y" au lieu de "y++" (les navigateurs modernes devraient optimiser ca tout seuls, mais pense aux necessiteux qui n'ont qu'Internet Explorer pour naviguer :o) )

Eric

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.