HTML 5 expérimental Exemples / Canvas et JavaScript

Voici quelques exemples d'utilisation de la balise Canvas
en HTML 5 associée au JavaScript.


La balise Canvas du langage HTML 5 apporte une avancée importante dans le monde du développement web. Elle permet de gérer un espace en contrôlant chaque pixel qui le compose.
Il s'agit d'une surface de dessin bitmap créée avec la balise Canvas puis contrôlable en JavaScript. Jusqu'à maintenant ce type d'intervention n'était possible qu'en Flash avec la classe Bitmap. Une fois intégré simplement dans la page HTML, le contenu de la balise est ensuite contrôlé via JavaScript afin d'afficher des animations, des éléments 3d, des interactivités, entièrement construite en manipulant les pixels de la zone Canvas...

HTML 5 Canvas Expérimental

Ce système permet notamment d'aller plus loin dans les animations sans "trop" surcharger la page.
Le Flash (autrefois utilisé pour créer ce type d'animation) est de plus en plus boudé par les navigateurs classiques, les normes W3C, les mobiles et tablettes. A l'inverse, la balise Canvas du HTML 5 a l'avantage d'être assez bien affichée sur les navigateurs récents tous supports. Jusqu'à maintenant peu de librairies dédiées permettent véritablement d'exploiter toutes les possibilités de la balise. En revanche les librairies JavaScript sont en pleine évolution et facilite le développement.
Des connaissances JavaScript et quelques bases géométriques sont souvent nécessaires.
Voici quelques exemples de HTML 5 expérimental réalisés par différents webdesigners.

Exemples

Keith Peters

HTML 5 Canvas Expérimental

Art From Code By Keith Peters
Un atout intéressant est de pouvoir gérer également chaque pixel d'une image. Il est alors possible de transformer l'image en contrôlant la couleur de chaque pixel qui la compose. Les passages en noir et blanc sont souvent utilisés pour des interactions simples sur des vignettes.

Ici le développeur notoire Keith Peters (http://www.bit-101.com, qui proposait autrefois de très beaux flash expérimentaux) s'est penché sur la question et propose une vision à 360° à partir de photos panoramiques classiques.
Un autre exemple d'expérimentation :

HTML 5 Canvas Expérimental

Mr Doob

HTML 5 Canvas Expérimental

Branching by Mr Doob
http://www.mrdoob.com/

Mr Doob (Ricardo Cabello http://ricardocabello.com/blog) a développé différentes expérimentations autour de WebGL, JavaScript, HTML 5. Il propose notamment Branching et Google Gravity à cette adresse : Google Gravity by Mr Doob

HTML 5 Canvas Expérimental

Hakim El Hattab

HTML 5 Canvas Expérimental

Hakim.se - Linjer : http://lab.hakim.se/linjer/
Hakim El Hattab propose une grande diversité de tests en HTML 5 sur son site. Développeur suédois, il produit des animations interactives poussées et assez fluides. Certaines d'en elles rappellent notamment le travail de Yugop, mais cette fois le développement n'est pas en Flash.
Hypnose : http://lab.hakim.se/hypnos/

HTML 5 Canvas Expérimental

Mike Ferron et Google Chrome

HTML 5 Canvas Expérimental

http://mikeferron.com/experiments/particles
Cette expérimentation est indexée sur Google Chrome Experiments, le navigateur référence et encourage ce type de développement, avec le site : Chromeexperiments.com

Cet expérimentation en HTML 5 propose un générateur de particules dont toutes les caractéristiques à faire évoluer sont très proche du générateur de particules Particular d'After Effects. De nombreuses fonctionnalités du logiciel d'animation vidéo sont développées en JavaScript. Aujourd'hui avec la balise Canvas, la majorité des effets possibles avec le logiciel sont "réalisables" en HTML 5 mais cette fois en version interactive, avec l'ajout et le contrôle d'éléments vidéos ou audio.
Ceci laisse présager un bel avenir à la balise Canvas et au JavaScript en matière d'animation interactive et de création web.

Zanoni Miranda et Zeno Rocha

HTML 5 Canvas Expérimental

http://html5-pro.com/wormz/
Développeurs basés au Brésil, association de la balise Canvas et JavaScript
(après un clique sur Générate à gauche).

Chris Milk

HTML 5 Canvas Expérimental

http://www.thewildernessdowntown.com/
Film intéractif réalisé par Chris Milk en HTML 5.

Cet article vous a intéressé ? Partagez :