[SVG] Comment dessiner cette forme ?

[Sephi-Chan]

Bonjour,

Pour le jeu de mon article sur l'apprentissage de Rails, j'essaye de réaliser la forme jointe au message.

Je suis sûr qu'avec les rotation et compagnie, il y a un moyen très simple de réaliser ça. Mon but, derrière tout ça, est seulement de récupérer les cordonnées absolues de chaque cercle, afin de produire un CSS (car la carte en elle-même ne sera pas en SVG mais une image avec des éléments positionnés dessus).

L'image fera 400*400px, mais je pourrais fixer les dimensions moi-même au besoin, votre aide me suffira amplement.

Bonne journée et merci d'avance,


Sephi-Chan

[Ono]

Ton shéma m'a interpellé car j'ai fait quasiment le même pour un ancien projet il y a deux ans, quelle coincidence:
http://madpub.dyndns.org:8080/1274699586-poulet.png

Du coup, j'ai réalisé ce que tu demandais en svg, est-ce que ça te convient ?
http://madpub.dyndns.org:8080/1274701158-testsephi.svg
S'il faut y apporter des modifications, n'hésite pas à demander.

[Sephi-Chan]

Hello, en effet c'est pas tombé loin !

Pour le schéma, le premier anneau dispose de 8 sphères, le suivant de 12 et le dernier de 16.
Je vois que tu as utilisé Inkscape, comment as-tu obtenu ce résultat ? Tu as fais "coulisser" des sphères sur une cercle ?


Sephi-Chan

[Ono]

Ah oui effectivement je n'ai pas été assez attentif. Malheureusement je dois partir tout de suite, mais en fin d'après midi je reviens pour la modif et les explications.

[nicodd]

Le plus simple à mon sens est de tracer les 3 cercles concentriques, et une série de droite centrée également sur les cercles inclinée avec l'angle voulu ( pas de 45° pour le premier, puis pas de 30° et enfin pas de 22.5°).

Il ne te reste plus qu'a placer les sphères aux intersections.

[Sephi-Chan]

Oui, c'est ce que je fais sur le papier.

Puis j'ai cherché à le faire en Javascript, avec Canvas, mais je ne suis pas très doué quand ça touche au manipulation mathématiques (une rotation, programmatiquement, ça se fait, mais moi j'suis une burne ! ).

Alors j'ai rapidement essayé en SVG pour le faire purement graphiquement (c'est plus intuitif), mais je voulais pas passer l'après-midi là dessus, je préférais bosser sur le troisième chapitre 3 de mon pas à pas.


Sephi-Chan

[Ono]

Hop ! Désolé je suis rentré un peu plus tard que prévu. Ce coup-ci ça doit être bon:
http://madpub.dyndns.org:8080/1274731786-testsephi2.svg

Pour les petites explications, c'est assez simple.
Sous inkscape, il faut commencer par régler la taille du document et y appliquer une grille (menu fichier/propritétés du document) et activer le magnétisme (onglet du même menu). Au besoin, régler les paramètres de la grille pour qu'elle "colle" bien à la taille du document ainsi que le magnétisme pour qu'il ne soit pas trop fin.
Ainsi, on peut placer précisément le cercle du centre ainsi que les cercles horizontaux et verticaux à intervalles réguliers.
Ensuite, pour les cercles intermédiaires, il faut sélectionner les 4 objets d'un même cercle (en maintenant le shift pour faire une sélection multiple), les copier et les "coller sur place", pour qu'ils se superposent.
Ces objets étant toujours sélectionnés, aller dans objet/transformer, onglet rotation et appliquer l'angle voulu (22,5 par exemple). Il faut veiller à ce que la case "appliquer à chaque objet séparément" soit décochée pour que ce soit la sélection qui tourne et non les objets sur eux-mêmes.
Ensuite, fermer le menu, et à nouveau coller sur place, retourner dans objet/transformer, rotation, -22,5, etc... Et recommencer l'opération pour l'autre cercle concentrique.

[Sephi-Chan]

Okay, merci beaucoup ! Je vais tenter de personnaliser un peu ça.


Sephi-Chan

[Ono]

Oui, menu objet/transformer, onglet dimensions. Par contre dans ce cas-là il faut cocher la case "appliquer aux objets séparément" pour qu'ils ne perdent pas leur position.

[Sephi-Chan]

Ouais c'est ce que j'ai fais (c'est pour ça que j'ai viré la question de mon message ! :p).

Bon, j'ai ma base pour la carte (du moins, la forme).


Sephi-Chan