3eme séquence - Jeu vidéo en JavaScript, accessible en ligne

Le projet de cette séquence est la réalisation d’un jeu vidéo en JavaScript, accessible en ligne.

La construction des équipes suit une nouvelle formule où nous réalisons des groupes homogènes (en niveau d’autonomie).

Les objectifs pédagogiques sont :

  • découverte de la programmation dans le navigateur
  • aborder un nouveau langage
  • développement front-end versus back-end
  • déployer
  • peut-être css et html

Les équipes

@laurine et @Nydragon : un jeu Jump & run, un jeu style Mario.

@Florian et @Adriel : un-clicker, c’est un jeu où il faut cliquer, beaucoup cliquer.

@Wara, @lyd.sanaa, @Zakia, @B3RRY et @mfayal : Catch Ball, un jeu où vous devez attraper des balles (ou des fruits ?)

On a parlé de Markdown

Quelques ressources :

Un site de documentation pour HTML, CSS, et JavaScript

Pour l’inspiration https://github.com/reruns/mario

Le code de l’inspiration https://github.com/reruns/mario est plein de prototype. Un article pour comprendre prototype : https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b

Et un outil qui vérifie que les contrastes sont assez élevé pour l’accessibilité contrastchecker

petite mise à jour

@laurine, @Nydragon @mohamed : un jeu Jump & run , un jeu style Mario.

@Florian, @Adriel et Gwenaelle : un-clicker , c’est un jeu où il faut cliquer, beaucoup cliquer.

@Wara, @lyd.sanaa, @Zakia, @B3RRY et @mfayal : Catch Ball , un jeu où vous devez attraper des balles (ou des fruits ?)

Journal du jeudi 14 novembre

catch-ball (Lydia - Wara - Zakia - Fayal - Marine)

Ce qu’on a fait

  • On a créé un « paddle » qui se déplace en fonction des touches pressées.
  • On a créé une condition if (canvas.height == y) { y = 0 } pour que la balle remonte à chaque fois qu’elle atteint le bas de l’écran.

Ce qu’on veut faire

  • Plus de balles
  • Descente aléatoire des balles
  • Le score
  • Aspect graphique plus poussé (arrière-plan, images, etc).

Fayal

  • Raccourcir le code en omettant le else après le if.
  • Rajouter des commandes dans le ~/.vimrc

Lydia

  • J’ai compris comment écrire une fonction et l’appeler dans draw().
  • De quelle manière déclarer une variable globale qui sera ensuite rappelé dans la fonction.
  • Je ne sais pas si je peux dire que j’ai « appris », mais j’ai « compris ».
  • J’ai été plus à l’aise avec les commandes liées à git.

Wara

  • J’ai approfondis mon exploration de git.
  • J’ai utilisé des « pipes » pour éviter des else if.
  • J’ai compris la situation a == b || a == c.

un-clicker (Gwénaëlle, Florian, Adriel)

Ce qu’on a fait

  • On a commencé à créer notre « anti » idle game.
  • On a créé le méchant capitaliste à abattre.
  • On a utilisé les méthodes innerHTML et innerText pour afficher bien les éléments.

Ce qu’on veut faire

  • Plus de fonctionnalités, de gestion à faire
  • Créer des nouveaux boutons qui imposent des choix et pouvoir attaquer plus fort le capitale.
  • Mieux gérer l’interaction entre les différentes parties du code.
  • Je veux faire du code propre (sans TDD pour l’instant).
  • On veut rajouter des évènements aléatoires (ex le capitaliste réagissent aux joueurs. Que l’état renflouent les banques, qu’il délocalisent et bénéficie, etc).

Florian

  • C’est un peu dur à dire
  • Toujours plus loin dans js en découvrant de nouvelles méthodes et les testant.
  • innerText, toute la gestion du eventHandler
  • Utilisation des classes et de ses caractéristiques
  • Tout ce qui est lié à la création d’éléments HTML via JS (appendChild, lui spécifier une id, etc).
  • J’ai avancé dans Vim, j’ai appris le raccourci A qui insère à la fin de la ligne. Plus pratique que le $a.
  • J’ai plus l’impression d’avoir pratiqué et besoin d’une nuit de sommeil pour identifier ce que j’ai appris.

Gwénaëlle

  • J’ai appris comment fonctionnait javascript
  • J’ai appris à quoi servi les mots-réservés <div> et let
  • J’ai appris à quoi servait le CSS. À mettre plein de jolis couleurs partout. À faire que ce soit pas moche.
  • J’ai appris qu’on pouvait utiliser des box
  • J’ai appris que pour javascript, les point-virgules ne sont pas obligatoires.

