Jeu de couleurs dans un tableau à 3 dimension

Soyez le premier à donner votre avis sur cette source.

Snippet vu 8 437 fois - Téléchargée 21 fois

Commenter

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
LeFauve42 Messages postés 239 Date d'inscription vendredi 20 octobre 2006 Statut Membre Dernière intervention 20 avril 2009
27 juil. 2009 à 11:52
Ah oui... j'ai oublie :
Ton algo pour trouver la couleur avec le meilleur contraste (pour la couleur du texte) n'est pas le plus efficace (regarde les couleurs vers le milieu du spectre).
Au lieu de mettre dans chaque composante "max-c" (si c est la valeur de la composante pour le background), essaie "(c>max/2)?0:max" (sans les "s bien sur :o) ).
En clair, si la composante est superieurs a la moitie de sa valeur, tu la mets a zero, sinon tu la mets au max.

Le rendu sera plus agreable.

Eric
LeFauve42 Messages postés 239 Date d'inscription vendredi 20 octobre 2006 Statut Membre Dernière intervention 20 avril 2009
27 juil. 2009 à 11:48
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
Niidhogg Messages postés 43 Date d'inscription dimanche 8 février 2009 Statut Membre Dernière intervention 11 octobre 2015 1
22 juil. 2009 à 20:17
document.write coriger.
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
22 juil. 2009 à 15:03
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 1
22 juil. 2009 à 14:50
Ok, merci. Mais j'aurai encore une petite question. innerHTML() rajouter a la suite du contenue du div, ou le remplace ?
S'inscrire maintenant

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.

Du même auteur (Niidhogg)