2a:null 2b:["$","title",null,{"children":"Intersection entre 2 droites définies par des segments | linard-y | Observable"}] 31:Ta72,intersectionEntreSegments = (AB, CD) => { const A = AB[0]; const B = AB[1]; const C = CD[0]; const D = CD[1]; var r_num = (A.y-C.y)*(D.x-C.x)-(A.x-C.x)*(D.y-C.y); var r_den = (B.x-A.x)*(D.y-C.y)-(B.y-A.y)*(D.x-C.x); var s_num = (A.y-C.y)*(B.x-A.x)-(A.x-C.x)*(B.y-A.y); var s_den = (B.x-A.x)*(D.y-C.y)-(B.y-A.y)*(D.x-C.x); var dAB = Math.sqrt((B.x - A.x)**2 + (B.y - A.y)**2); var dCD = Math.sqrt((D.x - C.x)**2 + (D.y - C.y)**2); var r = r_num/r_den; var s = s_num/s_den; // Si r_den et r_num sont nuls, AB & CD sont colinéaires if (r_den==0 && r_num==0) return {value: 0, P:null, regP: null, comment: 'alignés', extension:[null,null]}; // Si r_den est nul, AB & CD sont parallelles if (r_den==0 || s_den==0) return {value: -1, P:null, regP: null, comment: 'parallelles', extension:[null,null]}; var P = {x:A.x+r*(B.x-A.x), y:A.y+r*(B.y-A.y)} var regP = {x:P.x+(B.x-A.x)/dAB+(D.x-C.x)/dCD, y:P.y+(B.y-A.y)/dAB+(D.y-C.y)/dCD} // intersection sur [AB] et [CD] if (r>0 && r<1 && s>0 && s<1) return {value: 1, P:P, regP: regP, comment: 'P se trouve sur [AB] et [CD]', extension:[null,null]}; // intersection à l'extérieur du segment [AB] mais sur [CD] if (r<=0 && s>0 && s<1) return {value: 2, P:P, regP: regP, comment: 'P se trouve sur [CD] et sur une extension de AB côté A', extension:[[A,P],null]}; if (r>=1 && s>0 && s<1) return {value: 3, P:P, regP: regP, comment: 'P se trouve sur [CD] et sur une extension de AB côté B', extension:[[B,P],null]}; // intersection à l'extérieur du segment [CD] mais sur [AB] if (s<=0 && r>0 && r<1) return {value: 4, P:P, regP: regP, comment: 'P se trouve sur [AB] et sur une extension de CD côté C', extension:[null,[C,P]]}; if (s>=1 && r>0 && r<1) return {value: 5, P:P, regP: regP, comment: 'P se trouve sur [AB] et sur une extension de CD côté D', extension:[null,[D,P]]}; // intersection à l'extérieur des segments [AB] et [CD] if (r<=0 && s<=0) return {value: 6, P:P, regP: regP, comment: 'P se trouve sur une extension de AB côté A et sur une extension de CD côté C', extension:[[A,P],[C,P]]}; if (r>=1 && s<=0) return {value: 7, P:P, regP: regP, comment: 'P se trouve sur une extension de AB côté B et sur une extension de CD côté C', extension:[[B,P],[C,P]]}; if (r<=0 && s>=1) return {value: 8, P:P, regP: regP, comment: 'P se trouve sur une extension de AB côté A et sur une extension de CD côté D', extension:[[A,P],[D,P]]}; if (r>=1 && s>=1) return {value: 9, P:P, regP: regP, comment: 'P se trouve sur une extension de AB côté B et sur une extension de CD côté D', extension:[[B,P],[D,P]]}; }32:T786,{ const svg = d3.select(DOM.svg(500, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[50,80],[100,130]]); var CD = ptArray_ptObject([[25,20],[75,70]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-5) .attr("y", d.y+10) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-5) .attr("y", d.y-12) .attr("dy", ".35em") .text(i==0?'C':'D'); }); gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = null'); return svg.node(); }33:T786,{ const svg = d3.select(DOM.svg(500, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[70,90],[120,140]]); var CD = ptArray_ptObject([[10,30],[60,80]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-5) .attr("y", d.y+10) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-5) .attr("y", d.y-12) .attr("dy", ".35em") .text(i==0?'C':'D'); }); gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = null'); return svg.node(); }34:T8c8,{ const svg = d3.select(DOM.svg(500, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[60,90],[110,140]]); var CD = ptArray_ptObject([[100,30],[70,120]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-6) .attr("y", d.y-15) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-18) .attr("y", d.y+12) .attr("dy", ".35em") .text(i==0?'C':'D'); }); svg.append("circle") .attr("cx", I.P.x) .attr("cy", I.P.y) .attr("r", 3) .attr("stroke", "darkgreen") .attr("stroke-width", 3) .attr("fill", "none"); svg.append("text") .attr("x", I.P.x+12) .attr("y", I.P.y) .attr("dy", ".35em") .text('P'); gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = {x:' + I.P.x + ', y:' + I.P.y + '}'); return svg.node(); }35:Tb93,{ const svg = d3.select(DOM.svg(500, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[100,100],[140,130]]); var CD = ptArray_ptObject([[50,40],[20,120]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-6) .attr("y", d.y-15) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-12) .attr("y", d.y) .attr("dy", ".35em") .text(i==0?'C':'D'); }); svg.append("circle") .attr("cx", I.P.x) .attr("cy", I.P.y) .attr("r", 3) .attr("stroke", "darkgreen") .attr("stroke-width", 3) .attr("fill", "none"); svg.append("text") .attr("x", I.P.x+12) .attr("y", I.P.y) .attr("dy", ".35em") .text('P'); if (I.extension[0]!=null){ svg.append("path") .attr("d", trace(I.extension[0])) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } if (I.extension[1]!=null){ svg.append("path") .attr("d", trace(I.extension[1])) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = {x:' + I.P.x.toFixed(2) + '... , y:' + I.P.y.toFixed(2) + '... }'); return svg.node(); }36:Tb8f,{ const svg = d3.select(DOM.svg(500, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[30,40],[70,70]]); var CD = ptArray_ptObject([[120,40],[90,120]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-6) .attr("y", d.y-15) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-12) .attr("y", d.y) .attr("dy", ".35em") .text(i==0?'C':'D'); }); svg.append("circle") .attr("cx", I.P.x) .attr("cy", I.P.y) .attr("r", 3) .attr("stroke", "darkgreen") .attr("stroke-width", 3) .attr("fill", "none"); svg.append("text") .attr("x", I.P.x+12) .attr("y", I.P.y) .attr("dy", ".35em") .text('P'); if (I.extension[0]!=null){ svg.append("path") .attr("d", trace(I.extension[0])) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } if (I.extension[1]!=null){ svg.append("path") .attr("d", trace(I.extension[1])) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = {x:' + I.P.x.toFixed(2) + '... , y:' + I.P.y.toFixed(2) + '... }'); return svg.node(); }37:Tb91,{ const svg = d3.select(DOM.svg(500, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[70,70],[120,120]]); var CD = ptArray_ptObject([[60,120],[20,170]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-6) .attr("y", d.y-15) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-12) .attr("y", d.y) .attr("dy", ".35em") .text(i==0?'C':'D'); }); svg.append("circle") .attr("cx", I.P.x) .attr("cy", I.P.y) .attr("r", 3) .attr("stroke", "darkgreen") .attr("stroke-width", 3) .attr("fill", "none"); svg.append("text") .attr("x", I.P.x+12) .attr("y", I.P.y) .attr("dy", ".35em") .text('P'); if (I.extension[0]!=null){ svg.append("path") .attr("d", trace(I.extension[0])) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } if (I.extension[1]!=null){ svg.append("path") .attr("d", trace(I.extension[1])) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = {x:' + I.P.x.toFixed(2) + '... , y:' + I.P.y.toFixed(2) + '... }'); return svg.node(); }38:Tb91,{ const svg = d3.select(DOM.svg(500, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[30,130],[90,160]]); var CD = ptArray_ptObject([[100,40],[70,120]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-6) .attr("y", d.y-15) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-12) .attr("y", d.y) .attr("dy", ".35em") .text(i==0?'C':'D'); }); svg.append("circle") .attr("cx", I.P.x) .attr("cy", I.P.y) .attr("r", 3) .attr("stroke", "darkgreen") .attr("stroke-width", 3) .attr("fill", "none"); svg.append("text") .attr("x", I.P.x+12) .attr("y", I.P.y) .attr("dy", ".35em") .text('P'); if (I.extension[0]!=null){ svg.append("path") .attr("d", trace(I.extension[0])) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } if (I.extension[1]!=null){ svg.append("path") .attr("d", trace(I.extension[1])) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = {x:' + I.P.x.toFixed(2) + '... , y:' + I.P.y.toFixed(2) + '... }'); return svg.node(); }39:Tb92,{ const svg = d3.select(DOM.svg(600, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[70,120],[110,40]]); var CD = ptArray_ptObject([[40,110],[20,60]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-6) .attr("y", d.y-15) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-12) .attr("y", d.y) .attr("dy", ".35em") .text(i==0?'C':'D'); }); svg.append("circle") .attr("cx", I.P.x) .attr("cy", I.P.y) .attr("r", 3) .attr("stroke", "darkgreen") .attr("stroke-width", 3) .attr("fill", "none"); svg.append("text") .attr("x", I.P.x+12) .attr("y", I.P.y) .attr("dy", ".35em") .text('P'); if (I.extension[0]!=null){ svg.append("path") .attr("d", trace(I.extension[0])) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } if (I.extension[1]!=null){ svg.append("path") .attr("d", trace(I.extension[1])) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = {x:' + I.P.x.toFixed(2) + '... , y:' + I.P.y.toFixed(2) + '... }'); return svg.node(); }3a:Tb90,{ const svg = d3.select(DOM.svg(600, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[130,40],[70,120]]); var CD = ptArray_ptObject([[40,110],[20,60]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-6) .attr("y", d.y-15) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-12) .attr("y", d.y) .attr("dy", ".35em") .text(i==0?'C':'D'); }); svg.append("circle") .attr("cx", I.P.x) .attr("cy", I.P.y) .attr("r", 3) .attr("stroke", "darkgreen") .attr("stroke-width", 3) .attr("fill", "none"); svg.append("text") .attr("x", I.P.x+12) .attr("y", I.P.y) .attr("dy", ".35em") .text('P'); if (I.extension[0]!=null){ svg.append("path") .attr("d", trace(I.extension[0])) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } if (I.extension[1]!=null){ svg.append("path") .attr("d", trace(I.extension[1])) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = {x:' + I.P.x.toFixed(2) + '... , y:' + I.P.y.toFixed(2) + '... }'); return svg.node(); }3b:Tb8e,{ const svg = d3.select(DOM.svg(600, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[70,120],[120,50]]); var CD = ptArray_ptObject([[20,40],[25,110]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-6) .attr("y", d.y-15) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-12) .attr("y", d.y) .attr("dy", ".35em") .text(i==0?'C':'D'); }); svg.append("circle") .attr("cx", I.P.x) .attr("cy", I.P.y) .attr("r", 3) .attr("stroke", "darkgreen") .attr("stroke-width", 3) .attr("fill", "none"); svg.append("text") .attr("x", I.P.x+12) .attr("y", I.P.y) .attr("dy", ".35em") .text('P'); if (I.extension[0]!=null){ svg.append("path") .attr("d", trace(I.extension[0])) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } if (I.extension[1]!=null){ svg.append("path") .attr("d", trace(I.extension[1])) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = {x:' + I.P.x.toFixed(2) + '... , y:' + I.P.y.toFixed(2) + '... }'); return svg.node(); }3c:Tb90,{ const svg = d3.select(DOM.svg(600, 180)) .style("font", "9px times"); const gtext = svg.append("g") .style("font", "14px times") var AB = ptArray_ptObject([[10,60],[70,110]]); var CD = ptArray_ptObject([[120,40],[120,120]]); var I = intersectionEntreSegments(AB, CD); svg.append("path") .attr("d", trace(AB)) .attr("stroke", "steelblue") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); AB.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-6) .attr("y", d.y-15) .attr("dy", ".35em") .text(i==0?'A':'B'); }); svg.append("path") .attr("d", trace(CD)) .attr("stroke", "peru") .attr("stroke-width", 3) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("fill", "none"); CD.map((d,i) => { svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 3) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("fill", "none"); svg.append("text") .attr("x", d.x-12) .attr("y", d.y) .attr("dy", ".35em") .text(i==0?'C':'D'); }); svg.append("circle") .attr("cx", I.P.x) .attr("cy", I.P.y) .attr("r", 3) .attr("stroke", "darkgreen") .attr("stroke-width", 3) .attr("fill", "none"); svg.append("text") .attr("x", I.P.x+12) .attr("y", I.P.y) .attr("dy", ".35em") .text('P'); if (I.extension[0]!=null){ svg.append("path") .attr("d", trace(I.extension[0])) .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } if (I.extension[1]!=null){ svg.append("path") .attr("d", trace(I.extension[1])) .attr("stroke", "peru") .attr("stroke-width", 1) .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("stroke-dasharray","5, 3") .attr("fill", "none"); } gtext.append("text") .attr("x", 140) .attr("y", 20) .attr("dy", ".35em") .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", ".0em") .text(I.comment) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "1.1em") .text('value = ' + I.value) .append("tspan") .attr("x", 140) .attr("y", 20) .attr("dy", "2.2em") .text('P = {x:' + I.P.x.toFixed(2) + '... , y:' + I.P.y.toFixed(2) + '... }'); return svg.node(); }3d:[] 2e:{"id":"c7b7adc6dc96692c","slug":"intersection-entre-2-segments","title":"Intersection entre 2 droites définies par des segments","thumbnail":"271658edd778813bbc684566da280582910677e760193be94997ec91875300e2","access_level":"public","create_time":"$D2020-01-24T09:57:03.240Z","update_time":"$D2021-01-04T15:44:21.321Z","view_time":null,"first_public_time":"$D2020-01-24T12:47:55.170Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":284,"publish_version":284,"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":0,"collection":null,"type":"notebook","body":{"title":"Intersection entre 2 droites définies par des segments","cells":[{"id":0,"value":"md`# Intersection entre 2 droites définies par des segments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`## La fonction :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`## Illustration des 11 résultats possibles :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"trace = (pts) => { \n var line = d3.line()\n .x(function(d) { return d.x; })\n .y(function(d) { return d.y; })\n .curve(d3.curveLinear);\n return line(pts);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"ptArray_ptObject = (pts) => {\n if (Array.isArray(pts[0])) {\n var res = [];\n pts.map(d => {\n res.push({x:d[0], y:d[1]});\n });\n return res;\n } else {\n return {x:pts[0], y:pts[1]};\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"ptObject_ptArray = (pts) => {\n if (Array.isArray(pts)) {\n var res = [];\n pts.map(d => {\n res.push([d.x, d.y]);\n });\n return res;\n } else {\n return [pts.x, pts.y];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"A = ptArray_ptObject([20,20])","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"B = ptArray_ptObject([100,100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"C = ptArray_ptObject([120,160])","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"pointLineDistance(C, [A, B])","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"function pointLineDistance(M, AB) {\n const A = AB[1];\n const B = AB[0];\n return ((B.y - A.y) * M.x - (B.x - A.x) * M.y + B.x * A.y - B.y * A.x) / Math.sqrt((B.y - A.y)**2 + (B.x - A.x)**2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\", \"d3-geo-projection@2\", \"d3-array@2.4\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 2f:"$2e:body"