Adriel

  • J’ai appris que les classes en JS ne sont pas si horribles que ça.
  • J’ai réalisé à quel point le Ruby est un langage « beau ».
  • J’en suis au stade où j’ai une connaissance suffisante pour avoir une idée de comment ce que je veux faire, et en sachant où chercher comment faire mieux. (MDN, devdocs, etc).
  • j’ai appris que les marshmallows ça se mange (plusieurs fois)
  • J’ai appris l’existence de :active en CSS que Flo a utilisé au calme pour faire l’animation sur le monopoly.
  • J’ai appris que c’était galère de faire une game loop en JS.
  • J’ai appris et compris LVM pour chiffrer et mieux organiser mes disques physiques.

Jump&Run (Nico, Laurine, Mohamed)

Ce qu’on a fait

  • On a implémenté le casse-brique de mozilla avant de se lancer dans le dinosaure.
  • On a intégré un background, des images, et de la musique
  • On a commencé le dinosaure. Il saute, les obstacles avancent.
  • On a récupéré des sprites pour le personnage (des images animés qui peuvent donner des coups d’épée…)

Ce qu’on veut faire

  • intégrer les sprites récupérés
  • Plus d’obstacles
  • Un background un peu mieux que le fond noir.

Laurine

  • J’ai appris à intégrer des images et de la musique en javascript
  • J’ai vu comment bouger une image.
  • Le déplacement de gauche à droite avec le petit rectangle rose.

Mohamed

  • J’ai appris comment fonctionne le javascript - HTML - CSS
  • J’ai appris un truc sympa : faire appel à un script depuis le fichier HTML pour réduire sa taille.
  • J’ai appris comment manipuler un objet (canvas, images, des fonctions…)
  • comment créer le paddle dans le cas du casse-brique,
  • intégrer le clavier, les déplacements…
1 J'aime

Après rotation,

Catch Ball

Repris par @laurine, @Nydragon et @Mohamed

Pong

Projet bonus réalisé par le groupe @laurine, @Nydragon et @Mohamed est repris dans un répot à pars par l’équipe @Wara, @lyd.sanaa, @B3RRY, @Zakia et @mfayal (?)

JumpN Run

Repris par @Adriel, @Gwenaelle et @Florian

Le projet Un-clicker semble attirer moins de monde. Le projet reste cependant accessible si certaines personnes souhaite le reprendre.

1 J'aime

Ce matin, nous avons fait un Kata FizzBuzz en plénière avec @B3RRY au clavier.

  • Le site du coding dojo original. On y retrouve des ressources et des infos http://codingdojo.org/
  • Projet Euler, un tas de petit exercices intéressant à programmer. Il y a le fizzbuzz comme premier exercice. https://projecteuler.net/

Pour réaliser les tests dans le navigateur, nous avons utiliser Jasmine.

@Wara nous partage un site pour avoir les keyCode avec js

Ce matin, on a parlé

  • SSH, et donc, sans le savoir vraiment OpenSSH
  • Abordé le modèle OSI
  • discuté rapidement de RGPD en se disant que @kheops serait le meilleur interlocuteur pour approfondir

Le Règlement Général de la Protection des Données

  • Discussion en pleinière ce matin avec @kheops sur le RGPD et des questions autour de la vie privée.

La commission européenne

  • La commission européenne est un peu l’équivalent du gouvernement en France.
    Ils ne sont pas élus.

  • C’est la seule instance qui peut proposer des lois.

  • Une démocratie très très très indirect.

  • On a une navette avec le parlement jusqu’à l’adoption d’un texte.

  • Il y a deux types de texte :

    1. Le règlement qui est appliqué immédiatement dans tous les pays.
    2. La directive qui doit être appliqué et respectée par les lois de chacun des
      pays.

