2a:null 2b:["$","title",null,{"children":"Chemin décalé (Offset Paths) | linard-y | Observable"}] 31:T4be,{ const svg = d3.select(DOM.svg(500, 150)); var seg1 = objp.slice(0,2); var seg2 = objp.slice(2,4); svg.append("path") .attr("d", trace(seg1, d3.curveLinear)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); svg.append("path") .attr("d", trace(decaleSegment(seg1,10), d3.curveLinear)) .attr("stroke", "peru") .attr("stroke-width", 2) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); svg.append("path") .attr("d", trace(seg2, d3.curveLinear)) .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); svg.append("path") .attr("d", trace(decaleSegment(seg2,10), d3.curveLinear)) .attr("stroke", "peru") .attr("stroke-width", 2) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); return svg.node(); }32:T41d,{ const svg = d3.select(DOM.svg(500, 150)); var pts = objp.slice(0,4); svg.append("path") .attr("d", trace(pts, d3.curveLinear)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); var seg = []; for (var i=0; i { var res = []; var seg, segprev, segnext, inter; var N; var fermé = controleFermeture(points); if (fermé) { N = points.length-2; } else { N = points.length-1; } for (var i = 0; i < N; i++) { seg = decaleSegment(points.slice(i,i+2), offset) // intersection avec le segment précédent if ((i-1) >= 0) { segprev = decaleSegment(points.slice(i-1,i+1), offset); inter = calculeIntersection(segprev, seg, tol)[2]; if (inter!=null) { seg[0] = inter; } } else { if (fermé) { segprev = decaleSegment([points[N],points[0]], offset); inter = calculeIntersection(segprev, seg, tol)[2]; if (inter!=null) { seg[0] = inter; } } } // intersection avec le segment suivant if ((i+1) < N){ segnext = decaleSegment(points.slice(i+1,i+3), offset); inter = calculeIntersection(seg, segnext, tol)[2]; if (inter!=null) { seg[1] = inter; } } else { if (fermé) { segnext = decaleSegment([points[N],points[0]], offset); inter = calculeIntersection(seg, segnext, tol)[2]; if (inter!=null) { seg[1] = inter; } } } if (i==0) { res.push(seg[0], seg[1]); } else { res.push(seg[1]); } if (i==N-1 && controleFermeture(points)) { res.push(res[0]); } } return res; }34:T6cf,{ const svg = d3.select(DOM.svg(500, 180)); const g = svg.append("g"); const g1 = g.append("g").attr("transform", "translate(-50,0)"); const g2 = g.append("g").attr("transform", "translate(200,0)"); var pts = objpppp; g2.append("path") .attr("d", trace(pts, d3.curveLinear)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); g2.append("path") .attr("d", trace(cheminDécaléB(pts,25, 1), d3.curveLinear)) .attr("stroke", "peru") .attr("stroke-width", 2) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); g1.append("path") .attr("d", trace(pts, d3.curveLinear)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); var seg = []; for (var i=0; i { var res = []; var seg, segprev, segnext, inter, ajout=false; var N; var fermé = controleFermeture(points); if (fermé) { N = points.length-2; } else { N = points.length-1; } for (var i = 0; i < N; i++) { seg = decaleSegment(points.slice(i,i+2), offset); // intersection avec le segment précédent dans le cas i=0 if (fermé) { segprev = decaleSegment([points[N],points[0]], offset); inter = calculeIntersection(segprev, seg, tol)[2]; if (inter!=null) { seg[0] = inter; } } // intersection avec le segment suivant if ((i+1) < N){ segnext = decaleSegment(points.slice(i+1,i+3), offset) inter = calculeIntersection(seg, segnext, tol); if (inter[2]!=null) { if (inter[0]==1 || inter[1]==1) { seg[1] = inter[2]; } else { if (relativePosition(seg,inter[2])==1) { seg[1] = inter[2]; } else { res.pop(); seg[1] = corrigeDivergence(points, i, offset, tol); //var n = res.length -1; //res[n] = corrigeDivergence(points, i, offset, tol); i+=1; //seg = decaleSegment(points.slice(i+1,i+3), offset); } } } } else { if (fermé) { segnext = decaleSegment([points[N],points[0]], offset); inter = calculeIntersection(seg, segnext, tol); if (inter[2]!=null) { if (inter[0]==1 || inter[1]==1) { seg[1] = inter[2]; } else { if (relativePosition(seg,inter[2])==1) { seg[1] = inter[2]; } else { seg[1] = inter[2]; } } } } } if (i==0) { res.push(seg[0], seg[1]); } else { res.push(seg[1]); } if (i==N-1 && controleFermeture(points)) { res.push(res[0]); } } return res; }38:T9ca,collecteIntersections = (segments, tol) => { var collect = []; for (var i=0; i { return (d.cut==collect[i].cut+1 && d.by==collect[i].by);}); if (next.length>0) { icr++; collect[i].pt2 = next[0].pt; collect[i].by2 = collect[i].by; collect.splice(collect.findIndex(d => (d.cut==collect[i].cut+1 && d.by==collect[i].by)),1); } else { //sinon en deuxième lieu on regarde s'il y a un intersection du segment cut + 1 avec un autre segment > by next = collect.filter(d => { return (d.cut==collect[i].cut+1);}); if (next.length>0) { collect[i].pt2 = next[0].pt; collect[i].by2 = next[0].by; collect.splice(collect.findIndex(d => (d.cut==collect[i].cut+1)),1); } else { collect[i].pt2 = null; collect[i].by2 = null; } } i++; } return collect;//Iutiles; //collectIU; }39:T8a9,{ const svg = d3.select(DOM.svg(500, 150)); const g = svg.append("g"); const g1 = g.append("g"); const g2 = g.append("g").attr("transform", "translate(200,0)"); var pts_init = objp.slice(0,6); var pts1 = cheminDécaléC(pts_init,10, 1); g1.append("path") .attr("d", trace(pts_init, d3.curveLinear)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); g1.append("path") .attr("d", trace(pts1, d3.curveLinear)) .attr("stroke", "peru") .attr("stroke-width", 2) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); var seg = definitSegments(pts1); for (var i=0; i { const pts = cheminDécaléC(p, offset, tol); const seg = definitSegments(pts); const I = collecteIntersections(seg, tol); var chemins = []; // on traite d'abord le chemin dit 'principal' qui doit tenter de représenter les images décalées du premier segment jusqu'au dernier chemins.push(trouveChemins(pts, tol)); // on traite maintenant les chemins secondaires, isolés du fait des intersections; les chemins secondaires sont forcément des chemins fermés for (var i=0; i=(Math.abs(offset)-1)){ // on commence le chemin avec le point d'intersection pt2 var pts2=[I[i].pt2]; // on collecte les point en partant avec le segment suivant celui qui a créé l'intersection (cut +1) et jusqu'au segment qui a coupé (by2). var is = I[i].cut+1; while (is < I[i].by2) { pts2.push(seg[is][1]); is++; } pts2.push(I[i].pt2); chemins.push(trouveChemins(pts2, tol)); } } } return chemins; }3b:T606,{ const svg = d3.select(DOM.svg(500, 200)); const g = svg.append("g"); const g1 = g.append("g"); const g2 = g.append("g").attr("transform", "translate(200,0)"); var pts1 = objp.slice(0,6); var pts2 = objpppp; g1.append("path") .attr("d", trace(pts1, d3.curveLinear)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); var decalLignes = cheminDécaléD(pts1,10, 1); for (var i=0; i0 && i0 && i0 && i0 && i { var decalLignes = cheminDécaléD(pts, d, 1); for (var i=0; i { var decalLignes = cheminDécaléD(pts, d, 1); for (var i=0; i { var decalLignes = cheminDécaléD(pts, d, 1); for (var i=0; i { var decalLignes = cheminDécaléD(pts, d, 1); for (var i=0; i { var decalLignes = cheminDécaléD(pts, d, 1); for (var i=0; i { var decalLignes = cheminDécaléD(pts, d, 1); for (var i=0; i { var decalLignes = cheminDécaléD(pts, d, 1); for (var i=0; i (d.id = DOM.uid())); const baseline = DOM.uid('baseline'); const defs = svg.append("defs"); defs .append("filter") .attr("id", blur.id) .append("feGaussianBlur") .attr("color-interpolation-filters", "sRGB") .attr("stdDeviation", 5); defs .selectAll("clipPath") .data(pays) .enter() .append("clipPath") .attr("id", d => d.id.id) .append("path") .attr("d", geoPath); defs .append("path") .attr("id", baseline.id) .attr("d", trace(ptArrayToObject([projection([-4.685556,49.045278]), projection([-4.085556,49.338889]),projection([0.179162,50.151944])]), d3.curveMonotoneX)); const g = svg.append("g"); const g_countries = g.append("g"); const g_offset = g.append("g"); const g_villes = g.append("g"); var zoom = d3 .zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { g.attr("transform", d3.event.transform); } svg.call(zoom); let x = 0; let z = 2; const graticules = g.append("path") .attr("fill", "none") .attr("stroke", "rgba(0,0,0,.2)") .attr("d", geoPath(d3.geoGraticule().step([5,5])())); pays.map(p => { g_countries.append("path") .attr("class", "rivages") .attr("fill", "#dadada") .attr("stroke", "sienna") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("d", geoPath(p)); g_countries.append("path") .attr("clip-path", p.id.toString()) .attr("filter", blur.toString()) .attr("stroke", function() { if (p.properties.name=="United Kingdom") {return 'seagreen';} else {return 'peru';}}) .attr("opacity", 0.5) .attr("stroke-width", 15) .attr("fill","none") .attr("d", geoPath(p)); }); [-1, -3, -5, -7, -9].map((d,k)=>{ var data = offset(pays,d); data.map(dd => { var decalLignes = dd; for (var i=0; i { g_villes.append("text") .attr("class", "city_label") .text(d.name) .attr("font-family", "Viner Hand ITC") .attr("font-size", "10px") .attr("fill", "#544") .attr("x",projection(d.pos)[0]) .attr("y",projection(d.pos)[1]); g_villes.append("circle") .attr("r", 2) .attr("fill", "none") .attr("stroke", "dimgray") .attr("stroke-width", 1) .attr("cx",projection(d.pos)[0]) .attr("cy",projection(d.pos)[1]); }); g_villes.append("text") .attr("font-size", "24px") .attr("fill", "dimgray") .attr("font-family", "Informal Roman") .append("textPath") .attr("xlink:href", baseline.href) .attr("startOffset", '50%') .attr("text-anchor", "middle") .text('CANAL DE LA MANCHE'); return svg.node(); }48:T474,villes = [ {'pos': [-0.553889, 49.182222], 'name': 'Caen'}, {'pos':[-1.625, 49.638889], 'name': 'Cherbourg'}, {'pos':[-1.356944, 48.684444], 'name': 'Avranches'}, {'pos':[-4.485556, 48.390833], 'name': 'Brest'}, {'pos':[-2.048889, 48.456389], 'name': 'Dinan'}, {'pos':[-1.750833, 48.549722], 'name': 'Dol'}, {'pos':[-2.765278, 48.513611], 'name': 'Saint-Brieuc'}, {'pos':[-2.008889, 48.647222], 'name': 'Saint-Malo'}, {'pos':[-3.366667, 47.75], 'name': 'Lorient'}, {'pos':[-4.096389, 47.996667], 'name': 'Quimper'}, {'pos':[-0.702778, 49.279444], 'name': 'Bayeux'}, {'pos':[-3.985, 48.686111], 'name': 'Saint-Pol-de-Léon'}, {'pos':[-1.445278, 49.045278], 'name': 'Coutances'}, {'pos':[-3.231111, 48.785833], 'name': 'Tréguier'}, {'pos':[-4.141944, 50.37], 'name': 'Plymouth'}, {'pos':[-3.578889, 50.351111], 'name': 'Dartmouth'}, {'pos':[-5.065278, 50.151944], 'name': 'Falmouth'}, {'pos':[-2.456944, 50.613056], 'name': 'Weymouth'}, {'pos':[-2.766667, 50.733333], 'name': 'Bridport'}, {'pos':[-1.395278, 50.915], 'name': 'Southampton'}, {'pos':[-0.779167, 50.836389], 'name': 'Chichester'} ];49:[{"id":"75276815ed19b1df2a291e1800467d7d3d6ab56dcb50e253f87c80684878edbb09ebade81e6ebd15aff0a1088168568d1bd39247b4bc2a6027b96feb57af97fa","href":"https://static.observableusercontent.com/files/75276815ed19b1df2a291e1800467d7d3d6ab56dcb50e253f87c80684878edbb09ebade81e6ebd15aff0a1088168568d1bd39247b4bc2a6027b96feb57af97fa","name":"exemple.png","type":"image/png","lastModified":1578141396557.909,"size":417930}] 2e:{"id":"ba6dd915bdbdee77","slug":"chemin-decale-offset-paths","title":"Chemin décalé (Offset Paths)","thumbnail":"aaafc0f8d3a9b7dcb39dee9e31d2f6b1a6d9cdf838f3fca77c1e0fc6626c2b98","access_level":"public","create_time":"$D2020-01-02T19:11:12.053Z","update_time":"$D2021-04-07T07:08:13.610Z","view_time":null,"first_public_time":"$D2020-01-13T16:29:19.567Z","fork":false,"stars":43,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":3287,"publish_version":3287,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Chemin décalé (Offset Paths)","cells":[{"id":0,"value":"md`# Chemin décalé (Offset Paths)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"md`La reproduction d'un chemin (**path**) en décalé peut être très utile pour la cartographie. Par exemple, on pourrait vouloir produire le \"shadowing\" vu autour des terres sur les cartes anciennes, dessinées à la main ou dans des cartes plus modernes réalisées avec un style \"old fashion\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"md`

\n\nExtrait d'une carte de France en couleur du XVIIIème siècle archivée numériquement sur le [site Gallica](https://gallica.bnf.fr/ark:/12148/btv1b53142724p/f1.item.r=carte%20france.zoom) de la Bibliothèque nationale de France.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`${Object.assign(await FileAttachment(\"exemple.png\").image(), {\n style: 'max-width:640px',\n alt: 'Snake'\n})}\nExtrait de la carte [des câbles sous-marins de 2013](http://submarine-cable-map-2013.telegeography.com).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`Voici brièvement le principe de base pour le décalage d'un ségment :\n* on calcule le vecteur directeur du segment considéré\n\\`\\`\\`js\nlet v = [p1.x-p0.x, p1.y-p0.y];\n\\`\\`\\`\n* on calcule la norme de ce vecteur\n\\`\\`\\`js\nlet mag = Math.sqrt(v[0] * v[0] + v[1] * v[1]);\n\\`\\`\\`\n* on normalise le vecteur directeur\n\\`\\`\\`js\nlet vNorm = [v[0]/mag, v[1]/mag];\n\\`\\`\\`\n* on détermine un vecteur normal (perpendiculaire) à partir des coordonnées du vecteur directeur normé \n\\`\\`\\`js\nlet vPerp = [-vNorm[1], vNorm[0]];\n\\`\\`\\`\n* on peut ensuite calculer les coordonnées de l'image décalée de chaque point du segment initial\n\\`\\`\\`js\nlet newp0 = [p0.x + vPerp[0] * offset, p0.y + vPerp[1] * offset]; \nlet newp1 = [p1.x + vPerp[0] * offset, p1.y + vPerp[1] * offset]; \n\\`\\`\\`\net on mets tout cela dans une fonction.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2661,"value":"vNormal = (segment) => {\n // on définit le vecteur directeur du segment considéré\n let v = [segment[1].x-segment[0].x, segment[1].y-segment[0].y];\n // on calcule la norme de ce vecteur\n let mag = Math.sqrt(v[0] * v[0] + v[1] * v[1]);\n // on normalise le vecteur directeur\n let vNorm = [v[0]/mag, v[1]/mag];\n // on détermine le vecteur perpendiculaire\n return [-vNorm[1], vNorm[0]];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"decaleSegment = (segment, offset) => {\n //si la valeur de décalage est nulle, on renvoie les points tels quels.\n\tif (offset == 0) {\t\n return segment;\n\t} else { // sinon...\n // on détermine le vecteur perpendiculaire au segment\n let vPerp = vNormal(segment);\n // on calcule les coordonnées de l'image décalée de chaque point\n let newp0 = [segment[0].x + vPerp[0] * offset, segment[0].y + vPerp[1] * offset]; \n let newp1 = [segment[1].x + vPerp[0] * offset, segment[1].y + vPerp[1] * offset]; \n\n return [ {'x':newp0[0], 'y':newp0[1]}, {'x':newp1[0], 'y':newp1[1]} ];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"md `On définit ici quelques ensembles de points qui nous permettront d'illustrer la démarche.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"ptArrayToObject = (pts) => {\n var res = [];\n pts.map(d => {\n res.push({x:d[0], y:d[1]});\n });\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"p = [[10, 65], [120, 80], [140, 20], [190, 60], [130, 90], [210, 110], [220, 60], [270, 70], [230, 120], [260, 110], [250, 130], [210, 160], [180, 150], [90, 180], [45, 120], [10, 65]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"objp = ptArrayToObject(p);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1356,"value":"pp = [[10,80],[40,40],[80,15],[110,80],[70,140],[30,160],[10,80]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"objpp = ptArrayToObject(pp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2327,"value":"ppp = [[4.5,5],[5,3],[5.2,0.5], [5.5, 0], [4.7,0], [4.5,1], [4, 1.5], [ 3.7, 0], [3.5, 1], [2.5, 1.5],[2,0], [0,1], [0.5, 1.5], [1.5, 2], [2, 2.5], [1.5, 3], [1, 2.5], [0.5, 3], [0.5, 4], [1.5, 3.5], [2.5, 4.5], [1.5, 5], [1, 4.5], [0.5, 4.5], [0, 5], [0.5, 5.5], [3, 6],[4.5,5]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2330,"value":"objppp = ptArrayToObject(ppp.map(d=>{return [40+d[0]*30, 50+d[1]*20];}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2591,"value":"pppp = [[50,50], [70,50], [80,60], [90,40], [95, 20], [100,40], [110, 50], [130,45]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2593,"value":"objpppp = ptArrayToObject(pppp.map(d=>{return [2*d[0], 2*d[1]];}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`...et le fonction qui transformera un ensemble de points en **d3.path**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"trace = (pts, mode) => { \n var line = d3.line()\n .x(function(d) { return d.x; })\n .y(function(d) { return d.y; })\n .curve(mode) ;//d3.curveBasis, d3.curveCatmullRom, d3.curveLinear\n return line(pts);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"md `Voici l'illustration du résultat de la fonction _decale_. En bleu le segment d'origine et en brun-orangé l'image décalée du segment. Le décalage (l'**offset**) est ici de 10.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`Maintenant, testons avec un chemin c'est-à-dire plusieurs points consécutifs formant une ligne brisée.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"{\n const svg = d3.select(DOM.svg(500, 150));\n \n var pts = objp.slice(0,4);\n svg.append(\"path\")\n .attr(\"d\", trace(pts, d3.curveLinear))\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 3)\n .attr(\"stroke-opacity\", 0.9)\n .attr(\"stroke-linecap\",\"round\")\n .attr(\"stroke-linejoin\",\"round\")\n .attr(\"fill\", \"none\");\n \n for (var i=0; i { return \"\"+ptObj.x+\",\"+ ptObj.y;};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"pointsPresqueEgaux = (pt1, pt2, precision) => {\n if ( (d3.format(precision)(pt1.x) == d3.format(precision)(pt2.x)) && (d3.format(precision)(pt1.y) == d3.format(precision)(pt2.y)) ) { \n return true; \n } else {\n return false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"procheSegment = (line, pt, tol) => {\n var decP = decaleSegment(line, tol);\n var decM = decaleSegment(line, -tol);\n var decP2 = decaleSegment([decP[0],decM[0]], -tol);\n var decM2 = decaleSegment([decP[1],decM[1]], tol);\n var bbox = [[decP2[0].x,decP2[0].y], [decP2[1].x, decP2[1].y], [decM2[1].x, decM2[1].y], [decM2[0].x, decM2[0].y], [decP2[0].x,decP2[0].y]];\n\n var enveloppe = d3.polygonHull(bbox);\n \n return d3.polygonContains(enveloppe, [pt.x, pt.y]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"distance = (firstObject, secondObject) => { return Math.sqrt( ( firstObject.x - secondObject.x ) * (\nfirstObject.x - secondObject.x ) + ( firstObject.y - secondObject.y )\n* ( firstObject.y - secondObject.y ) );}","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"definitSegments = (pts) => {\n var segments = []\n for (var k = 0; k < pts.length-1; k++) {\n segments.push([pts[k],pts[k+1]])\n }\n return segments;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"calculeIntersection = (line1, line2, tol) => {\n var x1 = line1[0].x;\n var x2 = line1[1].x;\n var x3 = line2[0].x;\n var x4 = line2[1].x;\n var y1 = line1[0].y;\n var y2 = line1[1].y;\n var y3 = line2[0].y;\n var y4 = line2[1].y;\n var pt_denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);\n var pt_x_num = (x1*y2 - y1*x2) * (x3 - x4) - (x1 - x2) * (x3*y4 - y3*x4);\n var pt_y_num = (x1*y2 - y1*x2) * (y3 - y4) - (y1 - y2) * (x3*y4 - y3*x4);\n var I1 = 0;\n var I2 = 0;\n var pt = null;\n if (pt_denom != 0) { \n var pt = {'x': pt_x_num / pt_denom, 'y': pt_y_num / pt_denom}; \n if (procheSegment(line1, pt, tol)) {\n I1 = 1;\n }\n if (procheSegment(line2, pt, tol)) {\n I2 = 1;\n }\n }\n return [I1, I2, pt]; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"cheminDécaléA = (points, offset, tol) => {\n var res = []; \n var ajout = [];\n var seg, segprev, segnext, inter;\n var N = points.length-1; \n \n for (var i = 0; i < N; i++) {\n \n seg = decaleSegment(points.slice(i,i+2), offset)\n \n // intersection avec le segment suivant\n if ((i+1) < N){\n segnext = decaleSegment(points.slice(i+1,i+3), offset)\n inter = calculeIntersection(seg, segnext, tol);\n if (inter[2]!=null) { \n seg[1] = inter[2]; \n }\n }\n \n if (i==0) {\n res.push(seg[0], seg[1]);\n } else {\n res.push(seg[1]);\n }\n \n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"{\n const svg = d3.select(DOM.svg(500, 150));\n \n svg.append(\"path\")\n .attr(\"d\", trace(objp.slice(0,4), d3.curveLinear))\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 3)\n .attr(\"stroke-opacity\", 0.9)\n .attr(\"stroke-linecap\",\"round\")\n .attr(\"stroke-linejoin\",\"round\")\n .attr(\"fill\", \"none\");\n \n svg.append(\"path\")\n .attr(\"d\", trace(cheminDécaléA(objp.slice(0,4),10, 1), d3.curveLinear))\n .attr(\"stroke\", \"peru\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-opacity\", 0.9)\n .attr(\"stroke-linecap\",\"round\")\n .attr(\"stroke-linejoin\",\"round\")\n .attr(\"fill\", \"none\");\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"md`Maitenant, on a un résultat convenable pour une ligne brisée, nous devons tester à présent le cas d'un chemin fermé.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"{\n const svg = d3.select(DOM.svg(500, 180));\n \n svg.append(\"path\")\n .attr(\"d\", trace(objpp, d3.curveLinear))\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 3)\n .attr(\"stroke-opacity\", 0.9)\n .attr(\"stroke-linecap\",\"round\")\n .attr(\"stroke-linejoin\",\"round\")\n .attr(\"fill\", \"none\");\n \n svg.append(\"path\")\n .attr(\"d\", trace(cheminDécaléA(objpp,10, 1), d3.curveLinear))\n .attr(\"stroke\", \"peru\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-opacity\", 0.9)\n .attr(\"stroke-linecap\",\"round\")\n .attr(\"stroke-linejoin\",\"round\")\n .attr(\"fill\", \"none\");\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1467,"value":"md`On constate que la fonction _cheminDécaléA_ n'est pas satisfaisante au point d'ouverture/fermeture du chemin. Nous allons modifier la fonction pour corriger ce problème : dans le cas d'un chemin fermé, le premier segment décallé doit tenir compte de l'intersection avec le dernier segment.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"controleFermeture = (pts) => {\n var res = false;\n if (ptObjtoString(pts[0]) == ptObjtoString(pts[pts.length-1])) { res = true;}\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"{\n const svg = d3.select(DOM.svg(500, 180));\n \n svg.append(\"path\")\n .attr(\"d\", trace(objpp, d3.curveLinear))\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 3)\n .attr(\"stroke-opacity\", 0.9)\n .attr(\"stroke-linecap\",\"round\")\n .attr(\"stroke-linejoin\",\"round\")\n .attr(\"fill\", \"none\");\n \n svg.append(\"path\")\n .attr(\"d\", trace(cheminDécaléB(objpp,10, 1), d3.curveLinear))\n .attr(\"stroke\", \"peru\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-opacity\", 0.9)\n .attr(\"stroke-linecap\",\"round\")\n .attr(\"stroke-linejoin\",\"round\")\n .attr(\"fill\", \"none\");\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2725,"value":"md`On a un résultat convenable mais nous devons tester des cas où le chemin est plus complexe car plus 'accidenté'. Voici ci-dessous le résultat de la fonction cheminDécaléB avec un offset de 25 pour un chemin 'accidenté' qui pourrait représenter une embouchure de rivière sur une carte.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2746,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2750,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2751,"value":"md`Pour solutionner ce problème, nous créons une fonction qui nous permet d'évaluer la position de l'intersection. En définissant un segment normal au segment considéré passant par le milieu de celui-ci et en déterminant la position d'une intersection par rapport à celui-ci (à gauche ou à droite). Si l'intersection est à droite cela signifie que l'intersection est du côté de l'extrémité 1 du segment sinon elle est du côté de l'extrémité 0. Pour parcourir le chemin dans le sens horaire, il ne faut considérer que les intersections à droite sinon le chemin se replira sur lui-même.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2766,"value":"segmentPerp = (segment, L) => {\n var vPerp = vNormal(segment);\n var milieu = {x:(segment[1].x+segment[0].x)/2,y:(segment[1].y+segment[0].y)/2};\n return [milieu, {x:milieu.x + L*vPerp[0], y:milieu.y + L*vPerp[1]}]; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2647,"value":"\n// La fonction retourn les valeurs suivantes:\n// 0 --> au milieu \n// +1 --> à gauche\n// -1 --> à droite\nrelativePosition = (segment, r) => { \n var s = segmentPerp(segment, 10); \n \n var p = s[0];\n var q = s[1];\n\n return Math.sign((q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y));\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2642,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3042,"value":"md`Sur la figure ci-dessus, le cercle rouge est le point d'intersection des segments 3 et 4. C'est le seul point d'intersection (les autres sont en vert) qui n'est pas défini dans le sens de parcours du chemin. Par conséquent les segments 3 et 4 ne sront pas considéré et le chemin reviendra au point d'intersection (en bleu) des segments 2 et 5 pour continuer.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2978,"value":"corrigeDivergence = (points, i, offset, tol) => {\n var N = points.length -1;\n var seg, segprev,segnext,segnext2;\n \n seg = decaleSegment([points[i],points[i+1]], offset);\n if (i>0) {\n segprev = decaleSegment([points[i-1],points[i]], offset);\n } else {\n segprev = decaleSegment([points[N],points[i]], offset);\n }\n if (i {\n \n const distance2 = (p1, p2) => {\n var dx = p1.x - p2.x,\n dy = p1.y - p2.y;\n return dx * dx + dy * dy;\n };\n \n const distAuSegment = (p, seg) => { \n var l2 = distance2(seg[0], seg[1]);\n if (l2 == 0) return distance2(p, seg[0]); \n var t = ((p.x - seg[0].x) * (seg[1].x - seg[0].x) + (p.y - seg[0].y) * (seg[1].y - seg[0].y)) / l2; \n if (t < 0) return distance2(p, seg[0]);\n if (t > 1) return distance2(p, seg[1]); \n return Math.sqrt(distance2(p, { x: seg[0].x + t * (seg[1].x - seg[0].x), y: seg[0].y + t * (seg[1].y - seg[0].y) })); }\n \n var seg = definitSegments(chemin); \n var d = distAuSegment(pt, seg[0]);\n for (var i=0; i {\n var seg1 = definitSegments(pts1);\n var seg2 = definitSegments(pts2);\n for (var i=0; i {\n \n var is = 0;\n var chemin = [];\n var seg = definitSegments(pts)\n var I = collecteIntersections(seg, tol);\n \n if (I.length==0) {return pts;}\n \n chemin.push(seg[is][0]);\n while (is {return d.cut==is});\n if (inter.length<=0) {\n chemin.push(seg[is][1]);\n is++;\n } else { \n // on ajoute le point d'intersection\n chemin.push(inter[0].pt);\n // ...pour continuer le chemin on ignore les segments jusqu'au segment qui a coupé le chemin\n is = inter[0].by;\n } \n }\n\n return chemin;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2857,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1547,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"md`La fonction _cheminDécaléD_ permet maintenant de gérer les intersections de lignes décalées et toujours de représenter un chemin fermé. Mais regardons à présent quelques cas plus complexe.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3093,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3020,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":3102,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"md`Le même chemin mais avec un offset de 5, 10, 15 et 20 (et non plus seulement de 10). L'épaisseur du trait est ajuster avec le décalage.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"{\n const svg = d3.select(DOM.svg(500, 180));\n \n var pts = objp;\n \n svg.append(\"path\")\n .attr(\"d\", trace(pts, d3.curveLinear))\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 3)\n .attr(\"stroke-opacity\", 0.9)\n .attr(\"stroke-linecap\",\"round\")\n .attr(\"stroke-linejoin\",\"round\")\n .attr(\"fill\", \"none\");\n \n [5,10,15,20].map((d,k) => {\n var decalLignes = cheminDécaléD(pts, d, 0.01);\n\n for (var i=0; i {\n var decalLignes = cheminDécaléD(pts, d, 1);\n\n for (var i=0; i {\n var offset_lands = [];\n for (var il=0; il1) {\n var decalage = cheminDécaléD(ptObjCoordinates,value, 0.01);\n }\n offset_lands.push(decalage);\n }\n return offset_lands;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2228,"value":"$47","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`On le savait mais en zoomant on constate encore que l'algorithme n'est pas parfait pour certaines parties \"accidentée. D'autre part, les décalages pour les iles et les terres principales se chevauchent. Par conséquent, l'algorithme est encore à améliorer, mais ce sera pour plus tard...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"w = Math.min(500, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"h = w*0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":2030,"value":"projection = d3.geoConicConformal()\n .parallels([40, 68])\n .rotate([2, 4])\n .center([8 - 10, 53.823])\n .scale(900 * 6)\n .translate([w/2, h/2]);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2092,"value":"$48","pinned":false,"hidden":false,"mode":"ojs"},{"id":1993,"value":"pays = world.features\n\n // on ne garde que la France et le royaume-Uni\n .filter(o => o.properties.name == \"France\"\n || o.properties.name == \"United Kingdom\"\n )\n\n // flatten multipolygons into polygons\n .reduce((countries2, feature) => {\n if (feature.geometry.type == \"Polygon\") {\n countries2.push(feature);\n } else { // MultiPolygon\n feature.geometry.coordinates.forEach(coordinates => {\n countries2.push({\n type: \"Feature\",\n properties: feature.properties,\n geometry: { type: \"Polygon\", coordinates },\n });\n });\n }\n\n return countries2;\n }, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1990,"value":"// from: http://geojson.xyz/\nworld = d3.json(\"https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_countries.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\", \"d3-geo-projection@2\", \"d3-array@2.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1815,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W49","stdlib":"1","titling":"auto"}} 2f:"$2e:body"