HTML5 Canvas - Un sablier (sablier) avec du sable tombant animé - Geek - Retraite de

Le code HTML folllowing est utilisé pour rendre la page:

Par conséquent, le contenu du script « sand_timer.js » sera chargé, et par conséquent, la fonction appelée « init » sera disponible. Si vous deviez regarder à l'intérieur du script ci-dessus, vous pouvez voir le code par exemple

La fonction « init » obtient d'abord une poignée à l'élément de toile, nous avons inclus dans le code HTML. Il vérifie ensuite si le navigateur prend en charge la mise en œuvre de la toile HTML5. Dans ce cas, un nouvel objet image est créée et sa source, il réglé sur l'image « hourglass.jpg ». Nous demandons alors au navigateur d'appeler la fonction « imgLoad » après l'image a été chargée. Cette fonction contient les éléments suivants:

La fonction ci-dessus fait appel à deux fonctions appelées « initBoundary » et « initSand ». Il pénètre ensuite dans la boucle principale - « Animer » l'appel de fonction. Les fonctions d'initialisation deux tableaux, qui sont essentiels à l'animation. La première fonction de créer la matrice limite. Ce tableau contient les coordonnées d'écran x et y de chaque bord du sablier. La fonction contient les éléments suivants:

Ce qui précède semble intimidante; cependant, vu visuellement tout devient clair. Si l'on devait tracer une ligne entre les points que nous finirions dans chaque tableau avec les éléments suivants:

La deuxième fonction d'initialisation « initSand » contient les éléments suivants:

La fonction ci-dessus crée une grille de cellules dans lesquelles les particules de sable peuvent occuper. A partir de la partie supérieure du sablier on évalue chaque ligne, l'obtention du minimum et maximum de x des coordonnées de la matrice limite. Pour chaque cellule le long de l'axe x, nous créons un objet qui soit titulaire d'une cellule vide (initEmptyRow) ou une particule de sable (initSandForRow). Dans son sable état par défaut occupe le rang du plafond + 50 pixels et y compris la ligne 159 (point milieu). Si l'on devait rendre le sablier sur la toile et le sable dans cette position, nous verrions les éléments suivants:

Revoir la fonction « imgLoaded la dernière étape à l'intérieur de cette fonction est l'appel à la boucle principale de l'animation par exemple

La fonction « d'animation » contient les éléments suivants:

La fonction d'animation était assez difficile à produire. Émulant l'écoulement naturel de sable sous la force de gravité a pris plusieurs itérations et quelques algorithmes ont été créés et remplacés plus tard que le code est arrivée à échéance. Le résultat final est pas parfait et on sent qu'il pourrait être amélioré. Cependant, comme une preuve de concept, il fonctionne. Le noyau de l'animation se produit dans «drawSandParticles qui est appelé de manière itérative jusqu'à ce que le sable est installé au fond. Cette fonction contient :(

La deuxième section gère le mouvement de chaque particule de sable. Plus précisément, la fonction tente de déplacer chaque particule de sable selon les lois de la gravité. À partir de la ligne la plus basse, nous vérifions chaque particule de sable de gauche à droite, rangée par rangée, déterminer si le sable peut se déplacer a) vers le bas un sur une ligne ou, b) si le sable peut naturellement tomber à gauche ou à droite. L'algorithme de sable est utilisée pour chaque déplacement, avec la cellule cible passée en paramètre de la fonction générique. Cette fonction est appelée « applyGravity » et comprend les éléments suivants:

Le mouvement de chaque particule de sable est permise si la cellule cible est vide. Si une particule peut être déplacé les objets des attributs tels que les positions x et y sont échangés avec la cellule cible, par exemple

Cette boucle est répétée quatre fois pour accélérer l'effet de chute de sable. Je pense que cette partie pourrait être modifié pour obtenir un mouvement plus lisse de sable; mais, pour l'instant j'ai choisi de se contenter de l'effet pas si lisse :-). La troisième étape de la fonction « drawSandParticles est de itérer autour de chaque cellule et dessiner sur la toile par exemple,

Et la fonction qui tire réellement « drawSandParticle 'chaque particule:

Cette fonction a utilisé le contexte de toile (ctx) pour tracer un rectangle de 1 pixel en utilisant la couleur associé à la particule de sable en cours. La quatrième étape de la boucle principale de l'animation consiste à redessiner la limite qui maintient simplement les bords propres. Enfin, la fonction retourne une valeur vraie ou fausse à l'interface d'appel. Cette valeur est tirée par le nombre de mouvements nul. Chaque fois que la boucle de mouvement ne se déplace pas un partcile le nombre de mouvement nul augmente. Après un certain nombre de mouvements nul est passé, nous pouvons dire le sable un a cessé de bouger, ou, autrement dit le sable est dans un tas au fond du sablier. Ce qui suit représente le sablier à intervalles mis en scène de l'animation: