On peut aussi réaliser des animations, ou plutôt donner l’illusion de l’animation à l’intérieur d’une scène avec HTML5. En reprenant la technique du color cycling (rotation par cycles de couleurs d’une palette de 256 teintes) utilisée dans les années 90 dans les jeux vidéos 8-bits pour animer des textures (chutes d’eau, nuages…), et en utilisant HTML5 Canvas, un développeur a “réanimé” 35 scènes et décors de jeux au sein d’une page web, sans .gif et sans Flash.
Le résultat visible sur cette page ne vous scotchera probablement pas à votre siège mais rappellera à certains l’époque lointaine des premiers jeux sur PC. La performance ici se situe ailleurs : démontrer certaines capacités du HTML5 et la possibilité d’intégrer directement dans une page web des animations (ou des ersatz d’animation créées par illusion d’optique), qui fonctionnent sur la plupart des navigateurs, y compris celui de l’iPhoneOS4 (j’ai testé : ça marche, même si cela manque un peu de fluidité).
Si vous vous intéressez au paramètres d’animation et à la gestion des couleurs dans la palette, toutes les animations font apparaître différents réglages sur lesquels il est possible de jouer pour modifier le rendu. Le grand enfant qui est en vous va d’un coup être submergé par une vague de nostalgie qui va plier sa productivité légendaire du lundi matin. Désolé.
(source)
📍 Pour ne manquer aucune actualité de Presse-citron, suivez-nous sur Google Actualités et WhatsApp.
Touché pour la production du Lundi matin ;D
Eric, je ne comprend pas pourquoi tu parles d’ersatz d’animation ? D’illusion d’optique ?
Il s’agit bien d’animation, finalement, non ?
Quelqu’un pour m’éclairer ?
Avec HTML5 arrive WebGL. Et cette nouvelle techno va changer la donne pour la 3D sur le web. Pas question “d’illusion d’optique” mais bien des vraies scènes 3D directement dans le navigateur et sans aucun plugin.
Quake2 est déjà dispo sous WebGL. 🙂
Génial, je me recroirais presque dans Pitfall 🙂
@tominardi : il ne s’agit effectivement pas d’animation à proprement parler puisque aucun pixel n’est déplacé si modifié. Seule la palette de couleur (qui n’est liée aux pixels que par des index) est modifiée.
En revanche même si c’est rigolo et effectivement nostalgique, ça prend 100% CPU sur mon Pentium-M 2 GHz. Juste pour cycler les couleurs d’une palette. Le but de cette technique était justement de ne pas utiliser de CPU à l’époque. D’ailleurs sur les machines sur lesquelles on l’utilisait à la base ça prenait très peu de “cycles CPU”, de l’ordre de quelques pourcents.
Pour que ca bouffe autant en HTML5, c’est soit que c’est de la m*rde, soit que c’est une simulation de color cycling. Bref, pour moi ça fait plutôt une mauvaise pub pour le HTML5, si cette techno a besoin de 100% CPU pour faire ce qu’un Amiga faisait les doigts dans le nez, on ne va pas aller bien loin.
@Glop75 : excellente remarque, je n’avais pas vu les ressources requises, j’avais juste vu que ça n’était pas très fluide !
merci pour le détail Glop75
Lol ca me ramene 3 siecle en arriere ca 🙂
Sinon, la raison pour laquelle ca prend 3000% de CPU en HTML5, c’est qu’on passe pas 250 couches d’abstraction (y a bien longtemps qu’on ne modifie plus directement les valeur dans la ram de la carte video).
A l’époque, on y allait directement en RAM 🙂
Mortel, on va pouvoir utiliser Canvas pour faire les jeux de 1990 en 2010 ! Woohoo !
C’est tout l’ironie de la démonstration d’Apple, qui après que Steve-O nous ait sorti le grand jeu contre Flash qui ferait ramer et planter les Macs , propose à la place HTML5 Canvas qui arrive à produire des animations digne des années pré-Internet au prix de 100% des ressources d’un bon PC d’aujourd’hui.
:-/
@sneak
Ce n’est pas parce que CETTE utilisation la est foireuse, que le reste l’est forcement …
Les menus aussi sont animés ! Il y a quand même pas mal de js derrière tout ça, et il reste le problème de la mémoire, mais ça montre tout de même le potentiel non pas d’HTML5 (seul), mais d’HTML5 et tous les langages qui gravitent autour…
@amapi
Les démos misent en ligne par Apple sont du même tonneau.
Mon propos n’est pas de dire que HTML5 et Canvas sont foireux, juste que pour l’instant leurs performances en affichage de contenu rich-media ne sont pas vraiment supérieures à Flash, contrairement à ce qu’on nous rabâche depuis quelques mois.
L’epoque des premiers jeux pc ? quelle heresie ! je me dois que rappeler qu’avant pc il y avait l’amiga avec ses 64/256/4096 couleurs et son son 4 pistes hardware, la ou le pc avait 4 couleurs et un speaker interne ignoble.
D’ailleur la source est claire il s’agit directement de fichiers amiga convertis.
Pour rappel même le plus puissant des amigas tweaké au 68030 50mhz ne pouvait pas lire un mp3.
Ca me rappelle le logiciel de dessin Neochrome sur Atari ST, il y avait une fonction comme ça pour cycler les palettes.
http://en.wikipedia.org/wiki/NeoChrome
Ya quand même de bien belle grande gueule ici bas 🙂
@Ninjaw P.B.
Si si, un amiga pouvait très bien lire les mp3: pas un A500 bien sur, mais un 1200 avec une petite carte accélératrice n’avait aucun problème de ce côté là.
@Eris ah non certainement pas, 68030 est bien une petite carte acceleratrice. Avec ca le seul moyen de lire des mp3 etait en reduisant grandement la qualité, certe en temps reel mais je n’appelle pas ca lire un mp3. En fait c’est la raison qui m’a fait abandonner mon amiga pour un pc