[Résolu][SVG] Dessiner des motifs pour une carte d'hexagones

[Myrina]

Pour l'ajustement, il n'y a pas grand chose à faire à part être un peu moins rigoureux mathématiquement parlant. Il vaut mieux travailler avec des entiers si possible car de toute façon, un pixel n'est pas divisible.

Ensuite, pour la gestion de la "frontière", il faut passer par des couches: l'eau, puis la frontière en enfin les terres.

Voici ce que j'ai obtenu vite fait (pas optimisé): http://myrina.free-h.net/testSVG.html

[Sephi-Chan]

Pour l'ajustement, il n'y a pas grand chose à faire à part être un peu moins rigoureux mathématiquement parlant. Il vaut mieux travailler avec des entiers si possible car de toute façon, un pixel n'est pas divisible.

Sur ton exemple, tu n'as pas ce soucis d'ajustement, du coup c'est plus esthétique. Comment as-tu fait ? Comment as-tu déterminé les points de ton polygone "base" et quelle a été ta formule pour déterminer les attributs X et Y des use ?

Ensuite, pour la gestion de la "frontière", il faut passer par des couches: l'eau, puis la frontière en enfin les terres.

Pour être sur qu'on parle de la même chose avec le terme "frontière" : je ne veux pas tracer la frontière que j'ai dessiné en rouge sur mon second schéma. Je veux seulement dessiner les cercles et les routes entre eux.


Merci pour ton aide en tout cas, car j'ai vraiment une aversion viscérale pour les maths et SVG n'est de fait pas mon ami.

[Myrina]

Pour l'ajustement, il n'y a pas grand chose à faire à part être un peu moins rigoureux mathématiquement parlant. Il vaut mieux travailler avec des entiers si possible car de toute façon, un pixel n'est pas divisible.

Sur ton exemple, tu n'as pas ce soucis d'ajustement, du coup c'est plus esthétique. Comment as-tu fait ? Comment as-tu déterminé les points de ton polygone "base" et quelle a été ta formule pour déterminer les attributs X et Y des use ?

J'ai simplement fait de l'arrondi à l'entier puis un décalage par un multiple de ce nombre.
En X, la taille de l'hexagone vaut donc, en arrondi, 52 pixels.
Ensuite, pour le Y, comme la distance de 45 pixels conserve un espace, j'ai simplement réduit à 44 pixels.

Pour la frontière, je dirai juste que l'on est pas sur la même longueur d'ondes car je ne vois (visualise) toujours pas ce que tu désires obtenir.

[Sephi-Chan]

Ok, je reformule.



Sur ce schéma, on voit 3 hexagones. C'est ma forme de base.
Au sommet de chaque hexagone, j'ai tracé un cercle. Ce cercle représente l'emplacement d'un territoire.
Ensuite, j'ai dessiné des routes qui relient ces cercles.
Le tout forme donc un petit hexagone aux sommets cassés. Ceci représente une parcelle de ressource.

En soit, un hexagone de base ne dessine que sa partie des choses : son fragment de cercle, son fragment de route. C'est l'assemblage de plusieurs de ces hexagones qui forment la map.

Et après, il y a les tuiles "bord de l'eau", qui peuvent ne pas avoir de routes sur certaines arrêtes, comme le montre le second schéma :



Est-ce que c'est plus clair ?

[Myrina]

j'ai remis à jour le SVG; est-ce mieux ainsi?

http://myrina.free-h.net/testSVG.html

Pour les changements, j'ai déplacé le dessin des "frontières" après celui des tuiles de terres puis je les ai doublé afin de dessiner en deux couleurs les routes.

[Sephi-Chan]

J'aime bien le rendu ! C'est très proche de ce que je veux (à quelques épaisseurs près) !
Est-ce que tu pourrais montrer le code que tu utilises pour générer ça ?


Et que penses-tu de l'approche qui consiste à laisser à chaque hexagone la responsabilité d'afficher ce qu'il doit afficher, plutôt que de fonctionner en couche ?

Chacun afficherait ou non ses portions d'arc de cercle et ses portions de route. Ça se prête assez bien à mon mode de stockage de l'information et je suppose que c'est assez simple à faire quand on maîtrise SVG.

J'aurais en gros un modèle (dans les defs) unique pour les hexagones terrestres (puisqu'ils dessinent la portion de cercle de tous leurs sommets et toutes leurs arrêtes), puis autant de modèles que nécessaire pour les hexagones de mer (une vingtaine de combinaisons).

[Myrina]

Je n'ai pas fait de code généré, j'ai juste fait une page HTML avec du SVG inline en partant du code généré obtenu avec ton exemple.

[Sephi-Chan]

Ok, ça a du te prendre vachement de temps ! :o

Et pour la seconde partie de mon message ? :p

[Myrina]

