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 !

DÉGRADÉ ANINÉ ! RECTANGULAIRE, POLAIRE, OU LINÉAIRE. MULTI SPEED, ET PLUS FLUIDE


Information sur la source

Catégorie :Graphique Niveau : Initié Date de création : 19/02/2005 Date de mise à jour : 23/03/2005 20:58:43 Vu / téléchargé: 4 009 / 275

Note :
9,33 / 10 - par 3 personnes
9,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

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

Description

Cliquez pour voir la capture en taille normale
Open Souce crée par ARNAL69130 et moi meme.

NB : La bibliothèque GD2 est nécessaire
pour utiliser les fonctions php de gestions
d'images, donc, dans php.ini,
décommenter la ligne extension=php_gd2.dll

*Choix des deux couleurs par differentes methodes :
- entrer en hexa ou rvb
( si on en rentre qu'une, la 2eme sera l'inverse de la 1er )
- choix dans une liste, celle-ci modifiable avec .txt ( idem )
- alleatoire ( idem )
-plus abccamaieu

* Choix de la taille

* conservation des données du formulaire

* Affichage :
- horizontal vertical diagonal
- animé en 5 images seconde et plus avec les fleches !!!
- polaire et le meme animé (dézoom)
- rectangle et le meme animé (zoom et dezoom)
 

Source

  • partie de polaire.php :
  • $dia=($l+$h)/2; //moyenne de la largeur et de la hauteur.
  • $t=pow($l, 2) +pow($h, 2);
  • $t=sqrt($t); // longueur de la diagonnal
  • //on dessine une ellipse pour chaque pixel entre 0 et $t, du centre vers l'exterieur.
  • for ($i=0; $i<$t; $i++)
  • {
  • for ($j=0; $j<8; $j++) { // pour les 8 premiers cas, on decale les couleurs au un 8eme toujours du centre vers l'ext.
  • $cas = $j+1;
  • switch ($sens)
  • {
  • case $cas :
  • if ( $i < $j*$t/8 ) {
  • $k = -$i+$j*$t/8; // on fait repartir le degrade dans l'autre sens pour ls zone plus proches du centre
  • } else {
  • $k = $i-$j*$t/8; // on decale de $j 8eme pour les zones exterieurs superieur à $j/8
  • } break;
  • }
  • }
  • for ($j=0; $j<8; $j++) { // pour les 8 cas suivants, on fait de meme mais en inversant les 2 couleurs ($t-$kprecedent).
  • $cas = $j+9;
  • switch ($sens)
  • {
  • case $cas :
  • if ( $i < $j*$t/8 ) {
  • $k = $t+$i-$j*$t/8;
  • } else {
  • $k = $t-$i+$j*$t/8;
  • } break;
  • }
  • }
  • $r = $c1['r'] + $k*($c2['r']-$c1['r'])/$t;
  • $v = $c1['v'] + $k*($c2['v']-$c1['v'])/$t;
  • $b = $c1['b'] + $k*($c2['b']-$c1['b'])/$t;
  • $c=imagecolorallocate($im,$r,$v,$b);
  • imageellipse ($im, $l/2, $h/2, ($i*$l/$dia)+1, ($i*$h/$dia)+1,$c); // on dessine enfin
  • }
partie de polaire.php :

$dia=($l+$h)/2; //moyenne de la largeur et de la hauteur.
$t=pow($l, 2) +pow($h, 2);
$t=sqrt($t); // longueur de la diagonnal

