Iodification du python squaritien

Coucou ! Quatre fois n’est pas coutume, je viens encore vous parler de Squarity.

J’ai réussi à régler le problème de lenteur. J’ai lâché la librairie JS Brython, pour la WebAssembly Pyodide.

Argh, du code binaire !

D’aucuns-et-d’aucunes considèrent que les WebAssembly sont le mal absolu, car, tout comme le code binaire des fichiers exécutables, c’est non lisible par un humain. Ça va à l’encontre de l’un des dogmes du web, qui énonce que tous les composants d’un site doivent être analysables, même si cette analyse peut être compliquée. Le HTML, le javascript, le CSS, le JSON sont écrits avec des mots, et non avec des nombres. C’est en partie en raison de ce dogme que les navigateurs vont définitivement virer la technologie Flash.

J’oblige donc votre navigateur à exécuter du code que vous ne pouvez comprendre aisément, ce qui fait de moi un vilain.

Ce à quoi je répondrai : « Mouiimmpfboapf, ça va bien. Le code source de Pyodide est disponible sur internet. D’autre part, avez-vous tous les codes sources de tous les exécutables que vous lancez sur votre machine ? ». À mon avis, la seule personne qui peut vraiment le prétendre serait Richard Stallman.

(TODO : insérer ici une photo à poil de Richard Stallman, pour équilibrer par rapport à la quantité de photos de femmes rondes à poil qu’il y a dans ce blog)

Heuwargl, le chargement est lent !

L’exécution de code python dans un navigateur est plus rapide par Pyodide que par Brython. J’ai fait quelques benchmarks au doigt mouillé, en particulier avec le jeu Loops in Pool. La propagation de la boue et de l’eau sont maintenant beaucoup plus fluide.

Dans la version précédente de Squarity, j’avais testé avec un délai de 1 milliseconde entre chaque propagation, et c’était quand même lent. Alors j’ai mis 400 millisecondes pour ne pas surcharger la machine. Dans la nouvelle version, j’ai re-essayé 1 milliseconde, l’animation s’est accélérée significativement. Je l’ai laissé ainsi, youpi.

Cependant, l’initialisation de Pyodide est très lente. Il faut télécharger 20 Mo de bazar, alors que Brython tient en moins de 10 Mo (et c’est déjà beaucoup pour du javascript !). Ensuite, le navigateur doit interpréter et démarrer la WebAssembly, ce qui prend encore quelques secondes.

« Dans le monde dans lequel on vit », tout doit aller très vite. Une dizaine de secondes d’attente peut décourager certaines personnes. Ce choix de Pyodide me fera donc perdre une base potentielle de user-client-partner. Mais je préfère décourager définitivement un petit nombre, plutôt que ralentir continuellement tous les futurs fidèles qui utiliseront Squarity.

Je mettrai une barre de progress la plus précise possible. On accepte plus facilement d’attendre lorsqu’on voit un décompte qui avance. Actuellement, le progress n’est qu’une liste de 8 étapes, dont 6 sont pratiquement instantanées et 2 sont très longues. C’est pas du tout suffisant.

Prototype d’une barre de progress avec estimation de temps incertaine.

Si je pouvais éviter le re-téléchargement des 20 Mo une fois que ça a été fait, ce serait top. Je sais bien que le navigateur a un cache, mais celui-ci a une fâcheuse tendance à se vider. On a le droit de stocker des WebAssembly dans du local storage ?

J’ai également testé sur smartphone. Ça fonctionne (j’en n’étais vraiment pas sûr), par contre l’exécution reste super lente. Les fuckings millenials de la génération Ÿ écoperont des deux inconvénients : lent à l’initialisation ET à l’exécution. Je laisse comme ça pour l’instant, tant pis. De toutes façons, le premier truc à régler concernant l’utilisation sur smartphone serait le responsive design cradingue. Et dans un futur très lointain, on pourrait carrément imaginer une app.

Il suffira juste d’accepter le postulat qu’une app mobile exécutant du code python arbitraire ne constitue pas une faille de sécurité. Ha ha ha. Je ne suis même pas sûr de ce postulat concernant les sites web. Re-ha re-ha re-ha. Bref : y’a du boulot.

En tout cas, Pyodide est beaucoup plus simple à intégrer que Brython. Pour exécuter du python, j’ai une fonction à appeler, avec le code en paramètre. On peut directement lire/écrire les variables javascript, les exceptions python sont automatiquement remontées, avec traceback et message. J’ai tout ce qu’il me faut.

Avec Brython, je devais pré-placer mes variables d’échanges dans un truc à la con, mettre mon code dans une balise script, lancer une fonction sans paramètres, prier pour que la portée des variables ne se vautre pas toute seule, et lire les données de retour dans le truc à la con sus-mentionné. Je ne vous (re)parle même pas de la récupération des erreurs où j’ai eu recours à des astuces tellement tordues que mon cerveau a préféré les oublier !

Vive Pyodide. De plus, je ne désespère pas que dans quelques siècles, si l’humanité n’a pas entièrement crevé pour une raison quelconque, les navigateurs web soient nativement dotés d’un interpréteur python. Que l’on ait enfin une alternative sérieuse à ce javascript de merde.

L’ancêtre de Pyodide sur smartphone

Qui veut dessiner un beau tileset ?

Mon jeu-phare, les aventures de H2O, mériterait bien un petit coup de polish (dans le sens polissage, pas dans le sens polonais). Mais je ne suis pas un dessinateur assez doué pour ça.

Alors j’ai posté un message chez la communauté PixelJoint, pour leur demander qui serait assez gentil pour me redessiner le tileset de H2O, en mieux.

Je me suis fendu d’une explication détaillée de toutes les tiles.

Si vous élevez des pixels chez vous, n’hésitez pas à vous manifester sur le forum de PixelJoint. Il s’agit d’un concours en mode bisounours, dans lequel tout le monde gagnera. C’est à dire que je ne prendrais pas le meilleur tileset, mais je ferais une version du jeu H2O pour chaque tileset qui sera proposé.

Pour l’instant, je n’ai eu qu’une seule proposition, via message privé. Je peux m’en contenter, le pixel-artiste m’a fait un super boulot. Vous le verrez très bientôt lorsque j’aurais mis à jour le jeu.

Pour le bon plaisir de ce projet Squarity, j’ai dû me créer un compte Twitch, un compte Ludum Dare, un compte GoDaddy, un deuxième compte pythonanywhere et maintenant un compte PixelJoint. Tellement populaire, tellement social.

Il y a de jolies choses sur PixelJoint

À propos de social

L’une des prochaines grosses étapes de Squarity sera de créer un lieu d’échange et de contenu. Ça me permettra de recenser les jeux existants, de publier les release notes, d’ajouter des articles et des tutoriels, d’aider les codeureuses en herbe, etc.

Je ne sais pas encore sous quelle forme je ferai ça. Le plus simple serait un serveur Discord, mais j’aimerais éviter d’être trop dépendant d’un réseau social existant, quitte à payer un petit peu. Peut-être que ça se finira avec une instance Mastodon et un CMS à l’arrache.

Mais j’aimerais aussi éviter d’obliger les gens à se créer un enième compte sur un enième site. J’essaierais peut-être d’intégrer des authentifications tierces : les boutons « sign in with Google », « sign in with Github », etc.

Bien évidemment, je ne connais pas grand chose dans ce domaine, ça risque donc de me prendre du temps et d’être un beau bordel. On verra bien. Peut-être que dans trois semaines, j’écrirais un article de blog larmoyant expliquant que c’est trop compliqué, que j’abandonne tout, et que je préfère encore utiliser tout mon temps libre à zapper en continu sur Twitch.

(TODO: insérer ici une image prise sur Twitch de gens pixelisés déguisés en serpent qui font passer des arcs électriques dans de la vapeur d’eau pour voir si ça la disperse et qui ensuite font de la peinture sur corps).

À propos de corps

Petit rattrapage de tous les précédents articles n’ayant pas d’images de femmes rondes.

Voici Nicole Nurko, dont je vous ai précédemment parlé :

Ainsi que Kim Manana :

Et la sublime-bling-bling Gabriella Lascano :

Pro-tip : lorsque vous voulez parcourir un compte Instagram (d’une femme ronde ou pas) et que vous ne voulez pas vous inscrire car, comme dit précédemment, vous en avez marre de vous créer des comptes de partout, vous pouvez remplacez dans l’url « instagram.com » par « imginn.com ». Vous aurez toutes les photos sans les pop-ups lourdingues.

À la chopraine, comme on disait dans les années 1990.

Classement Ludum Dare et presque un jeu de Soko-punk

Ludum Dare

Voici mon classement au Ludum Dare.

Il y a eu 800 participations dans la catégorie « Compo ». Une trentaine de personnes ont noté mon jeu.

  • Overall: 513ème
  • Fun: 426ème
  • Innovation: 144ème
  • Theme: 530ème
  • Graphics: 578ème
  • Humor: 438ème
  • Mood: 545ème

Pour une première participation, c’est pas si mal. Je suis assez content de mon classement en « Innovation ».

Manifestement, le jeu de mot dans le titre du jeu : « Loops in Pool » n’a pas vraiment fait décoller mon classement en Humour. On fera mieux la prochaine fois.

Presque Soko-punk

Et voici un lien vers le jeu que nous avons créé en live mercredi soir.

Il est pas fini, mais ça fait quand même des trucs. Il faut imaginer que l’héroïne que vous dirigez n’est pas censée pouvoir passer dans des éclairs.

Du Sokoban-like dans une ambiance Steam Punk.

Le but est d’électriser toutes les boules, mais vous n’êtes pas obligé de toutes les connecter ensemble dans un même graphe connexe. Lorsque le but est atteint, il aurait dû y avoir un petit « print » pour dire bravo, et un passage vers un hypothétique niveau suivant.

Une fois de plus, je me suis heurté à la lenteur de Brython. Dans mon code, j’avais un double parcours imbriqué de toutes les tiles du jeu, pour vérifier quelles boules doivent être électrisées. Rien que ça, ça mettait quelques secondes.

J’ai arrangé le code pour que ce soit plus rapide. Mais cette lenteur pose de plus en plus problème, même pour des jeux que j’aurais cru simple. J’ai peut-être une piste pour régler ça, je vous en reparle quand je l’aurais testée, c’est à dire dans un délai non défini.

À nouveau, pas d’image de femme ronde. Désolé. Je me rattraperais au prochain article. En attendant, vous pouvez chercher « yathbeauty » sur Twitter, TikTok et instagram. Très jolie, et elle sait comment se tenir pour nous faire profiter de ses atouts.

Ludum Dare 47 post-codem

Comme annoncé dans mon précédent article, j’ai participé au Ludum Dare. Vous pouvez jouer à ma contribution directement par ici.

La tradition dans les game jams est d’écrire un « post-mortem », c’est un petit (grand) texte que l’on écrit à tête reposée après avoir bossé comme un oufzor pendant tout un week-end à créer un jeu.

Je trouve l’expression « post-mortem » étrange. Je ne suis pas mort, même si ça a été assez intense et que j’en suis sorti fatigué. Donc : « post-codem ».

Fonctionnement du jeu

Les premiers retours m’indiquent que c’est difficile à prendre en main au départ. J’ai donc fait une petite vidéo de démo explicatoire. J’y parle anglais, c’est une catastrophe. Vous avez le droit de mettre en mute.

L’aire de jeu est une piscine qui se recouvre entièrement de boue et de lierre (les petits traits verts). Vous sélectionnez une première case, en appuyant sur le bouton « 1 », puis vous en sélectionnez une deuxième, et elles s’échangent. Le but est de construire, par échanges successifs, des boucles fermées de lierre, ce qui déclenche la suppression de la boue qui est à l’intérieur.

Il faut commencer par créer une boucle à côté de la fontaine d’eau en haut à gauche. L’eau avance lorsqu’elle est en contact avec une zone sans boue. Vous devez la propager petit à petit jusqu’à l’arrivée en bas à droite.

Vous ne pouvez pas échanger une case si elle n’est pas unie, c’est à dire ayant un mix de boue et d’eau. C’est gênant lorsque vous avez deux boucles proches : vous ne pouvez pas créer de mini-boucle entre les deux pour les fusionner. J’ai donc ajouté un pouvoir spécial, lorsque vous activez le bouton « 2 » sur une case comportant de la boue, un trait vert se rajoute, qui peut vous permettre de finaliser une boucle.

Par le pouvoir du lierre !!

Post-codem au sujet du jeu

Le thème était : « Stuck in a Loop », c’est à dire : « Coincé dans une boucle ».

Il y a deux modes de participation au Ludum Dare :

  • Jam : vous avez 3 jours pour créer un jeu vidéo, en équipe ou en solo. Vous pouvez réutiliser des images, des sons et des codes existants (en respectant les licences et autres fucking copyright, évidemment).
  • Compo : c’est le « hard mode ». Vous n’avez que 2 jours, en solo. Tous les éléments de votre jeu doivent être originaux et doivent avoir été créés durant ces 2 jours. Obligation de partager le code source. Mais vous pouvez utiliser des outils de création privatifs (Unreal Engine, par exemple).

J’ai choisi compo. C’est pas que je veuille me la péter en démarrant directement en hard mode. C’est juste que j’avais mon week-end de dispo, mais pas le lundi après. Et les autres contraintes de la compo me convenaient.

Bien entendu, je n’ai pas eu le temps de réaliser toutes les idées que j’avais. Ça arrive à chaque projet (artistique ou non). Comme c’est systématique, on sait à l’avance qu’on ne pourra pas tout faire, on peut donc diminuer ses prétentions dès le départ. Mais même ainsi, les prétentions restent trop grandes, et on finit toujours par finir à l’arrache.

Ouais, à la

Comme dirait Helmut : voilà un jeu de mot franco-allemand qui Kohl très bien à l’article.

Échec de la continuous delivery

J’ai tellement galéré à coder (j’explique pourquoi dans le dernier chapitre de cet article), que ce n’est que le dimanche à 12h que j’ai eu une version pre-pre-alpha, comportant uniquement la fonction d’échange et la détection des boucles.

Note pour les prochains Ludum Dare : se réserver des petites plages de temps pour tester et faire tester son jeu par des gens quelconques. Ça permet d’ajuster la difficulté et éventuellement de glaner de nouvelles idées.

Ce que j’avais imaginé au début : coder un petit bout de truc, le montrer aux gens qui vivent avec moi, même si ça ne constitue pas un vrai jeu, montrer le bout de truc suivant, et ainsi de suite. On aurait avancé tous ensemble durant le week-end, ces mini-démonstrations régulières auraient permis de me faire pardonner le fait que je me serait comporté en geek pendant 48 heures.

Au lieu de ça, j’ai passé les trois premiers quarts du week-end à grogner devant mon ordinateur. Lorsque quelqu’un venait me voir, je lui grognais que rien ne marchait. Pas très interactif.

Groumpf ! A marche pô !

Échec de l’explication du mécanisme du jeu

J’avais prévu de faire un petit tutoriel, qui s’est terminé en un pseudo-manuel écrit en 20 minutes, sous forme de docstring au début du code python. J’ai ensuite pseudo-copié-collé ce manuel pour le mettre dans la description Ludum Darienne.

Ça n’aide pas trop à comprendre le fonctionnement du jeu quand on le découvre. D’où la petite vidéo que j’ai faite après. Qui est elle-même créé à l’arrache, mais ça c’est parce que j’ai très peu d’expérience dans ce domaine. Je cause très mal anglais alors que d’habitude en vrai conversation je m’en sors potablement. De plus, on m’entend prendre de grandes inspirations avant chaque phrase. C’est malaisant.

Même la longueur de la vidéo est une erreur. J’explique tous les mécanismes du jeu durant les 4 premières minutes, puis je passe 6 minutes à terminer ma partie. Lorsque les ordispectateurtrices-joueureuses arrivent sur ma page Ludum Darienne, ces personnes voient une vidéo ayant une durée de 10 minutes. Elles ne la regardent pas forcément, parce que c’est trop long. Si la durée affichée avaient été plus courte, il y aurait eu plus de chances qu’elles cliquassent sur « play », parce que gâcher 4 minutes de sa vie dans notre monde actuel est quelque chose d’encore à peu près acceptable. Ce serait d’ailleurs intéressant de connaître la probabilité de clic sur un bouton « play » en fonction de la durée d’une vidéo, mais ce n’est pas le sujet.

Les graphismes sont manifestement beurkys. Les explications du jeu utilisent le terme « vines » (du lierre), il faut comprendre que ça correspond aux traits verts. Ces traits sont une représentation métaphysique aristotélicienne du lierre quand on n’a pas eu le temps de le dessiner correctement.

Possible échec de la promotion de Squarity

Cette participation au Ludum Dare, et les futures participations à d’autres game jams, n’ont pas pour but de créer un jeu génial qui sera premier au classement et restera dans la mémoire de l’humanité (même si ça me plairait bien). Le but est de promouvoir Squarity.fr, ma plate-forme de création et partage de jeux.

Je veux provoquer chez les Ludum Daristes une réaction de type :

« Voyons voir ce jeu… Moui bof. Pas génial.

Oh, mais quelle est donc ce site web étrange… Squarity ? Mais que vois-je dans la partie droite ? Une fenêtre de texte avec du code python dedans, et d’autres informations qui semblent définir le jeu auquel je suis en train de jouer !

Que va-t-il se passer si je change des trucs et que je clique sur le bouton de validation en-dessous ? Oh bon sang ! Le jeu se modifie instantanément ! Ce site est génial ! Je vais de ce pas m’en servir pour créer tous mes prochains jeux. Je participe au Ludum Dare, c’est bien que je veux créer des jeux pour le restant de ma vie !

Mon avenir sera squaritien ou ne sera pas ! »

Pour provoquer une telle réaction, il faut bien entendu que Squarity soit amélioré (ce qui se fera progressivement), mais la moindre des choses aurait été que je commente mon code python, afin d’aider le monde à comprendre son fonctionnement, et par là même le fonctionnement de Squarity.

J’ai échoué sur ce point, mon code est cradingue et très peu documenté. J’essayerais d’arranger ça dans les jours à venir. Et puis je voulais aussi créer un mini-jeu tutoriel de Squarity. Tant de choses à faire, comme d’habitude…

Les carrés sont l'avenir du monde

Succès de la fontaine !

J’avais prévu d’afficher la quantité de mana sous forme d’une jauge dans un coin de l’aire de jeu. Mais en me levant le dimanche matin, j’ai eu une idée géniale : Squarity ne permet que d’afficher des images, mais la transparence est gérée. Lorsque le mana est bas, je peux noircir la fontaine en superposant plus ou moins de pixels noirs transparent dessus !

Pas besoin de perdre de temps à dessiner une jauge de mana et à coder des choses compliquées pour l’afficher. Avec 4 lignes de code dégueux et un seul sprite supplémentaire (créé rapidement à partir du sprite de la fontaine, en mettant tous ses pixels en noirs-transparents), j’avais un indicateur de mana bien mieux intégré dans le jeu.

Pour fignoler le tout, j’ajoutais un petit log indiquant la quantité exacte de mana lorsqu’on sélectionne la fontaine.

À droite de la fontaine se trouve l’image correspondant à son « ombre ».
if self.pool_mana < 100:
    nb_fountain_darking = (100 - self.pool_mana) // 5
    for _ in range(nb_fountain_darking):
        gamobjs.append("darkfountain")

Je vois aussi cette fontaine comme un très très lointain clin d’œil à l’un de mes jeux préférés intemporels et intraspatial : Might and Magic – World of Xeen.

Alamar, you misguided mechanism ! You’ll destroy us all !

N’ayant pas peur de faire de la surenchère, je rajoutais un autre lointain clin d’œil à World of Xeen : dans le pseudo-scénario de mon jeu, le personnage de la « Countess du Swagging » est une référence au mot de passe secret « Count Du Money ».

Cette fontaine est un auto-clin d’œil, puisque c’est le logo de New World Computing

Si jamais je continuais le dev de ce jeu

Je note ici toutes les idées que je pourrais rajouter dans une hypothétique version post-ludum.

Faciliter le début en pré-plaçant du lierre

Si on n’a pas de bol, on commence comme ça :

Peu de lierre partent de la zone d’eau. Pour y coller des boucles, on risque d’être obligé d’utiliser le pouvoir d’ajout de lierre. Or c’est un pouvoir qui coûte assez cher en mana, car on ne devrait normalement l’utiliser qu’en dernier recours.

J’aurais dû ajouter automatiquement quelques connexions partant de la zone d’eau. Quelque chose comme ça :

C’est beaucoup plus facile de tracer un chemin depuis le trait vertical qui est sous la zone jusqu’au trait diagonal, ou bien depuis le trait horizontal à droite jusqu’au trait diagonal, et ainsi créer une première boucle sans s’arracher les cheveux.

Une « learning curve » moins violente

Il faudrait ajouter des niveaux. Les premiers seraient rendus plus facile par :

  • un tutoriel,
  • des maps plus petites,
  • des délimitation de cases plus marquées,
  • l’absence de traits diagonales.

J’ai eu beaucoup de remarques au sujet des délimitation de cases. Les gens analysent la map, repèrent une case qui leur convient, et s’aperçoivent ensuite que ce n’en est pas une mais que c’est 4 coins de 4 cases différentes. J’avais fait exprès de brouiller les limites entre les cases parce que je trouvais ça cool et j’aime créer des choses difficiles pour ensuite prendre un air condescendant auprès des gens qui n’y arrivent pas. Mais peut-être que j’ai overkillé.

Alors que les grands comédiens gomment les coupures entre vers lorsqu’ils déclament des alexandrins, je gomme les coupures entre cases lorsque je crée des jeux grid-2D.

J’embroche vos rimes, mon épée vous tru-Cid.

Un monde ouvert

Il y aurait une aire de jeu plus grande que ce que peut afficher l’écran. On ne pourrait pas scroller partout. On aurait un personnage et le scroll serait limité autour de lui. On pourrait déplacer ce personnage uniquement vers une case recouverte d’eau. Pour progresser dans le monde, il faudrait donc faire des boucles et propager l’eau petit à petit.

Par contre, ça gâcherait un peu si on permet de faire des boucles géantes, et surtout il y aurait le risque que le temps de calcul de vérifs des boucles soit trop long. Donc il faudrait limiter les tailles de boucle. Ce qui pourrait être sujet à des bonus : au début on ne peut faire que des boucles ayant une longueur de 5, puis 6, puis 7, etc.

Bien entendu, ce grand monde ouvert serait truffé de bonus, de mana, de sorts et de pouvoirs à gagner. Pour récupérer quelque chose, il faudrait amener son personnage dessus, donc l’entourer avec une boucle.

Et puis des passages secrets et des zones super compliquées à atteindre. Par exemple un grand couloir de 3 cases de large avec un super bonus au bout.

Je voulais aussi faire une super blague, avec un genre de quête annexe. Une map où l’objectif serait à côté du point de départ, mais il y aurait un grand mur entre les deux. Il faudrait faire tout un détour pour l’atteindre. À la fin, le personnage aurait dit : « j’ai du créer toutes ces boucles de lierre juste pour parcourir une grande boucle qui me ramène à mon point de départ ! WTF ? ». Haha, lolilol potentiel.

D’autres idées en vrac

L’échange entre une case de boue et une case d’eau ne coûterait pas de mana, mais ne ferait que déplacer les lierres de l’eau sur la case de boue. On perdrait les lierres de boue. Ça nettoie la piscine et ça encourage à étendre l’eau le plus possible, pour conquérir des lierres qu’on pourra ensuite placer gratuitement.

Des statistiques :

  • longueur & surface de la plus grande boucle réalisée,
  • nombre de boucle créées en une seule action,
  • maximum de mana atteint,
  • rentabilité (mana gagné / mana dépensé),
  • nombre de case d’eau créées,
  • etc.

Et bien sûr, des achievements et des bonus liés à ces stats.

Des robots

Quand on fait une boucle, ça ne supprime pas immédiatement la boue. Il faut poser des petits robots nettoyeurs qui enlèvent la boue autour d’eux. Ils fonctionnent pendant un temps limité. Donc si on les pose sur une boucle trop grande, ils ne nettoieront pas tout et la boue se repropagera dans la boucle. Si on les pose sur une boucle plus petite, ils nettoient tout, la boue ne se propage pas car elle ne peut pas traverser les lierres. On peut alors déclencher la propagation de l’eau vers la boucle nettoyée.

C’est une idée qui reste à finaliser. Parce qu’actuellement, l’eau peut passer à travers le lierre. Donc si on commence à nettoyer une boucle avec des robots, l’eau peut alors se propager tout de suite dans une boucle dont le nettoyage n’a pas été terminé, et ça peut donner n’importe quoi.

Ou alors on dit que l’eau ne passe pas le lierre. Et on doit enlever manuellement le lierre qui sépare l’eau de la boucle nettoyée. À réfléchir si on a envie.

Je laisse cette idée là où elle est, j’ai peur d’avoir embrouillé tout le monde en la décrivant.

Robot nettoyant la boue (à moins que ce soit l’inverse)

Post-codem concernant Squarity

Voici maintenant mes retours en tant que simple utilisateur/créateur de cette plate-forme de jeu.

Les messages d’erreur, rogntudjuu !

Comme l’a si bien dit 10kbis en commentaire de mon précédent article, il faut les messages d’erreur et les tracebacks !

Quand le code du jeu plante à l’initialisation, le message s’affiche comme il faut dans la console du navigateur. Mais quand ça plante pendant l’exécution d’une callback, on a que d’alle. On ne sait pas où ça a planté, ni pourquoi. Je n’ai pas encore pris le temps de régler ce problème.

Je pensais être capable de coder du python sans visibilité sur les messages d’erreur. Je m’étais dit : « je suis super fort, et au pire, je pourrais toujours débuguer à coups de print ».

Débuguer à l’aveugle, c’est ce que j’ai fait pendant tout le week-end. C’est la raison pour laquelle je n’ai eu une version pre-pre-alpha que très tard. Ça m’a aussi mis de sérieux doutes sur ma capacité à sortir quelque chose de jouable avant la fin.

J’avais prévu, après le Ludum Dare, de me poser un peu concernant le dev, faire un semblant de road-map, nettoyer et documenter un peu mon code. Mais là, nope. Avant de faire tout ça, il faut que je règle cette non-gestion des erreurs.

Bien. Il me reste 12h pour faire tout le reste et j’ai pas encore mangé.

Ajouter les événements de clics de souris

Je m’étais promis que pendant le Ludum Dare, je m’occuperais uniquement du jeu, sans mettre à jour le site Squarity. Je voulais prouver que la présente version est suffisamment aboutie pour créer un jeu, même très simple, même avec beaucoup de galère.

Puis j’ai réalisé que Loops in Pool serait beaucoup plus pratique si on pouvait directement cliquer sur les cases. Alors j’ai décidé que je ferais une entorse à ma promesse et que je rajouterais à la va-vite la gestion des clics dans Squarity.

Finalement, je n’ai pas du tout eu le temps de faire ça. Je suis donc parvenu à être suffisamment à l’arrache pour tenir ma promesse. Youpi !

Ayez l’amabilité de bien vouloir gérer ce mulot, mon brave.

Ça peut être très lent

Exécuter du python dans un navigateur web, c’est lent. Je m’en doutais un peu, mais je ne pensais pas que ça se révélerait dès maintenant.

Lorsqu’on échange deux tiles, il faut attendre une ou deux secondes avant de pouvoir faire autre chose. C’est le temps pour vérifier si l’échange a créé une boucle ou pas. On exécute pour cela un algo pourri de Dijkstra sur 2240 pauvres petits nodes. Ça devrait se faire instantanément, or ce n’est pas le cas.

C’est pour ça que la boue se remplit progressivement au début. Si je calculais toute la propagation dès le départ, ça prendrait vachement de temps et on pourrait croire que le jeu ne marche pas.

Heureusement, quand on fait des jeux simples nécessitant peu de traitement, il n’y a aucun problème, le jeu du magicien et H2O en sont des preuves. Mais il ne faut pas trop abuser.

Je n’ai pas de solution miracle pour ce problème, juste des pistes :

  • Faire des tests de performances, en déduire des manières de coder plus rapide que d’autres et les documenter dans des bonnes pratiques. Je suppose que le python dans un navigateur se code et s’optimise différemment par rapport au python normal.
  • Essayer de faire des traitements parallèles ou asynchrones. Je ne sais même pas si on peut faire ça proprement dans un navigateur web, que ce soit en javascript ou en python.
  • Mesurer en live les performances du code, pour repérer les parties de code les plus ralentisseuses.
  • Optimiser l’affichage. Au lieu de redessiner toutes les tiles à chaque fois, on en marque certaines comme « dirty ». Seules celles-là seront redessinées. Mais, je ne suis pas sûr que ça améliore grandement la vitesse.

D’autre part, j’ai fait une modif qui me semble cool : j’ai redirigé les print. Normalement, ils vont dans la console du navigateur. Moi je les affiche dans la zone de texte en bas à gauche. Figurez-vous que ça aussi, ça ralentit tout. Faites une dizaine de print à chaque appui de bouton : ça devient horrible, même dans un jeu simple.

Je ne sais pas pourquoi. Est-ce que le navigateur doit recalculer tout le DOM à chaque fois qu’on écrit dans un élément <textarea> ? Ce serait embarrassant. En attendant, l’effet de bord est très amusant : le seul moyen actuel de débuguer est de faire des prints, mais les prints ralentissent tout. Bon courage !!!

Je ne parviendrais peut-être pas à régler ce gros défaut de lenteur, ce qui risque de bloquer des créateurtrices potentieleulleux dans la réalisation de leurs jeux.

Ça ne me fera pas abandonner ce projet, ni déroger de mon idée principale : créer et partager des jeux 2D en python dans un navigateur web. C’est ce que je veux faire, et plus que ça, c’est aussi ce que j’ai envie d’avoir. Je veux utiliser mon propre outil pour créer une foisonnance de jeux bizarres/amusants/pulpesque/dérangeants/moches/etc. Bref, des jeux que je veux voir exister.

Un jeu « pulpe-zinesque » créé par Anna Anthropy, dont je vous parlerai à l’occasion

Autres trucs-en-vrac

Il faut des sons et de la musique. C’est prévu, mais les conseils que j’ai pu récolter à l’occasion du Ludum Dare me confirment que c’est très important pour se démarquer. Si j’avais pas un tas de choses déjà prioritaires, je prioriserai les sons.

Les images des objets ne peuvent pas déborder de leur tile. On peut faire sans, mais pour dessiner un trait qui rejoint deux tiles en diagonale, il faudrait pouvoir placer quelques pixels sur les tiles diago-adjacentes. Ça mériterait un petit dessin pour vous expliquer, mais là, pfouf, cet article est déjà bien assez long.

L’image de tileset devrait pouvoir être uploadée depuis le disque en local, dans le navigateur (en local aussi, du coup). Actuellement, il faut publier l’image sur un site d’hébergement, et ce à chaque changement. Même si on ne souhaite pas publier son jeu. C’est relou. En ce qui me concerne, je met l’image dans un repo github. Mais les push d’images dans github ne sont pas instantanément mis à jour dans leur site web.

Tôt ou tard, il me faudra un lieu d’échange et de création de contenus autour de Squarity (articles, documentation, tilesets, jeux, …). Je me permettrais de commencer par un tout petit truc. Mais il me le faut vraiment ce petit truc, car actuellement j’ai rien du tout, à part des comptes sur des rézosociaux « annexes », comme ce blog. Or, ces comptes n’ont pas pour utilité principale de décrire Squarity. Il va falloir que je me lance dans un mini-CMS Django, et/ou une instance Mastodon, ou autre chose de mieux si vous avez une idée.

Rappelons que l’utilité principale de ce blog est de vous faire découvrir des images de femmes rondes. Ceci ne va pas changer de sitôt. À ce sujet je vous présente llindaa23

À la prochaine, je me remet sur mon code et mes gestion d’erreurs.

Démarrage d’un gros projet complètement à l’arrache !

Ce que j’avais prévu

1 : Faire les fonds de tiroir de mes activités créatives, packager proprement les trucs qui méritent de l’être, même ceux qui ne sont pas finis. C’est ainsi que vous avez eu Blarg sur github, Kawax, Pru-pra-prok, l’archivage de tous les articles du magazine 42, L’animation du tunnel pour l’UTBM, une grosse série d’article concernant mon dernier changement de crémerie, et tout un tas d’autres machins.

2 : Terminer en packageant mes très vieux programmes Pascal que j’écrivais au lycée et à l’UTBM, et les mettre à disposition ici.

3 : Écrire un article de blog émouvant dans lequel j’explique que je me sens prêt à démarrer un gros projet créatif. Expliquer que ça fait un peu peur, que jusqu’à maintenant, le peu de projets que j’ai réussi à mener jusqu’au bout étaient soit de taille moyenne, soit une succession de mini-projets (par exemple, tous les articles pour le magazine 42). Ajouter qu’il est fort possible que j’abandonne au bout de deux mois pour cause de découragement honteux, ou pour cause de découverte d’une toute nouvelle idée que je croirais encore meilleure. Terminer l’article en demandant à mes lecteurtrices, avec des trémolos dans la voix, quelques commentaires de soutien pour ce nouveau projet, même si je ne l’ai pas du tout décrit pour le moment. Insister sur le fait qu’un soutien inconditionnel de leur part serait une magnifique démonstration de fidélité, rappeler (toujours avec des trémolos) que ce blog existe depuis plus de 10 ans et que certains d’entre vous me suivent depuis plusieurs années.

4 : Espérer deux ou trois commentaires de soutien, pas plus, pour ne pas être déçu.

5 : Travailler pendant un mois ou deux sur ce projet secret.

6 : Écrire un nouvel article, montrer la première version du projet même si elle est bancale. Expliquer que c’est une plate-forme de création de mini-jeux web en 2D sur une grille. Annoncer qu’il suffit de savoir coder un peu en python pour créer des premières choses toutes simples. Ajouter qu’il n’y a pas besoin d’installer de logiciel ou de s’inscrire (mais il faut quand même un compte github pour partager ses jeux). Arguer du fait que, même si la plate-forme est simple, sa souplesse permettrait de créer des jeux très variés tels que des Match 3, un Laser Tank, voire des jeux de stratégie comme Advance Wars. Préciser tout de même qu’il ne sera jamais possible de placer des objets à cheval entre deux cases de la grille, que c’est un choix conscient destiné à assurer la simplicité. Donner l’exemple de Zelda sur la NES, qui ne serait pas recréable sur cette plate-forme puisque le personnage peut se trouver entre deux cases. Terminer sur un ton faussement humble en disant que je me suis inspiré de PuzzleScript, Drod et même ZZT.

7 : Écrire une doc, pas forcément complète ni bien peaufinée, mais qui expliquerait au minimum comment créer et partager des jeux. Espérer que quelques personnes commencent à s’y mettre, même si c’est rustique et pas du tout ergonomique dans un premier temps.

8 : Améliorer encore le projet pendant quelques mois.

9 : Participer au Ludum Dare (une compétition de création de jeu en un week-end). Ne pas s’attendre à un glorieux classement, mais utiliser cette participation pour montrer la plate-forme au plus de gens possible.

10 : Éventuellement, créer une vidéo ou un stream sur twitch montrant la genèse du jeu créé pour le Ludum Dare. Utiliser cette vidéo comme tutoriel et comme démo de ce qu’il est possible de faire.

12 : Donner rendez-vous aux prochains Ludum Dare, tous les 6 mois. Indiquer que l’on profitera de ces compétitions pour s’imposer des dead lines fixes, qui devraient apporter la motivation nécessaire pour produire régulièrement de nouvelles versions de la plate-forme.

13 : Continuer comme ça sur plusieurs années, et voir jusqu’où ça nous mène.

Pour l’instant, ça mène ici.

Ce qu’il s’est réellement passé

1 : Réaliser qu’il n’y a plus que quelques mois avant les grandes vacances, et qu’on aimerait avoir une première version du projet à ce moment là.

2 : Laisser en plan le packaging des vieux jeux Pascal.

3 : Réaliser une première version ultra à l’arrache de la plate-forme, afin de pouvoir la montrer aux potes qu’on retrouvera pendant les vacances.

4 : Ne pas oser parler de ce projet aux potes en question, parce que l’occasion ne s’est pas présentée et que j’ai toujours l’impression de passer pour un mendiant quand je quémande de l’attention aux gens, même quand c’est mes potes.

5 : Continuer de bosser sur le projet, pester intérieurement que, comme toujours, ça avance trèèès lentement.

6 : Au passage, créer une chaîne twitch et s’amuser à streamer des Clash of Code, même si ça n’a absolument rien à voir avec la choucroute.

7 : Réaliser que le prochain Ludum Dare est dans à peine quinze jours, que la plate-forme est à peu près utilisable mais pas du tout documentée, qu’on n’aura pas forcément le temps de la documenter d’ici là, et qu’on n’a rien annoncé pour l’instant.

