Sujet Précédent Sujet Suivant

Attribuer une couleur à un chiffre

Fermé
Megazor - 13 janv. 2022 à 17:45
Megazor Messages postés 2 Date d'inscription jeudi 7 juin 2018 Statut Membre Dernière intervention 14 janvier 2022 - 14 janv. 2022 à 17:44
Bonjour,

Je suis nouveau dans le domaine de la programmation, pour ne pas dire novice.

Je suis actuellement en train de me lancer un petit défi qui est d'apprendre via des tutoriels et certains livres le langage de la programmation.

J'ai commencé il y a quelques jours par le html et le css.

Mais ma curiosité ayant pris le dessus, je cherche un moyen de pouvoir attribuer une couleur à un chiffre.

Ex : 1 = Rouge / 2 = Vert / 3 = Bleu / 4 = ...

Pour qu'au final, une suite comme 32311 me donne une image ou chaque pixel donnerai Bleu Vert Bleu Rouge Rouge ...

Je ne sais pas si ma description est assez limpide, mais je vous remercie en tout cas d'avoir déjà pris le temps de me lire.

Bonne soirée


Configuration: Macintosh / Safari 15.2
A voir également:

2 réponses

Réponse 1 / 2
jee pee Messages postés 40903 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 7 mars 2025 9 556
Modifié le 13 janv. 2022 à 19:05
Bonjour,

Bienvenu dans la programmation.

HTML+CSS dédiés aux sites web ne constituent pas l'environnement idéal pour faire de la programmation.

La programmation est basée si une algorithmie qui utilise des variables, des boucles, des tests, des fonctions ... qui n'existent pas en HTML.

HTML+CSS ne permet que de faire un site web statique (*).

Dès que l'on veut quelque chose de dynamique on va adjoindre à HTML+CSS le langage PHP.

Alors si tu veux t’intéresser à la programmation, il serait préférable de commencer par un autre langage (python, C, ...).

SI ton but c'est de faire des sites web alors tu peux commencer par HTML+CSS. Puis quand tu auras les bases regarder PHP.

(*) si tu suis un cours HTML5 tu pourras faire des choses un peu différentes comme des animations, des jeux : https://www.fun-mooc.fr/fr/cours/introduction-a-html5-animations-et-jeux/ mais il est préférable d'avoir des notions de programmation

1
[Dal] Messages postés 6204 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 27 février 2025 1 100
13 janv. 2022 à 21:33
Dès que l'on veut quelque chose de dynamique on va adjoindre à HTML+CSS le langage PHP.

sans aller sur PHP qu iest un langage exécuté côté serveur et nécessite une infrastructure, du même côté client du HTML et CSS qui s'exécutent sur un simple navigateur, il y a le langage JavaScript qui fait de même, ce qui permettra de rester dans l'environnement de programmation et d'exécution dont Megazor est déjà familier et qui permet de mettre en oeuvre l'algorithmie dont tu parles qui utilise des variables, des boucles, des tests, des fonctions et qui est un complément naturel à ce que Megazor a déjà commencé à apprendre.

D'ailleurs, le MOOC sur HTML5 sur lequel tu pointes couvre HTML, CSS et JavaScript.
1
Megazor Messages postés 2 Date d'inscription jeudi 7 juin 2018 Statut Membre Dernière intervention 14 janvier 2022
14 janv. 2022 à 17:44
Bonjour Jee Pee et Dal,

Je vous remercie pour vos réponses, ainsi que vos précisions apportées !

Alors oui j'ai bien conscience que la programmation en tant que telle n'est pas axée sur le HTML + CSS qui est plus pour du "statique", mais ne sachant pas exactement par quoi commencer, je me suis dis que cela me donnerait des bases !

Je suis en train de trouver des tutos pour apprendre le JS ce qui me permettra, je l'espère, d'avoir des bases plus "solides".

En tout cas, encore un grand merci à vous d'avoir pris la peine de me répondre !
0
Réponse 2 / 2
[Dal] Messages postés 6204 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 27 février 2025 1 100
Modifié le 14 janv. 2022 à 11:23
Salut Megazor,

Par exemple, tu peux faire ceci en html5 avec la balise canvas et du JavaScript où tu utilises les données d'un tableau d'entiers contenant tes valeurs numériques pour créer une image.