RGPD ?

  • Les GAFAM (Google, Apple, Facebook, Amazon, Microsoft), les cinq plus grosses
    sociétés américaines faisant de la collecte massive de données.

  • Le RGPD concerne toutes les entreprises partout dans le monde dès l’instant où
    elle collecte des données sur des citoyens européens.

  • Certains sites web ne sont plus accessibles depuis le RGPD car ils ont bloqué
    l’accès à leurs sites de peur de ne pas pouvoir l’appliquer. C’est un argument
    « bidon » car les anciennes données collectées sont aussi concernées par le
    RGPD.

  • Le RGPD nous permet de :

    1. Demander à l’entreprise de nous envoyer dans un format lisible les données
      qu’elle collecte sur nous.
    2. Le droit de refuser toute collecte de donnée non-nécessaire au
      fonctionnement du site.
    3. Le droit d’effacement des données collectées.
    4. Sans le consentement explicite de l’utilisatrice, les services ne peuvent
      pas collecter autre chose que les données strictement nécessaires au
      fonctionnement du site.
    5. Savoir dans un langage compréhensible et lisible les noms et les effets des
      différentes données collectées et outils de collectage.
  • Le droit à l’oubli (n’est pas du fait de la RGPD). Il garantit la
    possibilité à un particulier d’être déréfencé des moteurs de recherches à la
    demande. C’est intéressant car ça donne un autre pouvoir aux moteurs de
    recherches.

  • Le RGPD définit la notion de « consentement explicite ». Ç’a été un gros gros
    débat lors de la rédaction du texte entre ceux qui voulait la présence du mot
    « explicite » ou non.

  • Toutes ses cases à cocher sur tout les sites qui permet de savoir qui traque
    quoi rend la lecture du site incompréhensible, mais permet aussi d’avoir une
    meilleure vision de l’ampleur du phénomène.

  • Des individus peuvent se regrouper ensemble pour faire des actions en justice
    contre une entreprise. C’est un moyen de donner du contre pouvoir contre les
    entreprises qui peuvent se payer les meilleures avocats. Par exemple, la
    quadrature du net a lance une action de groupe contre Facebook le jour de la
    sortie du RGPD.

  • Il existe une collecte des données de l’ordre de l’intérêt légitime.

  • La problématique des google forms qui vont collecter des données concernant
    des petites structures. Désormais, il est possible et prévu par la loi de
    refuser ce type de collecte de donnée.

  • Le RGPD s’applique aussi aux relations employés-employeurs. On n’a pas le
    droit de refuser une offre si on ne donne pas ses données personnelles à son
    employeur, exactement au même titre que dans la relation d’une utilisatrice à
    un service en ligne.

On est pisté

  • Autrefois, on lisait le journal. Désormais, c’est le journal qui nous lit.
    Ça pose la question des traqueurs, mouchards, et autres pisteurs en ligne.

  • Les méthodes de pistage sont nombreuses :

    • Les contacts,
    • L’agenda,
    • « OK Google », Siri,
    • Le GPS,
    • etc
  • Potentiellement n’importe quelle application peut utiliser des mouchards (ou
    pisteurs) de régies publicitaires qui finalement collecteront et vendront
    probablement les données récupérés par l’application de, par exemple, la SNCF.
    Potentiellement, derrière chaque application, il y a dix-quinze-vingt autres
    entreprises qui reçoivent les données en plus.

  • Il peut même arriver que des développeuses intègrent malgré elles des pisteurs
    dans leurs codes (e.g l’application mobile Qwant), et c’est la
    responsabilité de la développeuse ne pas inclure des bouts de code qui
    potentiellement utilisent des mouchards.

  • Le vol, c’est soustraire quelque chose à quelqu’un, sémantiquement le
    téléchargement illégale n’est donc pas du vol (c’est une copie d’un fichier
    d’origine, pas une modification).

  • En analysant les données, on est capable de savoir si une personne est
    enceinte ou non avant même la personne concernée. Un peu comme le docteur qui
    est capable de faire un diagnostic sur la maladie que tu as, les algos peuvent
    déduire certaines choses à une certaine probabilités en analysant et
    corrélant les données sur une personne et ses relations.

Critique du RGPD

  • Quelque part, toutes ses précautions prises par la RGPD rendent légitimes la
    collecte de données.

  • L’objectif de la RGPD peut aussi être économique, en favorisant l’exploitation
    des données par les sociétés plus européennes et en contraignant les boîtes
    américaines.

  • Selon certaines personnes, la mesure la plus efficace serait d’interdire
    purement et simplement tout usage commercial des données collectées.

  • On entend aussi parfois que la RGPD a le défaut de ne pas être facilement
    applicable aujourd’hui par les petites assos qui n’ont pas les moyens
    logistiques de la mettre en place correctement.

  • Parfois, la meilleure façon de ne pas s’embêter avec la collecte de données,
    c’est sûrement de ne rien collecter du tout.

Références

  • Référence très complète sur comment appliquer le RGPD en entreprise :
    gdprexplained

  • Alternative aux google forms maintenues par l’association Framasoft :
    framaform

  • L’association Framasoft : https://framasoft.org/fr/

  • Un film documentaire sur la collecte de données sur une instance peertube :
    « Nothing to hide »
    Je vous le recommande chaudement.

  • Un projet qui recense les mouchards utilisées par les app Android :
    Exodus privacy

  • Tant qu’on est sur Android, un store d’application opensources alternatif :
    F-Droid

  • Le guide d’autodéfense numérique : https://guide.boum.org/

  • Le site de la quadrature du net : https://lqdn.org/fr

2 J'aimes

Intervenant extérieur : Maxime Coutte

Prise de parole de Maxime

Trois grandes leçons que j’ai apprises et dont j’ai envie de parler, puis ça vous permettra de poser des questions.

L’idée d’apprendre à apprendre. On passe beaucoup de temps de notre vie à apprendre mais peu de temps à améliorer le processus d’apprentissage. Il faudrait apprendre à mieux utiliser le temps d’apprentissage.