//on dessine une ellipse pour chaque pixel entre 0 et $t, du centre vers l'exterieur.
for ($i=0; $i<$t; $i++)
	{
	   for ($j=0; $j<8; $j++) { // pour les 8 premiers cas, on decale les couleurs au un 8eme toujours du centre vers l'ext.
	   $cas = $j+1;
	   switch ($sens)
	   {
	   	   case $cas :
		   if ( $i < $j*$t/8 ) {
		   $k = -$i+$j*$t/8;  // on fait repartir le degrade dans l'autre sens pour ls zone plus proches du centre
		   } else {
		   $k = $i-$j*$t/8; // on decale de $j 8eme pour les zones exterieurs superieur à $j/8
		   } break;
	   }
	   }
	   for ($j=0; $j<8; $j++) { // pour les 8 cas suivants, on fait de meme mais en inversant les 2 couleurs ($t-$kprecedent).
	   $cas = $j+9;
	   switch ($sens)
	   {
	   	   case $cas :
		   if ( $i < $j*$t/8 ) {
		   $k = $t+$i-$j*$t/8;
		   } else {
		   $k = $t-$i+$j*$t/8;
		   } break;
	   }
	   }
	   $r = $c1['r'] + $k*($c2['r']-$c1['r'])/$t;
	   $v = $c1['v'] + $k*($c2['v']-$c1['v'])/$t;
	   $b = $c1['b'] + $k*($c2['b']-$c1['b'])/$t;
	   $c=imagecolorallocate($im,$r,$v,$b);
	
	imageellipse ($im, $l/2, $h/2, ($i*$l/$dia)+1, ($i*$h/$dia)+1,$c); // on dessine enfin
	}

Conclusion

j'attends vos notes ou comms :

-les images sont calculés qu'une fois, puis enregistrés sur serveur,
et finalement affichés.

-mise en place assez longue pour les grandes images.

-mais utilisation du cpu assez faible environ 5% apres chargement.

-les images sont effacés à chaque execution de la page.

une version flash serait peu etre plus adapté, avis aux amateurs.

une evolution concernant la getion des utilisateurs sera faite :
-plusieurs utilisateurs sont permis grace au cache mais
-limiter à un utilisateur (compteur de connéctés) serait mieux pour le cpu


Merci de vos comms et notes. Bonne prog !  :]
 

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

Historique

22 février 2005 15:43:45 :
petites modifs prennant en compte les suggestions de coucou747
20 mars 2005 16:44:22 :
prise en compte des commentaire de arnal69130
22 mars 2005 23:51:45 :
Mise a jour de ARNAL69130 - enregistrement temporaire des images. - utilisation du cpu bien plus faible. - fluidité plus grande. - differentes vitesses d'animation. - debogage du module d'animation. - code plus propre. - conservation des données du formulaire.
23 mars 2005 11:48:38 :
debogage du premier lancement
23 mars 2005 16:08:11 :
bug corrigé de facon moins primaire
23 mars 2005 20:58:43 :
changement de commentaire

Commentaires et avis

signaler à un administrateur
Commentaire de koko le 20/02/2005 10:37:36

Le code javascript est un peu capricieux... une compatibilité avec tout les navigateurs ca serait chouette !

A cause de ce code js, je n'ai pas pu tout tester et ne peut donc pas dire les bons points des mauvais.

signaler à un administrateur
Commentaire de Anthomicro le 20/02/2005 11:33:54

Salut,

tu peux remplacer tes switchs par des if() et tes for() par des while(), bon tu gagneras pas grand chose evidemment...

a ++

signaler à un administrateur
Commentaire de dominion le 20/02/2005 11:59:47

Personellement, je pense que c'est ton js qui est lent. Je n'en suis pas sûr vu que je n'ai pas exécuté, mais j'ai eu le même problème que toi avec du texte qui défile : ça va très vite bouffer le cpu...
Je ne pense pas qu'il y ai une vraie solution : tu trace en software et c'est ça qui est lent ! Le mieux serais d'essayer en flash...

To be continued ;-) Tiens-nous au courant.

signaler à un administrateur
Commentaire de Anthomicro le 20/02/2005 12:02:07

C'est tracé en JS ça ? je vois plutôt du code PHP ?!

signaler à un administrateur
Commentaire de dominion le 20/02/2005 12:32:05