8 : Jeter à la gueule de ses lecteurtrices le lien vers la plate-forme : http://squarity.fr.

9 : Leur jeter un autre lien à la gueule, en croyant que ce sera suffisant pour comprendre comment créer et partager des jeux : squarity.fr#fetchez_githubgist_darkrecher/bd49300f9c480b789a70315155571e9d/raw/gamecode.txt

10 : Espérer que l’on arrivera à faire quelque chose de pas trop pourri pour le Ludum Dare.

11 : Continuer comme ça sur plusieurs années, et voir jusqu’où ça nous mène.

Pour conclure, inévitablement

12 : Expliquer que le mot « squarity » signifierait « la carrétitude », puisque les jeux sont créés sur un quadrillage en 2D. Ajouter que le fait d’aimer les carrés n’empêche pas d’aimer aussi les courbes. Pour illustrer ce propos, insérer une image de Myesha Boulton :

13 : S’endormir sur son clavier parce qu’il est tard.

Découvrir le python – chapitre 3 – list’oire de la vie

Le titre de l’article est une blague par rapport à la chanson naze et bien-pensante du Roi Lion : « C’est l’histoâââââre de la viiiiiiiie ». Ce troisième article de découverte du python a pour sujet principal : les listes.

Je tenais à expliquer cette blague, car quand on explique une blague, elle n’est plus drôle. Mais quand une blague est pas drôle dès le départ et qu’on l’explique, ça devient drôle.

Avant tout, pif paf la solution au devoir du précédent article. C’était plus un travail de géométrie que de programmation. Des fois, on croit qu’on fait un truc et on en fait un autre. C’est comme ça la vie, jeune lecteurtrice. L’histoâââre de la viiiiieeeuuuuu.

De la couleur

Remet-toi sur le site Trinket, ajoute les deux instructions habituelles du début : « import turtle », « turtle.speed(0) ».

Ensuite, tu copie-colles la fonction « dessiner_diams » créée dans l’article précédent (tu peux la récupérer dans la correction du devoir).

Pour finir, ajoute une seule ligne après la fonction, dans le programme principal : « dessiner_diams(0, 0, 50) ». On est devenu des prolos et on fait des petits diamants.

On est des prolos, mais on n’est pas forcément des communistes. On voudrait pouvoir faire des diamants ayant une autre couleur que ce rouge pétaradant.

Tu as certainement déjà repéré la ligne de code de la fonction spécifiant que le diamant est rouge. Pour les anglophonophobes, je rappelle que « red » signifie « rouge ». Indique une autre couleur à la place : « green », « blue », …

C’est top-de-la-housse, mais ça ne permet pas de dessiner des diamants de couleurs différentes.

Alors tu vas appliquer la même méthode que dans l’article précédent, lorsqu’on avait ajouté le paramètre « taille » :

  • Ajoute un paramètre supplémentaire dans la fonction « dessiner_diams ». On va l’appeler « couleur ».
  • Utilise ce paramètre dans le corps de la fonction. À toi de trouver où il faut le mettre et à la place de quoi.
  • Ajoute ce paramètre lorsque tu appelles la fonction, dans ton programme principal.

On va profiter de cette souplesse supplémentaire que tu viens de conférer à ta fonction (lecteurtrice, tu te rends compte que tu con-faire ? Tellement génial). Remplace la ligne du programme principal par ces deux lignes :

dessiner_diams(0, 0, 50, "green")
dessiner_diams(25, 25, 50, "blue")

Et voilà !

Lien vers la solution si t’as perdu tes couleurs.

De la couleur RVB

Les couleurs c’est fun et bigarré, mais c’est chiant de devoir les identifier par des noms, surtout en anglais. C’est un coup à ce que ça parte en bastonnade entre d’éminents chromatologues qui se crêperont l’arc-en-ciel sur la différence entre le cyan et le turquoise. Encore heureux que turtle ne reconnaît pas le fuschia, sinon je vous dis pas le bordel ! Personne ne connaît vraiment ce mot.

Il existe une manière plus standard de définir les couleurs en informatique. On indique trois nombres, correspondant aux quantités des trois couleurs primaires : rouge, vert et bleu.

Je t’entends protester d’ici, lecteurtrice : « han mais n’importe quoi, mon prof de dessin il m’a dit que les couleurs primaires c’est rouge, bleu et jaune ! ». Alors je te répondrai d’écouter ton prof mieux que ça, car il a plutôt dit que les couleurs primaires sont magenta, cyan et jaune. Finalement, je te répondrais que ça dépend si on est en synthèse additive ou en synthèse soustractive. Écris ces termes dans un moteur de recherche si tu veux en savoir plus.

Si tu as joué avec des logiciels de dessins, tu connais déjà les sélecteurs de couleurs. En voici un disponible en ligne : https://lehollandaisvolant.net/tout/tools/color/ .

Choisis la couleur que vu veux et retiens les trois nombres de la ligne « RGB » (Red Green Blue).

Dans ton code python, tu peux écrire ces trois nombres à la place du nom de la couleur. Mais attention, il faut mettre des parenthèses pour les délimiter. Par exemple :

dessiner_diams(0, 0, 50, (42, 234, 69))

« dessiner_diams(0, 0, 50, 42, 234, 69) », ça ne marcherait pas.

Miss Diamond Doll, puisqu’on reste sur les diamants

Tuple et zante ?

Pourquoi il faut des parenthèses en plus ?

La couleur ne doit constituer qu’un seul paramètre. Mais celui-ci peut être de type simple (un texte entre guillemet), ou de type composé.

Ces trois nombres entre parenthèses définissent une valeur de type tuple. « Tuple » est le mot générique pour dire un couple / un triplet / un quadruplet / un n-uplet.

Pour toutes les fonctions de la librairie turtle nécessitant des couleurs dans leurs paramètres, on peut indiquer un texte correspondant à un nom de couleur valide, ou bien un tuple de 3 entiers. Une conversion est effectuée en interne dans turtle.

Les tuples sont des types de valeurs comme les autres, tu peux donc les mettre dans des variables :

ma_couleur = (42, 234, 69)
dessiner_diams(0, 0, 50, ma_couleur)

Et aussi utiliser des variables numériques comme composantes d’un tuple:

le_rouge = 42
le_bleu = 69
# J'ai la flemme de créer la variable pour le vert.
dessiner_diams(0, 0, 50, (le_rouge, 234, le_bleu))

Plus d’infos sur les tuples dans cette chouette documentation : https://courspython.com/tuple.html

Profitons de cette nouvelle connaissance et réalisons un joli dégradé de couleur.

Tu me fais une boucle qui dessine 100 diamants :

  • La coordonnée X varie de 5 en 5, en partant de -200 : -200, -195, …
  • La coordonnée Y reste à 0.
  • La taille reste à 50.
  • La couleur rouge reste au maximum, c’est à dire 255.
  • La couleur verte reste à 0.
  • La couleur bleue varie de 2 en 2, en partant de 50 : 50, 52, 54, …., 246, 248.

Ça donnera un magnifique dégradé :

Lien vers la réponse, si ton cerveau s’est dégradé.

Vous êtes l’éliste de la nation

Tu vas mettre en commentaire ta belle boucle du chapitre précédent, car on va partir sur autre chose. Nous arrivons enfin au sujet majeur de cet article : les listes.

Dans le programme principal, juste après la définition de la fonction dessiner_diams, tu vas créer une liste contenant quelques nombres :

ma_liste = [-70, 38, 45, -20, 113]

Tu peux parcourir cette liste à l’aide d’une boucle. En voici une toute simple, je te laisse deviner ce que ça fait :

for elem in ma_liste:
    print(elem)

On retrouve la même syntaxe que pour les autres boucles : for {bidule} in {truc}:

Sauf que cette fois-ci, le {truc} que tu parcoures n’est pas une fonction « range » qui ne fait que compter. C’est une liste, avec tout et n’importe quoi dedans.

Lecteurtrice, je vois bien, à ton œil mouillé et ton air rébarbatoire, que tu as envie de me poser une question qui dérange :

« Wesh, auteurtrice, c’est quoi l’intérêt d’avoir inventé deux types : les listes et les tuples ? Ils font la même chose : stocker une suite d’éléments. »

Eh bien voilà : les tuples ne peuvent pas changer de contenu. Les listes, si. On peut y ajouter ou enlever des éléments, en remplacer un par un autre, etc.

Re-lecteurtrice, je te revois bien me redemander :

« Re-wesh, à quoi ça sert d’avoir inventé des tuples qu’on ne peut pas changer, si on a déjà les listes, qui font la même chose et qu’en plus on peut changer ? »

C’est pour les performances. Les tuples prennent très peu de place en mémoire et sont très rapides d’accès. Quand on a besoin d’une suite de trucs et qu’on sait qu’on ne la changera pas, on prend un tuple.

Voilà un autre lien avec plein de détails sur les listes : https://openclassrooms.com/fr/courses/235344-apprenez-a-programmer-en-python/232026-creez-des-listes-et-des-tuples-1-2

Si tu ne veux pas tout lire, je te montre très rapidement ce dont tu auras besoin pour la suite :

ma_liste = [-70, 38, 45, -20, 113]
# Accès à un élément
print(ma_liste[2])
# Ajout d'un élément à la fin
ma_liste.append(99)
# Écriture de toute la liste.
print(ma_liste)

Mets ça dans un programme et regarde ce que ça fait. C’est d’une comprenabilité qui ne me semble pas pharaonique.

On peut boucler sur les listes, comme sur les tuples. De manière générale, il y a des tas de choses en commun entre les listes et les tuples, qui se font exactement de la même manière. C’est possible grâce à un concept de programmation appelé le duck typing.

Ça disgresserait trop d’expliquer ce concept dans cet article. Pour ne rien te cacher, je l’ai mentionné juste pour avoir l’occasion de placer cette superbe image :

Si ça fait coin-coin comme un canard, c’est un canard.

List-ception

En informatique, on aime mettre des trucs dans les mêmes trucs : un sous-bloc de code dans un bloc de code, un sous-répertoire dans un répertoire, …

J’ai le plaisir de t’annoncer qu’on peut mettre des listes dans des listes, des tuples dans des tuples, des tuples dans des listes dans des tuples dans des tuples, etc.

Voici une liste avec des tuples dedans :

des_coords = [ 
    (-100, -40), (100, -40), (-80, -70), 
    (80, -70), (-60, -90), (60, -90),
    (-40, -100), (40, -100), (-20, -110), 
    (20, -110), (0, -115),
    (-70, 120), (70, 120),
]

Tu remarqueras qu’on peut l’écrire sur plusieurs lignes, à condition de ne pas oublier le crochet ouvrant au début ni le crochet fermant à la fin, et de respecter l’indentation.

Ajoute cette liste de tuples dans ton programme et fais une boucle dessus.

  • À la première itération, tu récupéreras le tuple (-100, -40), et tu me dessineras un diamant aux coordonnées X=-100 ; Y=-40.
  • À la deuxième itération, tu dessineras au autre diamant en X=100 ; Y=-40.
  • Puis en X=-80 ; Y=-70.
  • etc.

Pour la couleur des diamants, met ce que tu veux. Personnellement, j’ai choisi un espèce de jaune-orangé : (250, 150, 0).

Tu obtiendras un joli sourire de joker !

Why so serious ?

Lien vers la réponse, si t’as plus de cartes joker.

Je return à ma maison

OK lecteurtrice, si tu en es là dans l’article, et que tu as codé tous les exercices avec les doigts nus de tes mains nues, sans trop regarder les réponses, tu as de la motivation et de la comprenitude. J’ai confiance en toi, je sens que tu ne vas pas t’évanouir si je t’apprends DEUX choses différentes dans un même chapitre.

Mets-toi face à moi pour bien recevoir toute ma décharge cognitive.

1)

Une fonction peut renvoyer quelque chose (un nombre, une liste, …). Le code ayant appelé la fonction peut récupérer ce qui a été renvoyé.

Voilà un exemple :

def renvoyer_une_liste():
    print("coucou")
    return [4, 6, 15, 9]
    print("On ne voit pas ce texte.")
    print("Car une fonction s'arrête après un return.")

liste_que_je_recupere = renvoyer_une_liste()
print(liste_que_je_recupere)

Si tu exécute ce bout de code, ça écriras : « coucou », puis « [4, 6, 15, 9] ».

On a le droit d’écrire plusieurs « return » dans une même fonction. Mais dès que l’exécution arrive sur l’un d’eux, la fonction s’arrête, et renvoie ce qui est indiqué.

2)

La fonction turtle.pos() renvoie un tuple de deux éléments, contenant les coordonnées de la position actuelle de la tortue. Tu peux tester comme ceci :

ma_position = turtle.pos()
print(ma_position)

Et maintenant tu vas mettre tout ça en pratique.

  • Au début de la fonction dessiner_diams, tu crées une liste vide. On va l’appeler « coord_des_pointes ».
  • Dans la boucle de la fonction, juste après l’instruction turtle.circle, tu récupères la position actuelle de la tortue.
  • Tu ajoutes cette position dans coord_des_pointes. Celle liste contiendra donc des tuples.
  • À la fin de la fonction, tu « return » coord_des_pointes.
  • Dans le programme principal, tu exécutes une seule fois la fonction dessiner_diams,
    • coordonnées X=0 ; Y=0, taille = 50, couleur = ce que tu veux.
  • Tu récupère la valeur renvoyée par la fonction, et tu la printes.

Ça devrait t’afficher ça dans la sortie standard :

[(0.0, 50.0), (50.0, 0.0), (0.0, -50.0), (-50.0, 0.0)]

Lien vers la solution, en cas de surcharge cognitive.

Je vous emmerde et je return à ma maison

Des diamants dans des diamants

Puisque tu as récupéré des coordonnées, profites-en pour dessiner des diamants avec ! Mais tu les fais un peu plus petits. Une taille de 25, par exemple.

Ça donnera quelque chose dans ce style (même si c’est pas ces couleurs là) :

Est-ce que tu vois ce qui va venir après, lecteurtrice ? Est-ce que tu réalises qu’on est maintenant très proche de l’image finale que je t’ai promise il y a plus de deux mois ?

À chaque fois que tu traces les 4 petits diamants, la fonction renvoie à nouveau les coordonnées de leurs 4 coins. Tu pourrais toutes les récupérer, (16 coordonnées en tout), et dessiner sur chacune d’elles un autre diamant, encore un peu plus petit que les précédents. Ne serait-ce pas fractalement uber-classe ?

Il te reste à régler un petit détail : tu ne récupères pas les 16 coordonnées en un seul coup.

Dans le programme principal, avant la boucle où tu dessines les diamants de taille 25, tu crées une liste vide. On va l’appeler coord_mini_diamants.

À chaque dessin de diamant, tu récupères 4 coordonnées, que tu ajoutes dans coord_mini_diamants. Sais-tu comment on ajoute une liste à la fin d’une autre liste ?

Eh non lecteurtrice, ce n’est pas la fonction « append ». Celle-ci permet d’ajouter un élément simple au bout d’une liste. Pour ajouter une liste au bout d’une liste, on utilise l’addition, tout simplement.

Tu aura donc ceci dans ta boucle :

