2c:null 2d:["$","title",null,{"children":"Génération procédurale de cartes | linard-y | Observable"}] 32:Ta78,identifierElements = function(pavage, niv) { let data = pavage.pavés; let T = -1; let E = -1; var pile = []; // liste des index des pavés que l'on doit explorer var connus = []; // liste des index des pavés déjà associés à un élement géographique // on s'occupe d'identifier d'abord toutes les étendues d'eau var inconnus = data.filter(function(d) {return (d.geoElementID==-1 && d.elevation 0) { var start = inconnus[0].id; E++; data[start].geoElementID = E; pile.push(start); connus.push(start); while (pile.length > 0) { var i = pile[0]; pile.shift(); data[i].voisins.forEach(function(e) { if (connus.indexOf(e) < 0 ) { if (data[e].elevation >= -100 && data[e].elevation < niv) { data[e].geoElementID = E; pile.push(e); connus.push(e); } } }); } inconnus = data.filter(function(d) {return (d.geoElementID==-1 && d.elevation=niv);}); while (inconnus.length > 0) { var start = inconnus[0].id; T++; data[start].geoElementID = T; pile.push(start); connus.push(start); while (pile.length > 0) { var i = pile[0]; pile.shift(); data[i].voisins.forEach(function(e) { if (connus.indexOf(e) < 0 ) { if (data[e].elevation >= niv && data[e].elevation < 100) { data[e].geoElementID = T; pile.push(e); connus.push(e); } } }); } inconnus = data.filter(function(d) {return (d.geoElementID==-1 && d.elevation>=niv);}); } function numTerres(pavage, niv) { let pavés = pavage.pavés; let pavés_terrestres = pavés.filter(function(d){ return (d.elevation >= niv)}); let ids = []; pavés_terrestres.map(function(d){ if(ids.indexOf(d.geoElementID) == -1) {ids.push(d.geoElementID);} }); return ids.length } function numEaux(pavage, niv) { let pavés = pavage.pavés; let pavés_eaux = pavés.filter(function(d){ return (d.elevation < niv)}); let ids = []; pavés_eaux.map(function(d){ if(ids.indexOf(d.geoElementID) == -1) {ids.push(d.geoElementID);} }); return ids.length } return {terres:numTerres(carte, niveau_de_la_mer), eaux:numEaux(carte, niveau_de_la_mer)} }33:T4b3,identifierRivage = function(pavage) { let data = pavage.pavés; let r = -1; let _rivages = []; // tableau destiné à stocker les infos pour les tracés de littoral let pavés_terrestres = data.filter(function(d){ return (d.elevation >= niveau_de_la_mer)}); pavés_terrestres.map(function(d){ pavage.voronoi.cells[d.id].halfedges.forEach(function(e) { var bord = pavage.voronoi.edges[e]; if (bord.left && bord.right) { // s'il existe un pavé de part et d'autre du bord... (a minima il y a, d'un côté, le pavé terrestre à partir de laquelle on a défini le bord) //...on cherche d'abord l'index du pavé qui n'est pas celui qui a servi à définir le bord var ei = bord.left.index; if (ei == d.id) { ei = bord.right.index; } if (data[ei].elevation < niveau_de_la_mer) { // si la pavé connexe est un pavé d'eau... var start = bord[0]; var end = bord[1]; r++; _rivages.push({id: r, start:start, end:end, terre:d.geoElementID, eau: data[ei].geoElementID}); } } }) }); return _rivages; }34:T611,md`#### Créer des lignes de côtes continues Nous avons récupéré un tableau contenant les bords périphériques des éléments géographiques mais cela ne constitue pas une ligne de rivages continue. En parcourant toute la liste des identifiants des éléments géographiques, nous pouvons filtrer le tableau de rivages pour ne garder que les données d'un seul élément. A partir de ce sous-tableau nous pourrons unir les bords en une ligne continue. Pour chaque élément, il faudra déterminer si la ligne de rivage est fermée (l'intégralité de l'élément est visible sur la carte) ou ouverte (une partie de l'élément n'est pas visisble donc la ligne de rivage ne boucle pas). Dans ce second cas, la ligne aura deux extrimités que nous commencerons par détecter. Chaque bord, c'est-à-dire chaque tronçon de rivage, est défini par 2 points. L'ensemble des tronçons peut se tranformer en un ensemble de points et les extrémités seront définies par les deux points qui auront une seule occurence dans ce tableau de points. Dans le cas d'une ligne de rivage ouvert, le point de départ sera l'une des extrémités et on cherchera le tronçon contenant cette extrémité. Dans le cas d'une ligne de rivage fermée, on pourra choisir n'importe quel point de départ avec son tronçon associé. On se déplacera ensuite dans le tableau des tronçons en recherchant le tronçon n+1 dont le point terminal correspond dans le tronçon n au point de démarrage. A chaque itération le tableau de tronçon est réduit du tronçon utilisé.`35:Tc95,creerLigneDeCotesContinue = function(rivages, k, l) { let cotes = []; // tableau pour stocker les points qui forme successivement la ligne de rivage de l'élement géographique var rivagesElement = rivages.filter(function(r){return (r.terre==k && r.eau==l);}); if (rivagesElement.length >0) { var startLine = rivagesElement[0]; // on considère a priori que le chemin est fermé par conséquent on peut partir de n'importe quel rivages pour commencer à construire le chemin, ici on part du premier var start = startLine.start; var end = startLine.end; //on teste maintenant l'hypothèse du chemin fermé var pts = []; rivagesElement.map(function(d){ pts.push(d.start); pts.push(d.end); }); var unique_pts = []; for (var p = 0; p < pts.length; p++) { if(unique_pts.indexOf(pts[p]) == -1) {unique_pts.push(pts[p]);} }; var endmembers = []; unique_pts.map(function(d,i){ if (pts.indexOf(d) == pts.lastIndexOf(d)) { endmembers.push(d);} }); if (endmembers.length > 0) { // le chemin a plusieurs extrémités donc le chemin est ouvert //...on va donc redéfinir startLine pour commencer de l'une des extrémités trouvées var tmp = rivagesElement.filter(function(e) {return (e.start == endmembers[0]);}); if (tmp.length>0) { startLine = tmp[0]; start = startLine.start; end = startLine.end; } else { tmp = rivagesElement.filter(function(e) {return (e.start == endmembers[1]);}); if (tmp.length>0) { startLine = tmp[0]; start = startLine.start; end = startLine.end; } else { tmp = rivagesElement.filter(function(e) {return (e.end == endmembers[1]);}); if (tmp.length>0) { startLine = tmp[0]; start = startLine.end; end = startLine.start; } else { tmp = rivagesElement.filter(function(e) {return (e.end == endmembers[0]);}); if (tmp.length>0) { startLine = tmp[0]; start = startLine.end; end = startLine.start; } } } } } cotes.push(start); cotes.push(end); var rem = rivagesElement.indexOf(startLine); rivagesElement.splice(rem, 1); // maintenant que les deux premiers points sont bien en place on peut aller de rivage en rivage en trouvant dans le start de chaque rivage successif le dernier point (le end) de celui d'avant. var N=rivagesElement.length; for (var i = 0; i < N; i++) { var next = rivagesElement.filter(function(e) {return (end == e.start | end ==e.end);}); if (next.length > 0) { if (next[0].start == end) { end = next[0].end; } else if (next[0].end == end) { end = next[0].start; } cotes.push(end); rem = rivagesElement.indexOf(next[0]); rivagesElement.splice(rem, 1); } } } return cotes }36:T4fb,dessineBasiqueRivage = (svg, size, data) => { var modified_data =[]; data.map(function(d){ modified_data.push({x:d[0], y:d[1]}); }); var scaleX = d3.scaleLinear().domain([0, size[0]]).range([0, size[0]]); var scaleY = d3.scaleLinear().domain([0, size[1]]).range([0, size[1]]); var path = d3.line() .x(function(d) { return scaleX(d.x);}) .y(function(d) { return scaleY(d.y);}) .curve(d3.curveLinear); const rivagesLayer = SVGCarte.append('g').attr("id", "rivageLayer"); rivagesLayer.append("path") .attr("class", "rivage") .attr("fill", "none") .style("stroke", "#d6ded5") .style("stroke-width", "1.6") .attr("stroke-opacity", 0.9) .attr("stroke-linecap","round") .attr("stroke-linejoin","round") .attr("d", path(modified_data)); //for (let m = 5; m >= 1; m--) // svg.append("path") // .attr("d", path(modified_data)) // .attr("class", "rivage") // .attr("fill", "none") // .attr("stroke-opacity", 0.9) // .style("stroke-width", m *4 + "px") // .style("stroke", d3.interpolateBlues(1 - Math.sqrt(m / 10))) // .attr("stroke-linecap","round") // .attr("stroke-linejoin","round"); }37:[] 30:{"id":"53130666d11aa5a7","slug":"gpc-etape-3","title":"Génération procédurale de cartes","thumbnail":"9922149aa4eaafc4364e58156c69dcba7f699c206d8a61d80fd44c0e24e418bb","access_level":"public","create_time":"$D2019-12-19T21:46:11.682Z","update_time":"$D2022-01-07T17:59:23.365Z","view_time":null,"first_public_time":"$D2019-12-19T21:46:48.560Z","has_unpublished_edits":null,"fork":true,"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":1305,"publish_version":1305,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1054c72829cb0575","slug":"generation-procedurale-de-cartes","title":"Génération procédurale de cartes","owner":{"id":"9784867a3e59436b","login":"linard-y","name":""}},"type":"notebook","body":{"titling":"auto","title":"Génération procédurale de cartes","cells":[{"id":871,"value":"md`# Génération procédurale de cartes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"md`Inspiré par les travaux remarquables de [Amit Patel](https://www.redblobgames.com/maps/mapgen4/), [Azgaar](https://azgaar.wordpress.com/) et [Martin O'Leary](https://mewo2.com/notes/terrain/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"Navigation(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"Separation(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`## ETAPE 3 : Détection des lignes de rivage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"md`Cette étape va nous permettre de détécter et de tracer les lignes de rivages entre les éténdues d'eau (océan, mers intérieures, lacs...) et les terres (continents, îles...). Nous allons expliquer les étapes succéssives à mettre en place.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"md`#### Fixer le niveau de la mer\nPour séparer la terre et l'eau, il nous faut définir un seuil d'élévation. Les pavés dont l'élévation est supérieures à ce seuil corresponderont à des zones immergées; ceux dont l'élévation est inférieure corresponderont à des étendues d'eau. Comme nous ne voulons pas forcément considérer la batimetrie (la profondeur des fonds marins) nous n'avons besoin que d'une petite gamme d'élévation (qui nous sera tout de même utile plus tard). Nous définissons un niveau de la mer à 0,05 mais vous pouvez d'autres valeurs si vous le souhaitez.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"niveau_de_la_mer = 0.05","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"md`#### Identifier les terres et les eaux par un algorithme de remplissage par diffusion (_Full Filling_)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"md`Le principe d'un algorithme de remplissage est d'explorer l'ensemble connexe de cellules ayant un attribut ou une propriété commune. Dans notre cas, le critère commun sera : inférieur (ou supérieur) au niveau de la mer. A partir d'un pavé initial, on testera si les pavés juxtaposé à chaque bord du pavé de départ répond au critère ; si oui, le ou les pavés juxtaposés feront parti de l'ensemble et on les utilisera par la suite comme pavé de départ dans une démarche itérative. \n\nUne fois qu'un ensemble est complètement exploré autrement dit quand l'intégralité des bords du domaine ont été détectés, on passe à un autre ensemble (d'eau ou de terre). A chaque ensemble on attribue un identifiant pour pouvoir par la suite utilisé ces ensembles individuellement. Au final, tous les pavés devront avoir été explorés.\n\nLa mise en oeuvre de cet algorithme va nous permettre d'identfier des élements géographiques de type _terre_ et de type _eau_.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"md`#### Récupérér l'ensemble des rivages\nMaintenant que nos éléments géographiques sont individualisés et identifiés, on peut récupérér les bords externes de chaque domaine pour ensuite créer des _path_ qui pourront servir dans les représentation graphique de ces objets, pour le repèrage sur la carte ou pour réaliser des _clip_ spécifiques. L'ensemble des bords extérieurs de chaque ensemble constitue les tronçons de ligne qui délimite un domaine terrestre d'un domaine maritime ou lacustre, il s'agit donc des rivages ou des côtes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"md`#### Creation des lignes pour dessiner les pavés et les lignes de côtes\n\nPour comprendre la séquence d'algorithme à travers un exemple visuel, on définit ci-dessous une fonction qui va permettent d'afficher sur chaque pavé l'identifiant de l'élement géographieque auqel il appartient.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"afficheElementIDs = function(svg, pavage){\n d3.selectAll('.elementID').remove();\n let data = pavage.pavés;\n data.map(function(d, i) { \n svg.append(\"text\")\n .attr(\"class\",\"elementID\")\n .attr(\"transform\", function(){return `translate(${d.data})`;})\n .style(\"font\", \"12px sans-serif\")\n .text(function(){\n if (d.elevation>=niveau_de_la_mer) {\n return 'T' + d.geoElementID.toString();\n } else {\n return 'E' + d.geoElementID.toString();\n }\n }); \n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"md`#### On test maintenant la séquence d'algorithmes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"md`On définit un spectre de couleur bi-chromatique avec un seuil de variation correspondant à celui défini pour le niveau de la mer. Ainsi, seront dessinés en rouge les pavés de type _terre_ et en bleu les pavés de type _eau_. Les lignes de rivages de chaque élements géographiques seront dessinés en couleur cyan.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"couleur = d3.scaleThreshold([niveau_de_la_mer, 1], [\"blue\", \"red\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"legend({\n color: d3.scaleSequential([0, 1], couleur),\n title: \"Couleur\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"carte = new Pavage(960,480,creeVoronoi(960,480, 500, 200), Array.from({length: 500}, () => Math.random()*0.12), couleur);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"SVGCarte = carte.dessine()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"{ \n let elements = identifierElements(carte, niveau_de_la_mer);\n \n afficheElementIDs(SVGCarte, carte);\n \n let rivages = identifierRivage(carte);\n for (var k=0; k