cClaude.rocks ☕ Le blog

English version of this page.

Pour le 1er avril 2019, j’ai introduit une animation sur la page À propos. Ce type d’animation s’appelle une DÉMO (vient du mot démonstration) – il s’agit de techno-art, une association entre la technologie et l’art.

Cette pratique remonte aux années 1980, juste après que l’apparition des premiers ordinateurs personnels est certainement liée au manque de logiciels. Les utilisateurs ont commencé à écrire des programmes souvent en langage machine (assembleur) pour afficher des images avec de la musique. Rapidement, les scrollings sont apparus, puis les effets se sont complexifiés sans nécessairement avoir des machines plus puissantes, mais en essayant d’exploiter au mieux les ressources des ordinateurs de l’époque.

Cela a donné lieu à des démos-parties (scène) où des personnes se rencontraient pour faire des compétitions sur la base de différents critères techniques ou artistiques. Le langage de prédilection pour type de performance est l’assembleur afin d’exploiter au mieux la puissance des machines, une autre raison, et non des moindres, est qu’historiquement il n’y avait pas vraiment de choix.

Concernant la DÉMO par elle-même, la partie animation est 100 % en HTML/CSS. Pour le lanceur, je me suis résigné à utiliser du JavaScript car les navigateurs ont des comportements trop hétérogènes entre les différents éditeurs et plateformes. Ceci concerne essentiellement l’affichage de l’interface de commande des sons.

Voici à quoi sert le code JavaScript dans cette DÉMO :

• Par défaut la DÉMO n’est pas lancée, ceci afin d’éviter un démarrage du son inopiné, le code JavaScript sert à attendre une action de l’utilisateur.
• Si on coupe la musique cela arrête l’animation, et du coup l’ensemble reste synchronisé,
• En fin de musique (au bout troisième affichage du scrolling horizontal) l’animation s’arrête.
• Une petite fonction JavaScript sert à injecter du code en dehors de la zone des documents, ce qui permet d’avoir un affichage bien intégré sans pour autant casser la présentation du blog.
• Le code prend aussi en charge l’affichage de l’avancement du tampon (buffer) de téléchargement de la musique ainsi que de la position courante du morceau.

Cette petite DÉMO permet d’explorer certaines fonctionnalités récentes de CSS (récentes au sens où elles sont, maintenant, supportées par les navigateurs les plus courant).

Les trucs à voir dans la démo

• Fond étoilé avec plusieurs niveaux de scrolling, vous pouvez faire le vôtre avec cette application,
• La citation de Yoda,
• La musique (OK, ce n’est pas à voir, mais à écouter),
• Le titre avec un effet de compression,
• Une barre de raster comme il était fréquent dans les « démos » du « C=64 »,
• Scrolling horizontal avec effet de flash,
• Scrolling ping-pong du logo avec effet de flash,
• Scrolling vertical en transparence (c’est un vrai code source pour 6510 sur C64),
• Texte “100 % CSS” avec effet de chemin, une déformation, des changements d’opacité et de couleurs,
• 7 étoiles avec des trajectoires indépendantes : bleutées (trajectoire rectiligne) – verte (trajectoire circulaire) – violette (trajectoire improbable),
• Effets de rotation sur des caractères,
• …

Le code assembleur

Le texte contenant du code assembleur qui s’affiche sur la droite, est un vrai bout de code assembleur permettant de lancer un programme arrière plan (en interruption) sur le « Commodore 64 ».

Cet extrait d’assembleur permet d’exécuter à chaque balayage de l’écran un morceau de code, qui exécutera par exemple une note de musique – voir le code complet.

Limitations

• Sur Firefox mobile, en verticale la DÉMO ne s’affiche pas, en fait elle s’affiche quelques secondes puis disparaît.

• Sur mobile Firefox et Chrome cela fonctionne à supposer d’avoir un téléphone ou une tablette assez puissante et d’être capable d’afficher plus de 350 pixels en vertical (taille verticale de la DÉMO).

• Il y a un petit décalage dans la mise en page entre Firefox et Chrome ce qui m’a obligé à faire des sacrifices de présentation pour avoir un rendu raisonnable dans tous les cas.

• Hum, un dernier truc qui ne va pas est que cette DÉMO casse complètement la logique du site qui se veut être économe en énergie aussi bien sur la partie serveur que côté client web, mais bon c’est juste pour se(me) faire plaisir.

Crédits / Influences / Remerciements

Pas facile, il y en a un peu partout. Pour commencer :

• à Geoff Graham pour son code sur le scrolling Star Wars,
• à Donovan Hutchinson pour son code sur un autre scrolling Star Wars – je vous invite également à voir son site d’animation CSS,
• à Roel Nieskens pour sa DÉMO c64css3 qui représente parfaitement le style de ce que l’on trouve sur commodore 64. Il propose d’excellents articles de son blog.
• aux rédacteurs de la documentation de Mozilla,
• aux développeurs de Firefox pour les outils très pratiques qu’ils proposent et en particulier d’éditeur de courbe de Bézier sans quoi beaucoup d’effets auraient été beaucoup plus difficile à produire,
• aux rédacteurs de la documentation w3schools,
• les codeurs de GrafX2, un programme de dessin bitmap inspiré des programmes Amiga Deluxe Paint et Brilliance. Spécialisé dans le dessin en 256 couleurs, ce logiciel est adapté au pixel art, aux graphiques de jeu et, en général, à tous les graphiques détaillés dessinés à la souris. Disponible sur Linux et Windows,
• L’excellent C-64 charset logo generator qui permet de générer des logos à la mode de ce que peuvent produire des ordinateurs 8 bits – code source.
• et plein d’autre que j’ai oublié…

Pour apprendre

Pour vous aider à reproduire ces effets, j’ai écrit quelques articles que vous pouvez retrouver en suivant le mot clé démo.

Vos commentaires et questions sont, comme toujours, les bienvenus.

ᦿ