2e:null 2f:["$","title",null,{"children":"Détection des couleurs complémentaires | Laurent Jégou | Observable"}] 34:Tbb2,analyse = function(ctx, pos_x,pos_y, width, height) { // Récupération des couleurs autour du point cliqué pour avoir une moyenne var pc0 = ctx.getImageData(pos_x, pos_y, 1, 1).data; var phsv0 = rgb2hsv(pc0[0], pc0[1], pc0[2]); var pc1 = ctx.getImageData(pos_x - 1, pos_y - 1, 1, 1).data; var phsv1 = rgb2hsv(pc1[0], pc1[1], pc1[2]); var pc2 = ctx.getImageData(pos_x + 1, pos_y - 1, 1, 1).data; var phsv2 = rgb2hsv(pc1[0], pc1[1], pc1[2]); var pc3 = ctx.getImageData(pos_x + 1, pos_y + 1, 1, 1).data; var phsv3 = rgb2hsv(pc1[0], pc1[1], pc1[2]); var pc4 = ctx.getImageData(pos_x - 1, pos_y + 1, 1, 1).data; var phsv4 = rgb2hsv(pc1[0], pc1[1], pc1[2]); var phsvh = (phsv0.h + phsv1.h + phsv2.h + phsv3.h + phsv4.h) / 5 var csel = hsv2rgb(phsvh, phsv0.s, phsv0.v); var c1 = rgb2hex(csel.r, csel.g, csel.b); // Affichage de la couleur moyenne cliqué dans le caisson 1 d3.select("#r1").attr('fill', c1); var image = ctx.getImageData(0, 0, width, height); var image2Data = image.data; var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.canvas.width = width; ctx2.canvas.height = height; // Tolérance de teinte var t = toleranceTeinte; // Luminosité minimale var rbl = minLum; var tmin = phsvh - t; if (tmin < 0) {tmin = 0;} var tmax = phsvh + t; if (tmax > 360) {tmax = 360;} var tcomp = HueShift(phsvh, 180); var tcmin = HueShift(tcomp, - t); var tcmax = HueShift(tcomp, t); var ccomp = hsv2rgb(tcomp, phsv0.s, phsv0.v); var c2 = rgb2hex(ccomp.r, ccomp.g, ccomp.b); d3.select("#r2").attr('fill', c2); var w2 = width; var n = 0; var re = ""; var r, g, b, a, r1, g1, b1, a1, th, ts, tv; for (var y = 0; y < height; y++) { var inpos = y * width * 4; var outpos1 = inpos; //var outpos2 = inpos + (w2 * 2) * 4; for (var x = 0; x < w2; x++) { r = image2Data[inpos++]; g = image2Data[inpos++]; b = image2Data[inpos++]; a = image2Data[inpos++]; r1 = 255; g1 = 255; b1 = 255; a1 = a; var test = rgb2hsv(r,g,b); var th = test.h; var ts = test.s; var tv = test.v; // Analyse de la couleur complémentaire if ((th < tmin || th > tmax) && (th < tcmin || th > tcmax) || tv < rbl || ts < rbl) { var nc = hsv2rgb(th, 0, tv); r = nc.r; g = nc.g; b = nc.b; r1 = g1 = b1 = 0; } switch(typeAnalyse) { case 'gris' : image2Data[outpos1++] = r; image2Data[outpos1++] = g; image2Data[outpos1++] = b; image2Data[outpos1++] = a; break; case 'binaire' : image2Data[outpos1++] = r1; image2Data[outpos1++] = g1; image2Data[outpos1++] = b1; image2Data[outpos1++] = a1; } } } ctx2.putImageData(image, 0, 0); }35:[] 32:{"id":"d72eeca5406ff09e","slug":"detection-des-couleurs-complementaires","title":"Détection des couleurs complémentaires","thumbnail":"33eade5dd33e6abbb239d1a938b598f28856e641055d066591f5d634f503f9c3","access_level":"public","create_time":"$D2022-03-29T06:34:06.506Z","update_time":"$D2022-03-29T13:46:38.548Z","view_time":null,"first_public_time":"$D2022-03-29T13:47:14.543Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"1936870012656af6","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":"starter_2024"},"version":386,"publish_version":386,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null}],"members":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"070186abdffcc2f1","slug":"analyse-couleurs","title":"Analyse couleurs","owner":{"id":"1936870012656af6","login":"ljegou","name":"Laurent Jégou"}},"type":"notebook","body":{"title":"Détection des couleurs complémentaires","cells":[{"id":0,"value":"# Détection des couleurs complémentaires\nChargez une image, cliquez sur une partie colorée, l'outil va isoler cette couleur et sa complémentaire dans l'image de résultats.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"viewof imageSource = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"{\n // Dessin de l'image à partir de ses données\n const bitmap = await createImageBitmap(imageSource);\n const [width, height] = [bitmap.width, bitmap.height];\n const ctx = DOM.context2d(width, height, 1);\n ctx.drawImage(bitmap, 0, 0);\n const canvas = ctx.canvas;\n\n d3.select(canvas)\n .on(\"pointerdown\", e => {\n \t\tvar pos_x = e.layerX;\n\t\t var pos_y = e.layerY;\n analyse(ctx, pos_x, pos_y, width, height)\n });\n\n return canvas;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"viewof toleranceTeinte = Inputs.range([0, 100], {step: 1, label: \"Tolérance teinte\", value: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"viewof minLum = Inputs.range([0, 100], {step: 1, label: \"Luminosité min.\", value: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof typeAnalyse = Inputs.radio([\"gris\", \"binaire\"], {label: \"Type d'analyse\", value: \"gris\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"caissons = {\n // Caisson coloré en SVG\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 100);\n\n // Premier caisson\n const r1 = svg.append('rect')\n .attr(\"id\", \"r1\")\n .attr('width', 100)\n .attr('height', 100)\n .attr('fill', 'white');\n\n // Deuxième caisson\n const r2 = svg.append('rect')\n .attr(\"id\", \"r2\")\n .attr(\"x\", 100)\n .attr(\"y\", 0)\n .attr('width', 100)\n .attr('height', 100)\n .attr('fill', 'white');\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"example = html`\n

Résultat

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"getImageData = async function(blob) {\n const bitmap = await createImageBitmap(blob);\n const [width, height] = [bitmap.width, bitmap.height];\n\n // an intermediate \"buffer\" 2D context is necessary\n const ctx = DOM.context2d(width, height, 1);\n ctx.drawImage(bitmap, 0, 0);\n\n return ctx.getImageData(0, 0, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"\tfunction HueShift(h,s) {\n\t\th+=s;\n\t\twhile (h>=360.0) h-=360.0;\n\t\twhile (h<0.0) h+=360.0;\n\t\treturn h;\n\t}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"function hsv2rgb(hue, sat, val) {\n\t var red, grn, blu, i, f, p, q, t;\n\t hue%=360;\n\t if(val==0) {return({r:0, g:0, v:0});}\n\t sat/=100;\n\t val/=100;\n\t hue/=60;\n\t i = Math.floor(hue);\n\t f = hue-i;\n\t p = val*(1-sat);\n\t q = val*(1-(sat*f));\n\t t = val*(1-(sat*(1-f)));\n\t if (i==0) {red=val; grn=t; blu=p;}\n\t else if (i==1) {red=q; grn=val; blu=p;}\n\t else if (i==2) {red=p; grn=val; blu=t;}\n\t else if (i==3) {red=p; grn=q; blu=val;}\n\t else if (i==4) {red=t; grn=p; blu=val;}\n\t else if (i==5) {red=val; grn=p; blu=q;}\n\t red = Math.floor(red*255);\n\t grn = Math.floor(grn*255);\n\t blu = Math.floor(blu*255);\n\t return ({r:red, g:grn, b:blu});\n\t}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"\tfunction rgb2hsv(red, grn, blu) {\n\t var x, val, f, i, hue, sat, val;\n\t red/=255;\n\t grn/=255;\n\t blu/=255;\n\t x = Math.min(Math.min(red, grn), blu);\n\t val = Math.max(Math.max(red, grn), blu);\n\t if (x==val){\n\t return({h:0, s:0, v:val*100});\n\t }\n\t f = (red == x) ? grn-blu : ((grn == x) ? blu-red : red-grn);\n\t i = (red == x) ? 3 : ((grn == x) ? 5 : 1);\n\t hue = Math.floor((i-f/(val-x))*60)%360;\n\t sat = Math.floor(((val-x)/val)*100);\n\t val = Math.floor(val*100);\n\t return({h:hue, s:sat, v:val});\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"\tfunction rgb2hex(r, g, b) {\n\t return \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);\n\t}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"createImageBitmap = window.createImageBitmap ||\n ((blob) =>\n new Promise((resolve) => {\n let img = document.createElement(\"img\");\n img.addEventListener(\"load\", () => resolve(this));\n img.src = URL.createObjectURL(blob);\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"**Inspiration** : https://observablehq.com/@ehouais/how-to-get-image-data-from-an-url-or-a-file?collection=@ehouais/tools","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3-selection@2\", \"d3-color@2\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"