BLOmiG

Étiquette : Grok

  • BLOMIX

    BLOMIX

    Je viens de terminer la « migration » du petit jeu BLOX que j’avais prototypé avec Grok il y a un peu plus d’un an. Vous pouvez le télécharger (si vous êtes sur iOS) sur l’Apple Store, en cherchant BLOMIX (il est gratuit bien sûr).

    Règles

    L’univers de BLOMIX c’est celui du Tetris, des Columns et autres CandyCrush : un jeu de match-5, où il s’agit, dans une grille de jeu, de former des chaînes de 5 « blox » (blocks) de couleurs pour les faire disparaître. Tous les 10 blox lancés, une ligne de blox aléatoires vient perturber vos efforts pour bien ranger les choses par couleur. Et vous avez, en plus, une chance sur 8 de vous récupérer une « brix » (bricks) qui est une sorte de caillasse avec un numéro dessus et qui est plus dure à faire disparaître. Quand la grille est pleine de blox et de brix, vous avez perdu. Le score dépend bien sûr du nombre de chaînes que vous avez pu réaliser, de leur taille, des enchaînements, du nombre de fois où vous avez pu revider des colonnes, etc.

    Modes de jeu

    Il y a deux modes pour ce jeu, avec deux classements différents :

    • un mode solo, plutôt zen, où on a le temps que l’on veut pour placer le prochain blox. Le classement pour ce mode de jeu est simplement le classement des meilleurs scores
    • une mode « Player vs Player » où, tous les 50 points marqués, on envoie une ligne de blox à l’autre joueur, un peu à l’instar des parties de Tetris PvsP sur GameBoy (c’était l’inspiration). Le classement pour ce mode est une sorte de système Elo, comme aux échecs, qui ajuste votre classement de départ (800) au fur et à mesure des matchs. Plus l’écart de points entre les joueurs est important, plus la variation de points sera forte.

    Design d’expérience : paramètres

    J’ai eu à coeur de créer un jeu avec une ambiance très immersive malgré sa simplicité, et j’ai donc pris du temps pour chercher des sons sympas. Vous verrez que chaque évènement du jeu est associé à un son particulier. Par ailleurs, j’avais conçu une palette de couleur que je trouvais agréable et lisible. Les premiers retours des utilisateurs étaient formels : les couleurs manquaient de lisibilité (ce qui est assez logique, car personne ne perçoit les couleurs de la même manière). J’ai donc ajouté plusieurs palettes de couleur et la possibilité de créer, dans le jeu, la sienne propre. De même, on peut équilibrer les sons entre eux, et choisir parmi 4 polices différentes en termes de style & lisibilité. Cela permet de facilement créer une ambiance visuelle à son goût.

    Process

    Je ne peux pas parler de ce petit jeu sans donner un éclairage sur le processus de création. Grâce à Max, j’ai découvert la puissance de Cursor.com (que j’ai fait travaillé avec Grok à certains moments pour ne pas bouffer tous mes tokens trop rapidement). C’est un outil qui utilise des LLM pour écrire du code, et pour mon projet dans la suite de dev d’Apple (Xcode), il sait aller travailler tout seul dans les fichiers, modifier / ajouter / supprimer du code, créer des fichiers, tester la logique, etc. Du coup l’expérience est vraiment agréable pour un non-codeur : on se concentre sur les fonctionnalités voulues dans l’app, et Cursor se démerde (en gros). Il ne reste plus qu’à compiler et à tester. Les outils d’iA sont vraiment en train de révolutionner beaucoup de choses, et c’est particulièrement vrai dans le domaine du code. J’avais une grande frustration lors de nos premiers jeux avec Max : je ne pouvais pas l’aider pour le code, qu’il maîtrise, et pas moi. C’est désormais une époque révolue, puisqu’un « novice » comme moi peut créer de toutes pièces une application déployée sur l’App Store. On ne réalise pas bien toutes les conséquences, à mon avis.

    Ressources

    Comme souvent, je me suis servi des incroyables ressources mises à disposition sur le web. J’espère n’oublier personne dans cette section de remerciements, car c’est vraiment un bonheur d’avoir autant de choses disponibles, utilisables et de qualité. Donc, dans le désordre, un très grand merci à toutes ces personnes et entreprises qui ont mis des ressources (payantes ou gratuites) à disposition des utilisateurs.

    • Code : Grok.com & Cursor.com, Github.com, et un grand merci à Max pour son aide pour la mise en place du projet et décoinçages ponctuels
    • Polices : sur le remarquable Google Fonts. Merci à :
      • Petr van Blokland pour Bitcount Grid Single
      • Google pour Google Sans
      • Toshi Omagari, Jennifer Daniel pour DynaPuff
      • JM Solé pour Alfa Slab One
    • Sons : Freesound.org, vocalremover.org/pitch, pitchchanger.io. Sur Freesound.org un grand merci pour leurs sons à HelloIJustWantSomeSounds, Cat-Fox_alex, NoiseCollector, rhodesmas, Anomaex, HenryRichard, Moutain_Man, Rvgerxini, Squirrel_404, collwyn, ConManVD, cherrysylv
    • Musique d’ambiance : « Puzzle Game 2 » par Eric Matyas Soundimage.org
    • Palette de couleur : Coolors.com — Tropical Sunset Vibes légèrement augmentée
    • beta-testing: merci à Gontman, flyingbearcub, stephies, paul_cglt, Napoleon1212, PilotePépère106, Lapluben

    Pour finir, un petit aperçu du jeu en action.

     

  • Dashboard Bitcoin

    Dashboard Bitcoin

    Je me suis amusé à créer une page sur le blog qui est une sorte de « Tableau de bord Bitcoin » : elle affiche quelques indicateurs et les courbes historiques de prix du Bitcoin depuis 2011.

    Bien sûr, j’ai bâti tout cela avec Grok, qui a presque tout fait bon du premier coup : appel de l’API de CryptoCompare et CoinGecko, programmation de la Loi de Puissance de Giovanni Santostasi, sécurisation du code. Impressionnant comme toujours, et je trouve le résultat super chouette : qu’en pensez-vous ?

  • BLOX

    BLOX

    J’ai repassé quelques heures sur le petit jeu développé grâce à Grok. Je lui ai donné un style « Gameboy » (4 couleurs de vert), et j’ai affiné la mécanique, et les affichages :

    • affichage d’une barre de progression pour savoir quand la prochaine ligne de blox arrive
    • sauvegarde des scores (compétition mondiale possible)
    • résolution d’un certain nombre de petits bugs qui traînaient

    Voici donc la version un peu plus aboutie du jeu :
    ///////////
    BLOX.
    //////////
    Vos feedbacks sont les bienvenus. Partagez-moi vos plus gros scores (je travaille à les rendre partagés pour la compétition soit visible).

  • Extraordinaire

    Extraordinaire

    Il y a quelques années, j’avais imaginé un petit jeu, genre Tetris, avec des blocs de couleurs. Comme je ne sais pas vraiment coder, j’avais abandonné l’idée. Mais depuis, les LLM sont arrivés. Comme je suis abonné payant à X, je peux profiter de Grok (l’IA / LLM de X), qui vient de sortir sa version 3. C’est tout simplement époustouflant. Je vous partage ce que j’ai pu faire en à peu près 2h.

    Définition des règles

    L’interface de chat avec Grok v3 est très efficace et simple : on discute avec l’iA. En quelques échanges, je lui explique les règles du jeu, qu’il me reformule et synthétise. Au bout de quelques minutes on arrive à cela :
    D’accord, on a maintenant une condition de fin ! Voici la liste mise à jour :
    1. Le jeu s’appellera « Priks », et c’est un jeu de « Blox ».
    2. Le jeu démarre avec une grille vide de 8×8 cases.
    3. À chaque tour, le joueur (le jeu est en solo) récupère un bloc (« Blox ») qu’il doit envoyer dans la grille : il l’insère en bas de la grille, et le Blox se place dans la dernière case libre de la grille.
    4. Les Blox ont une couleur aléatoire parmi 6 couleurs possibles.
    5. Le but est d’arriver à placer les Blox à côté de Blox de la même couleur. En formant une chaîne de 5 Blox de même couleur (en ligne ou se touchant en diagonale, peu importe la forme), on les fait disparaître.
    6. Tous les 10 coups, une ligne complète de Blox aléatoires (1 par colonne, donc 8 Blox) arrive du bas et remplit la grille avec le même mécanisme que les Blox placés par le joueur. Cette ligne contient 1 Priks situé dans une colonne aléatoire.
    7. Le joueur démarre la partie avec une « bombe » qu’il peut lancer à tout moment à la place d’un Blox. Cette bombe, en arrivant dans la grille, fait disparaître tous les Blox adjacents (les 8 cases autour).
    8. À chaque fois que le joueur réussit à faire disparaître des Blox en créant des chaînes, cela incrémente un compteur : au bout de 5 (chaînes réussies), il obtient une bombe supplémentaire.
    9. Il existe un autre type de Blox, appelé « Priks » (d’où le nom du jeu), qui est « en pierre » (pas d’une couleur). Il ne peut être détruit que par une bombe (on ne peut pas l’inclure dans une chaîne). Il y a 1 chance sur 10 que le prochain Blox soit un Priks.
    10. Le jeu se termine quand le joueur ne peut plus placer un Blox, ou quand la ligne complète de Blox qui arrive tous les 10 coups rencontre une ou plusieurs colonnes déjà pleines.
    Tout est correct ? Pour la règle 10, je comprends que le jeu s’arrête soit si une colonne est pleine au moment où le joueur veut placer un Blox, soit si la ligne complète (tous les 10 coups) ne peut pas entrer à cause d’au moins une colonne pleine. As-tu d’autres règles à ajouter ou veux-tu qu’on passe à une autre étape (comme imaginer comment visualiser ça ou tester un exemple) ?
    C’est impressionnant comme la conversation est fluide et simple. Mais c’est le moins impressionnant.

    Proto dans le chat

    Spontanément quand je lui parle de faire un prototype du jeu, il me propose une manière simple et élégante pour visualiser le jeu en mode texte et tester les règles en condition réelle.

    Ca nous a permis de rapidement corriger des points qui n’avaient pas été bien exprimés/compris, et d’arriver à une version propre du proto. Très très impressionnant. Mais le ce n’est pas encore le plus impressionnant.

    Génération de Code

    Une fois ce prototype « texte » mis au point, je lui demande de me générer du code en html pour que je puisse lancer le jeu en local dans un navigateur. Il cela ne lui pose aucun problème. Génération du code ci-dessous (200 lignes de code en html), quasi-instantanée, sans aucune faute à l’exécution.

    Les seules modifs que j’ai eu à lui faire faire sont liées à des mauvaises compréhension de certains détails des règles non testées en mode texte. C’est vraiment là que j’ai trouvé ça ultra impressionnant. Un non-codeur peut faire un prototype fonctionnel de son petit jeu en quelques heures. Voilà ce qu’on appelle un vrai changement de paradigme, il me semble. Quel kif.
    Il ne me reste plus qu’à améliorer un peu le jeu, ajouter un score, complexifier ceci ou cela, ajouter des images .png, etc. Mais le gros du boulot a été fait sans aucune compétence de codage. Qu’en pensez-vous ? ça vous donne des idées ?

    Jouez à Priks V1.1 ici : Lancer le jeu

    MAJ :
    J’ai pu remettre en marche ma page de Citations (plugin WordPress pondu par Grok) : Citations
    Et j’ai créé l’outil graphique que je voulais faire depuis longtemps en 5 minutes : Plans perçés.

  • Pourquoi et comment utiliser X ?

    Pourquoi et comment utiliser X ?

    Pourquoi ?

    Sauf si vous vivez dans un igloo, ou volontairement coupé des informations, vous devez probablement savoir qu’@elonmusk a racheté la plateforme Twitter, qui est devenue X. Ce rachat a fait couler beaucoup d’encre (comme toutes les actions de Musk), notamment pour une raison assez simple. Dès le rachat, le projet a été replacé sous l’égide de ce qu’il aurait dû être et rester depuis le début : Liberté d’expression, et rigueur de l’information. Une plateforme pour partager et trouver des contenus de qualité, et la possibilité d’y réagir librement avec son avis, mais aussi pour souligner les fausses informations. Une plateforme communautaire plus forte grâce aux différentes contributions et points de vue, et à une visée commune : la défense de la liberté d’expression. Cela s’est traduit par des actions très concrètes : réorganisation importante de l’entreprise, rétablissement de comptes bannis, expulsion des agences gouvernementales de la plateforme, réorientation des « Community Notes », règles en Open-source, intégration progressive de Grok (l’IA de xAI), etc. etc. Pour toutes ces raisons, et bien d’autres, X est (re)devenue en 2024 une des premières plateformes / apps de consommation d’information au niveau mondial (après ou à côté des galaxies Meta – Facebook, Insta, etc -, Google et Tiktok). Au delà des audiences, cela a conduit X a être la plateforme la plus équilibrée en termes de fréquentations : pour les USA, autant d’utilisateurs Républicains que Démocrates.
    A mes yeux, le plus important est la volonté de Musk de défendre la liberté d’expression (refuser la censure, qu’elle soit gouvernementale ou idéologique), et les Community Notes dont les règles sont très bien faites et à mon sens acceptables par tous les vrais amoureux de la vérité. On a le droit de ne pas être d’accord, mais on peut essayer de se mettre d’accord pour parler des faits, et accepter la contradiction.

    Comment ?

    Si vous vous demandez comment utiliser X, je dirais qu’il y a deux choses à bien comprendre :

    • comme pour toutes les plateformes, il y a trop d’informations dessus pour un cerveau humain : il faut donc accepter que c’est un flux sur lequel on vient se connecter, pour y trouver ce que l’on cherche (pour être exhaustif sur un sujet, cela ne peut être qu’un des outils parmi d’autres
    • cela demande un petit temps d’apprentissage et de mise en place

    Ensuite, je dirais que la suite d’actions suivantes permet de commencer à utiliser X :

    1. Aller sur X, et se créer un compte
    2. chercher un ou deux médias ou influenceurs / intellectuels que l’on apprécie et s’abonner à leurs compte. Une fois cela fait, votre « fil » d’information montrera ce que ces comptes publient. N’hésitez pas à « liker », ou à commenter ces publications (posts), car cela aide l’iA à remplir la section « pour vous » de choses en lien avec vos sujets d’interactions.
    3. Gérer votre liste d’abonnements : quand vous suivrez de nouveaux comptes, votre flux peut devenir encombré, ou redondant. Il faut donc régulièrement aller repasser en revue ses abonnements et faire le tri.
    4. Tester l’usage de Grok : c’est une IA qui progresse très vite et qui a récemment intégré de la génération et reconnaissance d’images. On a donc avec Grok une sorte de ChatGPT+Midjourney au même endroit.
    5. Trouver votre propre manière d’utiliser X : à vous de voir si vous préférez suivre des organismes ou des personnes, si vous préférez les vidéos ou les articles. Si vous voulez contribuer aux Community Notes ou juste en profiter (pour ma part je trouve passionnant d’y contribuer), etc. etc.

    Et vous ?

    Et vous ? Utilisez-vous X régulièrement ? quel usage en faites-vous ? N’hésitez pas à le dire en commentaires, je suis preneur de discussions à ce sujet.