begin process at 2012 05 28 10:35:32
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs Amusants

 > IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ

IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ


 Description

Le mouvement aléatoire pur n'est pas très spectaculaire, car la vitesse
change d'une manière désordonnée.
Pour rendre les déplacements plus "naturels", je ne change plus directement
la vitesse, mais la 'variation' de la vitesse.

Toutes les images doivent avoir la même dimension [wIma,hIma],
et initialement, elles ne doivent pas dépasser la zone jaune
   <div id='cnt' ...> </div>
dont la dimension est ajustable avec  width:???px  et  height:???px .

La vitesse dépend des variables 'pas', 'vit' et 'tim'.
Choisissez 'pas' tel que  1 <= pas <= vit.
Avec 'pas' près de 'vit', on s'approche du mouvement aléatoire pur.

En adaptant la fonction Clk(i), il est possible d'attribuer
au click sur une images une action individualisée:
l'exemple donné installe l'image cliquée au premier plan.

La fonction Ini() est un peu délicate:
elle écrit le code HTML des images dans la zone jaune.

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  • <head>
  • <title>Images dansantes: mouvement aléatoire orienté</title>
  • <script type="text/javascript">
  • //<![CDATA[
  • var iZon=0,nZon=0,tim=5; // timer en milisecondes
  • var vit=9,vit2=2*vit+1; // vitesse maximale en pixels à chaque Nxt()
  • var pas=3,pas2=2*pas+1; // différence maximal de la vitesse à chaque Nxt()
  • var wIma=200,hIma=150; // dimensions des photos en pixels
  • var xInf,yInf,xSup,ySup; // valeurs limites
  • var zon=[ // initialement, aucune image ne doit dépasser les bords
  • new Zon(000,000,"Image-0"), // x,y relatifs au conteneur
  • new Zon(100,250,"Image-1"),
  • new Zon(300,450,"Image-2"),
  • new Zon(400,250,"Image-3"),
  • new Zon(300,350,"Image-4"),
  • new Zon(312,450,"Image-5"),
  • new Zon(600,450,"Image-6")
  • ];
  • var num=nZon-1; // numéro avec avec plus grand z-index
  • function Zon(x,y,nom) { // Définition de l'objet et comptage
  • this.x=x; this.y=y; this.nom=nom; this.u=0; this.v=0; nZon++;
  • }
  • function Clk(i) { // Action du click le i-eme image
  • var ii=document.getElementById('i'+i);
  • document.getElementById('i'+num).style.zIndex=ii.style.zIndex;
  • ii.style.zIndex=nZon-1; num=i; // met ii au premier plan
  • alert(i+": "+zon[i].nom+" --> Remplacez Clk(i) par votre propre 'action'");
  • }
  • function Ini() { // initialise
  • var s="",c=document.getElementById('cnt');
  • xInf=c.offsetLeft; xSup=xInf+c.clientWidth-wIma;
  • yInf=c.offsetTop; ySup=yInf+c.clientHeight-hIma;
  • for (var i=0;i<nZon;i++) { // Inscrit les zones dans le conteneur
  • var z=zon[i];
  • s+="<img id='i"+i+"' src='Img/"+z.nom+".jpg' title='"+z.nom
  • +"' onclick='Clk("+i+")' style='position:absolute; z-index:"
  • +i+"; left:"+(z.x+=xInf)+"px; top:"+(z.y+=yInf)+"px'/>";
  • }
  • c.innerHTML=s;
  • }
  • function Nxt() {
  • var im=document.getElementById('i'+iZon),z=zon[iZon];
  • var u=z.u+Math.floor(Math.random()*pas2)-pas;
  • var v=z.v+Math.floor(Math.random()*pas2)-pas;
  • if (u<-vit) u=-vit; else if (u>vit) u=vit;
  • if (v<-vit) v=-vit; else if (v>vit) v=vit;
  • var x=z.x+u,y=z.y+v;
  • if ((x<xInf)||(x>xSup)) z.u=-u;
  • else if ((y<yInf)||(y>ySup)) z.v=-v;
  • else {
  • im.style.left=x+'px'; im.style.top=y+'px';
  • z.x=x; z.y=y; z.u=u; z.v=v;
  • }
  • iZon=(iZon+1)%nZon;
  • }
  • //]]>
  • </script>
  • </head>
  • <body onload="Ini(); setInterval('Nxt()',tim);">
  • <h2>Images dansantes: mouvement aléatoire orienté.</h2>
  • <div id='cnt' style="margin-left:10px; width:800px; height:600px; background:yellow">
  • <!-- conteneur des images dansantes. Adaptez-en la dimension width et height -->
  • </div>
  • <!-- le reste du code de body n'est pas indispensable -->
  • <p style='font-size:12px;'>
  • Cliquez sur une image: elle vient au premier plan et
  • vous êtes invités à écrire votre propre 'Clk(i)'.<br />
  • Toutes les images ont la même dimension [wIma,hIma].<br />
  • Initialement, les images ne doivent pas dépasser les bords du conteneur jaune.<br />
  • La vitesse dépend des variables 'pas', 'vit' et 'tim',
  • mais aussi du navigateur et de votre ordinateur.<br />
  • </p>
  • <p style='font-size:12px; color:red;'>Testé avec les navigateurs:
  • 'Internet Explorer 8 et 9', 'Firefox 4.0.1', 'Navigator 9.0.0.6',
  • 'Google Chrome 11.0.696.71', 'Opera 11.11', 'Safari 5'.<br />
  • (En execution locale, j'ai rencontré des difficultés de positionnement
  • avec Internet Explorer 8, sous Windows 7 - 64 bits)
  • </p>
  • <p style='font-size:12px; color:green;'>
  • Essayez d'autes algorithmes d'images dansantes: &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images dansantes/1-Aleatoire-libre'>
  • 1-Aleatoire-libre
  • </a> &nbsp;
  • <a href=
  • 'http://www.william-voirol.ch/TP/Images dansantes/2-Aleatoire-sans superpositions'>
  • 2-Aleatoire-sans superpositions
  • </a> &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images dansantes/3-Aleatoire-oriente'>
  • 3-Aleatoire-orienté</a> &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images dansantes/4-Tortue'>
  • 4-Tortue</a><br />
  • Téléchargez le zip complet (avec sources et images): &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images dansantes.zip'>
  • Images dansantes.zip</a><br />
  • Les images de temples de l'Inde proviennent de mon site: &nbsp;
  • <a href='http://www.william-voirol.ch'>Splendeurs de l'Inde</a>
  • </p>
  • </body>
  • </html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Images dansantes: mouvement aléatoire orienté</title>
  <script type="text/javascript">
  //<![CDATA[
    var iZon=0,nZon=0,tim=5; // timer en milisecondes
    var vit=9,vit2=2*vit+1;  // vitesse maximale en pixels à chaque Nxt()
    var pas=3,pas2=2*pas+1;  // différence maximal de la vitesse à chaque Nxt()
    var wIma=200,hIma=150;   // dimensions des photos en pixels
    var xInf,yInf,xSup,ySup; // valeurs limites
    var zon=[ // initialement, aucune image ne doit dépasser les bords
      new Zon(000,000,"Image-0"), // x,y relatifs au conteneur
      new Zon(100,250,"Image-1"),
      new Zon(300,450,"Image-2"),
      new Zon(400,250,"Image-3"),
      new Zon(300,350,"Image-4"),
      new Zon(312,450,"Image-5"),
      new Zon(600,450,"Image-6")
    ];
    var num=nZon-1; // numéro avec avec plus grand z-index
    function Zon(x,y,nom) { // Définition de l'objet et comptage
      this.x=x; this.y=y; this.nom=nom; this.u=0; this.v=0; nZon++;
    }
    function Clk(i) { // Action du click le i-eme image
      var ii=document.getElementById('i'+i);
      document.getElementById('i'+num).style.zIndex=ii.style.zIndex;
      ii.style.zIndex=nZon-1; num=i; // met ii au premier plan
      alert(i+": "+zon[i].nom+" --> Remplacez Clk(i) par votre propre 'action'");
    }
    function Ini() { // initialise
      var s="",c=document.getElementById('cnt');
      xInf=c.offsetLeft; xSup=xInf+c.clientWidth-wIma;
      yInf=c.offsetTop; ySup=yInf+c.clientHeight-hIma;
      for (var i=0;i<nZon;i++) { // Inscrit les zones dans le conteneur
        var z=zon[i];
        s+="<img id='i"+i+"' src='Img/"+z.nom+".jpg' title='"+z.nom
          +"' onclick='Clk("+i+")' style='position:absolute; z-index:"
          +i+"; left:"+(z.x+=xInf)+"px; top:"+(z.y+=yInf)+"px'/>";
      }
      c.innerHTML=s;
    }
    function Nxt() {
      var im=document.getElementById('i'+iZon),z=zon[iZon];
      var u=z.u+Math.floor(Math.random()*pas2)-pas;
      var v=z.v+Math.floor(Math.random()*pas2)-pas;
      if (u<-vit) u=-vit; else if (u>vit) u=vit;
      if (v<-vit) v=-vit; else if (v>vit) v=vit;
      var x=z.x+u,y=z.y+v;
      if ((x<xInf)||(x>xSup)) z.u=-u;
      else if ((y<yInf)||(y>ySup)) z.v=-v;
      else {
        im.style.left=x+'px'; im.style.top=y+'px';
        z.x=x; z.y=y; z.u=u; z.v=v;
      }
      iZon=(iZon+1)%nZon;
    }
  //]]>
  </script> 