coord_mini_diamants = coord_mini_diamants + dessiner_diams(x, y, 25, (255, 0, 0)

Une fois que cette liste est remplie, plus qu’à s’en servir.

Et paf, un niveau de diamant supplémentaire :

Lien vers le code, si les diamants ne sont pas tes meilleurs amis.

diamant(diamant(diamant(diamant())))

Pour finir, tu re-appliques la même démarche, pour un dernier niveau supplémentaire.

Je te récapitule le tout :

  • premier diamant : taille = 50, couleur= (128, 0, 0)
  • 4 diamants autour : taille = 25, couleur= (255, 0, 0)
  • 16 diamants autour : taille = 12.5, couleur= (255, 70, 70)
  • 64 diamants autour : taille = 6, couleur= (255, 120, 120)

Le fait de reproduire plusieurs fois la même forme, à d’autres endroits, et de plus en plus petite, me permettrait de te présenter les notions de fractales et de récursivité. D’ailleurs, on pourrait dessiner tous les diamants en une seule et même boucle. Mais je ne vais pas t’embêter avec ça, cet article est déjà assez cerveauphage.

Tout ça pour dire que nous arrivons enfin à notre image finale ! Yiiipiii !

Lien vers la réponse, si tu t’es fait une fracture de la fractale.

C’est tout pour aujourd’hui

Voici inévitablement des devoirs. Pour cette fois, je t’en donne deux !

Le premier est assez facile, c’est une reprise du devoir précédent. Il faut dessiner cet anus de licorne :

Petit indice : tu vas devoir trouver comment tracer des formes remplies de couleur, mais sans le trait noir de délimitation.

Le deuxième :

Là c’est un peu plus dur. Il faut reprendre ce qu’on a fait avant, en annulant le dessin de certain diamants. Le tout est de savoir lesquels. Un coup c’est celui de droite, un coup celui du haut, …

Tu vas peut-être devoir apprendre par toi-même à utiliser une notion que je n’ai pas du tout présentée : le branchement conditionnel, if-then-else.

 

Et la suite ?

La librairie turtle permet également de créer des animations. Dans Trinket, on peut faire quelque chose comme ça :

Je pourrais donc te pondre un ou deux articles là-dessus, lecteurtrice. Mais je ne sais pas si ça vaut le coup. Je voudrais écrire d’autres trucs et me lancer dans d’autres projets.

J’ai mis cette série d’article de découverte du python sur mon compte Linkedin (vous ne savez pas lequel c’est, mais vous n’en avez pas besoin). Dans l’ensemble, j’ai eu des retours très aléatoires :

  • zéro commentaire dans ce blog, mais ça j’y suis habitué,
  • plein de commentaires et repartages Linkedin pour le premier article,
  • un seul repartage (de mon super-pote) pour le second article.

Je suis un peu perplexe. Je ne sais pas si c’est les gens qui ne me répondent rien parce que je ne les intéresse pas, ou si c’est Linkedin qui ne met pas mes articles dans le fil d’actualité des gens pour une raison obscure (le fait d’avoir placé le mot « fouetter » lorsque j’ai décrit les sévices corporels destinés aux personnes ne faisant pas leur devoirs ?)

Et désolé, il n’y a pas autant de blagues et de jeux de mots débile dans cet article. Un réajustement effectué par mon inconscient ? Je ne sais pas.

Je vais attendre les retours, mais si j’en ai à nouveau aussi peu, je ne me prendrais pas la tête. Le tout dernier article de la série (s’il y en a un) sera du code brut : les corrections des devoirs et l’animation.

Tchôrp.

Découvrir le python – Chapitre 2 – Diamonds in the skaaaaaaye

Wèèèèèsh lecteurtrice !! Bien ou bien ?

T’as lu mon article précédent et t’as grave kiffé au taquet de ouf’ ? Sois jouasse, en rev’là une gorgée !

Avant qu’on s’y remette, j’espère que t’as fait tes devoirs, ou que t’as au moins essayé.

Si ce n’est pas le cas, ce n’est pas grave, je vais simplement prévenir mes robots correcteurs. Ils te jetteront du sable fin sur les sourcils, puis te pendront par les pieds et te fouetteront jusqu’à ce que tes larmes aient entièrement nettoyé tes sourcils.

Voici la solution du devoir, avec plein de commentaires qui expliquent comment c’est gaulay.

Un diamant

Let’s go sur un truc simple pour commencer. Retourne dans Trinket, ton bel environnement de dev, enlève le programme initial et ajoute les deux lignes habituelles au début : « import turtle », « turtle.speed(0) ». On va commencer simple, tu vas me dessiner un diam’s.

♫ C’est le python qui va dicter ton code. ♪ Génération Oui-Oui. ♬♪

Un diamant, c’est quatre quarts de cercle. Sauf qu’après chaque quart, la tortue fait demi-tour, pour changer le sens de tracé du quart suivant.

On n’est pas des prolos et on veut un gros diam, alors tu me fais des quart de cercles de 100 pixels de rayon. Tu as le droit de le réaliser d’abord à la crade, c’est à dire en copiant-collant 4 fois le même morceau de programme. Mais ensuite, tu me met ça sous forme d’une boucle.

Tu devrais réussir à bling-blinguer un diamant cossu comme ça :

Lien vers la réponse si tu as du mal à te remettre dans la vibe.

Laissez-moi vos coordonnées

Si tu as fait quelques années d’école, lecteurtrice, tu as sûrement placé des points sur une feuille, pour faire un graphique ou pour tracer une droite. Tu utilisais alors des coordonnées : un nombre en X, un autre en Y.

Si tu es Muriel Robin, lecteurtrice, tu pourrais faire la blague « laissez-moi vos cordonniers, je vous rappellerais », et tu aurais été super drôle, pour l’époque.

La tortue se déplace dans un espace défini par des coordonnées. Cet espace est orienté de la même manière qu’en cours de maths :

  • La coordonnée (0, 0) correspond au milieu de la zone de dessin.
  • Lorsqu’on va vers la droite, la première valeur (le X) augmente, elle diminue lorsqu’on va vers la gauche.
  • Lorsqu’on va vers le haut, la deuxième valeur (le Y) augmente, elle diminue lorsqu’on va vers le bas.

C’est pas du tout orienté selon les conventions habituelles en informatique. On va pas s’attarder là-dessus pour l’instant, sinon je vais encore traiter les matheux de ringards.

La fonction « turtle.setpos » permet de positionner la tortue à des coordonnées données (Wesh, lecteurtrice ! « coordonnées données » ça fait une répétition lolilol !).

Voici un lien vers la doc de la fonction.

Au début de ton programme, ajoute un setpos pour positionner la tortue aux coordonnées X = -40, Y = +30.

Le déplacement va dessiner un trait moche. On réglera ça au chapitre suivant.

Mais avant, tu vas mettre ces coordonnées dans deux variables, intitulées « pos_x » et « pos_y ». Tu te souviens de ce qu’est une variable ?

Au début du programme, tu définis la variable « pos_x » à -40 et la variable « pos_y » à 30.

Ensuite, dans l’instruction « turtle.setpos », tu n’utilises plus directement les valeurs -40 et 30, mais les deux variables que tu viens de définir.

Pour l’instant, ces variables servent à R (Wesh lecteurtrice, langage de jeune !!), mais ce sera utile très bientôt.

Lien vers le code, si t’en chie.

Attention, les majuscules-minuscules sont importantes. « pos_x » et « Pos_x », ce n’est pas la même chose.

Les conventions de codage en python conseillent d’écrire les noms de variables tout en minuscules. Lorsqu’un nom est composé de plusieurs mots, on les sépare par des « _ » (le tiret bas). Un jour, jeune programmeurtrice dont les poils n’ont pas encore poussés, je te parlerai plus en détail de la notion de « convention de codage » et du PEP-8.

Si t’as envie d’appeler tes variables « posx » et « posy », t’as le droit, tu fais tout qu’est-ce que tu veux, c’est ta création, c’est bonheur. Il faudra juste que tu t’en rappelles, parce que dans la suite de l’article je continue de les appeler « pos_x » et « pos_y ».

Il n’est pas rare de s’over-prendre la tête en boucle pendant des heures sur la manière de nommer une variable.

Up and Down

C’est trognon ces variables, mais ça règle pas le problème du trait dégueubeurk que fait le setpos.

Je te donne juste le nom des deux fonctions permettant de régler le problème : « turtle.penup », « turtle.pendown ». Tu te débrouilles pour savoir ce que ça fait, comment ça marche, est-ce que ces fonctions ont besoin de paramètres, où les appeler, etc. Peut-être que tu peux commencer par les taper dans un moteur de recherche.

Tu regardes des docs et des exemples de code, tu testes dans ton programme, si ça fait des trucs pétés, tu testes autre chose. Azy lecteur, fais pas ta tafiolle, azy lectrice, fait pas ton tafiot (Wesh lecteurtrice, t’as vuuuu ? Écriture inclusive sur le mot « tafiolle » !)

Quand tu auras réussi, ça fera le même diam’s qu’au tout début, mais sans le trait moche.

Lien vers la réponse, si t’es au bout de ta vie.

Tout ça pour ça ? Je t’entends penser d’ici : « you you foutay de magl, ou bien ? ».

Ne brûle pas cet article tout de suite lecteurtrice, la suite est plus intéressante.

lofteurs.up() and lofteurs.down()

Pléthore de diam’s

Ce serait le top de la bling-bling-itude de pouvoir dessiner des diamants où on veut. Mais pas en copiant-collant le code, sinon ce serait le top de la cra-cra-itude. Alors on va créer une fonction.

Tu ne sais pas ce qu’est une fonction ? Eh bien si. Tu en utilises depuis le début : « print », « turtle.circle », « turtle.penup », … Maintenant, tu vas en créer une nouvelle qui sera rien qu’à toi.

Lorsqu’on crée une fonction, on lui associe un bloc de code, qu’on appelle le corps de la fonction. Comme tu as bien retenu la leçon précédente, tu sais déjà que ce bloc peut éventuellement contenir des sous-blocs, sous-sous-blocs, etc.

Ensuite on exécute la fonction (on peut aussi dire « appeler la fonction »), ce qui revient à exécuter son corps. Ça fait très bizarre de dire « exécuter son corps », alors dites-le uniquement dans votre tête, d’à-corps ?

Tu vas donc me créer une fonction, sans paramètre, intitulée « dessiner_diams ». Dans le corps, tu mets ce que tu as déjà écrit, depuis « turtle.penup » jusqu’à la boucle dessinant les quarts de cercle. Tu n’y mets pas l’initialisation des variables pos_x et pos_y, c’est fait exprès.

Voilà un lien de doc qui pourra t’aider : https://courspython.com/fonctions.html, à lire jusqu’au chapitre « Fonction avec paramètre ». Cela dit, les chapitres d’après peuvent t’aider pour la suite, et c’est assez bien expliqué. Y’a juste pas de fun, contrairement à mes articles qui regorgent d’espiègleries toutes pailletées de saveurs foisonnantes prestige t’as vu wesh ?

Seulement voilà. Si t’exécutes ton code là maintenant, t’auras queud’. Zéro diams. Retour à l’âge de prolétaire.

C’est normal, il faut appeler la fonction que tu as créée. À la fin du programme, ajoute « dessiner_diams() », et re-bling-bling !

Si tu appelles plusieurs fois de suite la fonction, ça ne changera pas le dessin final, car tu dessines plusieurs fois au même endroit.

Or, la fonction utilise les variables pos_x et pos_y pour se positionner avant de dessiner. Il suffit donc de les modifier puis de re-appeler la fonction.

Tant qu’on y est, tu vas ranger un peu ton code. En général on met les imports au début, puis la définition des fonctions, puis le code principal. Ça va donc donner un truc comme ça :

import turtle
# Cette ligne, y'a qu'à la laisser au tout début.
turtle.speed(0)

# Ici, il y a la définition de la fonction "dessiner_diams"

# Ensuite, la définition des variables pos_x et pos_y, 
# avec les mêmes valeurs qu'avant : -40 et +30

# Appel de la fonction.
dessiner_diams() 

# On redéfinit les variables pos_x et pos_y, 
# avec, disons : pos_x = 10 et pos_y = 60

# Re-fonction.
dessiner_diams()

Et ça devrait donner deux diamants, à deux endroits différents :

Lien vers la réponse, si t’es en PLS.

Avec des paramètres

On a fait un truc bizarre dans le chapitre précédent. On a utilisé les variables pos_x et pos_y à l’intérieur d’une fonction, alors qu’on ne les a pas définies dans la fonction elle-même. Ça n’a pas planté, grâce à la manière dont le langage python gère la portée des variables.

  • Ton programme principal est dans un certain contexte, avec des variables.
  • Tu exécutes la fonction « dessiner_diams », qui se crée un petit sous-contexte pour elle toute seule, avec ses variables.
  • Le python autorise l’accès aux variables d’un contexte englobant, mais uniquement en lecture.

Tu verras peut-être, dans les différents tutoriels du grand internet, les notions de « variables globales » et « variables locales ». C’est à peu près la même chose, mais je n’aime pas trop ces termes, car ça donne l’impression qu’il n’y a que deux contextes, alors qu’il peut y en avoir bien plus.

Je vais pas trop t’embrouiller avec des choses que t’as pas encore vues. Un module possède lui aussi un contexte. D’autre part, tu peux déclarer une fonction dans une fonction, ce qui crée un sous-sous-contexte, et une fonction dans une fonction dans une fonction. Et en plus ça s’appelle pas des contextes mais des « espaces de nommage ». Oublions tout ce batacouac.

Y’a des fois, c’est justifié d’accéder à une variable du contexte englobant, mais là non, c’est pourri.

Déjà, parce que ça oblige à écrire trois lignes de code pour dessiner un diamant où on veut : deux lignes pour pos_x, pos_y, et la dernière pour la fonction. Et ensuite ça fait bizarre, car le comportement de la fonction dépend de choses extérieures à elle. C’est inhabituel, alambiqué, complexe et source de bugs.

Alors on va ajouter deux paramètres à la fonction. Devine comment on va les appeler ? pos_x et pos_y. Hu hu hu.

Il faut ajouter ces paramètres dans la définition de la fonction (la ligne de code avec le mot-clé « def »), ainsi qu’à chaque exécution de la fonction.

Tu n’as plus besoin des lignes de code définissant les variables pos_x et pos_y. Tu peux mettre les coordonnées directement dans les paramètres d’appel à la fonction. Tiens voilà un exemple issu de la même doc que tout à l’heure . Ne t’attardes pas sur le corps de la fonction, osef. Regarde juste comment elle est déclarée, comment elle est appelée, et tu fais le même genre de chose avec ta fonction à toi.

Tu peux faire un petit test pour bien te rendre compte que les paramètres pos_x et pos_y existent dans l’espace de la fonction, mais plus en dehors. Ajoute « print(pos_x) » à la fin de ta fonction. Ça va fonctionner. Ajoute la même ligne tout à la fin de ton programme, ça va merdoyer.

C’est ce qu’on veut, lecteurtrice. Chaque variable et chaque paramètre doit être présent uniquement là où on en a besoin, et ne pas être accessible ailleurs. Sinon ça embrouille, on se demande ce que ça fout là, et on passe pour une baltringue ou un baltringuet (Wesh ! Écriture inclusive !).

Pour finir ce chapitre sur quelque chose d’over-classe, tu mets une boucle de 20 itérations dans laquelle tu exécutes ta fonction. Pour ses deux paramètres, indique directement le compteur de la boucle.

Ça va faire un truc comme ça :

Lien vers le code si t’as vomi ton cerveau.

On taille les diamants

Maintenant que tu as compris le truc avec les paramètres de fonctions, profitons-en pour en rajouter un troisième, permettant de choisir la taille du diamant.

C’est à peu près comme au chapitre précédent :

  • Ajoute un paramètre dans la définition de la fonction, après pos_x et pos_y. On l’appellera « taille ».
  • Utilise ce paramètre dans le corps de la fonction. Ça va se passer dans la ligne de code « turtle.circle(100, 90) »
  • Ajoute le paramètre lors de l’exécution de la fonction. Dans un premier temps, tu peux indiquer une valeur fixe. Le plus simple est de remettre 100.

Avec ça, tu auras la même image que précédemment, mais ton programme sera plus souple, comme lui :

Modifie la boucle affichant les 20 diamants, en faisant varier leur taille, de 0 pixels (inclus) à 100 pixels (exclus), en avançant par pas de 5 pixels.

Et plop :

Lien vers la réponse si t’es pas de taille.

Recentrons-nous

Hé, j’ai une idée géniale. On pourrait afficher des diamants de taille différente, mais tous en coordonnées (0, 0). Ça ferait un truc trop joli, comme une espèce de porte des étoiles magiques en forme de vagin de l’espace.

Sans plus attendre, re-re-modifie la boucle exécutant la fonction, et indique 0 dans les deux premiers paramètres.

Et paf, c’est moche.

Qu’est-ce à dire que ceci ?

La fonction positionne la tortue aux coordonnées (pos_x, pos_y), puis commence tout de suite à dessiner.

Donc ces coordonnées ne correspondent pas au centre du diamant, mais à la pointe de gauche.

Avant de dessiner, il faut se décaler vers la gauche, d’une distance égale à la taille du diamant.

Y’a deux manières de le faire :

Soit tu te positionnes dès le départ où il faut, en changeant le premier paramètre de l’instruction turtle.setpos. Au lieu de « pos_x », tu mets « pos_x – taille ».

Soit tu laisses le setpos comme il est, mais juste après, tu recules de la taille du diamant. La fonction pour reculer, c’est « turtle.backward », elle fonctionne comme le forward.

Je te conseille fortement la deuxième option. Tu en auras besoin au moment de faire tes devoirs. Eh ouais, lecteurtrice, t’auras encore des devoirs. La vie est dure.

Après avoir appliqué le décalage, ça devrait dessiner ça :

Lien vers la réponse, si t’es déconcentré ou déconnecentrée (Wesh, écriture inclusive, t’as vuuuuuu ?)

Diamonds are a girl’s best friend

I have a good filling about this

On va momentanément partir sur autre chose.

Teste-moi ça, dans un autre onglet Trinket :

import turtle
turtle.fillcolor("red")
turtle.begin_fill()

turtle.forward(60)
turtle.left(120)
turtle.forward(60)
turtle.left(120)
turtle.forward(60)

turtle.end_fill()

Ça va dessiner un magnifique triangle rempli de rouge.

Explications :

  • La fonction fillcolor est assez simple : elle définit une couleur de remplissage. Tu peux remplacer « red » par « green », « blue » ou d’autres couleurs en anglais.
  • La fonction begin_fill indique à la tortue qu’on va commencer à tracer un dessin qui sera à remplir.
  • Ensuite, des forward et des left, que tu connais déjà.
  • Finalement, la fonction end_fill indique à la tortue qu’on a fini le dessin et que le remplissage doit être effectué.

Ce n’est pas forcément évident à comprendre. Ces fonctions de fill impliquent beaucoup de traitements réalisés en interne par le python.

Lorsque tu es entre un begin_fill et un end_fill, à chaque fois que tu traces un bout de truc, que ce soit avec un forward, un circle ou autre chose, la tortue enregistre tous les pixels par où elle est passée. Au moment du end_fill, la tortue en déduit l’espace interne de pixel délimité par ton tracé, et elle les colorie. Comme l’outil « pot de peinture » dans les logiciels de dessin, t’as vu ?

Pas besoin de te prendre la tête avec ces traitements compliqués, le python le fait tout seul (plus exactement, c’est la librairie de code turtle qui le fait, osef). Mais du coup, c’est pas évident de comprendre ce que ça fait.

On pourrait presque considérer que tout ce que tu fais entre le begin_fill et le end_fill constitue un sous-bloc de code. D’ailleurs, si ça ne tenait qu’à moi, j’aurais fait un context manager, et ça se serait explicitement écrit comme des sous-blocs de code. Un « context manager », c’est un truc spécial du python que tu peux mentionner quand tu veux montrer à tes lecteurtrices à quel point tu es un over-expert du python.

Et là, lecteurtrice, je me plaît à imaginer que tu t’intéresses à ce que je te raconte jusqu’au plus profond de tes neurones, et que donc tu te poses plein de questions :

  • Si je dessine n’importe quoi et que je ne reviens pas à mon point de départ, est-ce que ça va colorier toute l’image comme dans Paint ?
  • Si je croise des traits, ça va se colorier comment ?
  • Si je fais plusieurs begin_fill et/ou plusieurs end_fill à la suite, ça donne quoi ?

Réponse : t’as qu’à tester. Tiens, je t’ai fait quelques exemples.

Bon, ceci étant expliqué, je veux un diamant de sang ! Yaaahahahhaaarrrr !!

Modifie la fonction de façon à ce qu’elle dessine un diamant coloré en rouge. Il suffit d’ajouter les instructions de fill, aux bons endroits.

Ensuite, les diamants vont se dessiner en se recouvrant l’un après l’autre. À la fin, tu auras ça :

Lien vers la réponse, si tu commences à pleurer du sang.

Ce sera tout pour aujourd’hui

Dans mon article précédent, j’ai dit qu’on ferait ça :

On n’y est pas encore, mais on s’en rapproche. Je m’arrête là pour l’instant. J’ai d’autres trucs à faire que d’écrire des cours de python. Désolé. Promis, le mois prochain, on y arrive.

En attendant, pour pas que tu t’ennuies, BADAM-BING ! LES DEVOIRS !!!

Dessine-moi ça :

Petit indice : depuis le début, on dessine des diamants tout droit, parce que l’orientation initiale de la tortue est droite. Et si tu tournais un peu ta tortue avant de dessiner un diamant ? Pas trop, un ou deux degrés…

Découvrir la programmation python et faire des petits dessins, là tout de suite

Hey !

Alors comme ça tu veux essayer la programmation et tu ne sais pas par où commencer ? Tu as joué un peu avec des formules Excel et tu as trouvé ça relou ? Tu as pris peur devant la quantité faramineuse de case à cocher et de Giga-octets nécessaires à l’installation de Visual Studio ? On s’est moqué de toi quand tu as dit que le C++ était mieux que le HTML ? Allez, viens, t’as cliqué à la bonne porte. J’ai filé des cours de python à des jeunes en collèges et lycées, et j’ai presque eu l’impression d’avoir été intéressant. Autant t’en faire profiter !

Non-installation des outils nécessaires

Quand on débute en programmation, il faut s’inscrire sur des sites (github, stackoverflow, …), installer des interpréteurs, des compilateurs et un tas d’autres bronxs. Sauf que toi, tu veux pas forcément t’y mettre sérieusement, tu veux juste découvrir pour savoir si ça vaudra le coup de t’y mettre sérieusement. Tkt, lecteurtrice, je suis là pour ça.

Va voir par ici : https://trinket.io/python (ouvre le lien dans un nouvel onglet, car tu auras besoin de passer de l’un à l’autre).

C’est un petit environnement d’exécution en python, rien que pour toi. « Python » est le nom d’un serpent, mais aussi d’un langage de programmation.

Dans la partie gauche, c’est le code que tu écris, dans la partie droite, le résultat de l’exécution de ce code. T’as vu lecteurtrice ? J’ai utilisé le mot « code ». Ça veut dire exactement la même chose que « programme », mais ça fait plus expert. Hésite pas à utiliser ce mot.

Un premier exemple s’est déjà exécuté. On s’en fout. Efface tout le texte de la partie gauche et met seulement ces trois lignes :

import turtle
turtle.forward(50)
turtle.left(90)

En haut de la fenêtre se trouve un bouton « Play » (une flèche vers la droite), clique dessus. Si y’a pas, t’as un bouton « Stop » à la place, clique puis reclique dessus.

Devant tes yeux ébahis, un trait va se tracer.

Tant qu’à faire, clique sur le bouton « Expand » en bas de la fenêtre, ce sera plus pratique.

Mais que sont donc ces trois lignes que tu as copié-collées ?

La première sert à importer la librairie de code intitulée « turtle ». C’est ce qui te permet de tracer des petits dessins.

Si t’es un vieux ou une vieille, lecteurtrice, tu te souviens peut-être du plan « Informatique Pour Tous » et surtout du langage « Logo ». Turtle en est inspiré.

Le principe, c’est que la petite flèche noire dans la partie droite représente une tortue (ou n’importe quelle autre animal si tes goûts en matière de zoophilie sont différents). Tu la diriges avec des instructions de code.

  • « turtle.forward(50) » signifie que tu la fais avancer de 50 pixels.
  • « turtle.left(90) » signifie que tu la fais tourner de 90 degrés vers la gauche.

Juste pour montrer que tu as bien compris, tu vas changer le code pour me dessiner un beau carré de 50 pixels de côté. T’as juste à re-écrire trois fois de plus les deux dernières lignes. Fais un copier-coller, ça passe crême. Ne recopie pas « import turtle », qui n’a besoin d’être écrit qu’une seule fois au début. Appuie sur Play pour relancer le programme.

Ça y’est, t’imprimes ?

On peut aussi écrire du texte. À la fin de ton programme, ajoute la ligne :

print("yo ho ho ho. lolilol")

Le carré va se redessiner et du texte va s’afficher dans la partie juste en-dessous.

La fonction « print » affiche en bas à droite le texte que tu lui indiques. Ça s’appelle la sortie standard. C’est un truc de base que tu as tout le temps, même avec autre chose que le python.

En général, quand on découvre la programmation, on ne commence qu’avec ça, on ne dessine pas avec turtle. Du coup, on se retrouve à faire des exercices poucraves, genre pisser la suite de Fibona-qui-chie ou sortir la solution d’une équation du premier degré. C’est chiant. Nous on fais pas ça, nous on met des paillettes dans la life, t’as vu ?

Quand tu programmes, que tu sois débutant ou pas, il y a plein de fois où tu écris des trucs pétés qui déclenchent des erreurs. Ça fait partie du jeu. Dans le bel environnement de développement que je te propose, les erreurs s’affichent en bas de la fenêtre, et la ligne de code pétée est surlignée en rouge. On va tester ça tout de suite. Après le print, tu écris n’importe quoi. Vas-y lâche toi, fais pas ta/ton mijauré·e. (Wesh ! T’as vu lecteurtrice ? Je fais de l’écriture inclusive, c’est à la mode).

Appuie sur Play, et tu verras un message outrageusement irrespectueux, genre « NameError: nanani » ou « Bad input: nianiania ».

Les messages d’erreurs sont plus ou moins explicites, selon ton niveau de connaissance, la débilité que tu as écrite et la complexité de ton programme. Des fois ça peut aider de chercher sur internet ce que ça veut dire. Des fois pas. Tkt, lecteurtrice, tout au long de ce tuto, je t’ai mis des exemples de code qui fonctionnent. Si t’es grave dans la derche, ça t’aidera. Mais essaye à chaque fois de trouver la réponse par toi-même.

L’autre truc rigolo, c’est quand ton programme n’a aucune erreur, mais qu’il ne fait pas du tout ce que tu veux. Dans ce cas, met des « print ». Ça te permet de voir par où passe l’exécution, d’afficher le contenu de tes variables, etc.

On va tester ça tout de suite. Ajoute ça à la fin de ton programme :

x = 5
print("Valeur de x")
print(x)

Tu peux aussi écrire plusieurs trucs sur une même ligne, en séparant chaque valeur par une virgule. Ajoute aussi ça :

print("Valeur de x :", x)

Et rond et rond

On continue avec un truc simple. En plus du carré, tu vas me dessiner un cercle de rayon 60 pixels. Lorsque ton programme s’exécute, on doit voir ça :

Tu sais pas comment on dessine un cercle ? Mince alors. Eh bien, cherche. Va voir par là si j’essuie : https://docs.python.org/3.8/library/turtle.html#turtle.circle

C’est aussi ça, la prog. Tu passes ton temps à chercher comment on fait certains trucs, parce qu’on ne peut pas retenir tous les trucs.

Ensuite, au lieu d’un cercle entier, tu me dessines juste un tiers de cercle. Faut que ça donne ça :

Pour t’aider, re-zy-va voir le lien internet sus-cité.

Comme promis, lecteurtrice, voilà un lien vers la réponse, à n’utiliser qu’en cas d’extrême urgence mondiale, si tu n’arrive pas à trouver par toi-même.

Humeur variable

Mine de rien, on a fait un truc super important dans le chapitre pré-précedent, avec l’instruction « x = 5 ». On a déclaré une variable.

Ooooohhhhh.

Définition : une variable est un truc dans lequel tu mets le machin que tu veux. Tu peux ensuite réutiliser le truc, ça fait comme si c’était le machin. Débrouille-toi avec ça.

Le signe « égal » utilisé n’a pas la même signification qu’en maths. C’est une affectation et pas une égalité. Ce sont deux notions différentes, mais qui existent toutes les deux en programmation. On verra ça plus tard.

Dans ta tête, quand tu vois écrit « x = 5 », tu peux te dire « x prend la valeur de 5 », ou bien « x devient 5 ». Ce sera plus exact que « x égal 5 ».

Tu peux aussi te faire dans ta tête la voix française de Jim Carrey. Sérieusement, ça aide.

Si tu veux plus de détails sur les variables, va voir ce tutoriel. Il est assez bien fichu, y compris les chapitres après, sur les listes, les tuples, les fonctions… Ça pourrait te servir pour la suite.

On est pas chez ces ringards de matheux, t’as le droit d’avoir des noms de variables de plusieurs lettres, à condition qu’il n’y ait pas d’espace. Par exemple : « ma_super_variable = 5 ».

Ton environnement de dev a aussi un mode console, mais je t’embête pas avec ça pour l’instant. Par contre, un truc utile, au lieu de cliquer sur Play, tu peux utiliser le raccourci Ctrl+Entrée. Ça exécute ton code.

Si tu veux avoir l’air d’un vrai programmeur qui a des gonades, utilise des raccourcis claviers plutôt que ta souris. (Wesh lecteurtrice ! T’as vu ? Écriture inclusive avec le mot « gonades »). Comme t’as souvent les mains sur le clavier pour écrire du code, vaut mieux essayer de tout faire avec le clavier plutôt que de perdre une demi-seconde à attraper la souris.

Autre bidouille, spécifique à turtle. Au début de ton programme, juste après l’instruction « import », tu peux ajouter la ligne « turtle.speed(0) ».

La tortue dessinera ses traits et ses cercles plus vite. Tu me remercieras quand tu en seras à exécuter ton code pour la vingtième fois parce que tu seras en train d’essayer de faire marcher quelque chose qui ne veut pas marcher.

Une boucle pour une spirale

Commence par nettoyer le bazar des chapitres précédents. Supprime toutes les instructions de dessins : « turtle.forward », « turtle.left » et « turtle.circle ». Si tu tiens absolument à garder ces premiers blablablutiements, sauvegarde-les dans un petit fichier texte. Ou sinon, laisse-les où ils sont, mais en commentaire. Il suffit d’écrire un caractère dièse « # » au début de la ligne.

Très utile les commentaires. Ça peut servir à expliquer des choses directement dans le programme. Tu peux aussi écrire ton autobiographie.

Si je te fais enlever tout ça, c’est pour repartir sur une zone de dessin propre. Parce qu’on va faire du fun.

Des spirales comme la coiffure de princesse Leia

Si t’es pas trop vieux ou vieille, lecteurtrice, tu as certainement entendu l’expression de langage de jeune : « être en boucle sur quelque chose ». Ça vient de l’informatique.

Sans plus attendre, copie-colle moi cette ligne à la fin de ton programme :

for compteur in range(11):print(compteur * 8)

Tu exécutes, et ça écrit la table de 8 dans la sortie standard.

Cette ligne de code est à lire en deux parties, séparée par le caractère « : ». La première partie indique que tu veux faire une boucle, c’est à dire exécuter plusieurs fois la même chose.

Le « 11 » indique que cette boucle s’exécutera 11 fois, en comptant de 0 à 10. Ça a l’air crétin de commencer à compter à partir de zéro, mais ça se justifie. Je prendrais le temps de t’expliquer plus tard, quand tes poils auront poussés, jeune lecteurtrice.

Le morceau de code après le deux-points, c’est le contenu de ta boucle. C’est à dire l’instruction que tu veux exécuter plusieurs fois. Tu la connais déjà, c’est un « print ».

Le caractère étoile « * » signifie simplement la multiplication. En maths, la multiplication est notée par une croix, mais ce caractère n’existait pas sur les premiers ordinateurs. D’ailleurs, ces crétins de matheux n’utilisent même pas la croix, ils mettent rien du tout. « 2a » signifie « 2 multiplié par a ».

Déso, mais le caractère rien-du-tout ça existe pas, même sur les ordinateurs récents. Qu’est-ce qu’ils sont cons ces matheux.

Revenons aux boucles. Celles-ci sont gentilles. En plus de répéter un truc, elles te donnent gratochement une variable. Ici, on l’a appelé « compteur ». Celle-ci change automatiquement de valeur à chaque passage de la boucle.

Ça fait comme si t’avais écrit :

compteur = 0
print(compteur * 8)
compteur = 1
print(compteur * 8)
compteur = 2
print(compteur * 8)
...
compteur = 10
print(compteur * 8)

Ceci étant expliqué, on est bien d’accord que la table de 8, c’est des maths et c’est ringardos. Nous on veut du fun. On va dessiner une putain de spirale !

Tu sais comment ça se dessine, lecteurtrice ? Il suffit de tracer des morceaux de cercles de plus en plus grand. On dit qu’on fait des tiers de cercles, avec des rayons qui augmentent de 10 pixels en 10 pixels. On en fait 15.

Si t’es débile, lecteurtrice, tu vas faire ça :

turtle.circle(0, 120)
turtle.circle(10, 120)
turtle.circle(20, 120)
...

Mais tu vaux mieux que ça et tu me le fais sous forme d’une boucle, Okaye ?

Le dessin tracé ressemblera à ça :

Le lien vers la réponse, si jamais tu galères.

Une spirale qui grossit et des blocs de code

Sais-tu qu’on peut changer la taille du trait ? Mets-nous l’instruction « turtle.pensize(5) » juste avant ta boucle. Voilà une jolie spirale plus épaisse. Le nombre indiqué correspond à une taille en pixel. Évite de mettre trop gros, ça fera des pâtés moches. Le pensize doit être petit. D’ailleurs « pensize » est un anagramme de « ze penis ».

Soyons over-fun. Tu vas me dessiner une spirale de plus en plus épaisse. Le trait pourrait varier de 0 à 14 pixels, par exemple. Ça tombe bien, ta boucle s’exécute déjà avec un compteur qui va de 0 à 14.

Et là on arrive à une notion très importante en programmation (python ou autre) : les blocs de code.

Un programme est un gros bloc de code, avec plusieurs instructions dedans.

Dans un bloc de code, il peut y avoir des sous-blocs, eux-mêmes pouvant contenir des sous-sous-blocs, etc. Un peu comme ces ringards de matheux quand ils imbriquent des parenthèses. Zou, un exemple.

3 * ((1 + 6) * 2) + 4 * (2 + 5) – 1
Cette expression contient deux sous-blocs : ((1 + 6) * 2) et (2 + 5).
Le premier sous-bloc contient un sous-sous bloc : (1 + 6)

La comparaison s’arrête là. En maths, on évalue en premier les sous-blocs les plus profonds. En programmation, on commence au début, et on avance en rentrant (ou pas) dans les sous-blocs.

Une boucle annonce un sous-bloc, qu’elle exécutera plusieurs fois. Dans le chapitre précédent, ton sous-bloc n’avait qu’une seule instruction : « turtle.circle(compteur * 10, 120) ».

Chaque début et fin de sous-bloc doit être clairement indiqué dans le programme. Dans les langages C et Javascript, on utilise pour ça des accolades « {} », en LISP, des parenthèses « () », en Pascal, les mots « begin » et « end », etc.

Pour que le programme soit plus facilement lisible, on indente les blocs. Toutes les instructions d’un sous-bloc doivent être écrites avec un décalage de quelques espaces au début (en général on en met 4). Les instructions d’un sous-sous-bloc doivent être décalée deux fois, soit 8 espaces, et ainsi de suite. Quand on sort d’un bloc, on enlève un décalage d’indentation.

Il y a des tas de gens qui ne respectent pas cette mise en forme. Leurs programmes sont alors beaucoup moins lisibles. Si tu rencontres ce type de personnes, il est de ton devoir de les insulter et les stigmatiser.

Tu as sûrement déjà vu des images corporate bullshit montrant un écran d’ordinateur avec des lignes de code. C’est hype, swag, geek, hacker et tagada-tsoin-tsoin.

T’as vu lecteurtrice comment sont organisées ces petites lignes ? Ça se décale, puis ça se recale, se redécale, se rerecale. C’est ça l’indentation.

Et en python, comment donc marque-t-on les débuts et fin de blocs ?

Tu vas rire lecteurtrice, c’est par l’indentation elle-même ! Quand tu veux que des lignes de code soient dans un sous-bloc, tu leur mets des espaces au début. Quand ton sous-bloc se termine, tu écris la ligne suivante sans les espaces.

C’est un peu déroutant, mais ça a un très gros avantage. Ton code est obligé d’être bien présenté. En python, tu ne pourras jamais te faire insulter ou stigmatiser parce que tu n’auras pas respecté les règles d’indentation. (On pourra toutefois t’humilier pour plein d’autres raisons).

Les éditeurs de texte conçus pour la programmation prennent en compte cette particularité des indentations. Essayons ça tout de suite. Retourne à ton programme et copie-colle ce texte, sans oublier les deux-points à la fin : « for compteur in range(15): » , puis tu appuies sur Entrée. Ton curseur va à la ligne d’en dessous, mais pouf ! Il s’est décalé de 2 espaces ! Écrit un truc puis réappuie sur Entrée, ça restera décalé.

Quand tu as fini ton bloc, appuies sur backspace, ça enlève les deux espaces d’un coup, et tu retournes au bloc de code supérieur.

Dans l’environnement que je t’ai proposé, une indentation est représentée par 2 espaces. Ailleurs, ce sera 4, ou 8, ou une tabulation. Il y a des discussions sans fin entre les développeurs pour savoir s’il vaut mieux indenter avec des espaces ou des tabulations. Je ne t’en parle pas maintenant, tu n’es pas encore assez mature pour réaliser à quel point les développeurs peuvent avoir des discussions immatures.

Assez discuté, au boulot ! Tu me fais cette boucle, avec un sous-bloc de deux instructions. La première est un « pensize », la seconde un « circle ».

Ça doit donner un truc comme ça.

Lien vers la réponse si c’est la hass pour toi.

Ce sera tout pour aujourd’hui !

J’espère que ça t’as plu lecteurtrice. To be continued le mois prochain. On fera un dessin comme ça :

En attendant, voici tes devoirs. Essaye de me faire un dessin comme ça :

Je te donne pas le code. Tu te débrouilles. C’est réalisable avec les notions que je viens d’expliquer. Deux petits indices, quand même :

– On peut faire des boucles imbriquées, c’est à dire une boucle dans une boucle. Pense à rajouter une indentation (un décalage d’espace au début de la ligne) à chaque fois que tu rentres dans une nouvelle boucle. Et utilise un nom de variable différent pour chaque boucle, sinon ça va confusionner.

– Les tracés de cercle (et de morceaux de cercle) dépendent de l’orientation initiale de la tortue. Tu peux tester ça vite fait : écrit un programme qui fait uniquement « turtle.circle(60, 120) », puis ajoute juste avant l’instruction « turtle.left(180) ». Le morceau de cercle changera de sens.

Un dernier conseil : n’écris pas trop de code d’un coup. Tu rajoutes quelques lignes, tu appuies sur Play pour vérifier que ça swagge, tu rajoutes ou modifies quelques autres lignes, tu retestes, etc. Si t’écris trop d’un coup et que ça plante quand tu testes, ce sera plus difficile de trouver où que c’est que ça merdouille.

Comme je suis gentil et fun, tu auras le la réponse à l’exercice dans mon prochain article.

Ook ook à toi, lecteurtrice !

*Drop du clavier et je m’en vais comme un prince.

Les détails dans ma vidéo pour l’UTBM

Hello les humains et les robots, hello en particulier aux utébohémiens qui atterriraient ici. J’ai terminé ma petite vidéo pour l’UTBM (voir mon article précédent pour connaître l’origine de cette œuvre).

Vous pouvez la visionner et la télécharger ici. Le mec qui mange la boulette de papier puis qui est dans les chiottes, c’est moi. Mine de rien, c’est la presque-première fois que je montre ma gueule sur ce blog. Vu ladite gueule, ça nous rajeunit pas. C’est pas le sujet.

Vous pouvez visionner la compilation complète des vidéos de tout les participants ici. Merci à Ba(r)barlélé Faon de m’avoir transmis ce lien (ce surnom de oufzor !).

Vous pouvez récupérer et bidouiller le code source de l’animation, sur mon github. C’est bien évidemment écrit en python, avec la librairie pygame, saupoudrée d’un peu de numpy pour les « effets spéciaux ». Veuillez m’excuser pour le code source cradingue, écrit à l’arrache plusieurs nuits de suite entre 2h et 5h du matin. Dormir c’est pour les cons.

J’ai caché tout un tas de petites choses et de souvenirs dans cette animation, et j’ai envie de vous en faire part. 3-4-zob, je vous parle d’un temps qui a exactement 20 ans, et qui aux tripes alla me prendre.

Les images

Voici l’image complète du tunnel que traverse la petite boulette de papier (cliquez dessus pour l’afficher en taille réelle) :

Vous constaterez que les textes sont tournés/inversés un peu dans tous les sens. C’est normal. Lorsque l’image est projetée en tunnel, ils se remettent à l’endroit.

Les logos des assos’

L’Association des Étudiants

Le logo actuel :

L’ancien logo, qui doit être encore présent ici ou là :

Il y avait un logo méga-ancien, ressemblant à l’ancien en plus moche et plus illisible. Je n’ai pas réussi à le retrouver. Il était à peu près comme ça :

On arrive difficilement à voir que ça fait les lettres A.E.

Le logo du BDF.

Le logo des inter-UT

Les Inter-UT sont une rencontre sportive/festive ayant lieu chaque année, avec l’UTBM, l’UTC et l’UTT.

Le logo doit être décomposé en : ∩-UT. Le signe « ∩ » se prononce « inter », il s’agit du symbole mathématique représentant une intersection entre deux ensembles.

La vie étudiante à l’UTBM fourmille de logos. Je n’en ai choisi que quelques-uns, car j’avais beaucoup de choses à mettre. Ne m’en veuillez pas si vous ne retrouvez pas vos assos’ préférées.

Le logo de la promo 01

La promo dont je fais partie.

J’ai du le refaire à la main, car je l’avais uniquement sous forme de T-Shirt et sur des photos de gens plus ou moins alcoolisés. J’espère qu’il est ressemblant.

Il représente un landeau, pour montrer le fait que l’UTBM, et toute la dynamique étudiante qui va avec, en était à ses débuts. On avait ensuite décliné l’idée de différentes façons, avec des bébés, des biberons, etc.

Le mini-logo à l’intérieur est celui de l’UTBM.

Si je me souviens bien, c’est un mec surnommé Loku qui l’avait dessiné, à moins que ce soit Djardin.

Les logos des écoles

Les 3 UTs :

J’ai cru entendre qu’il y’en avait une quatrième. Mais à mon époque, ce n’était pas le cas, et j’avoue n’avoir pas trop pris la peine de me renseigner.

L’ancien logo de l’UTC :

Ils ont bien fait de le changer, il représentait sacrément rien du tout.

ENIPSéen ? IPSéNIbien ?

Je suis obligé de faire quelques petits rappels historiques. Je vais essayer d’être le plus objectif possible, même si je me rends bien compte qu’il y a beaucoup de ressenti personnel.

l’UTBM provient de la fusion de deux anciennes écoles : l’ENI et l’IPsé. L’ENI apportait les départements Génie des Systèmes de Production (GSP), et l’IPsé apportait les départements Génie Informatique et Génie Mécanique. (GI et GM). Certains noms ont changé depuis, et de nouveaux départements ont été créés (Génie des Systèmes de Commandes, etc).

L’ancien logo de l’ENI :

Je ne sais pas trop ce qu’il est censé représenter. Une montagne devant un soleil ? Il n’y a pas de montagne spécialement connue à Belfort, à part le ballon d’Alsace. Et la région n’est pas réputée pour son soleil.

J’ai retrouvé le logo de l’IPSé, mais trop tard, la vidéo était déjà faite, désolé :

Il se cachait dans la page 10 du numéro 10 de La Bohème (le journal des étudiants de l’UTBM), que vous pouvez lire ici . Au passage, l’article en question a un intérêt historique non négligeable.

Au niveau étudiant, on ne peut pas dire que cette fusion d’école se soit bien initiée.

Les ENIbiens considéraient que les IPséens étaient des hippies fumeurs de pétards incapables d’organiser des activités étudiantes, se prenant pour des artistes et n’ayant aucune conscience du monde de l’entreprise et du métier d’ingénieur.

Les IPséens considéraient que les ENIbiens étaient des gros bourrins alcooliques perpétrant des traditions de bizutage stupides, et qui auront pour unique débouché professionnel des métiers de « visses-boulons ».

Quant tu arrives en première année, à ton intégration, au milieu de tout ce bazar, et que tous les anciens avec qui tu parles (quelle que soit leur école) t’expliquent que « c’était mieux avant », tu es un peu dans la confusion et tu ne sais pas trop où te mettre.

Un autre détail amusant, qui m’a vraiment donné l’impression que je démarrais mes études dans une école qui n’existait pas, c’est le papier administratif détaillant le planning de la rentrée. On y trouvait conventionnellement un discours d’introduction prononcé par le grand chef de l’UTBM. Le titre de ce monsieur était : « administrateur provisoire ».

Du point de vue administratif et enseignement, l’UTBM prenait plus de l’IPSé que de l’ENI : le fonctionnement par UV provient de l’IPSé, le directeur du département Tronc Commun de l’UTBM était celui de l’IPSé (je reparlerais de lui un peu plus loin).

Dans mes souvenirs, plusieurs dirigeants du département GSP ont démissionné un ou deux ans après la création de l’UTBM, en indiquant clairement, dans une lettre ouverte, qu’ils partaient à cause d’une prédominance trop forte de l’IPSé. Je ne retrouve aucune trace de ces infos, ni même les noms des démissionnaires. Désolé, il va falloir me croire sur parole.

Du point de vue de la vie étudiante, l’ENI semblait avoir une présence plus forte. Ce serait inexact de dire que les IPséens ne faisaient rien. Plusieurs événements de l’UTBM proviennent de l’IPSé : la convention du Troll penché, le Week-end à l’UTBM, la Semaine des Arts, etc. Mais on pouvait remarquer que les ENIbiens étaient plus enclins à se motiver pour organiser tout un tas de choses, ne serait-ce que pour essayer de conserver l’identité de leur école.

L’ancien logo de l’Association des Étudiants est jaune et bleu, comme l’ancien logo de l’ENI. Ce n’est pas pour rien.

Dans tout ce fatras, je me sentais personnellement plus proche de l’esprit « ENI » que de l’esprit « IPSé », mais le plus important pour moi était de faire naître l’esprit « UTBM ».

Je pense y avoir assez bien contribué, même si, pour certaines assos’ (en particulier le Congrès Industriel), je faisait mine d’être impliqué à fond alors que concrètement je ne foutais pas grand chose. J’ai jamais été doué pour organiser des trucs. Je sais juste écrire (du code et des textes). Je remercie Tiny et tout les autres membres de l’équipe du Congrès 2002 d’avoir fait tout le boulot à ma place !

Le logo de l’intégration

Durant notre intégration, on nous donnait un T-shirt avec ce logo dessus (jaune et bleu, quelle surprise !). Les anciens avaient le même avec les couleurs inversées : jaune sur fond bleu.

Quelques petites blagues cachées :

  • en dessous du logo était écrit « Integ ». Les lettres E, N et I étaient soulignées.
  • Si on cache la tête du bonhomme et que l’on imagine que ses deux mains sont deux têtes, le logo représente deux personnes en train de se sodomiser. Pourquoi cette blague ? Aucune idée.

Les blouses

L’animation dans ma vidéo montre 38 blouses noires, correspondants aux 38 promos de l’ENI, et 20 blouses bordeaux, correspondants aux 20 promos actuelles de l’UTBM.

Le port de la blouse est inspiré par d’autres écoles, notamment les Arts et Métiers. Voici un site presque pas trop décrépi concernant les blouses à l’UTBM : http://abctabs3285bis.free.fr/utbm/autre/blouse .

La blouse noire était l’élément le plus emblématique de la vie étudiante et des traditions de l’ENI. On était plusieurs dans la promo 01 à vouloir que ça ne se perde pas, mais on avait bien compris que si on reprenait ça tel quel, on se ferait pourrir par les ENIbiens les plus extrémistes qui n’auraient pas apprécié qu’on reprenne « leurs » traditions pour le compte de « notre » école. Alors on a juste changé la couleur.

Comme l’indique le texte de ma boulette dans la vidéo, j’ai fait partie des personnes qui se sont occupées de l’achat groupé des toutes premières blouses bordeaux. Je devrais donc être capable de vous dire pourquoi on a choisi cette couleur. Eh bien non. Je ne sais plus qui a décidé que ce serait bordeaux, ni comment, ni pourquoi. C’est peut-être une vague référence à la chanson paillarde « Les Belfortaines », mais je n’en suis même pas sûr. « Les Belfortaines sont comme des homards / elles ont toutes un ruban rouge et noir ».

Ça n’a pas été simple, cet achat groupé. J’avais contacté l’entreprise qui les fabriquait. Elle pouvait nous faire un prix unitaire raisonnable (60 ou 70 francs si je me souviens bien), à condition qu’on leur en commande au moins 100. Oui, c’était en francs à l’époque, je suis vieux et prout.

Alors voilà la situation : les acheteurs potentiels sont les gens de la promo 01, soit environ 300 personnes, il faut réaliser 100 préventes, on n’a pas de blouse à montrer en exemple, et on doit demander aux gens de payer d’avance. Bon courage!

On faisait des stands de préventes au bar et la K’fet, on en parlait le plus possible autour de nous. Il fallait garder le moral face aux détracteurs de tous bords :

  • Les IPSéens pour qui la blouse était une tradition ENIbienne de gros bourrins débiles, et qui nous demandaient « vous vendez pas des uniformes de nazi, aussi ? » (La notion de Godwin Point n’était pas encore très répandue à l’époque).
  • Les ENIbiens qui disaient que notre école c’est de la merde et que c’était pas la peine d’essayer de « faire les grands », quelle que soit la couleur de blouse qu’on s’était choisie.
  • D’autres ENIbiens, prêt à croire en l’UTBM, mais qui nous disaient qu’on ferait mieux de garder la couleur noire.
  • Des membres de la promo 01 pas très motivé qui pensaient que « de toutes façons ça marcherait jamais ».
  • Des gens sortis de nul part, ni ENI, ni IPSé, ni UTBM, qui nous insultaient parce qu’on essayait de se prendre pour des GadzArts.

Parfois, on se sentait vraiment seuls à notre stand « promo 01 » posé à l’arrache dans un coin de la K’fet’.

Heureusement, on a été soutenu par des 3spés de la promo 37 de l’ENI, c’est à dire les personnes arrivées la même année que nous, mais directement en 3ème année (est-ce qu’on utilise encore l’expression « 3spé » ? J’en sais rien). Je suppose que eux aussi ont dû faire face aux mêmes détracteurs, et qu’il n’était pas question pour eux d’avoir des blouses noires. Mais une quinzaine d’entre eux ont pré-achetés des blouses bordeaux, ce qui nous a permis d’atteindre, et même dépasser un tout petit peu cette limite fatidique de 100 commandes. Ouf !

C’est étrange de se dire que le choix de la couleur des blouses a eu une influence définitive sur la vie étudiante de l’UTBM, mais que je ne suis même pas capable d’expliquer ce choix.

J’ai toujours ma blouse. Comme vous l’avez vu dans la vidéo, elle a bien vécue. Elle dort actuellement au fond d’un sac avec des fringues de soirée et autres costumes d’apparat. Je suis content d’avoir pu profiter de cette occasion pour la ressortir.

La fonction « print_peres »

Il s’agit d’un petit bout de code en python (mon langage de programmation préféré) listant les dates des pères, en fonction de la date de remise des diplômes à passer en paramètre.

J’en profite pour mentionner une tradition débile, qui n’en est pas une : lors du père 1664, organisé par les première années, tout le monde s’amuse à faire mousser la bière et à se la jeter sur la gueule. C’est un gigantesque gâchis.

Le père 1664 est le premier ayant lieu dans une année scolaire (vers le mois d’octobre ou novembre). Donc tu arrives en première année, on t’explique le principe des pères, tu cotises pour cette fête alors que tu n’as encore vu aucun autre père des autres promos, tout ça pour se faire pourrir et voir l’alcool jeté.

J’ai découvert plus tard que cette « tradition » de pourrir le père 1664 a démarré avec celui de la promo 38 (la dernière promo de l’ENI). À l’époque, l’UTBM n’était pas officiellement créée, mais son annonce avait déjà été faite. Ça ne plaisait pas à certains ENIbiens, la soirée a dû déraper pour une raison ou une autre, et ça a fini en balançage de bière.

Je ne sais pas si les pères sont toujours organisés. Je l’es-père. Mais si c’est le cas, je vous invite à ne pas balancer de bière au père 1664. C’est une fausse tradition de merde. Et même si elle était justifiée, je la trouverais stupide et à bannir, car rien ne justifie de gâcher de l’alcool.

Au fait, pour ceux qui se demandent pourquoi ça s’appelle des « pères »: http://www.archives.armentieres.fr/Au-hasard-des-archives/p1699/Le-Pere-Cent-ou-le-bac-moins-100-jours

Le plan de la Maison des Élèves

J’ai mis des dessins pour les noms des bâtiments. Nous avons donc, pour le bâtiment principal : les Légumes, les Fromages, les Crustacés, les Pizzas. Pour les deux bâtiments externes : les Îles et les Daltons. Et bien sûr le foyer, avec des bières.

Je ne me souviens pas des noms de tous les étages : Courges, Aubergines, Munster, Moules, Bigorneaux, Pescatore, Kerguelen, Oléron, … Mon étage préféré est bien évidement celui des Camemberts, dans lequel j’ai passé mes deux dernières années.

À ce sujet, j’ai mis un camembert dans l’animation :

Pour en revenir à la ME, voici un petit surplus d’histoire. Avant, le bâtiment principal n’était pas cloisonné. C’était des grands couloirs qui traversaient tout. Je ne sais pas pourquoi il a été décidé de les séparer, peut-être parce que les gens faisaient des ventriglisses géants. En hiver, ils balançaient de l’eau avec les lances à incendies, ouvraient les fenêtres, attendaient que ça gèle, puis faisaient des grandes glissades.

Au moment du cloisonnement, il a fallu ajouter des sanitaires pour les bâtiments qui n’en avaient pas. C’est pour ça que le bâtiment des Légumes (ainsi que celui des Pizzas si je me souviens bien) ont des douches sans carrelage au sol. Avant, ces coins douches+toilettes étaient des chambres.

Pleins de numéros d’UV

MT11, PS12, HE05, LO11, … C’est toutes mes UV du Tronc Commun.

Et je les ais toutes eues, j’ai encore les feuilles de résultat de mes semestres !

Un code source en Pascal

La mise en forme à fond bleu flashy des années 80 est inspirée de l’IDE Turbo Pascal. J’en ai codé des bêtises avec ce truc, à l’UTBM et ailleurs.

C’est un vrai extrait de code de mon vrai projet de l’UV LO11. Le responsable de l’UV était un chercheur en informatique génétique un peu azimuté. Il nous avait concocté un sujet de déglingo, sybillinement intitulé « Remontée analytique et retour simulé ». Il fallait simuler des mutations de code génétique, calculer les probas d’apparition de je-sais-plus-quoi, et valider son modèle de malade. Je peux vous transmettre mon dossier du projet.

Cliquez sur l’image pour agrandir. Vous remarquerez dans cet extrait de code une fonction « StrToNucleo », convertissant les chaînes de caractères « A », « C », « G », « T », vers des constantes ayant le même nom. Vous aurez bien sûr reconnu le nom des 4 nucléotides de base de l’ADN.

C’était un projet assez conséquent, faisant intervenir des notions allant au-delà de l’informatique. Pour une UV de première année, c’était un peu violent. Mais moi ça m’avait plu, c’était plus concret qu’un pauvre algo basique de tri ou de parcours d’arbre comme on en fait par centaines.

Une partie des étudiants a protesté concernant la trop grande difficulté du sujet, et les semestres suivants, les projets LO11 étaient beaucoup plus classiques. Pour finir, le langage Pascal étant doucement en train de s’éteindre, les cours et les TD de cette UV sont passés au langage C. Mais le responsable est resté ce chercheur azimuté. Christian Michel, si tu me lis, je te fais un bisou, à toi et à ta coiffure non-euclidienne.

L’UV TN10

L’un de mes pires souvenirs à l’UTBM. Le TN10 est une UV où on doit construire quelque chose (un meuble, une affiche pour une exposition, un truc-machin artistique, …). Il faut entièrement gérer le projet du début à la fin : définition précise du besoin avec la personne ayant proposé le sujet, planification, achat du matériel, fabrication, présentation finale. Elle était obligatoire en première année de Tronc Commun.

Expliqué ainsi, ça semble une bonne idée. Mais les projets en eux-mêmes étaient ridicules. Certains appelaient ça : « l’UV montage de meuble Ikea ». Une grande partie des objets construits finissaient directement à la poubelle juste après la soutenance, car ils étaient acceptable pour l’UV, mais pas pour une utilisation réelle.

Cette UV un peu bidon a fortement contribué à ce que les ENIbiens disent que l’UTBM est une école de gens se prenant terriblement au sérieux tout en apprenant n’importe quoi. Même après la première année, on pouvait en rencontrer qui nous demandaient d’abord notre surnom et juste après notre sujet de TN10. Et bien évidemment, ils se foutaient de notre gueule. Comment leur donner tort ?

Mon sujet était très classique : fabrication d’un meuble pour UNITEC (le club robotique). Mais pour moi, il a été très difficile. Parce que je ne suis pas du tout bricoleur. Le moindre petit pépin était une montagne pour moi. J’ai suivi les consignes et j’ai fait tous les magasins de Belfort pour trouver le meilleur prix des planches alors qu’il suffisait d’aller à Leroy Merlin comme tout le monde. Je m’étais planté dans les dimensions et l’une des planches était trop petite. Je me suis pris la tête avec le responsable de l’atelier à Sévenans qui était arrivé deux heures en retard pour ouvrir la salle. J’ai prié au moment de la soutenance pour que personne ne se rende compte que les roulettes ne roulaient pas alors que j’amenais ce putain de meuble en le faisant rouler. etc.

Merci à Merlin, responsable d’UNITEC et proposateur du sujet, d’avoir été indulgent avec notre travail de sagouin.

Ce que j’ai vraiment mal vécu, c’est le décalage entre la difficulté que ça a été pour moi et mon binôme de réaliser ce projet, et le fait que beaucoup de monde me disaient que c’était un truc bidon et facile qui ne servirait à rien de toutes façons. Sans oublier le décalage avec ce que je voulais réellement apprendre dans cette école : de l’informatique. Les années suivantes, j’appelais l’UV TN10 : « le bizutage officiel de l’administration de l’UTBM envers les premières années ».

L’image de la Terre que j’ai ajoutée juste à côté est une référence à un autre sujet de TN10, réalisé par deux potes : une fresque à peindre dans les bureaux du SME (Service des Moyens de l’Enseignement). Ces deux potes se foutaient de leur propre gueule et de ce sujet bidon, en disant qu’ils pourraient terminer en gerbant directement sur le mur.

J’espère que cette magnifique fresque, représentant une Terre même pas ronde, est toujours présente. Elle est le témoin de la capacité de certains, bien plus forts que moi, à prendre cette UV à la rigolade. Blouz et Pudbou, vous êtes des putains d’artistes, félicitations pour votre œuvre.

Quelques années plus tard, cette UV a été rendue non-obligatoire. La raison officielle étant qu’elle est très injuste, car les sujets sont attribués au hasard et sont totalement désequilibrés, avec du très facile et du très difficile. Je continue de penser que la raison officieuse était : « on va arrêter cette connerie car tout le monde se fout de notre gueule à cause de ça ».

Ma gueule photocopiée

Très très amusant.

J’ai déjà écrit un article à ce sujet. Je vous invite à le lire par ici : https://recher.wordpress.com/2014/12/07/photocopiez-vous-la-gueule/

Le tableau avec écrit dessus « Démon ? »

Sur le site de Belfort, dans la tour Bull, le couloir à côté de la bibliothèque, une autre grande fresque est dessinée sur le mur. Elle représente des anges dans une espèce de machine, avec des messages tels que : « est-ce que tu m’aimes ? », « oh oui je t’aime ». Elle s’intitule « la mécanique des anges », et a été réalisée par un certain Godjo, à l’occasion de la Semaine des Arts en 2001.

Je n’aime pas cette fresque. Je la trouve mal dessinée et cucul-la-praline.

Elle s’est imposée à ma vue durant plus de 4 ans, à chaque fois que je passais dans ce couloir. Ce n’est pas grave, je peux le supporter, on voit des choses moches tous les jours, les affiches publicitaires par exemple. Mais je ressens une certaine frustration, car ce Godjo a eu le droit d’inoculer son œuvre dans le cerveau de beaucoup de monde, sans prendre la peine de recueillir leur avis. Il est certainement reparti avec le sentiment que la plupart des gens appréciaient son cadeau, or je n’ai pas eu la possibilité de rectifier ce sentiment ni de lui dire en face ce que j’en pensais. Son acte reste de l’art, mais c’est un acte impoli.

Lorsqu’on trouve qu’une création est moche, il est souvent plus stratégique de ne pas en parler et d’espérer qu’elle tombe dans l’oubli. Si je crie sur tous les toits que Godjo est un tocard et qu’il peint avec son rectum, ça fera parler de lui et le renforcera. L’effet Streisand. Alors peut-être que j’aurais mieux fait de ne pas mettre cette image dans mon animation.

Mais je voulais évoquer d’autres souvenirs amusants lié à ça.

Il arrive souvent que des petits groupes d’étudiants s’amusent à se donner un nom, pour se la péter ou pour délirer : Les Broyeurs, La Tornade, Les Clacos, Les Rôtis, Les Ouf’malades, …

Quelques joyeux drilles des promos ENI 35 et 36 s’étaient donnés pour nom « Les Démons ». Le jour du Père 200, ils ont écrit, relativement discrètement, quelques remarques au stylo sur la fresque. C’est ce que j’ai voulu rappeler. Je ne sais pas si ces petites remarques ont été effacées depuis.

Durant cette Semaine des Arts, des tableaux d’arts abstraits avaient été exposés. Quelques personnes ont écrit « Père 200 » dessus. Les étudiants ayant organisé la Semaine des Arts ont gentiment expliqué que c’était un acte idiot, ayant déplu aux créateurs de ces tableaux, et que le « milieu des artistes » étant un milieu un peu fermé, ce serait difficile de les recontacter pour les années suivantes.

Si le « milieu des artistes » n’est pas capable de supporter les réactions que suscitent leurs œuvres, ils n’ont qu’à garder leurs tableaux pour eux. Écrire « Père 200 » sur un tableau, c’est le compléter, le faire foisonner, lui donner la possibilité d’être plus connu. La réaction à l’art, c’est aussi de l’art.

Peut-être que ce serait une bonne idée de tester l’idée des artistes ayant créé la fresque-TN10, sur la fresque de ce Godjo. ♪ ♫ ♬ On vomit sur les murs le nom de ceux qu’on aime ♫ ♬ ♪ (Demis Roussos et les Kids United).

Les lettres écrites en blanc

Ce sont les seules lettres écrites à l’endroit dans l’image de la texture. En les mettant bout à bout, on obtient la phrase « UTBM on t’adule ».

Il s’agit d’une référence à un easter egg placé dans le petit GENI édité en 1999. Il y avait des petites lettres dans le guide, formant la phrase « UTBM on t’encule ». Une réaction (pas forcément très intelligente) des ENIbiens concernant la création de l’école. À l’époque, ça avait fait un petit peu de bruit, notamment sur une télé régionale.

Je préfère quand même ma phrase à moi.

Un chapeau haut-de-forme

Petite clin d’œil de ma remise des diplômes. J’étais habillé en mec classe des années 60, avec queue-de-pie, chapeau haut de forme et canne. J’ai demandé à Pascal Fournier (le directeur) si j’avais le droit de faire un petit discours, et il avait accepté.

Je pense que les membres de l’administration ont un peu flippé sur le coup, car j’étais connu comme le zigoto qui faisait tout le temps des conneries. J’ai vu la responsable communication s’asseoir juste devant l’estrade, un peu planquée, prête à bondir et intervenir au cas où je sortirais de trop grosses conneries ou au cas où je me mettrais à poil. Rien de tout cela n’est arrivé, mais je peux comprendre que cela fut redouté.

Je ne me souviens plus de ce que j’avais dit, sauf la phrase : « après toutes ces années, on peut dire que nous sommes devenus frères de sang. Et même plus que frères de sang : père 200 !! ». Ce discours est mon moment de gloire. Il est immortalisé dans le DVD du Gala-RDD 2004.

La première version du logo de l’UTBM

Regardez bien l’image. Elle a plein de défauts : des pixels noirs un peu partout, et le « té » de « université » est écrit plus foncé que le reste. Cette version du logo était sur le site de l’UTBM, nous n’en avions pas d’autres. Les profs nous indiquaient d’utiliser celle-ci, puisqu’elle était très facilement récupérable et à la disposition de tous.

La plupart des rapports de stages, de projets, de dossier d’UV et autres documents produits par les étudiants comportait ce logo en couverture, avec les petits défauts. C’est d’un intérêt historique totalement négligeable, mais je trouve ça très amusant.

L’homme de pierre

Il s’agissait d’une statue à côté du barbecue de la ME. Elle représentait un ENIbien, avec le béret, la blouse et une bière à la main. Il regardait dans la direction de son école. Cette statue avait bien entendu pour but de conserver le souvenir de l’ENI, l’esprit étudiant qui allait avec, etc.

À une soirée, j’étais bourré, et j’ai fait semblant de lui rouler une pelle. C’est des choses qui arrivent.

Son visage a été cassé par d’autres gens bourrés, puis quelques années après, elle a été décapitée par d’autres autres gens bourrés.

Mes souvenirs étaient un peu erronés, j’ai cru qu’elle avait été entièrement détruite, et en fait non. Je vous joint un petit article de La Gazette. Merci à Four de me l’avoir transmis.

J’étais un peu énervé quand j’ai appris sa dégradation. Cette statue était importante pour moi. Mais ce n’est pas si grave. J’ai gardé en souvenir l’homme de pierre qui gardait en souvenir l’esprit de l’ENI.

Les symboles doivent pouvoir être modifiés, récupérés, voire détruits, sinon ils deviennent trop sacrés et ça fout le bordel. Si je considère qu’on a le droit d’écrire « Père 200 » sur un tableau d’art abstrait, je suis obligé de considérer qu’on a le droit de casser une statue. Je me charge simplement de faire en sorte qu’on n’oublie pas la statue.

Des petits bouts de code en python

Calcul récursif de la suite de Fibonacci.

Les profs persistent à utiliser cet exemple pour expliquer le concept de la récursivité. Ça m’a toujours fait rigoler. C’est tellement plus compréhensible et moins coûteux en temps et en mémoire de calculer cette suite en itératif.

Est-ce qu’il n’y a pas des exemples plus intéressants, qui justifieraient un peu plus l’utilisation de la récursivité ? Un truc comme ça par exemple :

def print_anagrammes(current_elems, done_elems=""):
    if not current_elems:
        print(done_elems)
    for i in range(len(current_elems)):
        print_anagrammes(
            current_elems[:i] + current_elems[i+1:],
            done_elems + current_elems[i]
        )
print_anagrammes("ABC")

Ouais bon, ça marche pas bien si on met un mot comportant plusieurs fois la même lettre, bon voilà quoi.

None is not False

Rien à voir avec l’UTBM. C’est juste une ligne de code en python que j’aime bien. Tapez-la dans une console, elle renverra True. C’est poétique.

a, b = b, a

Une autre ligne de code en python que j’aime bien. Échange direct de deux variables sans variable intermédiaire (même si en interne il doit y’en avoir).

p % 2

« p modulo 2 », c’est à dire une opération déterminant si la variable p est paire ou impaire.

Simple petite interrogation par rapport aux numéros de promos paires et impaires. Apparemment, les unes se bougeraient plus que les autres. C’est peut-être un mythe.

Lien vers mon repository github

https://github.com/darkrecher/anim-tunnel-utbm

Il contient le code source de l’animation. Je réarrange ce code en une version moins dégueu dès que je peux.

D’autres trucs en vrac

Je ne met pas les images ici, parce que ce ne sont pas les plus intéressantes. Je vous laisse les retrouver par vous-mêmes dans l’image principale.

  • Le lion de Belfort et l’écusson de la ville.
  • les logos Alstom et General Electrics, les deux plus gros pourvoyeurs de stages (ST10 et autres).
  • Des toilettes, parce qu’il y en a disséminées de partout dans les locaux de Sévenans.
  • Le néon vert du bar : « Le bar est ouvert ».
  • Des organes intéressants : nichons, vagin, pénis.
  • Des instruments de musique.
  • Un D20 de jeu de rôles.
  • Des bouteilles, des pet’, du cannabis.
  • Deux verres de Tequila. C’est un jeu de mot : deux teqs – DEUTEC. Hahaha !
  • Un réveil, juste pour souligner les difficultés de la gestion du temps quand on est étudiant. On se retrouve souvent à tout faire à l’arrache. (En fait c’est pas que quand on est étudiant).
  • Le plan d’une tireuse à bière.
  • Des 0 et des 1. À chaque fois qu’il faut donner un style informatico-geek à un visuel quelconque, les gens ne peuvent pas s’empêcher d’y ajouter des lignes de 0 et de 1. Je trouve ça ridicule et un peu à côté de la plaque. Alors j’en ai mis.

Les sons et les voix

« Partout dans l’univers »

La première phrase de la première page du polycopié de cours de l’UV PS26 commence par cette introduction. La pompeusité du propos m’a marqué, il était donc naturel que je la reprenne pour l’intro de mon animation.

Le responsable de cette UV était Patrick Gougeon. Un mec bien, correct, respectueux et assez exigeant. J’ai eu l’UV, mais je n’en ai compris et retenu que très peu de choses. La notion de gradient est assez facile à appréhender, par contre, je n’ai jamais réussi à calculer, ni à me représenter, ni à utiliser à bon escient un putain de « rotationnel ».

« Vous êtes l’élite – vous êtes des gros nuls »

Lors des réunions de rentrée, tant que les parents sont encore là, les grands pontes ne manquent pas de dire que nous sommes l’élite, que nous arrivons dans une école prestigieuse, que nous avons été sélectionnés pour nos capacités et que normalement, nous devrions tous y arriver. Quant aux malheureux qui se feraient « réorientés », ce serait un échec à inputer à l’étudiant mais aussi à l’UTBM.

Dès les premiers cours, sitôt que les parents sont partis, bon nombre de professeurs ne manquaient pas de souligner que nous étions tous mauvais, que le niveau baisse d’année en année et que nous n’aurons jamais notre diplôme.

Ce décalage de propos a été ressenti par beaucoup d’étudiants, je crois même que certains professeurs ont fini par le reconnaître. J’ose espérer que la situation s’est améliorée depuis.

« Le bar est ouvert »

Ce qui est une bonne chose !

« Déchaîne les enfers »

Quelques personnes avaient monté un groupe de hard-rock bourrin, dont j’ai oublié le nom. Il y avait un Opome et un Ette dedans. L’une de leur chanson commençait par cette phrase.

C’est la voix de mon fils.

Mine de rien, c’est la première fois que je révèle sur ce blog idiot que j’ai un fils. Eh bien comme ça c’est fait.

« Vous êtes de quelle école ? »

Une question que certaines personnes extérieures nous posaient de temps en temps. C’était pas méchant du tout et la question était posée sincèrement. Mais c’était symptomatique du fait qu’on arrivait dans une école qui n’existait pas vraiment.

« Tu n’as pas eu tes BN ? »

Lors d’une soirée de Noël, il y eut quelques sketchs amusants, dont des parodies de Eric & Ramzy. L’un d’eux incluait ce jeu de mot : « UTBM » / « eu tes BN ».

C’est la voix de mon autre fils. C’est la première fois que je révèle sur ce blog que j’ai deux fils.

« Père 200, Père 200, … »

La chanson mythique du Père 200. Ce sont mes enfants qui chantent !

C’est la deuxième fois que je révèle sur ce blog que j’ai des enfants.

« Pas d’UV MT11… »

« Pas d’UV MT11, pas de DEUTEC. Pas de DEUTEC, pas de diplôme d’ingénieur ».

Cette phrase a été énoncée par Charles Demouge, directeur du Tronc Commun, une personne qui a amplement participé à la dualité de discours « vous êtes l’élite / vous êtes des nuls ».

J’ai essayé de la prononcer avec l’accent francomtois, mais ce n’est pas forcément très réussi.

Il n’est plus directeur du TC, je crois qu’il s’est réorienté vers la politique, avec plus ou moins de succès.

« Pas élu au premier tour, pas élu au deuxième tour. Pas élu au deuxième tour, pas de poste de député. »

Ce mec n’était pas agréable, mais il était pas si con que ça. Il avait quelques capacités à repérer les étudiants qui galéraient (sur le plan scolaire ou autre) mais qui restaient motivés, et il prenait le temps de les soutenir.

La musique de fond

Elle provient de cette vidéo youTube. Vous avez très probablement reconnu le thème du film « La soupe aux choux ».

Il y avait un prof de chimie complètement à la masse. La légende raconte qu’avant c’était un gars super intelligent, mais lors d’une expérience malheureuse, il a respiré des vapeurs de mercure, et depuis, il n’a plus toute sa tête.

Mais j’ai aussi entendu dire que c’était une « simple » rupture d’anévrisme.

Je l’ai vu débarquer une fois à l’étage des Camemberts, le midi pendant que je me faisait à bouffer. Il devait aller au gymnase pour une raison que j’ignore, et voulait demander la clé au président du BDS. On lui avait dit que c’était « au quatrième étage ». Je lui ai expliqué que ce n’était pas ce bâtiment là, et lui ai montré le bâtiment des Daltons.

Une semaine plus tard, je l’ai vu re-débarquer, il m’a tenu exactement les mêmes propos.

Tout le monde se foutait de sa gueule, y compris certains profs. C’était pas très gentil, mais on n’était pas forcément très intelligents. Des personnes avaient enregistré les propos plus ou moins incohérents qu’il sortait pendant ses cours, puis avaient fait une petite chanson, avec la soupe aux choux en fond.

Je serais curieux de savoir ce que ce prof est devenu.

« Des morceaux de l’UTéBéhèèèème »

Merci d’avoir eu l’idée de ces vidéos-boulettes. Ça m’a bien motivé et ça m’a rappelé beaucoup de souvenirs épiques. J’étais totalement à l’arrache pour réaliser l’animation, je suis content d’avoir pu finir à temps.

Tout ce que je raconte, aussi bien dans la vidéo que dans cet article de blog, est très subjectif. Il y a certainement pleins d’anciens étudiants et de profs qui ne seront pas d’accord avec tout. Je vous invite à raconter votre histoire à vous, de votre point de vue, sous la forme que vous voulez : un texte, une autre vidéo, une statue, une fresque murale peinte au vomi…

Je relis cet article et m’aperçois que j’écris comme un vieux papi nostalgique décrivant des choses vieilles de deux siècles, et qui se considère comme le dernier dépositaire de ces souvenirs-trésors. J’en ai certainement fait des caisses. Mais je n’ai trouvé nul part sur internet un endroit qui raconte tout ça, et je ne voulais pas que ça se perde. Ne serait-ce que pour moi-même, pour me relire dans 20 ans.

Je réalise aussi que ce que j’ai mis dans la vidéo provient en grande majorité de mes années de Tronc Commun. Il y a eu évidemment beaucoup de moments merveilleux dans mes années de branche : les conneries que j’ai faites, les activités, etc. Je n’avais pas le temps ni la place de tout mettre. Peut-être que ce qui marque, lorsqu’on change totalement d’environnement et que l’on quitte le nid familial, c’est surtout les premières années.

Lors de ma dernière année, j’ai fait une petite bande dessinée sur l’histoire de la promo. Elle est ici : https://recher.wordpress.com/2009/04/22/la-bd-de-la-promo-01/. Vous y retrouverez des détails et des thèmes évoqués dans la vidéo : les blouses, l’ENI et l’IPSé, le père 200, etc.

C’est mon histoire. C’est ce qui a permis de me construire, les morceaux de l’UTBM à l’intérieur de moi. Encore maintenant, il m’arrive de faire des rêves liés à cette période :

  • Je suis en train d’emménager dans ma piaule à la ME, mais je m’aperçois qu’il y a plein d’affaires dedans. Je cherche des indices pour savoir si quelqu’un y habite encore, ou si ce sont des affaires oubliées par le locataire précédent.
  • Je viens d’avoir mon diplôme, mais je me rends compte que je ne sais pas du tout ce que je veux faire. Alors je repars de zéro et en reprends pour 5 ans. La partie consciente de mon rêve me dit que c’est totalement stupide, la partie que je ne contrôle pas dit que je dois me dépêcher, car les cours commencent bientôt et si je les rate je vais devoir les rattraper.

Les rêves c’est toujours n’importe quoi de toutes façons.

Gros bisous à tout le monde, et encore merci !

Edit 2020-01-05

J’ai pas osé la mettre tout de suite, pour ne pas choquer les non-habitués de mon blog. Mais la voici : la traditionnelle image de fesse présente dans chaque article. 4 fesses pour le prix de 2 !

La cryogénisation du blog Sam et Max

Il y a quelques années de ça, un chien et un lapin se rencontrèrent.

− Bonjour monsieur le chien.

− Bonjour monsieur le lapin.

− …

− …

− …

− …

− …

− …

− Mais, que nous arrive-t-il ? Je sens comme un arc de tension sexuelle s’établir entre nous deux.

− Moi aussi. Cela va être difficile de le contrôler.

− Pourquoi ne pas céder à cet amour qui s’offre à nous ?

− Je n’ai rien contre les homosexuels, mais je n’en fais pas partie.

− Qui parle d’homosexualité ? Vous êtes un chien et je suis un lapin. Il ne s’agit rien de plus que de zoophilie.

− Comme vous avez raison. Faisons l’amour !

(Quelques mois plus tard…)

− Je suis enceint !

− Moi aussi !

− Quel bonheur ! Nous mettrons au monde toute une marmaillerie de petits chien-lapins !

(Encore quelques années plus tard…)

− Qu’allons nous faire de tous ces chien-lapins et autres lapin-chiens ?

− Il est impossible pour nous de nous occuper d’un aussi grand nombre d’enfants.

− Achetons un congélateur et cryogénisons-les.

− Sage décision. Malheureusement, les techniques de réveil après cryogénisation ne sont pas encore aboutie. Nous risquons de tuer ces pauvres petites créatures lorsque leurs futurs parents adoptifs voudront les réanimer.

− J’ai une idée ! Il nous suffit de les cloner à plusieurs reprises et de cryogéniser ces clones dans plusieurs congélateurs. Nous pourrons ainsi tenter des réanimations au fur et à mesure que la technologie évoluera.

C’est ce qui fut fait.

Archi-archivisme

Le blog http://sametmax.com/ existe toujours, mais aucun nouvel article ne sera ajouté. Les commentaires ont été réouverts momentanément. Lorsqu’ils seront fermés, le blog ne changera plus.

Il n’y a aucune garantie future qu’il restera en ligne. C’est insupportable ces gens qui ne se sentent coupables de rien sous prétexte qu’ils mettent leur travail à disposition librement et gratuitement. Encore un coup des trotskistes.

Ces messieurs Sam et Max ont expliqué comment récupérer tout le contenu de leur blog. Je n’ai pas de moyen de lancer des commandes « wget » de chez moi (désolé, Windows, tout ça). Je pourrais le faire au Travail, mais ça me gêne de mobiliser du CPU, de la bande passante et de la place disque en quantité indéterminée pour quelque chose que je ne peux pas trop justifier.

Alors j’ai fait le gros bourrin avec l’utilitaire WinHTTrack. Ça a mouliné sa mère pendant des heures. Je ne suis pas sûr d’avoir tout récupéré. Certains articles semblent avoir échappé au moissonage, car leur titre est trop long (en particulier toute la partie sur la programmation orientée objet). Je les ai récupérés manuellement, en espérant que d’autres n’ont pas planté de la même manière.

Puis j’ai tout compressé et tout balancé dans dropbox. Vous pouvez télécharger un énorme fichier .zip avec tout dedans. C’est cadeau c’est bonheur.

Il y a aussi des autoblogs, vous permettant de consulter directement les articles sans vous embêter à tout télécharger en local. Mais ils ne sont pas forcément à jour, et ont le même niveau de non-garantie de continuité que le blog de Sam&Max lui-même.

Dropbox pourrait également décider de virer ma sauvegarde.

Internet n’est pas forcément durable.

Ni vos ordinateurs. Ni le réseau de distribution d’électricité. Ni vous-même. Tout fout le camp.

C’est pour ça que lorsqu’on tient à quelque chose, il faut en faire le plus de sauvegardes décentralisées possibles, dans le plus d’endroits différents. Ce dropbox est ma toute petite contribution à cela.

Le passage nostaltriste

Le blog de Sam&Max s’est offert à mon temps de cerveau, il y a quelques années de cela, par le biais de roro, un ami bizarre de l’internet. Je le salue au passage, s’il me lit encore.

J’y ai lu tous les articles paru depuis que je l’ai découvert. Je me suis promis de me faire une rétrospective générale des anciens non encore lus.

Certains de ces articles ont augmenté ma culture générale informatique et ma veille technologique.

L’un en particulier m’a directement fait économiser plusieurs heures de travail de mon vrai Travail. Il s’agissait de l’explication d’un concept générique : les itérateurs avec yield . Et en plus ça m’a même pas servi pour du python, mais du C#.

Je me suis fendu de quelques petits commentaires chez eux, plus ou moins pertinents, plus ou moins utiles.

Je leur ai proposé quelques articles, qu’ils ont gentiment accepté de publier. En voici la liste.

J’avais l’idée de deux autres sujets qui auraient pu être intéressants :

– comment créer un plug-in Sublime Text.

que se passe-t-il en interne quand on définit une variable en python ? (https ://nedbatchelder.com/text/names.html)

Je les écrirais peut-être ici, dans mon blog à moi. C’est dommage. L’audience y est beaucoup plus faible, je ne pourrais donc pas en retirer tout le flattage d’ego que j’aurais pu en espérer.

Ça me fait quand même un petit quelque chose de voir le blog de Sam&Max s’arrêter. Un peu le même effet que la fin du magazine 42, même si ce n’est pas du tout le même genre de création. Snif snif beuheu-beuheu ouin.

Finalement, peut-être que cette nouvelle m’apporte plus de réconfort égoïste que de tristesse. Tous ces « créateurs de contenus web », qui parviennent à obtenir plus « d’audience » et « d’attention » que moi, finissent par abandonner et passer à autre choses. Moi je suis toujours là, depuis plus de 10 ans, sur mon blog pourri avec à peine 30 visites non-uniques par jour, à publier un article par mois.

Je m’accrocherai autant que je le pourrais, comme un vieux chewing-gum dégueulasse à la chlorophylle oublié au fond d’une poche.

Sur ce, voici une dernière image de lapine pour conclure.

Jessica Rabbit !

Le blason de Réchèr

Lors d’un week-end de total égarement, je me suis intéressé à l’héraldique.

Il s’agit des règles permettant de créer et décrire les blasons.

Ça m’a beaucoup plu. J’aime les langages spécifiques destiné à une catégorie d’objets déterminée. En informatique on appelle ça des DSL (Domain Specific Language). Par exemple :

  • le SQL, pour communiquer avec une base de données,
  • le HTML, pour décrire la structure d’une page web,
  • le SVG, pour décrire un dessin vectoriel,
  • Puzzlescript, dont nous avons récemment parlé (http:// www. puzzlescript.net/).

Y’en a des qui pensent que les DSL c’est de la merdasse. (http:// sametmax.com/les-mensonges-des-dsl/) (http:// sametmax.com/dites-non-aux-dsl/)

On ne va pas débattre là-dessus, car ce que je vous propose n’est pas de créer un nouveau DSL, mais de jouer avec un qui existe déjà.

Introduction à l’héraldique

Les couleurs ont des noms rigolos :

  • blanc : argent
  • jaune : or
  • rouge : gueule
  • bleu : azur
  • vert : sinople
  • violet : pourpre
  • noir : sable

Lorsqu’on décrit un blason, on commence par la disposition des couleurs du fond, puis les formes géométriques qui s’ajoutent dessus, puis les « meubles » (les dessins et les objets ajoutés encore au dessus).

Les directions ont également des noms rigolos :

  • en haut : en chef
  • en bas : en pointe
  • à droite : à senestre
  • à gauche : à dextre

La gauche et la droite semblent inversées, car ces directions sont définies par rapport à la personne qui porte le blason, et non par rapport à celle qui le regarde. (Un peu comme au théâtre où on dit « côté jardin » et « côté cour », parce qu’on sait jamais de quelle « droite » et « gauche » on parle) (J’ai jamais vraiment réussi à accepter ces notions de « droite » et « gauche », ça m’a toujours énervé).

Pour un cours complet, il vaut mieux se rendre sur des sites spécifiques, qui décriront cette discipline plus clairement et plus exhaustivement :

Attention, l’héraldique étant un art assez ancien, vous constaterez que tous les sites web sur le sujet ont un design visuel datant de l’internet des années 70. Et comme il n’y avait pas internet dans les années 70, c’est vous dire si le design afférant est passé de mode.

Et maintenant, blasonnons !

Réchèr blasonne d’argent à la barre de pourpre chargé d’un fol d’argent astragalé de sable, accompagné en chef d’un graphe de sinople d’ordre 5 disposé en cercle, les sommets 1, 3 et 5 de degré maximal, chargé de 5 besants d’argent, et en pointe d’une chope de sinople houblonnée de sable, l’écu timbré d’un entonnoir de sinople. Devise pythonienne juste « None is not False » en lettre de sable sur un listel d’or.

Décomposons ce bazar :

Réchèr blasonne d’argent

C’est moi. Et mon blason est sur fond blanc.

à la barre de pourpre

Il y a un trait oblique rose dans le sens du slash. Une « barre » est dans le sens « / ». Une « bande » est dans le sens « \ ».

Pour l’esthétique du dessin, la barre comporte des bords roses foncés. On devrait donc pouvoir dire : « de pourpre foncé rempli de pourpre clair ». Sauf qu’en héraldique, on se fiche des nuances de couleurs, il n’y a que les 7 précédemment citées (ainsi que l’orangé, le tanné et les fourrures, mais osef). C’est sans doute un héritage de l’époque où les blasons étaient utilisés pour se repérer dans les batailles, et devaient donc rester simples.

Bref, cette barre est pourpre.

chargé d’un fol d’argent

Sur la barre est ajouté un fou. Ce n’est pas un élément très commun, il se peut même que ce soit le tout premier blason qui en soit doté. Il n’existe aucune restriction sur les meubles, donc ne venez pas m’embêter.

astragalé de sable

Le fou possède des anneaux noirs.

Une palanquée d’adjectifs permettent d’exprimer les différentes colorations des objets : « accorné de gueule » pour un animal ayant des cornes rouges, « ajouré d’or » pour un châteaux ayant des fenêtres jaunes, etc.

L’héraldique moderne ajoute d’autres de ces adjectifs, dont « astragalé », qui permet d’indiquer la couleur des anneaux des pièces de jeux d’échecs. Ce mot trouve son origine éthymologique dans les astragales des colonnes grecques.

(Pour information, je suis le créateur, et à ce jour l’unique utilisateur, de l’héraldique moderne).

accompagné en chef d’un graphe de sinople

Sur le haut du blason se trouve un graphe vert (un bidule avec des points et des liens entre eux) . Pas besoin de préciser que c’est du côté « dextre ». Le fait de dire « accompagné » signifie que l’élément est placé par rapport à la pièce principale (le blason), et par défaut, on ne place pas un élément par-dessus un autre. Pour ne pas recouvrir la barre pourpre, on est donc obligé de le placer à dextre.

Notez que pour l’élément précédent (le fou), j’ai utilisé le mot « chargé » et non « accompagné », ce qui signifie qu’il est placé par rapport à la pièce mentionnée juste avant (la barre).

d’ordre 5 disposé en cercle, les sommets 1, 3 et 5 de degré maximal,

Là, c’est du vocabulaire relevant de la théorie des graphes. En héraldique moderne, il est autorisé de s’appuyer sur d’autres langages spécifiques.

L’ordre 5 signifie qu’il y a 5 points (sommets) dans le graphe. Les numéros 1, 3 et 5, compté dans le sens des aiguilles d’une montre sont connectés à tous les sommets du graphe, (y compris à eux-mêmes, mais on s’en fout). Pas besoin de s’attarder plus là dessus, vous connaissez les graphes, n’est-ce pas ? (https:// fr.wikipedia.org/ wiki/Th%C3%A9orie_des_graphes) (https:// fr.wiktionary.org/ wiki/Cat%C3%A9gorie:Th%C3%A9orie_des_graphes_en_fran%C3%A7ais)

chargé de 5 besants d’argent,

Il y a 5 ronds blancs sur le graphe. Par défaut, on les dispose de la même manière que les sommets du graphe.

et en pointe d’une chope de sinople

En bas du blason se trouve une chope de bière verte.

Il faudrait peut-être repréciser explicitement « accompagné en pointe », mais je ne suis pas assez expert dans le domaine pour déterminer si c’est absolument nécessaire.

houblonnée de sable,

La chope de bière possède une mousse noire (héraldique moderne).

l’écu timbré d’un entonnoir de sinople,

Au-dessus du blason est placé un entonnoir vert.

Devise pythonienne juste « None is not False » en lettre de sable sur un listel d’or.

Il y a une devise écrite en noir sur un parchemin jaune, elle est placée en-dessous par défaut.

En héraldique moderne, une devise est dite « pythonienne » lorsqu’elle correspond à une instruction valide dans le langage de programmation python. Elle est « pythonienne juste » si l’appel de fonction bool(<devise>) renvoie True.

Dans notre cas, la devise est même encore plus que pythonienne juste, puisqu’elle renvoie directement True. Il n’y a pas de mot spécifique pour ça, mais si vous en voulez un n’hésitez pas à l’inventer.

Je vous laisse tester tout cela dans une console python en ligne (https:// repl.it/G268/0).

Significations et histoires de ce blason

Le fou et l’entonnoir

Le fou est l’avatar que j’utilise un peu partout, car je me définis comme quelqu’un de fou, ça fait zarbo-hype.

Comme je ne suis pas spécialement fan des jeux d’échecs, j’ai ajouté un autre objet signifiant la folie (l’entonnoir), pour désactiver la charge sémantique échiquiétale.

Les couleurs

J’ai toujours trouvé étrange la notion d’aimer une couleur plus qu’une autre ou d’avoir « une couleur préférée ». Mais lorsqu’on dessine, il faut avoir un minimum d’unité et de cohérence sinon ça devient vite très moche. J’ai choisi de mettre du vert un peu partout car c’est la couleur des martiens et du poison.

La couleur pourpre (plus exactement rose) est une référence à la couleur de fond de mon avatar.

L’origine de cette couleur est ridiculo-rigolote. Mon avatar est une image de Pru-Pra-Prok, le dessin animé que j’ai fait il y a quelques années. J’avais configuré le rose pétant (#FF00FF) comme couleur de transparence par défaut. À l’époque, je n’avais pas envie d’utiliser la transparence du format d’image .png car j’étais bizarre, et je m’étais dit : « ce rose à la con, j’en aurais sûrement jamais besoin ».

Ensuite, lorsque j’ai eu besoin de choisir un avatar pour un site quelconque, j’ai pris l’image du fou à l’arrache, sans changer le fond. Et c’est resté comme ça. C’est très amusant, parce la couleur que je ne voulais justement pas utiliser s’est retrouvée un peu partout dans ma personnalité du web. Ha ha ha.

Le fou est blanc sur le blason, afin de respecter une règle de base de l’héraldique : « pas de métal sur du métal, pas de couleur sur une couleur ». Les couleurs argent et or sont les « métaux », toutes les autres sont les « couleurs ». C’est assez logique comme règle : si on dessine un élément clair sur un autre élément clair, ça ne se distingue pas bien. Pareil pour le foncé.

Le graphe

Le plus important pour moi, ce ne sont pas les choses, mais les liens entre les choses. Ce principe me semble s’appliquer à un peu tout : les personne, les créations artistiques, les idées, les neurones, … J’ai voulu illustrer ce principe par un graphe.

Les points ne sont pas tous connectés entre eux pour montrer qu’il reste toujours quelque chose à faire, qu’une création n’est jamais vraiment terminée, qu’une personne peut toujours s’améliorer, etc.

La bière

J’aime bien la bière.

La mousse est noire pour faire genre je suis quelqu’un de sombre avec une âme torturée par le mal. Ça me donne un côté dark-zarbo-hype.

Autres considérations en vrac

Le dessin est en pixel art. C’est moche et mal fait parce que je suis pas super doué et que j’ai pas voulu me prendre trop la tête. Mais malgré tout, c’est du pixel art.

J’ai cherché des logiciels d’héraldique, des générateurs de blasons, etc. Ça existe, mais c’est du même niveau que les sites web sur le sujet, (années 70, etc).

J’ai juste trouvé ça qui est pas trop mal (http:// rpg.uplink.fi/heraldry/). Mais on ne peut rien faire de compliqué : pas d’alésage, de cléchage, d’engrêlage, de semage, etc. La génération de la description n’est pas géniale non plus, il y a des répétitions, et c’est en anglais.

Je m’étais dit que je pourrais coder un générateur de blason. Et après je me suis rappelé que l’héraldique n’intéresse déjà pas grand-monde au départ. On va donc oublier cette idée.

Et sinon c’est un blason officiel. Ouais, vraiment.

En fait, n’importe qui peut créer un blason pour n’importe quoi, à condition de ne pas en copier un pré-existant. Mais comme il n’y a pas d’autorité de recensement centrale, vous êtes obligé de faire des recherches un peu partout pour vérifier la primeur de votre création.

La solution la plus simple consiste donc à y placer des éléments qui n’existait pas au Moyen-Âge (un robot, un ordinateur, un vagin artificiel, …), afin de réduire à presque-néant les chances de tomber sur un blason déjà existant. L’héraldique moderne peut être d’une grande aide dans cette tâche, puisqu’elle permet l’ajout de graphes, d’instructions en python, et bien d’autres choses encore.