Ça aurait été bien plus intéressant si les animations avaient été rendues dans le navigateur
J’aurais aimé pouvoir mettre les mains dans le code pour les faire fonctionner, mais il n’y a que des vidéos et pas le code, donc c’est un peu frustrant
Il y a tout de même quelques sources publiées : https://github.com/Bleuje/processing-animations-code
On peut aussi voir ici un tutoriel complet centré sur les concepts : https://bleuje.com/tutorials/
Il y avait dans ce tutoriel plein d’idées chouettes, comme parcourir un bruit en 4 dimensions pour faire des boucles fluides sans coupure, et j’ai fini par m’en inspirer pour mes propres projets. C’est facile à comprendre même sans utiliser Processing
Moi, j’ai plutôt ressenti l’inverse. C’est bien de pouvoir les regarder même sur un téléphone verrouillé qui n’arrive pas à charger beaucoup de pages JavaScript modernes tape-à-l’œil
Ces animations m’ont donné l’impression de revenir 20 à 25 ans en arrière, quand j’écoutais de la musique avec les plugins de visualisation Winamp activés
C’était une époque sympa, et les animations ici sont chouettes aussi
Ceux qui ont un certain âge se souviendront peut-être de l’écran de veille Flowfazer d’Utopia Softworks de Todd Rundgren
Il était développeur enregistré chez Apple, et on le voyait parfois traîner à la WWDC dans les années 90
Exact. Cela dit, sur un Pentium MMX, activer les visualisations Winamp faisait tellement chuter la réactivité du système qu’on ne pouvait plus faire grand-chose d’autre que les regarder
Une époque simple, mais amusante
J’ai pensé pareil. Où est passé cthugha aujourd’hui ?
Je posais une grosse lentille en verre sur le moniteur pour projeter ça au plafond. Ça me rappelle la blague comme quoi on a choisi la mauvaise décennie pour arrêter le cannabis
Ça me fait penser à AVS Society :)
En regardant la source, je me suis demandé si c’était généré aléatoirement ou s’il s’agissait d’un choix aléatoire parmi des animations déjà faites, et j’ai confirmé que c’était bien la seconde option. J’ai aussi vu d’étranges tags d’analyse
Cloudflare bloque les scripts, donc il faut aller voir le site directement. J’ai deux interrogations : une requête de script est toujours envoyée à Google, et doNotTrack est simplement codé en dur à false. Mon navigateur envoie pourtant bien cet en-tête, donc ça ne semble pas non plus injecté correctement côté serveur ; je ne comprends pas ce que ça essaie de faire
Oui. Toutes ces animations sont des vidéos pré-rendues intégrées à la page, dont une est choisie au hasard
À l’inverse, shadertoy [1] est vraiment impressionnant parce que les animations y sont calculées et rendues en temps réel
J’avais été tellement impressionné par shadertoy que j’avais un jour créé un site avec un shader en arrière-plan via Three.js [2]. Il montrait des caustiques, ces motifs lumineux changeants produits par la lumière traversant des vaguelettes au fond d’une piscine, d’un lac ou de la mer, un peu comme [3]. Les visiteurs pensaient toujours que c’était une vidéo pré-rendue, et ils étaient sincèrement surpris qu’un téléphone vieux de plusieurs années puisse faire tourner ce shader de façon fluide en temps réel
Il y a plusieurs styles d’animation, mais ça m’a rappelé Electric Sheep, un superbe écran de veille de fractales de flammes
On peut l’installer en local et voter positivement ou négativement sur différents « sheep » selon ses goûts
[1] https://electricsheep.org/
Puisque personne ne pose la question, je vais la poser : comment est-ce que c’est fait ? Je me demande s’il existe des programmes spécialisés dans ce type de graphisme et programmation visuelle, ou si c’est plutôt un ensemble de scripts Python avec de la 3D, des maths et des bibliothèques de tracé
Il y a sur le site des tutoriels pour faire ce genre d’animations, surtout des GIF en boucle parfaite [1]. Tout semble avoir été fait avec Processing [2]
[0]: https://bleuje.com/tutorials/
[1]: https://processing.org/
Il faut essayer des choses un peu au hasard, puis revenir sans cesse sur ce qui donne quelque chose de chouette. C’est une forme de sélection génétique
Étudier le code d’autres animations pour assimiler les idées et motifs généraux aide aussi
Il existe des logiciels spécialisés, ainsi que des langages souvent utilisés pour l’art informatique, comme Processing
Mais je ne sais pas avec certitude ce qui a été utilisé pour ces œuvres en particulier
Quand j’étais enfant, c’est exactement le genre de choses que je voyais chaque fois que j’avais une forte fièvre
Quel flashback. Je crois qu’une fois j’avais pris trop de Sudafed, et dans cet état à moitié rêveur, à moitié éveillé, je voyais exactement ce genre de choses
Moi, ça ressemblait à ça quand j’avais des terreurs nocturnes au début de l’adolescence
Sur desktop, si on fait un clic droit puis qu’on active l’option correspondant aux contrôles du navigateur, on voit assez bien le point de boucle
Certaines ont une boucle absurdement courte
Ça me fait penser à une scène de film où une force maléfique dans l’ombre hypnotise les habitants pour les manipuler à sa guise
« Ne regarde pas ça, regarde ici, utilise ça »
« Merde, on est arrivés trop tard. Il est déjà allé trop loin »
« Pour arrêter le flux de tcp, il faut re-synchroniser la base de données du mainframe serveur afin de rediriger le trafic »
Cela dit, l’animation de trou de ver aurait besoin du thème musical de Doctor Who
Étrangement, hier j’ai essayé d’envoyer ce lien par SMS à des proches, et il n’est jamais parti
J’ai essayé plusieurs variantes, et tous les messages de groupe contenant un lien bleuje . com semblaient bloqués. Il y a peut-être un filtre quelque part ? J’utilise T-Mobile avec Android Messages
1 commentaires
Réactions sur Hacker News
Ça aurait été bien plus intéressant si les animations avaient été rendues dans le navigateur
J’aurais aimé pouvoir mettre les mains dans le code pour les faire fonctionner, mais il n’y a que des vidéos et pas le code, donc c’est un peu frustrant
On peut aussi voir ici un tutoriel complet centré sur les concepts : https://bleuje.com/tutorials/
Il y avait dans ce tutoriel plein d’idées chouettes, comme parcourir un bruit en 4 dimensions pour faire des boucles fluides sans coupure, et j’ai fini par m’en inspirer pour mes propres projets. C’est facile à comprendre même sans utiliser Processing
Ces animations m’ont donné l’impression de revenir 20 à 25 ans en arrière, quand j’écoutais de la musique avec les plugins de visualisation Winamp activés
C’était une époque sympa, et les animations ici sont chouettes aussi
Il était développeur enregistré chez Apple, et on le voyait parfois traîner à la WWDC dans les années 90
Une époque simple, mais amusante
Je posais une grosse lentille en verre sur le moniteur pour projeter ça au plafond. Ça me rappelle la blague comme quoi on a choisi la mauvaise décennie pour arrêter le cannabis
En regardant la source, je me suis demandé si c’était généré aléatoirement ou s’il s’agissait d’un choix aléatoire parmi des animations déjà faites, et j’ai confirmé que c’était bien la seconde option. J’ai aussi vu d’étranges tags d’analyse
Cloudflare bloque les scripts, donc il faut aller voir le site directement. J’ai deux interrogations : une requête de script est toujours envoyée à Google, et
doNotTrackest simplement codé en dur à false. Mon navigateur envoie pourtant bien cet en-tête, donc ça ne semble pas non plus injecté correctement côté serveur ; je ne comprends pas ce que ça essaie de faireÀ l’inverse, shadertoy [1] est vraiment impressionnant parce que les animations y sont calculées et rendues en temps réel
J’avais été tellement impressionné par shadertoy que j’avais un jour créé un site avec un shader en arrière-plan via Three.js [2]. Il montrait des caustiques, ces motifs lumineux changeants produits par la lumière traversant des vaguelettes au fond d’une piscine, d’un lac ou de la mer, un peu comme [3]. Les visiteurs pensaient toujours que c’était une vidéo pré-rendue, et ils étaient sincèrement surpris qu’un téléphone vieux de plusieurs années puisse faire tourner ce shader de façon fluide en temps réel
Il y a plusieurs styles d’animation, mais ça m’a rappelé Electric Sheep, un superbe écran de veille de fractales de flammes
On peut l’installer en local et voter positivement ou négativement sur différents « sheep » selon ses goûts
[1] https://electricsheep.org/
Puisque personne ne pose la question, je vais la poser : comment est-ce que c’est fait ? Je me demande s’il existe des programmes spécialisés dans ce type de graphisme et programmation visuelle, ou si c’est plutôt un ensemble de scripts Python avec de la 3D, des maths et des bibliothèques de tracé
[0]: https://bleuje.com/tutorials/
[1]: https://processing.org/
Étudier le code d’autres animations pour assimiler les idées et motifs généraux aide aussi
Mais je ne sais pas avec certitude ce qui a été utilisé pour ces œuvres en particulier
En cliquant sur latest animations sur le site principal, on peut voir une liste par ordre chronologique
[1] https://bleuje.com/animationsite/2023_1/
Quand j’étais enfant, c’est exactement le genre de choses que je voyais chaque fois que j’avais une forte fièvre
Sur desktop, si on fait un clic droit puis qu’on active l’option correspondant aux contrôles du navigateur, on voit assez bien le point de boucle
Certaines ont une boucle absurdement courte
Ça me fait penser à une scène de film où une force maléfique dans l’ombre hypnotise les habitants pour les manipuler à sa guise
« Ne regarde pas ça, regarde ici, utilise ça »
« Merde, on est arrivés trop tard. Il est déjà allé trop loin »
« Pour arrêter le flux de tcp, il faut re-synchroniser la base de données du mainframe serveur afin de rediriger le trafic »
Cela dit, l’animation de trou de ver aurait besoin du thème musical de Doctor Who
Étrangement, hier j’ai essayé d’envoyer ce lien par SMS à des proches, et il n’est jamais parti
J’ai essayé plusieurs variantes, et tous les messages de groupe contenant un lien bleuje . com semblaient bloqués. Il y a peut-être un filtre quelque part ? J’utilise T-Mobile avec Android Messages