</head>

<body onload="Ini(); setInterval('Nxt()',tim);">
  <h2>Images dansantes: mouvement aléatoire orienté.</h2>
  <div id='cnt' style="margin-left:10px; width:800px; height:600px; background:yellow">
    <!-- conteneur des images dansantes. Adaptez-en la dimension width et height -->
  </div>

  <!-- le reste du code de body n'est pas indispensable -->
  <p style='font-size:12px;'>
    Cliquez sur une image: elle vient au premier plan et
      vous êtes invités à écrire votre propre 'Clk(i)'.<br />
    Toutes les images ont la même dimension [wIma,hIma].<br />
    Initialement, les images ne doivent pas dépasser les bords du conteneur jaune.<br />
    La vitesse dépend des variables 'pas', 'vit' et 'tim',
      mais aussi du navigateur et de votre ordinateur.<br />
  </p>
  <p style='font-size:12px; color:red;'>Testé avec les navigateurs:
    'Internet Explorer 8 et 9', 'Firefox 4.0.1', 'Navigator 9.0.0.6',
    'Google Chrome 11.0.696.71', 'Opera 11.11', 'Safari 5'.<br />
    (En execution locale, j'ai rencontré des difficultés de positionnement
      avec Internet Explorer 8, sous Windows 7 - 64 bits)
  </p>
  <p style='font-size:12px; color:green;'>
    Essayez d'autes algorithmes d'images dansantes: &nbsp;
    <a href='http://www.william-voirol.ch/TP/Images dansantes/1-Aleatoire-libre'>
      1-Aleatoire-libre
    </a> &nbsp;
    <a href=
      'http://www.william-voirol.ch/TP/Images dansantes/2-Aleatoire-sans superpositions'>
      2-Aleatoire-sans superpositions
    </a> &nbsp;
    <a href='http://www.william-voirol.ch/TP/Images dansantes/3-Aleatoire-oriente'>
      3-Aleatoire-orienté</a> &nbsp;
    <a href='http://www.william-voirol.ch/TP/Images dansantes/4-Tortue'>
      4-Tortue</a><br />
    Téléchargez le zip complet (avec sources et images): &nbsp;
      <a href='http://www.william-voirol.ch/TP/Images dansantes.zip'>
        Images dansantes.zip</a><br />
    Les images de temples de l'Inde proviennent de mon site: &nbsp;
      <a href='http://www.william-voirol.ch'>Splendeurs de l'Inde</a>
  </p>
</body>
</html>

 Conclusion

Conclusion:

Le programme proposé est assez simple pour bien mettre en évidence les notions
utilisées, et il devrait fonctionner avec tous les navigateurs courants.

Examinez-le directement:
    http://www.william-voirol.ch/TP/Images dansantes/3-Aleatoire-oriente/

Le fichier zip contient le code source avec quelques images.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION
Toutes les sources de william voirol

 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol
Source avec Zip IMAGES DANSANTES 1: MOUVEMENT ALÉATOIRE LIBRE par william voirol
Toutes les sources de la catégorie Trucs Amusants

 Sources en rapport avec celle ci

Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol
Source avec Zip IMAGES DANSANTES 1: MOUVEMENT ALÉATOIRE LIBRE par william voirol

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (32 Go)
Entre 1290€ et 1333€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,560 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)