Barbara Oakley, Learning how to learn, à trouver sur Coursera. Je recommande aussi Masterclass et EDX.

J’ai commencé à utiliser l’outil informatique en apprenant Excel, en résolvant un problème mathématique dedans. Le problèm se complexifiant, impossible de le résoudre avec Excel.

Je suis passé à Python pour résoundre le problème plus complexe… C’est comme ça que j’ai appris à coder, un peu par hasard.

J’ai fait un cours optionnel de robotique dans un collège de campagne, on était 20 la première semaine, 3 la seconde… Étonnamment, on ne se connaissait pas avant alors que c’était la campagne. On a beaucoup joué avec des capteurs électroniques (qui captent la luminosité, l’humidité…). Le robot en fait c’est un mini-ordinateur, avec un petit processeur, un peu de mémoire…

Le problème c’est qu’il fallait souvent changer le matériel, le faire évoluer, dès qu’on voulait faire évoluer les fonctionnalités. Pour aider je leur ai écrit un firmware et c’est comme ça que j’ai vraiment commencé à coder, car je l’ai écrit en C et j’ai dû faire vraiment attention à ce que je faisais. C’est un projet qui m’a pris environ un an.

Ensuite au lycée, j’aimais beaucoup l’anime Sword Art Online. C’est très bien mais la deuxième saison est un peu moins bien, mais c’est mieux sur la troisième. Il y a des choses intéressantes sur l’intelligence artificielle dans cet anime.

Avec cette série je me suis pris de cœur pour la réalité virtuelle. Je n’avais pas d’argent pour m’acheter un casque de RV alors j’ai décidé de m’en construire un. Facebook venait de racheter Occulus, ils étaient content de posséder la marque et ne voulaient pas partager la conception du casque.

Dans ce processus, j’ai appris une leçon qui vient d’Artistote, c’est qu’il faut toujours repartir des idées les plus simples (les plus atomiques) dont on est absolument sûre. Pour un casque de RV, les besoins les plus basiques que j’ai identifiés étaient :

  • on doit calculer les mouvements dans l’espace
  • il faut faire passer cette information du casque à l’ordinateur
  • il faut se servir de cette information sur l’ordinateur pour faire le rendu du jeu vidéo, adapter les mouvements etc.

Ensuite il a fallu s’atteler à résoudre ces trois problèmes de base. Pour détecter le mouvement dans l’espace j’ai utilisé un capteur de type accéléromètre. Il faut réussir à convertir des données d’accélération issues du capteur et en déduire une position dans l’espace, et ce n’est pas si simple. Un accéléromètre ne permet pas de détecter la vitesse, car on ne ressent pas une vitesse mais une accélération : la preuve la Terre se déplace très rapidement dans l’Espace mais on ne ressent rien.

Avoir uniquement les informations d’accélération engendre trop d’incertitudes pour calculer une position, donc il fallait des informations supplémentaires. J’ai ajouté un autre capteur, un magnétomètre, qui permet de connaitre l’orientation d’un objet en se basant sur le champ mangnétique terrestre. Ça fait déjà des informations en plus. Il y a d’autres capteurs possibles, par exemple en mettant des diodes sur le casque et des capteurs sur l’écran d’ordinateur. Aucune de ces méthodes n’est entièrement précise donc c’est mieux de les combiner pour avoir davantage de précision. En plus de tout ça, comme on peut stocker les données des capteurs dans le temps, ça fait une information en plus pour savoir où est le joueur. Au total, on a des probabilités grâce à chaque capteur qui nous permet d’être relativement sûr une fois combinées.

Ça fait appel au concept des filtres de Kalman (n’utilisez pas ça pour la bourse) qui sont un outil théorique très puissant pour gérer les probabilités.

Il ne faut pas faire d’erreur avec les casques de RV, car si on fait une erreur, l’image dans le casque ne correspond pas du tout aux sens de la personne et cela fait vomir l’utilisatrice. D’ailleurs, l’oreille interne est une forme d’accéléromètre. S’il y a un problème avec le casque, l’oreille interne et les yeux, par exemple, fournissent des informations contradictoires au cerveau qui pense qu’on a ingéré une substance nocive et déclenche le vomissement.

J’ai utilisé une leçon de Barbara Oakley quand je travaillais sur le casque. La différence entre le mode focalisé et le mode diffus dans le cerveau humain. Lorsqu’on apprend quelque chose, les neurones se connectent entre eux, ça crée des chemins, et plus on maitrise un sujet plus les chemins neuronaux sur ce sujet sont dense.

En mode focalisé le cerveau reserrer son champ de recherche et le cerveau va rehcercher toutes les combinaisons neuronales qui correspondent au problème qu’on étudie.

