[SVG] Comment dessiner cette forme ?

[Roworll]

En regardant la source des fichiers SVG inkscape, on peut voir le gros défaut des logiciel permettant de créer des fichier SVG : ils sont bien trop bavards, un peu comme Dreamweaver et Frontpage qui collent des tonnes de balises inutiles dans les fichiers HTML

J'ai fait une version plus light de cette carte en SVG visible ici. La source fait 3Ko (contrairement à la version Inkscape qui en fait 28 et comporte moins de graphisme). Comme quoi, une bonne utilisation des attributs transform, ça change la vie...

Ce fichier SVG est assez simple à comprendre mais si l'un d'entre vous veut plus d'explications, n'hésitez pas à demander.

[Edit]
J'ai fait aussi une version couplant CSS et JS.
Avec les quelques fonction de trigo du JS il est très facile de placer les petits cercles.
On peut ainsi jouer sur la taille de la "carte", le nombre de cercles à chaque niveau, etc.

[Sephi-Chan]

Roworll, tu es un ange, un amour, une endive de luxe, etc. ! Je ne pouvais as rêver mieux que cette version en Javascript.

Bon, puis qu'à la comprendre. Il faudrait vraiment que je me mette à capter la trigonométrie (à savoir refaire, en fait), car ça me faisait souvent défaut. Je ne l'ai jamais utilisé que pour l'école, en cours de mécanique (torseurs, cinématique, etc.).

Mon problème, ça a toujours été de ne pas voir les choses. Quand je vois du :

xr=(Math.PI*x)/180

px=(Math.cos(xr))*r;

py=(Math.sin(xr))*r;

Je ne visualise pas le mouvement. Mais je ne sais pas trop comment m'y entraîner.

Un petit entraînement pourrait être de m'inspirer de tes 2 fichiers pour réaliser une version en SVG générée par Javascript.


Sephi-Chan, c'est chiant d'être con…

[Roworll]

Je te rassure, je suis une bille totale dès qu'on dépasse les équations à une inconnue (et encore). Je vais quand même essayer d'expliquer ce que je connais aux fonctions de traçage de cercle.

Pour tracer un cercle, tu dois faire varier ton angle de 0 à 360°.
Pour chaque valeur d'angle, tu peux trouver les coordonnées x/y grâce aux fonctions Sinus et Cosinus.

Cela te donne alors un résultat entre -1 et 1 que tu multiplies ensuite par le rayon de ton cercle. Tu obtiens ainsi tes coordonnées pour mettre ton point.

Attention, JS travaille en radiant. Si tu calcule en degrés (comme dans mon exemple), il faut donc convertir ton angle avant d'appeler les fonctions Sin et Cos (PI x angle en degrés / 180)

[jo_link_noir]

Pour info, inkscape peut faire tout petit fichier, pour preuve en fessant le même que Ono j'en est un de 4.1Ko après avouir remplacé tout les 4 espace par des tabs
Faut juste faire plein de clone des objets (la balise use en svg) et les groupés

Son seul problème et de mettre des matrices partout au lieu de cercle, ce qui alourdit pas mal. Quand je fait comme Roworll (3 gros cercles) je passe à 6Ko :/.

Juste pour dire ça xD.

[Sephi-Chan]

Petite question de maths, encore.

Pourquoi la première sphère dessinée est-elle celle à droite du centre de l'anneau ? Comme puis-je faire pour que la première sphère soit-celle placée au dessus du centre ?



Sephi-Chan

[Ter Rowan]

à droite c'est 0° (cos = 1 sin = 0)
en haut c 'est 90° (cos = 0 sin = 1)

[Sephi-Chan]

J'ai honte… Après avoir posé ma question, j'suis aller regarder simplement le cercle trigonométrique… Pour commencer l'anneau par la sphère du haut, il faut que j'introduise un décalage (dans le sens trigonométrique) de ∏/2. Mais comment…


Sephi-Chan, le temps ne fait rien à l'affaire, quand on est con…

[nicodd]

C'est une rotation de pi/2 que tu dois faire, pas de 2*pi.

Pour cela, il te suffit de remplacer la ligne :
for(x=0;x<360;x+=(360/n))
Par :
for(x=90;x<450;x+=(360/n))

[Sephi-Chan]

Merde je n'avais pas validé l'edition, trop impatient que j'était de me mettre devant le final de NCIS !

Je voulais demander si cette approche était bonne, car c'est celle pour laquelle j'avais opté (à la différence près que je m'étais inutilement compliqué en utilisant des radians pour la boucle, alors que les degrés font parfaitement l'affaire).

Voilà ce qui mène au résultat que je souhaitais :

for(var angle = -90, i = 0; angle < 270; angle += 360/circleCount, i++){

  // ...

}

Sephi-Chan

[Ter Rowan]

tel que c'est là, tu commences en bas (-90) tu fais un tour complet (-90 = 270) dans le sens inverse des aiguilles d'une montre (+= x >0) et tu fais circleCount opérations