Ben le php est server side, donc pour animer faut autre chose. Ici c'est du JS. Le problème avec ça c'est que c'est interprêté par le navigateur en boucle (déjà fort long) et tracé en software pur ! La génération d'image peut être très rapide en php, son affichage s'il veut etre fluide sera une usine à gaz !
Le mieux est de trouver un autre language pour ça (flash par exemple) ou dans le cas où ça s'y prêterais, écrire une classe d'écriture gif qui sauverait les images dedans te les afficherait, et on aurait donc une fluidité gif !

signaler à un administrateur
Commentaire de Anthomicro le 20/02/2005 12:41:45

L'image n'est absolument pas réalisée en javascript... Regarde bien...

Par contre j'ai voulu tester le script, j'ai plein d'erreurs, l'image n'est pas générée (j'ai le texte alternatif à la place).

a +

signaler à un administrateur
Commentaire de stepibou le 20/02/2005 13:01:21

hello,
je viens d'essayer sur opera, et c beaucoup plus fluide,
que ie 6.
l'utilsition du cpu est aussi plus faible.

dominion : je comprend ce que tu veux dire,
mais c bien la generation de l'image en php qui est la plus longue.
si tu t'y connais en js, a tu un player plus court,
plus performant, et compatible avec tous les navigateurs.

anthomicro : il faut utiliser opera ou autre , ou diminuer la taille de l'image.
si l'ordi n'as pas eu le temps de calculer l'image, il ne l'affiche pas.
merci pour ton analyse.

koko :   quel est le navigateur ou ca marche pas?
je m'y connais pas trop en js si quelqu'un sait ?

bon a+, bonne prog. ;-)

signaler à un administrateur
Commentaire de koko le 20/02/2005 13:19:28

firefox et konqueror.
En fait, tu as codé pour IE qui est tres laxiste par rapport aux autres browsers.
ca doit venir d'une utilisation différente de getelementbyid ou des choses comme ca.
Je n'ai malheureusement pas le temps de me pencher plus dedans.

signaler à un administrateur
Commentaire de coucou747 le 21/02/2005 22:12:29

Salut
la synthaxe exacte est :
document.getElementById('iddumachin')....=

ça remplace les document.all de MSIE
ou les iddumachin.... de IE

ou les documentbyname sauf que la faut que tu remplace les atributs name par des atributs ID

enfin voila, c'est plus W3C...

enfin, on peut pas t'en vouloir pour ça, t'as prévu qqch pour netscape, mais malheureusement, c'est plus utilisé (comparé à Mozilla...)

faut tester la présence de caractères gecko ou khtml pour Konqueror et Mozilla...