Note qu'en programmation on commence à compter à partir de 0 en général. Donc plutôt que "1 = Rouge / 2 = Vert / 3 = Bleu", j'ai choisi les valeurs 0, 1 et 2 respectivement. 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Image</title>
<link rel="stylesheet" href="monstyle.css">
</head>
<body>
<h1>Image</h1>
<p>Image composée de points rouges, verts et bleus</p>

<canvas id="image" width="60" height="20">
Votre navigateur ne supporte pas la balise html5 "canvas"
</canvas>
<script>
    var canvas = document.getElementById('image');

    var tableau = [0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,
                   2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,
                   1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,
                   0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,
                   2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,
                   1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,
                   0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,
                   2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,
                   1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,
                   0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,
                   2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,
                   1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,
                   0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,
                   2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,
                   1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,
                   0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,
                   2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,
                   1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,
                   2,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,
                   1,2,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1,2,0,1];

    ctx = canvas.getContext('2d');
    largeur = canvas.width;
    hauteur = canvas.height;
    ctx.clearRect(0, 0, largeur, hauteur);
    var id = ctx.getImageData(0, 0, largeur, hauteur);
    var pixels = id.data;
    var r, v, b;
    var idx = 0;
    for (var i = 0; i < largeur * hauteur * 4; i += 4) {
        var code = tableau[idx++];
        switch (code) {
            case 0: r = 255; v = 0; b = 0; break;
            case 1: r = 0; v = 255; b = 0; break;
            case 2: r = 0; v = 0; b = 255; break;
            default: r = 255; v = 255; b = 255; break;
        }
        pixels[i] = r;
        pixels[i + 1] = v;
        pixels[i + 2] = b;
        pixels[i + 3] = 255;
    }
    ctx.putImageData(id, 0, 0);
</script>
<p>Il faut zoomer pour apercevoir les points :-)</p>
</body>
</html>


Cela donne ceci :



En gros, cela fonctionne ainsi :
  • pour le canvas créé, tu peux récupérer un contexte te permettant de dessiner dessus en 2d avec getContext('2d')
  • avec getImageData tu peux ensuite récupérer un objet ImageData te permettant d'accéder aux données de l'image dans une zone mémoire que tu obtiens par le champ .data
  • ce champ .data de l'objet ImageData contient un tableau à une dimension d'une taille de largeur * hauteur * 4 dans lequel les valeurs RVBA de chaque pixel sont accessibles à la suite, sous la forme d'entiers de 0 à 255 représentant l'intensité de la couleur élémentaire composant la couleur du pixel (le A est pour l'opacité)
  • une boucle parcourt les données de l'image en y insérant la couleur souhaitée
  • une fois la boucle terminée, les changements sont appliqués au canvas avec putImageData


https://developer.mozilla.org/fr/docs/Web/API/HTMLCanvasElement/getContext
https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/getImageData
https://developer.mozilla.org/fr/docs/Web/API/ImageData
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData

Dans le code en lignes 50 à 52, on décide quelles valeurs RVB sont attribuées aux codes 0, 1, 2 (j'ai choisi respectivement rouge, vert et bleu, mais tu pourrais choisir d'autres couleurs en faisant varier les valeurs des 3 couleurs élémentaires définissant la valeur de couleur de chaque pixel.

https://www.w3schools.com/colors/colors_picker.asp

Pour faire ce code, je me suis inspiré de celui-ci : https://plnkr.co/edit/mfNyalsAR2MWkccr?preview

On utilise rarement canvas pour dessiner des pixels individuels (ce n'est pas très efficace). Tu as des interfaces pour dessiner des lignes, des formes, du texte... qui sont optimisées et prévues pour. C'est avec cela que sont faits les jeux html5 qui remplacent les jeux en Flash.

https://www.w3schools.com/html/html5_canvas.asp
https://openclassrooms.com/fr/courses/4810241-utilisez-html5-pour-linterface-utilisateur/4979216-utilisez-la-balise-canvas

Dal
0

Discussions similaires

Transparence en tete et bas de page
Sabrina -
sabrina -

8 réponses
sertissage des cables rj45
lekludo -
brupala -

7 réponses