En mode diffus, le cerveau va se balader un peu plus au hasard et aller chercher des patterns qui n’ont rien à voir… Par exemple on rêvasse devant un problème de math et on pense à jouer à League of Legend. Ça explique pourquoi tant de gens disent qu’iels ont eu une idée sous la douche, en marchant, etc. En mode diffus, le cerveau établit d’autres connexions neuronales entre des choses a priori différentes. C’est important pour les problèmes qui demandent de la créativité.

C’est pour ça qu’on dit parfois « quand tu n’arries pas à répondre à cette question, passe à la suivante ». C’est pour ça que des fois une idée de solution nous arrive « un peu par magie », car lorsqu’on était focalisé sur quelque chose, le cerveau était aussi un peu en mode diffus sur l’autre question.

Exemple du peintre Salvavor Dali… La peintre a une dimension à la fois hyper créative mais aussi incroyablement technique. Il avait l’habitude de travailler dans siège à bascule avec des clés à la main, ce qui le faisait s’assoupir et passer en mode diffus, et d’avoir des idées, d’être créatif. Lorsqu’il s’endormait vraiment les clés tombaient, il se réveillait et passait en mode focalisé pour se mettre à peindre.

C’est une approche que j’utilise tout le temps pour résoudre mes problèmes (passer d’un mode à l’autre).

Il y a eu une étude sur la procrastination à ce propos. Ils ont suivi pendant 10 ans des gens en sortie du lycée et ont suivi leurs résultats et leur niveau de procrastination. Globalement les moins procrastineurs avaient les meilleurs résultats.

Par contre, chez le top des meilleurs (parmis les bons), il y avait énormément de procrastination. Lorsqu’un devoir était donné, ces étudiants lisaient rapidement le papier, puis le laissait tomber pendant deux mois et s’y remettaient 3 ou 4 jours avant le rendu. Sans trop savoir pourquoi, en s’y mettant, ils avaient plein d’intuitions et d’idées : c’était le résultat du cerveau en mode diffus qui avait travaillé dessus pendant ces deux mois.

Marine dit que ce n’est pas facile d’avoir un niveau de procrastination comme ça lorsqu’on travaille en équipe.

Si on est en équipe, on décompose d’abord les aspects fondamentaux du problème (comme l’exemple du casque de RV). Et on étudie un peu ensemble ces aspects.

Exemple des perturbations électromagnétiques sur les microprocesseurs dans les fusées. La NASA a dépensé des millions de dollars pour fabriquer un bouclier anti-radiations pour protéger les composants.

Chez SpaceX, qui a eu le même problème, une personne est arrivée avec une méthode plus simple : on met trois processeurs non protégés en parallèle car la probabilité que les trois se trompent en même temps est extrêmement faible.

Le soucis venait du fait que le problème était mal identifié : on se focalisait sur le faire d’avoir des boucliers résistants plutôt que sur le fait d’avoir des calculs fiables dans l’espace.

Déconstruire les boîtes noires est quelques chose qui m’a été très utile. En regardant les choses composant par composant pour le casque de RV, j’ai trouvé des technologies à bas coût et conçu un casque coûtant environ 100€, alors que Occulus était vendu autour de 1000€.

J’ai écrit un plugin pour Unity qui permettait de convertir un jeu non compatible RV en jeu compatible RV en quelques minutes, alors qu’à la base rendre un jeu comptabile RV prenait beaucoup de temps humain.

J’ai voulu créer une boite pour ce casque et suis allé dans la Silicon Valley. Je me suis finalement rendu compte que je n’avais pas envie de passer les 10 prochaines années de ma vie dans des usines en Chine à régler les soucis de logistique. Du coup j’ai publié en open source le code que j’ai écrit et les plans, et j’en ai créé une communauté, et maintenant il y a plus d’un millier de personnes qui ont construit un casque.

J’ai été assez chanceux pour que la communauté se crée. À la base j’ai juste mis mon code sur Github, publié quelques articles qui n’ont pas eu beaucoup de succès, mais une personne a vu un de mes articles, et en a écrit un qui a eu beaucoup de succès, ce qui a commencé à amener les gens.

Maintenant la communauté vit par elle-même, je ne m’occupe plus de rien, il y a un comité qui s’occupe du casque. Une grosse mise à jour est à venir, j’y ai beaucoup participé, mais c’est la dernière fois que j’interviens sur ce projet.

Si on réfléchit un peu, c’était quoi les moyens d’avoir plein de gens qui nous suivent, dans le passé ? Soit avoir une armée, soit avoir beaucoup d’argent pour lever une armée.

L’idée du levier (leverage), c’est qu’un effort donné permet d’obtenir davantage que la quantité d’effort fournie. Dans le passé, il fallait surtout diriger un État (il suffisait de dire « demain j’interdis ça » et sans effort on avait un impact énorme).