sinon, pour ton code php en lui meme, j'ai pas tout regardé, dans l'ensemble ça a l'air pas trop mal, sauf quelques choses plutot désagréables à lire comme :
index.php ligne 94, 97, 105, 109, 115, et 118
if ( $couleur2 == "" ) {
qui aurait du etre remplacé par if (!$couleur){
qui est bien plus compréhensible, et plus rapide à exécuter...

<p align="right">

ceci n'eszt pas compatible... (ou ne l'était pas...)
mieux vaut mettre ça en CSS

sinon, tu as exactement 15 ouvertures fermetures de tags php, je ne trouves personellement pas ça super super....
mais tu fais ce que tu veux à ce niveau la....

sinon, t'as pow pour les puissances... (polaire.php l 13)

enfin ça reste pas mal

signaler à un administrateur
Commentaire de zoukozouko le 22/02/2005 00:12:01

Je trouve la source tres interessante est bien commentée.
J'ai deux questions :
une au niveau de la prog : pourquoi mets-tu des accolades après tes if même s'il n'y a qu'une intruction?
(prévenez moi si je me trompe) mais il me semble que le php n'étant pas compilé, l'utilisation des accolades surcharge la pile d'execution : au lieu de continuer l'exécution du code après le if, (avec ton dode, ) il faut vérifier qu'il n'y a plus d'instructions et qu'on a bien une accolade fermante. En tout cas, c'est sûr que c'est plus clair comme tu l'as codé (mais moins efficace je crois, à vérifier).
2ème question: rectangle.php :
switch ($sens)
   {
      case $cas :
   if ( $i < $j*$t/8 ) {
   $k = -$i+$j*$t/8;
   } else {
   $k = $i-$j*$t/8;
   } break;
   }
pourquoi tu choissis un switch plutôt qu'un

if ($sens == $cas)
   if ( $i < $j*$t/8 ) $k = -$i+$j*$t/8;
   else $k = $i-$j*$t/8;

le pb a déja été posé par anthomicro je crois.

enfin, une question pour dominion :
"tu trace en software et c'est ça qui est lent ": j'ai pas tres bien compris ce que tu veux dire par la, peux-tu m'expliquer (si c'est lent en software, ca voudrait dire que ca l'est moins en hardware, une palette graphique par exemple... je vois pas trop ce que tu entends par la. merci)

Merci

signaler à un administrateur
Commentaire de coucou747 le 22/02/2005 00:25:51

euh...
tout dépends de ce que tu apelles se tromper...

ça surcharge effectivement la pile (teste sur une calto en basic un truc style :
:lbl0
:getkey->a
:if a=0:then:goto 0:end
:goto 0


si tu n'apuis pas sur une touche, en peu de temps tu vas voir erreur memory... car la pile aura été remplie...

pour les acolades, ça ne joue pas un grand role, c'est pas un problème grave, mais l'utilisation des gotos dans nimporte quel langage est vivement déconseillée pour cette raison...

Maintenant, faudrait que j'éteigne mon serveur X, mon serveur apache, mysql ... et que je fasse des benchs... la, c'est vraiment mitigé... les résultats sont vraiment trops proches ou alors s'ingversent tout le temps... je ne peux rien conclure, maic c'est vrai que pour la théorie, tu as raison... maintenant, c'est tellement petit comme optimisation... celle la, moi je ne la fais pas toujours pour laisser plus de claretée...

<?php
function compare($tab,$calc)
{
$temps=array();
        $j=0;
        echo '<table width=\'90%\'>
        <tr><td>code:</td><td>temps d\'exécution pour '.$calc.' calculs</td></tr>';
foreach($tab as $code){
$start=microtime();
eval('for ($i=0;$i<10000;$i++)'.$code);
$end=microtime();
                echo '<tr><td>'.$code.'</td><td>'.($end-$start).'</td></tr>';
                $j++;
}
        echo '</table>';
}
compare(array('if ($a){$a++;}else{$a=1;}','if ($a)$a++;else $a=1;'),100000);

?>


chez moi, rien de concluant...

signaler à un administrateur
Commentaire de zoukozouko le 22/02/2005 00:27:14

aussi, j'ai essayé de tout tester,j'ai peut etre oublié qqchose, mais je n'ai pas remarqué de probleme de temps d'execution.
en tout cas pour les images 320 x 240 (par défault), limage est affichée en moin d'une seconde (vu les comentaires je m'attendait à bien pire)
quelqu'un peut-il me dire dans quel cas l'exécution est lente?

signaler à un administrateur
Commentaire de zoukozouko le 22/02/2005 00:54:20

OK, merci.
c'est vrai que sur 1000000 d'opération à la seconde, le test de la présence d'une accolade ne ralenti pas beaucoup, mais forcément, le fait de rajouter des accolades inutiles oblige à empiler, dépiler, et à faire un test en plus s'il ne rentre pas dans le if (pour savoir à quel moment il doit passer en séquence).
tu devrais essayer avec une plus lonugue séquence de code.
Le pb de ton test c'est qu'il n'y a pas de séquence après le if
essaie un code du type :

{
$k = 0;
for ($i=0; $i<100; $i++)
{
  if ($i%10)
  {
     if ($i%2)  {$k++;}
     else {$k += 2;}
  }
  else
  {
      if ($i%2)  {$k++;}
    else {$k += 2;}
  }
  if ($i%3)  {$k++;}
  else {$k += 3;}
  $k--;
  
}
contre:
{
$k = 0;
for ($i=0; $i<100; $i++)
{
   if ($i%10)
     if ($i%2) $k++;
     else $k += 2;
  else
     if ($i%2) $k++;
     else $k += 2;

  if ($i%3) $k++;
  else $k += 3;
  $k--;
}

Je ne mets jamais d'accolade s'il n'y a qu'une instruction apres le if, et ceci pour des raisons de clarté(j'arrive d'autant mieu à lire un code qu'il y a peu d'accolades...
Et puis dès que je vois une acolade, je cherche la deuxième instruction...
Bon toutes facons, c'est sûrement une habitude personnelle.
Je posait la question surtout pour me rassurer au niveau du temps d'exécution.

coucou747 : tu n'as pas fait de test pour le swith avec un seul case, comparé au if,  tu en penses quoi?

signaler à un administrateur
Commentaire de Anthomicro le 22/02/2005 00:55:34

"En tout cas, c'est sûr que c'est plus clair comme tu l'as codé (mais moins efficace je crois, à vérifier)."

J'ai déjà fait des tests il y a longtemps sur 10000 itérations, verdict : temps de génération identique.

a +

signaler à un administrateur
Commentaire de coucou747 le 22/02/2005 01:39:42

c'est que la diférence ne doit pas etre vraiment notable...

signaler à un administrateur
Commentaire de stepibou le 22/02/2005 16:03:12

C'est cool les gars.
merci coucou747 pour ton aide :
je n'ai pas les ouvertures fermetures de tags php ?!?
j'ai le report d'erreur pourtant sur on, d'ou ca viens?

Pour zoukozouko, ca ne peux pas etre lent :
c plus ou moins fluide, ou carement ca n'affiche pas
si c'est trop relou.

Pour Konqueror et tout le tintoin, je l'avoue, j'y  connait rien, tout le js qui y a ici, a ete adapté à l'arache d'autres sources. désolé, demerdez vous!...

mais pour me faire pardonner, les ptits lou, je vous
prépare un petit truc sympas, et qui à priori ne sera pas
une locomotive à vapeur. ;-)}

signaler à un administrateur
Commentaire de arnal69130 le 22/02/2005 16:56:05

Salut,
Bien trouvé le dégradé en polaire et l'animation.

Attention, il n'y a pas de 's' dans getElementById('texte1'). En effet, il n'y a qu'un seul élément pour un seul id ;o)

Sinon dans les fonctions js de index.php, je n'ai pas compris pourquoi tu as mis des '[0]' derrière les 'oSelects' ? Chez moi il faut que je les enlève pour que ça fonctionne.

Pour gagner en fluidité, peut-être que tu peux essayer de créer toutes les images qui vont servir pour un dégradé animé, par exemple en png, et ensuite tu les appelles en js. Ainsi tu évites de re-créer les mêmes images à chaque passage de la boucle. C'est juste une idée comme ça ;o)

A+
Arnaud

signaler à un administrateur
Commentaire de arnal69130 le 21/03/2005 18:11:24

Après l'avoir testé, je confirme qu'en créant les images dans des fichiers png ce script gagne beaucoup de fluidité, même avec des grandes dimensions !
Stepibou, je t'envoie ce que j'ai fait.

signaler à un administrateur
Commentaire de arnal69130 le 23/03/2005 09:45:44

N'hésitez pas à essayer d'accélérez un peu le timer, dans la fonction javascript :

function wait(temprestant,act){
...
        setTimeout(act, 10); //par exemple
}

signaler à un administrateur
Commentaire de kegi le 19/04/2006 21:05:54

Très bien. 9/10

Cordialement,
Kevin (kegi@hotmail.com)

signaler à un administrateur
Commentaire de Anthomicro le 19/04/2006 21:10:02

Ah ? vl'a qu'il cherche toutes les sources de stepibou pour se rattraper ^^

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,343 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.