FONDU DE COULEURS

WhiteMagus
Messages postés
764
Date d'inscription
lundi 21 juin 2004
Statut
Membre
Dernière intervention
5 février 2010
- 6 mars 2005 à 16:53
WhiteMagus
Messages postés
764
Date d'inscription
lundi 21 juin 2004
Statut
Membre
Dernière intervention
5 février 2010
- 10 mars 2005 à 15:08
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/29953-fondu-de-couleurs

WhiteMagus
Messages postés
764
Date d'inscription
lundi 21 juin 2004
Statut
Membre
Dernière intervention
5 février 2010

10 mars 2005 à 15:08
Ça y est, j'ai compris. Je suis un peu long. Donc excuse moi Peg' de pas avoir compris tout de suite et merci SuperDevy d'avoir été si patient.
Je vais essayer de me mettre plus sérieusement au binaire qui semble offrir une alternative "simple" face aux limites de Flash.
En tout cas, merci bien de m'avoir expliqué.
@+ !
Blacknight91titi
Messages postés
1732
Date d'inscription
jeudi 17 juin 2004
Statut
Membre
Dernière intervention
9 mars 2015
2
9 mars 2005 à 22:30
Flash convertit après 0000 0111 1010 0101 1011 1100 en hexadecimal ou il faut utiliser une comande ?
SuperDevy
Messages postés
842
Date d'inscription
dimanche 24 novembre 2002
Statut
Membre
Dernière intervention
2 juillet 2007

9 mars 2005 à 22:25
/!\ NE LIT PAS LE PRECEDENT POST :<

Pour chaque couleur, tu choisis une valeur (décimale) entre 0 et 255, ce qui correspond en hexa à 0 ou FF. Pour des raisons certainement pratiques, ces trois valeurs sont juxtaposées.

En fait, tu comprendras peut-être mieux si je te dit que faire x<<8, c'est pareil que de faire x*256 car 2=0x100.

On fait donc :
rouge*0x10000 + vert*0x100 + bleu
SuperDevy
Messages postés
842
Date d'inscription
dimanche 24 novembre 2002
Statut
Membre
Dernière intervention
2 juillet 2007

9 mars 2005 à 22:23
Pour chaque couleur, tu choisis une valeur (décimale) entre 0 et 255, ce qui correspond en hexa à 0 ou FF. Pour des raisons certainement pratiques, ces trois valeurs sont juxtaposées.

En fait, tu comprendras peut-être mieux si je te dit que faire x<<8, c'est pareil que de faire x*255 car 255=0xFF.

On fait donc :
rouge*255*255 + vert*255 + bleu
Blacknight91titi
Messages postés
1732
Date d'inscription
jeudi 17 juin 2004
Statut
Membre
Dernière intervention
9 mars 2015
2
9 mars 2005 à 18:35
C'est pour avoir les trois couleurs.
RVB
8 chiffres pour R etc...
En hexa y a besoin de 2*4 chiffre pour avoir le R
pareil pour les autres
Donc sa fait 2*4*3 = 24 chiffres.
WhiteMagus
Messages postés
764
Date d'inscription
lundi 21 juin 2004
Statut
Membre
Dernière intervention
5 février 2010

9 mars 2005 à 10:17
Ouaip ça serait sympa. Mais même en relisant tes explications, je n'ai pas compris pourquoi des décimales définies sur le même intervalle, qui peuvent avoir les mêmes valeurs doivent être décalées différement.
C'est juste ça.
@+ !
pegase31
Messages postés
6138
Date d'inscription
dimanche 21 décembre 2003
Statut
Modérateur
Dernière intervention
4 septembre 2013
11
8 mars 2005 à 19:08
lol .. je vais finir par faire une source explicative ! ;)
Blacknight91titi
Messages postés
1732
Date d'inscription
jeudi 17 juin 2004
Statut
Membre
Dernière intervention
9 mars 2015
2
8 mars 2005 à 18:03
Enfait Pegase pour comprendre ton explication ilfaut avoir des bases en binaire...
Or comme on en a pas (enfin j'en AVAIS pas ;) )
Bin on a du mal a comprendre.
Pour vraiment expliquer il faudrai refaire complètement le cours que tu m'a fait... autrement dit pas mal de page.
Donc un certain nombre de personne ne la comprendront pas. Il faut juste acquérir les bases sur le binaire.
pegase31
Messages postés
6138
Date d'inscription
dimanche 21 décembre 2003
Statut
Modérateur
Dernière intervention
4 septembre 2013
11
8 mars 2005 à 17:09
WhiteMagus, ça sert à quoi que je me sois donné la peine de faire une explication ? lol
Elle n'est pas assez claire ?

Je peux la reprendre si besoin avec plus d'explications ..:p

Peg'
WhiteMagus
Messages postés
764
Date d'inscription
lundi 21 juin 2004
Statut
Membre
Dernière intervention
5 février 2010

8 mars 2005 à 14:16
Je n'ai que des connaissances limités en binaire (je fais parti de la génération qui croit, à tort apparement, que c'est obsolète) mais j'aimerai quand même ajouter un truc pour les novices. Car c'était une source de confusion pour moi lorsque j'ai commencé : Ne pas confondre les bytes et les bits. "Byte", c'est le mot anglais pour octet. Donc 1 byte = 1 octet = 8 bits.
D'ailleurs, la racine d'octet nous évite de faire des erreurs bêtes.
C'est pas essentiel, mais il est bon de le savoir.

