Partage
  • Partager sur Facebook
  • Partager sur Twitter

DIagramme de CIE Javascript

    22 mars 2020 à 17:51:59

    Bonjour à tous :)

    Je dois créé un diagramme de CIE sur javascript mais j'ai aucune idée comment faire. Surtout je dois récupérer une couleur comme ceux-ci:

    Je ne sais pas comment pouvoir le créé en javascript. Peut-être avec chart.js.

    Merci pour vos propositions :) 

    • Partager sur Facebook
    • Partager sur Twitter
      23 mars 2020 à 9:58:15

      Salut,

      Tu peux commencer par lire l'article wikipedia, et ensuite le site de lindbloom pour les conversions colorimétriques :

      • Partager sur Facebook
      • Partager sur Twitter
        23 mars 2020 à 18:02:28

        Merci pour ta réponse BrainError,

        Grâce à ses informations, comment je pourrais les utiliser pour créer le diagramme en Js.

        Car rien que pour créer le graphe, je ne sait pas trop comment m'y prendre.

        • Partager sur Facebook
        • Partager sur Twitter
          23 mars 2020 à 22:36:04

          Normalement, ton diagramme est une représentation dans l'espace colorimétrique xyY où la composante Y (la luminosité ou "intensité lumineuse") n'est pas représentée et seules les composantes chromatiques le sont (x et y). Chaque coordonnées (x, y et Y) est défini dans l'intervalle [0;1].

          La courbe représenté en bleu correspond aux longueurs d'ondes du spectre visible compris entre 380nm et 700nm.

          Petites explication complémentaire (de contexte) puisque je ne connais pas ton niveau de connaissance sur le sujet :

          • En dessous de 380nm de longueur d'onde (soit toutes lumières d'une fréquence plus élevé), la lumière fait partie des domaines d'énergies plus élevé que sont les Ultraviolet (les coups de soleil), puis les rayons X (imagerie médicale), puis les rayons gamma (radioactivité)...
          • A l'inverse, au dessus de 700nm de longueur d'onde (toutes lumière d'une fréquence plus basse), la lumière fait partie des domaines d'énergie plus basse que sont les infrarouges (effet de serre et réchauffement climatique), puis les micro-ondes (ceux qui réchauffe les plats picard :lol:), puis les ondes radio (pour la radio bien sur).

          En bref, en dehors du domaine de longueur d'onde décrit sur ton diagramme, la lumière n'est pas visible à l’œil humain.

          Le long de la courbe avec les longueurs d'onde est donc censé correspondre au spectre de la lumière visible que voici :

           
          (Le gris représente la lumière en dehors du visible)

          Si je ne me trompe pas, tout les points qui ne sont pas sur cette courbe mais qui sont dans le domaine représenté par la courbe avec le segment reliant le point à 380nm et celui à 700nm (ce qu'on appel le gamut, celui de l'oeil humain) représente des couleurs composites constitué d'un amalgame des couleurs du spectre visible.

          C'est d'ailleurs ainsi qu'on peut obtenir une lumière blanche : La lumière blanche n'est pas représenté sur le spectre visible, puisqu'il s'agit d'un amalgame de lumière.

          Pour poursuivre les explications, on va prendre l'exemple d'un diagramme représentant un gamut qui a du sens pour un écran d'ordinateur : celui du sRGB :

          Maintenant (en gardant ce diagramme là à l'esprit), un écran fonctionne sur la base de trois couleur bien défini que sont le rouge, le vert et le bleu (RGB) ET de toutes les couleurs qu'on obtient en les mélangeant avec des intensités lumineuses variées (c'est la raison pour laquelle rgb(255, 255, 255) donne un blanc et rgb(0, 0, 0) un noir).

          Quand tu regardes le diagramme, tu peux observer que 3 points sont représenté de manière bien spécifique et forment un triangle. Et quel surprise, les 3 point correspondent aux rouge, au vert et au bleu : les couleurs lumineuse de base d'un écran.

          Ce triangle est un autre gamut (un autre domaine colorimétrique) plus restreint que le gamut de l'oeil humain. Autrement dit, un écran ne dispose que d'une panoplie restreinte de couleurs qui peuvent être générées par rapport à ce que l'oeil humain est en capacité de voir.

          Plus concrètement et vis-à-vis du problème auquel tu es confronté, tu as deux solutions envisageable :

          • si tu souhaite véritablement monter un diagramme de chromaticité CIE-xy (ce que tu appel le diagramme de CIE) et que tu souhaite également, avec l'aide de JavaScript, en extraire les couleurs à la manière d'un colorpicker, de façon rationnel étant donnée ce que je t'ai expliqué ; ça signifie que tu ne vas pouvoir travailler qu'avec le gamut du sRGB (l'espace colorimétrique de base des écrans) au mieux, et donc, que tu ne vas pouvoir picker des couleurs que dans ce triangle restreint.
            Pourquoi ? parce qu'en dehors de ce triangle, les couleurs ne sont même pas censé pourvoir être représenté sur un écran. Ce qui signifie que le diagramme que tu nous montre n'est en réalité qu'une "vue de l'esprit" de la réalité :D.
          • Maintenant, peut-être que ce que tu souhaite faire n'as pas besoin d'être formellement rationnel et qu'un simple canvas sur la base d'une image d'un diagramme de chromaticité CIE-xy avec un colorpicker en direct sur l'image est ce que tu cherches à obtenir.

          Dans les deux cas, c'est tout à fait faisable grâce à un canvas, à toi de décider de ce que tu veux faire. Pour ça, garde à l'esprit que la première méthode est scientifiquement plus correcte, mais que la seconde méthode te permet d'utiliser la représentation plus large (même si formellement fausse) d'un diagramme complet du gamut de l'oeil humain.

          Si certaines explications ne sont pas claires, ou si tu souhaite te dirigé vers l'une des méthodes que je décris (voir les deux) et obtenir quelques lignes directrices pour mettre ça en place sur un canvas avec JavaScript, n'hésite pas à demander.
          C'est un sujet très intéressant (d'après moi) et je suis tout à fait dispo pour t'apporter d'avantage d'aide à ce propos.

          Edit : Voici le tableau Wikipédia définissant les points de chromaticité spécifiques d'un bon nombre de longueur d'onde : ICI.
          Ça peut t'être utile si tu veux vraiment monter ton diagramme sur la base uniquement de code JS et non pas d'une image (ce qui sera certainement plus propre de mon point de vue).

          Edit 2 : Salut, je me suis un peu penché sur le sujet cet après-midi et j'ai monté ça : https://codepen.io/brainerror/pen/QWbZaeq
          J'ai fait ça, sur une base customElement. Ça n'est pas interactif pour le moment, mais c'est un diagramme généré entièrement en JS qui peut servir de base pour colorpicker derrière.

          Ça a été un petit défi personnel, parce que mine de rien, c'était pas évident à faire.

          Tu peux notamment faire varier l'attribut "y" pour obtenir des diagrammes avec des intensités lumineuses différentes.

          Ah oui, c'est relativement long à charger, mais ça c'est un problème difficilement évitable avec les canvas surtout quand il y a autant de calcul à réaliser pour générer l'image. Toutefois, ça n'est pas optimiser du tout, il y a vraiment moyen de faire mieux.

          -
          Edité par BrainError 24 mars 2020 à 18:43:08

          • Partager sur Facebook
          • Partager sur Twitter
            26 mars 2020 à 16:18:14

            Woah désolé de ne pas avoir pu te répondre avant.

            Merci beaucoup,beaucoup pour ton aide précieuse. Je n'ai pas beaucoup de connaissance dans le domaine de la lumière et des couleurs mais c'est un projet que j'aime beaucoup et ton aide mes vraiment précieuse.

            Je vais essayer avec le canvas comme tu as fais :) bien sûr sans recopier ^^

            Je ne sais pas s'il y a du monde qui recherche à faire un diagramme de CIE mais je vais le poster ici quand j'aurais finir pour partager avec tous le monde.

            Après tu pense que je peux utiliser quel plugin pour le picker car il y en a pas mal ^^

            • Partager sur Facebook
            • Partager sur Twitter
              27 mars 2020 à 11:41:10

              Salut,

              j'ai mis à jour ma version avec un picker et quelques contrôleurs : https://codepen.io/brainerror/pen/QWbZaeq

              Je l'ai basé sur le gamut sRGB ce qui signifie que si tu ne modifie que les inputs R, G et B, tu ne devrais pas pouvoir faire sortir le pointeur du gamut (le triangle).

              Tu peux toutefois parfaitement pické en dehors du gamut, tu obtiendra une valeur approchante de la couleur xyY correspondante en RGB.

              Pour résumé, il y a désormais :

              • un colorpicker sur le domaine complet du visible
              • une checkbox pour activer la compensation sRGB lors de la conversion XYZ vers RGB et inversement (décrit ici).
              • les 3 premiers inputs correspondent aux valeurs R, G et B
              • les deux suivants aux valeurs x et y.
              • et l'input range à la valeur de Y (intensité lumineuse)
              • Enfin, un cadre avec en fond la couleur active.

              Libre à toi de t'en inspiré et de faire ta propre création avec ton propre gamut, ou de réutiliser le code que je te propose (ça ne me dérange pas du tout).

              Par contre, or mis le polyfill du constructeur CSSStyleSheet que j'importe au début dans une vaine tentative de faire fonctionner tout ça sur Firefox :( (tu ne devrais pas avoir de problèmes sur chrome, edge et safari pour mac), j'ai préféré n'utiliser aucun plugin ou librairie ou quoi que ce soit d'autre que purement du javascript, la raison principale étant que je ne connais pas assez bien ces outils pour m'en servir.

              -
              Edité par BrainError 3 avril 2020 à 11:38:03

              • Partager sur Facebook
              • Partager sur Twitter
                2 avril 2020 à 19:23:54

                Bonjour BrainError,

                Merci beaucoup pour ton travail incroyable.

                J'essaie de m'en inspiré aussi bien sûr :)

                juste une question, comme tu as trouver les valeur du gamut dans data.gamut pour le rouge,bleu et vert ?

                Car ce que j'aimerais faire, c'est de choisir 3 couleurs pour créer le triangle et faire le mélange de couleur :)

                J'aimerais juste savoir comment tu as fais pour trouver d'une longueur d'onde son X et Y.

                Merci beaucoup 

                • Partager sur Facebook
                • Partager sur Twitter
                  3 avril 2020 à 11:27:43

                  Salut,

                  Pour le gamut, j'utilise celui du sRGB dont les valeurs sont disponible sur wikipédia ici, dans le tableau "Caractéristiques Principales" -> "Chromaticité".

                  Pour les valeurs x et y en fonction de la longueur d'onde lambda, elles sont accessibles via les valeurs normalisées x bar, y bar et z bar sur une autre page wikipédia, ici. J'ai utilisé les valeurs CIE 1964.
                  Pour obtenir x et y, tu n'as qu'à divisé la valeur normalisée qui t’intéresse (x bar par exemple) par la somme de toutes les valeurs normalisés (x bar, y bar et z bar).
                  Par exemple, pour la longueur d'onde 380nm, la valeur de x sera 0.000160 / (0.000160 + 0.000017 + 0.000705) = 0.18140589569
                  Tu peux récupérer l'ensemble du tableau sous forme JSON, depuis la console js de la page en exécutant ce genre de code :

                  JSON.stringify(Array.from(document.querySelector('.wikitable').tBodies[0].rows).slice(2).map(x => Array.from(x.cells).map(y => parseFloat(y.innerText.replace(',', '.')))).map(x => {return {
                      λ: x[0],
                      x1931: x[1],
                      y1931: x[2],
                      z1931: x[3],
                      r1931: x[4],
                      g1931: x[5],
                      b1931: x[6],
                      x1964: x[7],
                      y1964: x[8],
                      z1964: x[9],
                      r1964: x[10],
                      g1964: x[11],
                      b1964: x[12],
                  };}))

                  -
                  Edité par BrainError 3 avril 2020 à 11:28:16

                  • Partager sur Facebook
                  • Partager sur Twitter
                    3 avril 2020 à 16:12:38

                    Merci beaucoup pour tes explications.

                    J'ai bien compris comme on calcul le x et y d'une longeur d'onde grâce à toi :)

                    Mais de ce que je vois, le tableau comporte des valeurs de longueur d'onde qui vont de 5 nm en 5 nm.

                    Comment peut on avoir les valeurs x et y d'une longueur d'onde comme 502 nm comme elles ne sont pas dans le tableau ?

                    -
                    Edité par 18gxraviel. 3 avril 2020 à 16:13:10

                    • Partager sur Facebook
                    • Partager sur Twitter
                      4 avril 2020 à 1:43:24

                      Salut,

                      Effectivement, ces valeurs ne sont pas dans le tableau et je doute que tu les trouves quelque part (même si je me trompes peut-être.)

                      Le problème, c'est qu'ils s'agit très certainement de valeurs issue de mesure physique réelles (par spectroscopie uv-visible peut-être ? Je vais me renseigner...), en tout cas, c'est ce que je soupçonne très fortement étant donné qu'il y a forcément une mesure physique d'origine quelque part. Les types qui ont réalisé ces mesures n'allaient sans doute pas le faire nanomètre de longueur d'onde par nanomètre. Ça aurait fait un sacré travail pour une précision qui n'en vaut pas vraiment la peine.

                      Si tu cherches absolument les valeurs d'une longueur d'onde comme 502nm, la meilleure solution est certainement de la calculer à la manière d'un baricentre à partir des deux valeurs les plus proches dont tu disposes (500nm et 505nm.)

                      • Partager sur Facebook
                      • Partager sur Twitter
                        4 avril 2020 à 2:23:11

                        Merci pour le renseignement.

                        Enfaîte, dans mon projet, j'ai 24 longueurs d'onde différentes qui m'ont été données . C'est pour faire fonctionner une dalle DMX avec 32 canaux dont chacun des canaux possède une  longueur d'onde défini dont plusieurs avec une longueur d'onde pas indiqué dans le tableau tels que 502 nm ou 412 nm.

                        Ce que je veux faire avec le diagramme de CIE, c'est de choisir 3 canaux donc 3 longueur d'onde puis les mélanger et voir le résultat sur le diagramme mais aussi sur la dalle pour voir la différence de couleurs.

                        J'ai déjà fais la sélection des longueurs d'onde mais il me faut juste le x et y des différentes longueur d'onde pour pourvoir bien représenter le triangle. 

                        j'ai une autre question,

                        J'ai un select pour choisir mes différentes longueur d'onde avec les valeurs x et y .

                        J'aimerais injecter les valeurs récupérer pour les mettre dans ton code x et y et lambda. 

                        Est-ce que je doit utiliser l'ajax pour que le diagramme CIE s'actualise quand je met les valeurs dedans ?

                        Merci beaucoup en tous cas de ton aide très précieuse.

                        -
                        Edité par 18gxraviel. 4 avril 2020 à 2:53:45

                        • Partager sur Facebook
                        • Partager sur Twitter
                          4 avril 2020 à 14:38:59

                          Salut,

                          Alors si je comprends bien, tu disposes de 32 LED monochromatiques différentes. Donc chacune restituant une lumière à une longueur d'onde défini. C'est bien ça ?
                          On est d'accord qu'il ne s'agit pas de LED polychromatique ? Parce que ça vas foutre la merde si c'est le cas >_<.
                          Bon, a priori, si tu avance des longueurs d'onde bien défini, il devrait bien s'agir de LED monochromatique.

                          Tu souhaites donc mixer ces lumières et obtenir un résultat visuel à partir de ça ?

                          Le problème, c'est que dans ce genre de mixe (imaginons un mixe de trois longueurs d'onde), tu te retrouves non pas avec une seule couleur de rendu possible, mais toutes une pluralité. Pourquoi ?

                          • Parce que tu peux modifier les intensités lumineuses relatives des trois LED.
                            Ce qui signifie que tu obtiens bien un triangle de possibilités de rendu : c'est exactement ce dont il s'agit pour un écran d'ordinateur avec les teintes RGB.
                            Le champ des rendus possibles est représenté par toute les teintes dans le gamut du diagramme, et quand les intensités relatives sont toutes égales, tu obtiens le blanc (le white-point).
                          • Parce que tu peux modifier l'intensité lumineuse globale du ton mélange lumineux.
                            C'est à dire modifié Y (y majuscule).
                            En définitive, le champ des rendus possibles n'est plus un triangle, mais un prisme.

                          Tout ça pour dire qu'il faut que tu sois en mesure de contrôler les intensité lumineuse de tes LED si tu veux obtenir des résultats correspondant. Par exemple, si les intensité lumineuses de tes trois LED sont équivalentes entre elles et au max de leurs capacité, le résultat devrait ressembler au "white-point" (le point central) du triangle pour Y=1.

                          Pour ta première question et maintenant qu'on sait ça, il reste à définir les coordonnées de tes longueurs d'onde spécifique.
                          Comme je le disais dans mon précédent post, le plus simple et de fonctionner sur la base d'un barycentre des coordonnées x;y des longueurs d'onde dont on dispose déjà.
                          Ça revient à faire une sorte de moyenne : ça n'est pas exacte, mais c'est suffisamment proche de la réalité pour que l'exactitude n'ait pas la moindre importance.

                          Voilà comment tu peux procéder pour chacune de tes longueurs d'onde, à partir du tableau de donné contenu dans l'objet "data.colorMatching" :

                          data.complementaryMatching = [ // On va stocker tout ça dans la propriété complementaryMatching par exemple.
                              {
                                  λ: 493,
                              },
                              {
                                  λ: 502,
                              },
                              {
                                  λ: 612,
                              },
                              // Les longueurs d'onde qui t’intéresse dans des objets. Ajoutes en autant que nécessaire (32, si j'ai bien compris.)
                          ];
                          data.complementaryMatching.forEach(x => { // Pour toutes tes longueurs d'onde
                              const low = data.colorMatching.find(y => y.λ / 5 === Math.floor(x.λ / 5)); // On récupère les données du point situé en dessous.
                              const high = data.colorMatching.find(y => y.λ / 5 === Math.ceil(x.λ / 5)); // On récupère les données du point situé au dessus.
                              const massCoef = (x.λ.toString().slice(-1) % 5) / 5; // On établit le coefficient de masse.
                              x['x(λ)'] = low['x(λ)'] * massCoef + high['x(λ)'] * (1 - massCoef); // On calcul les barycentres pour les valeurs x bar, y bar et z bar...
                              x['y(λ)'] = low['y(λ)'] * massCoef + high['y(λ)'] * (1 - massCoef); // ...
                              x['z(λ)'] = low['z(λ)'] * massCoef + high['z(λ)'] * (1 - massCoef); // ...
                              x.x = Math.min(1, Math.max(0, x['x(λ)'] / (x['x(λ)'] + x['y(λ)'] + x['z(λ)']))); // Puis on calcul les coordonnées x...
                              x.y = Math.min(1, Math.max(0, x['y(λ)'] / (x['x(λ)'] + x['y(λ)'] + x['z(λ)']))); // ... et y.
                          });

                          A partir de là, je te suggère de feed tes select avec les longueurs d'ondes contenues dans le tableau complementaryMatching. Je pense que c'est la façon la plus DRY de procéder :

                          const selects = document.querySelector('.TES_SELECTS'); // On récupère les selects une seule fois (grâce à une class que tu définiras)
                          data.complementaryMatching.forEach(x => { // Boucle à travers toutes tes longueurs d'onde
                              selects.forEach(y => { // Boucle à travers tout tes selects
                                  const option = document.createElement('option'); // On crée une option
                                  option.value = x.λ; // On défini sa valeur
                                  option.innerText = x.λ + ' nm'; // On défini son texte
                                  y.appendChild(option); // On l'ajoute au select courant
                              });
                          });


                          Pour ta seconde question, ajax n'a rien a faire dans le problème.
                          L'ajax est un procédé qui permet de communiquer avec un serveur, c'est à dire d'envoyer une requête avec ou sans payload (une charge de donnée) vers un serveur, puis de recevoir une réponse de ce serveur et contenant les données dont tu as besoin sans qu'à aucun moment une nouvelle page web ne soit charger.
                          Ici, tout ce passe coté client. Il n'y a aucune communication avec aucun serveur. Donc l'ajax n'est pas applicable.
                          Je te suggère de jeter un œil sur le sujet pour en savoir plus :

                          • La méthode xhr : qui est la méthode historique de procéder pour une requête ajax, mais qui est un peu rébarbatif et parfois compliqué pour pas grand chose.
                          • La méthode fetch : qui est plus récente, beaucoup plus simple à utiliser, mais qui permet moins de chose aussi pour le moment (malgré ce que mdn peut dire qu'elle est plus puissante de xhr).

                          Si tu veux injecter tes valeurs x et y pour déplacer le curseur dans le diagramme, je te suggère de procéder comme suit :

                          const cieChart = document.querySelector('cie-xy-chart'); // Tu récupère le premier diagramme de ton DOM (par exemple.)
                          cieChart.inputs.xy.x.value = TA_VALEUR; // Tu définis la valeur du champ x.
                          cieChart.inputs.xy.x.dispatchEvent(new InputEvent('input')); // Tu déclenches l'événement "input" correspondant à x.
                          cieChart.inputs.xy.y.value = TA_VALEUR; // Tu définis la valeur du champ y.
                          cieChart.inputs.xy.y.dispatchEvent(new InputEvent('input')); // Tu déclenches l'événement "input" correspondant à y.
                          // Déclencher les événements input devrait rafraîchir le diagramme.

                          Voilà, ça devrait t'aider un peu pour démarrer tout ça.

                          N'hésite pas si tu as besoin de précision sur certain points ou si tu as d'autre question.

                          -
                          Edité par BrainError 4 avril 2020 à 23:31:12

                          • Partager sur Facebook
                          • Partager sur Twitter
                            4 avril 2020 à 22:01:29

                            Enfaîte c'est une dalle avec le protocole DMX, ce qui permet de piloter les canaux. Comme dans une bande LED RGBa qui possède 4 canaux(Rouge,Vert,Bleu et Blanc). Mais cette dalle possède 32 canaux pour pouvoir être le plus précis dans le mélange des couleurs.

                            24 couleurs pures défini et 8 blancs différents aussi.

                            , on règle l'intensité de chaque canal de 0 à 255

                            J'ai réussi à créer une sorte de platine en mettant en lien les canaux et des curseurs pour pouvoir modifier les valeurs .

                            Pour le mélange de couleurs, c'est une demande dans le cahier des charges. Il me demande faire un mélange de 3 canaux mais en classant les couleurs: Les couleurs rouges et variantes,bleu et variantes, et vert et variantes.

                            Puis en choisissant les couleurs sélectionner, on va pouvoir modifié leur intensité chacune avec un curseur.

                            Merci beaucoup pour tes indications pour le ajax ^^ J'avoue ne pas mettre vraiment renseigné dessus car je n'en ai jamais eu l'occasion de l'utiliser. 

                            Encore merci de m'aider pour mon projet. Je suis très reconnaissant :) 

                            -
                            Edité par 18gxraviel. 4 avril 2020 à 22:37:03

                            • Partager sur Facebook
                            • Partager sur Twitter
                              4 avril 2020 à 23:56:01

                              Salut,

                              Quand tu parles de couleurs pure, tu parles bien de couleur monochromatique (c'est à dire de lumière composé d'une seule longueur d'onde) ? Tu as des spécifications la dessus ?

                              Parce que tes blancs sont déjà forcément issu d'un mixe lumineux (plusieurs longueurs d'ondes) pour la simple et bonne raison qu'il n'existe pas (physiquement) de longueur d'onde pour la lumière blanche.

                              Dans le cas d'une lumière polychromatique, par exemple une lampe à vapeur de sodium, le spectre uv-visible d’émission ressemble à ça :

                              Comme tu peux le voir, tu as un certain nombre de bande. Les plus importantes (celles caractéristiques du sodium) sont celles à 568.8 nm, le doublet 589 nm/589.6 nm (oui, il y a deux bande très proche à cette endroit là, même si ça n'est pas très visible sur ce spectre) et 615.4 nm.
                              Dans ce genre de cas, tu te retrouve donc avec au moins 3 longueurs d'onde (on va considérer que le doublet n'est en fait qu'une seule bande : ça fait pas une grosse approximation) avec des intensités relatives différentes que tu es censé considéré, et le point correspondant sur le diagramme CIE-xy ne se trouve donc pas sur la courbe de longueurs d'onde, mais à l’intérieur du motif (ou gamut) global. Il est donc plus difficile à positionner.

                              Théoriquement, tu es censé procédé en intégrant chaque bande pour obtenir les intensités relatives de chaque longueur d'onde pour pouvoir retrouver les coordonnées x et y correspondantes.
                              Et bon courage si t'as pas le spectromètre prés de toi (ou au moins le logiciel qui permet de traiter le spectre) pour faire l'intégration des bandes >_<.

                              Le problème, c'est que de ce que j'ai vu sur le net, les LED monochromatiques c'est plutôt rare, ou c'est souvent obtenu par l'intermédiaire de filtres.

                              Je pense que ton problème (obtenir les coordonnées x et y de tes canaux) ne vas pas être simple à résoudre pour le coup. Il faudrait vraiment que tu dispose de spécifications relative à chacun de tes canaux et notamment leurs spectres uv-visible d’émission.

                              Après, si tout ça c'est vraiment trop compliquer, ta aussi la méthode du pifomètre. Tu détermine à vu de nez les coordonnées x, y et Y qui font correspondre le mieux la couleur à l'écran et celle de ta dalle. C'est aussi envisageable, tout dépends de ton niveau d'attente. Mais faut dire que c'est quand même assez sale comme méthode :lol:.

                              -
                              Edité par BrainError 5 avril 2020 à 1:10:25

                              • Partager sur Facebook
                              • Partager sur Twitter
                                5 avril 2020 à 21:49:04

                                Enfaite, j'ai 24 longueurs d'onde qui se trouve tout au long du Diagramme CIE et pour les blancs, ce sont des valeurs en kelvin.

                                2700K-IRC=98
                                3000K-IRC=83
                                3000K-IRC=98
                                4000K-IRC=82
                                4000K-IRC=97
                                5000K-IRC=99
                                5600K-IRC=83
                                6500K-IRC=97

                                Pour mes valeurs de longueur d'onde:

                                390,403,405,410,425,440,450,470,480,502,512,520,530,544,590,605,602,620,629,630,655,660,680,730 

                                Ducoup, on peut faire varié l'intensité lumineuse de chacune. 

                                Après je ne pense vraiment à avoir les valeurs les plus précises possibles mais plus une aide visuelle pour voir où se situe la couleur sélectionner.

                                J'avoue que c'est plutôt compliqué^^ 

                                -
                                Edité par 18gxraviel. 5 avril 2020 à 22:00:30

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  6 avril 2020 à 8:18:18

                                  Salut,

                                  Pour les coordonnées x et y de tes blancs, je pense que tu devrais pouvoir utiliser l'approximation donnée sur cette page wikipédia :

                                  https://fr.wikipedia.org/wiki/Lieu_planckien#Approximation_dans_l'espace_CIE_XYZ

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    6 avril 2020 à 18:10:45

                                    Salut,

                                    Merci beaucoup pour m'aider ^^

                                    Je pense d'abord que je vais me concentrer sur les couleurs qui est mon principale objectif.

                                    Pour les selects, je les avais déjà créer en vuejs pour plus de facilité. Je ne sais pas si comme tu as fait est plus optimal.

                                    voici mon travail pour l'instant:

                                    https://codepen.io/doninj/pen/OJVKMyM

                                    Les valeurs des x et y sont des chiffres au pif pour tester si ça marchait ^^

                                    Qu'est ce que je pourrais modifier pour toi ?

                                    Merci encore de ton aide :)

                                    -
                                    Edité par 18gxraviel. 6 avril 2020 à 18:14:35

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      8 avril 2020 à 15:16:11

                                      Bonjour BrainError,

                                      J'ai pu demander les coordonnées des différents longueur d'onde que j'utilise. Le problème c'est que ce sont des données basé sur le diagemme CIE1931. Y a t-il un changement par rapport au CIE1964?

                                      Merci d'avance :)

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        10 avril 2020 à 0:03:41

                                        Enfaîte brainError, 

                                        je viens de tester pour le déplacement, mais c'est pas comment ça que je pensait.

                                        C'est plutôt faire bouger les points du triangle plutôt que le curseur.

                                        Merci d'avance :)

                                        • Partager sur Facebook
                                        • Partager sur Twitter

                                        DIagramme de CIE Javascript

                                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                        • Editeur
                                        • Markdown