Exemple de Facebook et de Google : en 2006, Facebook avait davantage de vues avec 50 salariés que Google n’en avait avec 4000 salariés.

La dernière chose que je veux donc dire c’est qu’aujourd’hui en sachant coder on peut avoir un leverage énorme.

Questions et échanges

Flo : concernant l’idée d’appendre à apprendre et de la procrastination, l’étude citée donne l’impression du lucky few plutôt que de choses qui peuvent vraiment toutes nous aider.

Max : il s’agit en fait des petites habitudes que ces personnes-là avaient prises et qui changent tout. À titre personnel, moi-même j’ai pu expérimenter que les résultats sont très différents en fonction de mes pratiques. Exemple de copains qui ont fait le cours de Barbara Oakley, qui se plaignaient d’avoir une très mauvaise mémoire, mais qui après le cours ont en fait trouvé une façon d’apprendre qui correspond à leur mémoire (en l’occurrence la méthode du palace mental, ou palais de la mémoire, qui ne fonctionne pas sur moi par contre).

Marine : c’est lié au fait de bien se connaitre ; accepter de ne pas savoir quelque chose, de ne pas comprendre des choses.

Marine : c’est quoi qui t’attire le plus dans un langage ?

Max : y’a un truc presonnel des fois qui te peut te pousser à chercher le langage un peu original, pour te différencier des autres, avec différents concepts compliqué comme le « polymorphisme ». Passer ce côté de définition sociale, on peut aussi simplement choisir un langage qui nous parait le plus approprié suivant le problème qu’on a : des fois il y a simplement des contraintes qui nous forcent presque à utiliser un langage (par exemple, les bibliothèques uniquement disponibles en C) ; à part ça je pense que c’est bien de comprendre les choses correctement en bas niveau, et savoir un peu utiliser un langage bas niveau permet cela ; ceci dit, on peut construire beaucoup de choses sans avoir besoin de savoir des notions de bas niveau.

Marine : tu continues à t’intéresser à la RV ?

Max : là c’est la dernière fois que je fais du hardware, pour la dernière mise à jour du casque. Après je ne veux plus en entendre parler. Après, le domaine de la RV m’intéresse mois maintenant, les meilleurs du domaine c’est Facebook maintenant. Côté logiciel, je ne participe plus depuis longtemps au domaine. Mais je continue à suivre le domaine de loin. Je m’intéresse davantage aux mondes virtuels, comme Second Life désormais. L’idée d’avoir des jeux où les joueurs créent du contenu. Je pense que c’est l’avenir du jeu vidéo. Je joue un peu autrement, mais pas énormémnt (quelques heures par semaine).

Nicolas : que penses-tu de la création artistique dans la RV ?

Max : beaucoup de gens vont se découvrir une passion pour la 3D, mais les logiciels sont difficiles à prendre en main. En RV, c’est beaucoup plus facile, car tu sculptes directement à la main en portant ton casque. Ça va créer beaucoup de liberté artisitique pour les studios 3D. La RV est pour le moment moins précis que des logiciels 3D, mais permet plus de création artistique.

Marine : tu as dit que les jeux vidéos ne partent jamais de rien. De quoi ils partent et d’où vient ce quoi ?

Max : tout ça part d’un truc fondamental : dans un jeu vidéo, il y a beaucoup de données et beaucoup de calcul à faire (alors qu’en informatique en général c’est soit l’un soit l’autre). Les données sont les assets 3D, et le calcul c’est le rendu 3D. Deux grandes façon de faire du rendu en 3D. La première c’est la rasterization, la seconde le ray tracing. Pour une carte graphique, un objet 3D c’est juste des coordonnées de points. Les données comportent une liste de points, de comment les relier (quels triangles), et les textures (quelle apparence sur la forme). On ne peut pas avoir une infinité de triangles car ça prendrait trop de place. La carte graphique fonctionne avec des espaces : l’espace objet et l’espace monde. Pour passer de l’un à l’autre il y a des calculs très compliqués (par exemple il faut multiplier les dimensions des objets en fonction de leur taille voulue dans le monde, il faut aussi traduire les objets 3D en coloration des pixels en 2D sur un écran), qu’il faut réaliser au moins 60 fois par seconde. Dans un jeu vidéo il faut travailler à la fois avec le microprocesseur (par exemple s’il y a une IA) et la carte graphique. La carte graphique fournit des fonctions boîtes noires qu’on doit utiliser (par exemple OpenGL). C’est comme ça qu’on crée un moteur de rendu. Ensuite il faut aussi gérer l’animation, le timing, le réseau, et c’est pour ça qu’on crée des game engine comme Unity ou Unreal. Quand on crée un jeu en général on se base dessus. Créer un moteur est un métier très différent que celui de créer le jeu vidéo. Les moteurs sont souvent en C++ pour que ce soit performant, et pour que les couches au-dessus puissent aussi être écrites en C++ et s’interfacer facilement avec le moteur tout en étant rapides. On pourrait imaginer des moteurs en Rust dans un futur proche.