Quant à la méthode de SuperDavy, je reviens dessus.
Je comprends pas pourquoi tu décales la valeur r1 de 16 et la valeur v1 de 8. Toutes deux peuvent avoir le même nombre. J'ai des connaissances limités en binaire, peut-être que ça vient de là. Mais la logique (mais Dieu sait combien de fois Flash l'a détruit) voudrait que l'on décale les deux chiffres à même valeur.
Donc j'aimerai bien comprendre, même si je doute comprendre les subtilités du binaire immédiatement. Merci d'avance.
@+ !
Blacknight91titi
Messages postés
1732
Date d'inscription
jeudi 17 juin 2004
Statut
Membre
Dernière intervention
9 mars 2015
2
7 mars 2005 à 22:31
Désoler SuperDevy
Mais je le metrai une fois l'avoir compris (vace l'aide de pegase)
pegase31
Messages postés
6138
Date d'inscription
dimanche 21 décembre 2003
Statut
Modérateur
Dernière intervention
4 septembre 2013
11
7 mars 2005 à 21:46
tu as encore dit une connerie :

1 octet = 8 bits .. c'est 1 chiffre hexa qui pèse 4 bits ..

Tu fatigues ? :p
SuperDevy
Messages postés
842
Date d'inscription
dimanche 24 novembre 2002
Statut
Membre
Dernière intervention
2 juillet 2007

7 mars 2005 à 21:27
Désolé d'avoir dit une connerie, 1 caractère pèse 1 octet, soit 4 bit.
SuperDevy
Messages postés
842
Date d'inscription
dimanche 24 novembre 2002
Statut
Membre
Dernière intervention
2 juillet 2007

7 mars 2005 à 21:23
Raa, quelle déception : je de donne un solution extrêment simple et efficassen et tu refuses de l'utiliser :c(

Et fait, la solution de culroussi (c'est quoi ce pseudo ?) est la même que la mienne dans le principe, sauf que culroussi travail sur des chaînes de caractères (1 car = 128 bits) et fait des opérations lourdes alors que moi je traite directement les nombres avec des outils au niveau bit (<< est plus rapide que +).

NB: j'ai vu cette astuce sur une source de Moock.
pegase31
Messages postés
6138
Date d'inscription
dimanche 21 décembre 2003
Statut
Modérateur
Dernière intervention
4 septembre 2013
11
7 mars 2005 à 19:39
Je me permet d'étaler un peu ma science pour expliquer le code de SuperDevy (je me permet, tu m'en veut pas ?) Car je le trouve excélent de simplicité AS et franchement plus optimisé, tu meurs :

Alors pour ceux qui ne connaissent pas l'opréateur "<<", c'est un opérateur de décallage au niveau du bit. Le Bit c'est la conversion binaire d'un nombre, soit un nombre en base 2 (contrairement à la base 10 allant de 0 à 9, le binaire est en 0 ou 1)

Donc, x = 7 << 2 donnera 38 car :
7 Binaire = 111 ; on décalle de 2 bits sur la droite, soit 11100 (en fait, on rajoute 2 "0" derrière)

Il faut savoir aussi que les nombres Hexa de couleurs sont codés sur 2 nombres (ex: 7E) et qu'un caractère hexa est codé sur 4 bits. Donc si on fait le calcul pour une couleur hexa (ex: 07A5BC) sera codée sur 6x4=24 bits, soit 3x8 bits (07 A5 BC) ... vous suivez toujours ?

En binaire, 07 A5 BC donnera :
"0000 0111 1010 0101 1011 1100"

07 = 0000 0111 ; cependant, il faut le décaller de 16 bits sur la droite pour bien le placer
A5 = 1010 0101 ; il faut les déplacer de 8 bits pour bien les placer :

soit :
0000 0111 0000 0000 0000 0000 + // décimal: 458752 - Hexa: 07 00 00
1010 0101 0000 0000 + // décimal:42240 - Hexa: A5 00
1011 1100 // décimal:188 - Hexa: BC
= 0000 0111 1010 0101 1011 1100 ! décimal:501180- Hexa: 07 A5 BC

soit en Hexa : 07 00 00 + A5 00 + BC = 07 A5 BC

mais tout celà se passe au niveau décimal :
458752 + 42240 + 188 = 501180

Donc je trouve son systeme génial et tout bonnement impressionnant de simplicité ...