Pour la seconde partie; je pense que tu ne coupe pas à la notion d'affichage en couche. C'est toujours ce qui est défini en dernier qui s'affiche au dessus des autres pour un même pixel.

Sinon, j'ai vite porté en PHP la génération afin que tu vois une possibilité pour gérer les couches:

<!DOCTYPE html>

<html>

  <head>

    <title>SVG Experiment</title>

 </head>

 <body>

  <svg xmlns="http://www.w3.org/1999/xhtml" 

   xmlnsvg="http://www.w3.org/2000/svg"

   xmlns:xlink="http://www.w3.org/1999/xlink"

   version="1.1" width="1000px" height="600px">

   <defs id="hexagons">

    <path id="base" d=" m 0 30 l 26 15 l 26 -15 l 0 -30 l -26 -15 l -26 15 z"/>



    <g id="bordure">

     <path id="base" d=" m 0 30 l 26 15 l 26 -15 l 0 -30 l -26 -15 l -26 15 z" fill-opacity="0.0"  stroke="#DEB887" stroke-width="6px"/>

     <circle cx="0" cy="30" r="10" fill="#DEB887"/>

     <circle cx="26" cy="45" r="10" fill="#DEB887"/>

     <circle cx="52" cy="30" r="10" fill="#DEB887"/>

     <circle cx="52" cy="0" r="10" fill="#DEB887"/>

     <circle cx="26" cy="-15" r="10" fill="#DEB887"/>

     <circle cx="0" cy="0" r="10" fill="#DEB887"/>

    </g>



    <g id="chemin">

     <path id="base" d=" m 0 30 l 26 15 l 26 -15 l 0 -30 l -26 -15 l -26 15 z" fill-opacity="0.0"  stroke="#F4A460" stroke-width="2px"/>

     <circle cx="0" cy="30" r="7" fill="#F4A460"/>

     <circle cx="26" cy="45" r="7" fill="#F4A460"/>

     <circle cx="52" cy="30" r="7" fill="#F4A460"/>

     <circle cx="52" cy="0" r="7" fill="#F4A460"/>

     <circle cx="26" cy="-15" r="7" fill="#F4A460"/>

     <circle cx="0" cy="0" r="7" fill="#F4A460"/>

    </g>



   </defs>

<?php

$deltaX=52;

$deltaY=44;

//Liste des paires de coordonnées correspondant à une terre et devant posséder une bordure

$terres=array("2-7","2-8","2-9","2-10","2-11","2-12","2-13","2-14","2-15","3-6","3-7","3-8",

"3-9","3-10","3-11","3-12","3-13","3-14","3-15","4-6","4-7","4-8","4-9","4-10","4-11","4-12","4-13","4-14","4-15");

$bordures=array();

//Boucle pour afficher l'ensemble des hexagones

for ($Y=0;$Y<25;$Y++) {

	$y=$Y*$deltaY;

	for ($X=0;$X<25;$X++) {

		$x=$X*$deltaX;

		if (($Y%2)==1) {

			//Pour le slignes impaires, il faut décaler les hexagones

			$x-=($deltaX/2);

		}

		if (in_array("$Y-$X",$terres)) {

			//C'est une terre, on sauvegarde les coordonnées pour retracer plus tard les bordures

			$color="gold";

			$bordures[]=array($X,$Y,$x,$y);

		} else {

			$color="lightblue";

		}

		echo '<use id="hexagon-'.$X.'-'.$Y.'" x="'.$x.'" y="'.$y.'"  fill="'.$color.'" xlink:href="#base"/>\n';

	}

}

//Boucle pour afficher une grande bordure sur toutes les terres

foreach ($bordures as $tile) {

	list($X,$Y,$x,$y)=$tile;

	echo '<use id="hexagon-bordure-'.$X.'-'.$Y.'" x="'.$x.'" y="'.$y.'"  xlink:href="#bordure"/>\n';

}

//Boucle pour afficher la route sur les bordures

foreach ($bordures as $tile) {

	list($X,$Y,$x,$y)=$tile;

	echo '<use id="hexagon-chemin-'.$X.'-'.$Y.'" x="'.$x.'" y="'.$y.'"  xlink:href="#chemin"/>\n';

}

?>

  </svg>

 </body>

</html>

C'est pas joli, mélange de HTML et PHP, mais c'est juste pour illustrer.

J'ai diminué la taille de l'île car ça me faisait beaucoup de paires à écrire pour illustrer : http://myrina.free-h.net/testSVG.php

[Sephi-Chan]

Merci !

J'ai avancé aussi de mon côté puisque j'approche de ce que je souhaitais avec l'approche "chaque hexagone gère son bout de terrain", mais je crois bien que le problème d'ajustement va me forcer à arrêter cette approche.

Je jette un œil à ton script et je fais des essais avec.