2a:null 2b:["$","title",null,{"children":"Génération procédurale de cartes | linard-y | Observable"}] 31:Tce1,class Pavage { // ###### CONSTRUCTOR ######## // runs when the class is instantiated constructor(width, height, voronoi, elevations, couleur) { this.width = width; this.height = height; this.pavés = voronoi.polygons(); this.voronoi = voronoi; let elevation_lst = []; let N = this.pavés.length; if (elevations instanceof Array) { elevation_lst = elevations; } else { elevation_lst = Array(N).fill(elevations); } // recherche l'index des polygones voisins pour chaque polygone donné this.pavés.map(function(d, i) { d.id = i; // index du pavé d.elevation = elevation_lst[i]; // élévation du pavé d.geoElementID = -1; // sera utile lors de l'étape 3 d.precipitation = 0; // sera utile lors de l'étape 4 d.flux = 0; // sera utile lors de l'étape 4 d.riviere = -1; // sera utile lors de l'étape 4 var voisins = []; voronoi.cells[i].halfedges.forEach(function(e) { var edge = voronoi.edges[e], ea; if (edge.left && edge.right) { ea = edge.left.index; if (ea === i) { ea = edge.right.index; } voisins.push(ea); } }) d.voisins = voisins; }); this.color = couleur || d3.scaleSequential(d3.interpolateTurbo) ; } // ########################## // ####### METHODS ########## changeColor(newValue) { this.color = newValue; } changeElevation(pavé, act, I, R, A) { let foyer = pavé.id; var pression = I; var queue = []; let pavés = this.pavés; pavés[foyer].elevation += act*pression; if (pavés[foyer].elevation > 1) {pavés[foyer].elevation = 1;} if (pavés[foyer].elevation < 0) {pavés[foyer].elevation = 0;} let used = new Float32Array(pavés.length); used[foyer] = 1; queue.push(foyer); for (var i = 0; i < queue.length && pression > 0.01; i++) { pression *= R; pavés[queue[i]].voisins.forEach(function(index) { if (!used[index]) { var mod = Math.random() * A + 1.1 - A; if (A == 0) {mod = 1;} pavés[index].elevation += pression * mod * act; if (pavés[index].elevation > 1) {pavés[index].elevation = 1;} if (pavés[index].elevation < 0) {pavés[index].elevation = 0;} used[index] = 1; queue.push(index); } }); } this.pavés = pavés; } toJSON() { let jsonpavés = []; this.pavés.map(function(d) { jsonpavés.push({id: d.id, elevation: d.elevation, data: d.data}); }); return {width: this.width, height: this.height, paves: jsonpavés}; } save() { return JSON.stringify(this.toJSON()); } dessine() { let color = this.color; let pavés = this.pavés; const svg = d3.select(DOM.element('svg')) .attr("width", this.width) .attr("height", this.height); pavés.map( function(d, i) { svg.append("path").attr("d", "M" + d.join("L") + "Z").attr("fill", color(d.elevation)); } ); return svg; } trouveBordCommun(i1, i2) { var e = this.voronoi.cells[i1].halfedges[i2]; return this.voronoi.edges[e] } // ########################### }32:Ta83,function PavageInput(config = {}) { let { value, callback, action = 1, intensité = 0.9, rayon = 0.9, attenuation = 0.2, flou = 25 } = config; let x, y; let width = value.width; let height = value.height; let voronoi = value.voronoi; let color = value.color; const svg = d3.select(DOM.element('svg')) .attr("id", 'mapsvg') .attr("width", width) .attr("height", height) .attr('viewBox',`0 0 ${width} ${height}`) .attr("fill", "white"); const blur = DOM.uid("blur"); const defs = svg.append("defs"); const filter = defs.append("filter").attr("id", blur.id); filter.append("feGaussianBlur") .attr("in","SourceGraphic") .attr("stdDeviation", flou/5) .attr("color-interpolation-filters","sRGB") .attr("result","blur"); const baseMap = svg.append("g") .style("filter", blur); baseMap.append("rect") .style("fill", "#f5f5f5") .style("width", width) .style("height", height) .style("point-events", "none"); const svgNode = svg.node(); let pavés, pavage = baseMap.append("pavage"), tampon= svg.append("circle"); function draw() { pavés = baseMap.selectAll("path") .data(value.pavés); pavés.enter() .append("path") .attr("class", "pavé") .attr("stroke", "grey") .attr("stroke-width", 0) .attr("stroke-opacity", 0) .merge(pavés) .attr("d", function(d){return "M" + d.join("L") + "Z";}) .attr("fill", function(d){return color(d.elevation);}) .on("mouseover", (d, i, e) => { d3.select(e[i]) .attr("stroke-width", 1) .attr("stroke-opacity", 1) .attr("stroke", "black"); tampon.attr("cx", d.data[0]) .attr("cy", d.data[1]) .attr("fill", "none") .attr("stroke", "black") .attr("r",rayon*50); callback(d); svgNode.dispatchEvent(new CustomEvent("input", { bubbles: true })); }) .on("mouseout", (d, i, e) => { d3.select(e[i]) .attr("stroke-width", 0) .attr("stroke-opacity", 0) .attr("stroke", "grey") tampon.attr("r", null); }) .on("click", (d, i, e) => { //update(d); value.changeElevation(d, parseInt(action), intensité, rayon , attenuation); draw(); callback(d); svgNode.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); pavage.datum(value.pavés) .style("fill", "none") .style("stroke", "#222") .attr("pavés", d => d); } draw(); return svg.node(); }33:T4f7,md`La fonction **PavageInput** renvoie un élément SVG sur lequel il est possible de déplacer à la souris un pointeur de forme circulaire. Les propriétés de ce pointeur sont directement liées à la nature de la modification qui va être opérée sur le pavage lors des évènement _click_. Le pointeur possède quatre propriétés : * le type d'_action_ qui est opérée c'est-à-dire augmenter ou diminuer les valeurs d'élévations autour du point ciblé, * l'_intensité_ maximale de la modification correspondant au centre du pointeur, * l'_atténuation_ de la modification en s'éloignent du centre du pointeur, plus l'aténuation est forte plus la modification s'opère loin dans la surface couverte par le pointeur, * le _rayon_ maximal de la modification. La fonction permet également de passer en argument une fonction _callback_ pour renvoyer la position du centre du pointeur et l'élévation du pavé correspondant. Un dernier argument, _flou_, permet d'ajouter un effet diffusif à l'ensemble de la représentation pour apporter un effet de ressemblance avec des DEM en image TIFF par exemple. `34:[] 2e:{"id":"49816e3c96878660","slug":"gpc-etape-2","title":"Génération procédurale de cartes","thumbnail":"648545804d08da97ac1b9c97880067c48c27b08f7d3d38ac5e9d0c20401dc935","access_level":"public","create_time":"$D2019-12-19T21:53:28.547Z","update_time":"$D2022-01-07T17:58:32.091Z","view_time":null,"first_public_time":"$D2019-12-19T21:53:54.786Z","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":239,"publish_version":239,"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":1,"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":{"title":"Génération procédurale de cartes","cells":[{"id":159,"value":"md`# Génération procédurale de cartes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"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"},{"id":198,"value":"Navigation(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"Separation(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`## ETAPE 2 : Construction d'un pavage intéractif avec possibilité de chargement et d'enregistrement`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`On va maintenant créer une classe **pavage** qui stockera non seulement les cellules du diagramme de Voronoï mais également une valeur d'élévation pour chaque cellule. Le constructeur de cette classe a pour argument les dimensions du pavage, _width_ et _height_, un tableau de _pavés_ qui n'est autre qu'un tableau de polygones ayant pour attribut supplémentaire une valeur d'élévation. La valeur d'élévation est donnée par l'argument _elevations_. Si celui est un tableau alors il doit avoir les dimensions du tableau de pavés, si c'est un scalaire, chaque pavé aura cette valeur d'élavation par défaut. Le dernier argument, _couleur_, est facultatif. Il permet de définir un spectre de couleur auquel sera associé l'argument élévation. Par défaut couleur prend la valeur _d3.scaleSequential(d3.interpolateTurbo)_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md `Créons à présent notre premier objet de type **pavage** en nous aidant de la fonction _creeVoronoï_ que nous avons defini lors de l'étape 1.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof nombreDePoints = slider({\n min: 0, \n max: 10000, \n step: 250, \n description: \"Nombre de points\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof nombreDeRelaxations = slider({\n min: 0, \n max: 10, \n step: 1, \n description: \"Nombre d'itération de relaxation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"carte = new Pavage(960,480,creeVoronoi(960,480, nombreDePoints, nombreDeRelaxations), 0.02);","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`L'objet **carte** est représenté ci-dessous avec la méthode _dessine()_ définie dans la classe **pavage**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"SVGVoronoi = carte.dessine().node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`L'objet **carte** a été créé avec une valeur d'élévation par défaut (0.02) pour tous les pavés c'est pouquoi la représentation apparait monochrome. Nous allons maintenant créer une fonction **PavageInput** qui nous permettra d'intéragir avec le pavage pour modifier les valeurs d'élévations des pavés. Les modifications d'élévations doivent s'opérer sur des zones plus ou moins diffuses afin de donner une impression de relief réaliste.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`On définit ici la fonction qui sera passer en argument _callback_ de la fonction **PavageInput**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"function Info(p){\n let x, y;\n [x, y] = d3.polygonCentroid(p);\n d3.select(\"#info_X\").text(x.toFixed(2));\n d3.select(\"#info_Y\").text(y.toFixed(2));\n d3.select(\"#info_cell\").text(p.id);\n d3.select(\"#info_elevation\").text(p.elevation.toFixed(2)); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md `### Créer votre carte d'élévation !`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof action = radio({\n options: [\n { label: 'Augmenter', value: 1 },\n { label: 'Diminuer', value: -1 }\n ],\n value: -1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"viewof intensité = slider({\n min: 0.01, \n max: 1, \n step: 0.01, \n value: 0.3,\n description: \"Intensité\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"viewof attenuation = slider({\n min: 0, \n max: 0.5, \n step: 0.1, \n value: 0.2,\n description: \"Atténuation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"viewof rayon = slider({\n min: 0.5, \n max: 0.99, \n step: 0.001, \n value: 0.9,\n description: \"Rayon d'action\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof flou = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 20,\n description: \"Flou\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"PavageView = PavageInput({\n value: carte,\n callback: Info,\n action: action,\n intensité: intensité,\n rayon: rayon,\n attenuation: attenuation,\n flou: flou\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"{\n const form = html`\n`\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`Une fois le pavage modifié, il est intéressant de pouvoir soit sauvegarder l'objet **carte** sous forme d'une image soit de sauvegarder l'ensemble des données du pavage dans un fichier JSON pour être utilisé ultérieurement.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"DOM.download(() => rasterize(d3.select('#mapsvg').node()), undefined, \"Exporter en tant qu'image PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"{\n let record = carte.save();\n return DOM.download( new Blob([record], {type: \"application/json\"}), undefined, \"Enregistrer le pavage\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"Separation(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`Un premier pavage ayant été créé et enregistré, on peut maintenant le recharger pour soit le dessiner avec la méthode de la classe **Pavage** _draw()_, soit, comme ci-dessous, le réouvrir avec la fonction **PavageInput** pour continuer de la modifier. Avant cela il faut instancier un nouvel objet **Pavage** avec la fonction _ChargerPavage()_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"function chargePavage(data) {\n \n let paves = data.paves;\n \n let points = [];\n let elevations = [];\n\n data.paves.map(function(d,i) {\n points.push(d.data);\n elevations.push(d.elevation);\n });\n\n let voronoi = d3.voronoi().extent([[0, 0],[data.width,data.height]])(points); \n\n let newPavage = new Pavage(data.width,data.height,voronoi, elevations); \n\n return newPavage;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof saved_pavage = chargeJSON()","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"PavageView2 = PavageInput({\n value: chargePavage(saved_pavage),\n callback: {},\n action: 1,\n intensité: 0.3,\n rayon: 0.6,\n attenuation: 0.6,\n flou: 20\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"Separation(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`#### Importation des libraries utiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"import { input, slider, radio } from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"import {Navigation, Separation, chargeJSON} from \"@linard-y/gpc-fonctions-annexes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"import {creeVoronoi} from \"@linard-y/gpc-etape-1\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"