Peg'
Blacknight91titi
Messages postés
1732
Date d'inscription
jeudi 17 juin 2004
Statut
Membre
Dernière intervention
9 mars 2015
2
7 mars 2005 à 19:25
Merci pour vos conseil, j'ai mis la source a jour.
Pour ta méthode SuperDevy je n'ai pas encore étudier les maths binaire....
Mais merci quand même.
SuperDevy
Messages postés
842
Date d'inscription
dimanche 24 novembre 2002
Statut
Membre
Dernière intervention
2 juillet 2007

7 mars 2005 à 16:14
Une couleur, c'est un Nombre !
L'affichage de ce nombre en hexadécimal n'est que pratique ...

Voila ce qu'il faut mettre :
couleur_hexa = (r1 << 16)+(v1 << 8)+(b1);
culroussi
Messages postés
12
Date d'inscription
vendredi 30 avril 2004
Statut
Membre
Dernière intervention
17 octobre 2005

7 mars 2005 à 15:25
En fait, il arrive que je m exprime mal, donc plutot que de donner des explications, blacknight essaie ca, normalement ca ne bugera plus :

Remplace la ligne : "couleur_hexa = "0x"+String(r1.toString(16))+String(v1.toString(16))+String(b1.toString(16))"

par :

var _r1 = (r1 < 16) ? ("0" + r1.toString(16)) : r1.toString(16);
var _v1 = (v1 < 16) ? ("0" + v1.toString(16)) : v1.toString(16);
var _b1 = (b1 < 16) ? ("0" + b1.toString(16)) : b1.toString(16);
couleur_hexa = "0x" + _r1 + _v1 + _b1;


@+
culroussi
Messages postés
12
Date d'inscription
vendredi 30 avril 2004
Statut
Membre
Dernière intervention
17 octobre 2005

7 mars 2005 à 12:13
Le pb vient de la ligne :
couleur_hexa = "0x"+String(r1.toString(16))+String(v1.toString(16))+String(b1.toString(16))


ex :
si r1 110> r1.toString(16) == 6E (pas de soucis)
mais si r1 15> r1.toString(16) == F

Dans ce cas, ca pose probleme car «F» n’est compose que d'un "chiffre" (ou digit), du coup, couleur_hexa == 0x + 5chiffres et non 6.


Il faut prevoir les cas ou :
r1.toString(16), v1.toString(16) et b1.toString(16) ne donne qu un seul digit et rajouter un 0 devant.
WhiteMagus
Messages postés
764
Date d'inscription
lundi 21 juin 2004
Statut
Membre
Dernière intervention
5 février 2010

7 mars 2005 à 11:15
Sais-tu quel chiffre a été supprimé ? ça pourrait aider, stp. Ou sa valeur hexadécimale, si tu veux.
@+ !
culroussi
Messages postés
12
Date d'inscription
vendredi 30 avril 2004
Statut
Membre
Dernière intervention
17 octobre 2005

7 mars 2005 à 09:23
Salut,

J ai essaye de trouver le bug (couleur qui passe à une autre sans fondu).

En tapant la ligne : trace(couleur_hexa), tout à la fin du code, j ai remarqué que quand la couleur passait directement à une autre, couleur_hexa avait une valeur de type : 0x(5 chiffres), au lieu de 6.

Ya des chances que le bug vienne de là. J ai pas essayé de corriger…
SuperDevy
Messages postés
842
Date d'inscription
dimanche 24 novembre 2002
Statut
Membre
Dernière intervention
2 juillet 2007

6 mars 2005 à 23:44
Heu, tant qu'à mettre une capture d'écran inutile, t'aurai pu choisir une jolie couleur ;)

Sinon, le rendu est bon, bravo.
Mais le code n'est pas très portable... sous forme d'une classe ça pourrait déchirer !

[7/10]
salimusta
Messages postés
69
Date d'inscription
mardi 15 février 2005
Statut
Membre
Dernière intervention
14 février 2006

6 mars 2005 à 19:39
ouai vite fait l'attirance lol,
code tres bien commenté,
un code qui peut servir pour apprendre a manipuler les couleurs
Blacknight91titi
Messages postés
1732
Date d'inscription
jeudi 17 juin 2004
Statut
Membre
Dernière intervention
9 mars 2015
2
6 mars 2005 à 19:06
Lol
C'est pour donner de la couleur au site ;)
Pis sa attire l'oeil car c'est pas une capture comme les autre :p
WhiteMagus
Messages postés
764
Date d'inscription
lundi 21 juin 2004
Statut
Membre
Dernière intervention
5 février 2010

6 mars 2005 à 16:53
ouaip. Pour les explications, je les ai donné à la source de blacknight "ballet de lignes".
Dis BlackNight, elle est intéressante la capture d'écran :-D.
Sinon, je pense que ce code peut être amélioré (class) mais il est très utile et très compréhensible sous sa forme actuelle. Bien commenté.
@+ !