Marine : est-ce que ça poserait des problèmes de code de faire un jeu où les joueurs peuvent modifier le jeu en jouant ?

Max : les règles d’un jeu sont explicitement écrites dns le code. Par contre on a déjà des jeux où dans la boucle principale (main loop) où on vient chercher des règles créees par les joueurs, ce qui permet aux joueurs de modifier le jeu sans que le code soit modifié. Personnellement j’aimerais créer un jeu où la game engine soit plus liée au jeu pour qu’en jouant on puisse venir la modifier.

Nicolas : c’est un peu le principe des modders.

Max : on utilise des fonctions de type bruit de Perlin (Perlin noise) pour prendre des données aléatoires tout en garantissant une certaine continuité, par exemple pour générer un terrain assez cohérent. Unity utilise ça, et ça devient procédural pour créer un terrain, plutôt qu’un terrain codé directement.

Nicolas : Microsoft va sortir un jeu où la planète Terre est entièrement modélisée et on va pouvoir la survoler comme avec Flight Simulator, comment ça fonctionne ?

Max : ils ont la chance d’avoir l’énorme base de données de Google Maps pour avoir une vague forme de la Terre. Ensuite ils viennent peut-être extrapoler pour déterminer ce qui est une maison, un immeuble, puis lisser la texture, avec du Perlin noise. Anecdote : Ikéa utilise du Perlin noise pour peindre certains meubles couleur et texture bois.

Marine : quelles sont les personnes qui t’ont le plus aidé dans les moments down ?

Max : mon ami passionné de robotique du collège ; mon prof de maths ; Oussama de The Family avec qui on a passé beaucoup de temps ensemble ; Mathias qui est un directeur à The Family. Ce qui est parfois pas facile c’est de finir correctement une tâche un peu pénible avant de passer à la suivante qui est bien plus enthousiasmante. Discuter avec ces personnes des fois a été utile pour me rappeler de mon propre intérêt pour le domaine et me redonner du courage ; voir l’enthousiasme des autres pour mes réalisations.

Nicolas : tu connais Goethe, l’écrivan allemand ? Est-ce qu’il y a des personnes dans le jeu vidéo aussi qui ont eu des rôles spécifiques et connus, des personnalités importantes avec un rôle crucial ?

Max : John Carmack par exemple qui a créé Wolfenstein. Il y en a aussi plein d’autres ; c’est vrai que comme dans tous les domaines il y a quelques personnes qui ont eu un impact démesuré sur le domaine. Alan Turing dans la cryptographie aussi par exemple. Une des premières personnes à avoir fait des algorithmes était une femme. Je ne connais pas de nom de femme spécifiquemet car malheureusement c’est une industrie qui est encore très sexiste.

Flo et Marine : il y a eu une expo « Computer Girls » à la gaïté lyrique qui montrant qu’il y avait eu beaucoup de femmes dqiu on eu un rôle important dans le domaine.

Marine : n’as-tu pas l’impression d’être réduit à la caricature du mec geek quand tu interviens dans des écoles ? Est-ce que ça a pu de desservir ?

Max : ça fait partie du jeu et ça ne me dérange pas, je suis un peu ma propre caricature, ça fait partie du message que je fais passer. Une fois j’étais avec une investisseuse, elle m’a mal parlé, c’était peut-être lié à ça. Je n’ai pas envie de travailler avec quelqu’un qui s’arrête à une caricature de quelqu’un.

Marine : ça rappelle la discussion sur l’analyse des personnes par des algorithmes…

Max : ça va être la discipline la plus dure pour ça, mais il faut vraiment éviter de se comparer aux autres, car on compare notre intérieur (avec nos défaut) avec l’extérieur des autres (avec les défauts cachés). Il faut aussi se rappeler que des gens réussissent avec ou sans études dans ce domaine, et chacun·e essaie un peu de se mettre en avant avec ce qu’elle ou il a fait. Peut-être que vous aurez besoin de rentrer dans ce rôle dans votre vie, de personne très confiante. Il faut quand même savoir en même temps que tout le monde dans ce domaine en rajoute un peu. Dans mon cas ça crée même une pression sociale qui me pousse à apprendre, en créant des attentes chez les autres.

2 J'aimes

Journalisation du jeudi 21 novembre

Catch-ball (Nicolas, Laurine, Mohamed)

