Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

SVGMORPHING


Information sur la source

Catégorie :Graphique Classé sous : svg, morphing, graphisme, ajax, animation Niveau : Initié Date de création : 16/05/2008 Vu / téléchargé: 2 726 / 73

Note :
9 / 10 - par 4 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (21)
Ajouter un commentaire et/ou une note

Description

Ce script est la suite logique de mon précédent script d'adresse :
http://www.phpcs.com/code.aspx?ID=46344
qui traitait de l'algorithme de Douglas-Peuker (noter que "Peuker" s'écrit également "Peucker").
Grâce à cet algorithme, j'ai pu "réduire" mes départements et m'arranger pour qu'ils aient tous le même nombre de points (66), condition préalable pour qu'un "morphing" puisse se dérouler dans de bonnes conditions.
L'animation côté client se fait grâce à SVG et son élément "path", et là, j'ai dû faire un choix douloureux : soit faire une appli qui tourne avec FireFox (ainsi que ses petits cousins dotés comme lui de SVG en "natif"), soit opter pour la solution Internet Explorer+SVGViewer, sachant que l'écriture d'un code qui fonctionne à la fois avec les 2 navigateurs relève de la gageure.
Mon choix s'est porté sur FireFox, malgré l'absence, dans son implémentation, de l'élément "animate", que l'on peut cependant compenser en gérant l'animation grâce à la fonction "setInterval" de JavaScript.
Et PHP, là-dedans me direz-vous? L'application, à cause du nombre important de fichiers de données (il y a 100 départements!), est tout naturellement une application client-serveur, avec communication en "Ajax".
Bref, en attendant la mort annoncée des départements (voir le rapport "Attila"), il y a encore du bon temps à prendre!

La démo en ligne :
http://michel.vanthodiep.free.fr/morphing/

pour rappel : ne pas utiliser Internet Explorer!

 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de malalam le 17/05/2008 15:23:37 administrateur CS 10/10

Hello,

pas de commentaire...?
Bon, Oppossum, j'aime bien ta croisade pour le svg en ce moment :-) Je pense que c'est un format d'avenir (même s'il accuse maintenant un certain âge...il n'en reste pas moins que ce n'est pas lui qui est vieux et dépassé, c'est la communauté web qui est très en retard...).
Je n'ai pas testé ton code, mais je l'ai parcouru. C'est bien codé, même si je ne suis pas d'accord avec tous tes choix. Ca reste quand même de haut niveau.
Bref, je vais noter l'idée, et le code...pas le rendu puisque je ne l'ai pas testé. Mais j'encourage ceux qui aurait besoin de se mettre au svg, ou ceux avides d'innovation, à se pencehr sérieusement sur ce code, et sur le précédent (je ne sais plus si je t'avais laissé un commentaire, mais dans le doute, celui-ci s'applique aussi, ainsi que la note). 10 pour moi.

signaler à un administrateur
Commentaire de opossum_farceur le 17/05/2008 20:55:01

Salut,

Merci pour la note et le premier commentaire!

"Je pense que c'est un format d'avenir"

Cà fait 8 ans déjà que c'est un format d'avenir, de plus MicroSoft renacle à l'intégrer dans son IE, c'est prévu pour la version 9.0, d'ici là, les poules auront des dents (et les dents des caries). Pourtant, sur le papier, SVG ne comporte que des avantages, mais peut-être ne passent-ils qu'au deuxième plan, derrière les intérêts économiques?

"même si je ne suis pas d'accord avec tous tes choix"

Mes choix souvent sont dictés par de impératifs de performance qui sont la plupart du temps difficiles à concilier avec la poo telle que tu la conçois. Par exemple, je me suis rendu compte il y a peu que préciser le type d'un objet quand tu le passes en paramètre à une fonction était gros consommateur de ressources, ce qui tout compte fait est peut-être assez logique, vu qu'à l'origine php n'est pas typé.
Mais bon, je suis là pour apprendre, et s'il y a des choses qui te chiffonnent, te retiens pas!

a++

signaler à un administrateur
Commentaire de opossum_farceur le 18/05/2008 17:11:57