Ce qu’on a fait

  • On peut bouger le paddle en bas avec les touches gauche et droite.
  • On a ajouté un compteur qui limite la durée de la partie dans le temps.
  • Il faut rattraper le plus de balles possibles avant la fin du compteur.
  • On a une fonction qui permet de changer le nombre de balles.

Nicolas

  • J’ai appris qu’on peut utiliser des variables sans this. dans le constructeur d’un objet et qu’on peut accéder dans tout l’objet les variables avec this..
  • J’ai appris à utiliser une boucle for en mettant les balles dans un array au lieu de nommer toutes les balles dans des variables (ball1, ball…, ballN).
  • J’ai appris à départager le code js dans différents fichiers.

Mohamed

  • J’ai vu le fait que (je ne sais pas si c’est l’ensemble JS CSS HTML) que le programme fonctionnait de manière asynchrone. J’avais un bug qui empêchait le timer d’aller au bout, et j’ai compris ce qu’il se passait.
  • J’ai appris que le bug était causé par la fonction alert qui modifiait le comportement du temps dans le programme.

Laurine

  • Programmation synchrone et asynchrone
  • Le fait qu’il y ait des versions d’objets. Pour les utiliser, on peut utiliser des prototypes et la méthode .bind. Je ne sais plus précisément comment on s’en sert, mais je peux le retrouver dans les versions du code…
  • J’ai appris l’existence de la méthode qui s’appelle innerHTML .

Pong (Lydia, Wara, Fayal, Marine, Zakia)

Ce qu’on a fait

  • Que le jeu démarre quand on appuie sur la touche espace au lieu du chargement de la pause.
  • On a découvert un bug causé par un ; qui permettait d’appuyer sur n’importe quelle touche pour démarrer le jeu. Maintenant ça marche.
  • On a aussi un bug qui faisait partir la balle vers la gauche hors de l’écran, et qui la faisait revenir plus tard. C’était causé par l’usage du signe == pour la détection des collisions, au lieu de < en prenant en compte le rayon de la balle.
  • On a mis une balise style pour mettre le canvas au milieu de l’écran.

Ce qu’on a envie de faire

  • Remplacer la balle par la tête de Trump. On n’a pas encore eu le temps.
  • La faire tourner (la tête de Trump) ?
  • Séparer le code dans différents fichiers.

Wara

  • Je n’ai pas encore bien compris le style pour centrer le canvas qu’on a repompé sur un tuto.

Lydia

  • Je ne sais pas encore repéré un bug, mais j’ai appris comment décortiquer le bug lorsqu’on me l’a montré pour tenter de le résoudre.

Fayal

  • Je n’ai rien à ajouter parce que c’était les mêmes lignes que le code d’avant, j’ai juste découvert comment centrer le canvas et mettre pause ou play avec la touche espace.

Marine (Lydia par procuration)

  • Elle est plus à l’aise avec git.
  • Globalement, elle se sentait plus à l’aise avec la programmation.

JumpN-run (Flo, Gwénaëlle, Adriel)

Ce qu’on a fait

  • On a fait un petit moteur physique pour éviter de coder pour chaque élément comment on veut qu’il comporte et qu’il bouge. On peut appliquer des forces sur des objets avec le même code.
  • Ça facilite l’évolutivité du code, la cohérence, la lisibilité, et puis surtout c’est cool.
  • Un pikachu animé !
  • Une œuvre numérique en parallèle (Florian) !

Ce qu’on a envie de faire

  • Rajouter un logo pour l’affichage de l’onglet.
  • Réellement mettre le jeu dedans, avec le moteur physique.
  • Gérer les collisions.
  • Ajouter un fond avec des étoiles

Florian

  • J’ai appris à faire des « Sliders » avec de l’HTML et modifier son style en CSS.
  • J’ai appris à appeler une fonction dans setInterval avec des paramètres. Je n’ai pas encore parfaitement compris ce qu’il se passait. J’appelle une fonction anonyme qui appelle ma fonction draw2 avec des paramètres.
  • J’ai appris que setInterval set un intervalle. Si j’en set un deuxième, bah j’en créé un deuxième. D’où la fonction clearInterval.
  • J’ai appris beaucoup de choses ce matin avec Max. Sur la façon d’envisager les trucs, philos, etc. Voilà.

Adriel

  • J’ai appris avec KheOps la façon dont l’héritage en js fonctionne (et mieux compris ce que c’était en général).
  • J’ai appris des trucs de la syntaxe de js (déclarer une classe sans utiliser le mot-clef class, construire un objet (avec new OBJET)).
  • J’ai constaté que la méthode Date.now() n’est pas à utiliser n’importe quand (par exemple pour gérer l’animation du pokémon, ça donnait un effet de lag). J’ai une compréhension plus ou moins intuitive de comment ça fonctionne.
  • J’ai découvert que l’idée de collier de perle (cf. Yannick) se retrouve dans plusieurs langages.