Salut,
Mon précédent code (http://www.phpcs.com/code.aspx?ID=46344), sur lequel celui-ci repose, n'utilisait pas SVG, car il pouvait se traiter de manière plus classique avec la librairie GD de PHP, et être ainsi indépendant du navigateur. L'utilisation de SVG était cependant tout à fait envisageable (avec les restrictions "habituelles" sur IE!), et aurait pu donner un code beaucoup plus représentatif de la cohérence du système que SVGMORPHING; en effet, SVG c'est pas autre chose que du XML; le serveur envoie alors les données au client sous cette forme, le client les réceptionne avec "responseXML" et les intègre telles quelles dans son DOM : c'est d'une efficacité redoutable!
Cette technique n'est pas utilisée avec SVGMORPHING à cause de l'absence dans l'implémentation de FF de l'élément "animate" (et çà n'est pas prévu apparemment dans sa prochaine version), ce qui fait que le client est obligé de "retravailler" les données, un modeste "responseText" pour leur réception s'avérant dans ce cas-là plus adapté.

Pour les curieux de SVG, un code qui peut donner des idées :
http://www.javascriptfr.com/codes/SVG3DCAMEMBERT_46033.aspx
a++

signaler à un administrateur
Commentaire de Eregon le 19/05/2008 18:13:55 8/10

Contrairement à Malalam, j'ai d'abord regardé le résultat ... que j'apprécie (malgré que je soit Belge ...)

Quand au code, il me semble fort tourné vers cette seule utilité, donc si tu dois refaire du SVG, tu peux tout recommencer la fois prochaine...

une petite amélioration, je pense(de logique):
if ($content===false) throw new Exception('<b>'.__FUNCTION__.'() : erreur lecture "'.$file.'"</b>');
=>
if ($content===false) throw new Exception('<b>'.__METHOD__.'() : erreur de lecture du fichier "'.$file.'"</b>');

__METHOD__ plutôt que __FUNCTION__, vu qu'on est dans une classe ;)

Quand au choix des animations, c'est bien dommage que ff ne gère pas <animate>, et le JavaScript n'est pas vraiment une solution "propre" (ce n'est plus vraiment du xml).

En conclusion, je pense que c'est un ptit truc sympa, qui montre un peu ce qu'est le SVG, mais à un niveau basique(juste des lignes...) Allez je te met 8/10 :)

Et ça me donne envie de poster ma classe SVG tient....

signaler à un administrateur
Commentaire de opossum_farceur le 19/05/2008 20:32:07

Salut,

"Contrairement à Malalam, j'ai d'abord regardé le résultat"
Pour tout dire, j'ai trouvé l'approche de Malalam assez curieuse, un peu comme s'il mettait la charrue avant les boeufs, mais bon, j'allai pas me révolter contre son appréciation!

"Quand au code, il me semble fort tourné vers cette seule utilité"
Il n'a en effet aucune autre prétention; j'aurais bien voulu pondre un code générique, qui puisse aussi transformer un carrosse en citrouille, mais çà n'est, hélas, pas dans mes compétences!

"c'est bien dommage que ff ne gère pas <animate>"
Cet élément n'apparait pas non plus dans sa version 3.0 (sniff!), qui ne devrait plus trop tarder.

"JavaScript n'est pas vraiment une solution propre"
Absolument, d'ailleurs, pour l'avoir testé aussi avec SVGViewer (qui gère donc correctement <animate>), j'ai trouvé sa transition entre les 2 formes beaucoup plus "fluide".

"c'est un ptit truc sympa, qui montre un peu ce qu'est le SVG, mais à un niveau basique"
Je n'ai utilisé que ce qui était nécessaire. Si tu sais adapter ce script pour qu'il fonctionne avec IE, tu m'intéresses! (j'ai essayé des tas de trucs, y'a rien qui marche, en plus je viens d'apprendre que ASV n'est pas bien supporté par Vista, c'est dément...)

a++

signaler à un administrateur
Commentaire de coucou747 le 24/05/2008 02:45:27 10/10

salut
avec des canevas, il parait que tu peux faire un truc qui marche sous MSIE
bon, sinon, j'aime beaucoup ton code, j'ai ete assez impressione par ta demo, meme si j'ai pas r