Code informatique

3D & Shaders : découvrir le vertex shader 🎮✨ Comment la carte graphique dessine-t-elle un carré, un cube, un monde entier ? Avec des shaders , de petits programmes qui tournent directement sur le GPU. Niveau : 12 → 18 ans (curieux de maths / 3D) Ressource prof : pipeline graphique, coordonnées, animations 1) Qu’est-ce qu’un shader ? Un shader est un mini-programme exécuté par la carte graphique (GPU). Il sert à transformer des données brutes (positions, couleurs, normales…) en pixels affichés à l’écran. Les deux plus importants : Vertex shader : s’occupe des sommets (points) des formes 3D/2D. Fragment shader : s’occupe de la couleur de chaque pixel . Dans cette activité, on se concentre surtout sur le vertex shader : on va lui demander de dessiner, modifier et animer un rectangle. 2) Terrain de jeu : Vertex Shader Art ...

Jeu de casse-briques en JavaScript 🎮 Construis pas à pas ton propre Breakout avec JavaScript, en suivant le tutoriel MDN… tout en faisant des exercices et variantes dignes d’un vrai game dev. Public : 10 → 18 ans Ressource prof : progression complète + exercices guidés Activité 1 – Tutoriel officiel MDN On s’appuie sur le tutoriel « casse-briques » de MDN (Mozilla), une référence pour apprendre JavaScript en codant un vrai jeu : 🔗 Activité 1 : Jeu de casse-briques en JavaScript (MDN) MDN Web Docs Le but de cette fiche est de transformer ce tutoriel en un parcours pédagogique complet : exercices guidés, mini-défis, questions pour vérifier la compréhension, et idées d’extensions. I. Introduction à jsFiddle Pour expérimenter rapidement sans créer de fichiers sur ton ordinateur, on va utiliser jsFiddle , un bac à sabl...

    Activité 1: Javascript, jeu de casse briques I. Introduction à jsfiddle https://jsfiddle.net/ II. Programmation par étapes du jeu de casse-briques Les différentes étapes peuvent se faire sur jsfiddle, pour chacune des petits jeux/exercices permettent de vous assurer d'avoir bien compris le code. ETAPE 1 : création du canvas et son affichage https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it a- Création de la page HTML et de l'objet canvas exercice  : Changer le titre de la page html par un titre que vous choisissez exercice :  Changer le code pour obtecir un objet canvas de 400 pixels x 400 pixels b- Code javascript, création des variable pour manipuler l'objet canvas: exercice :  simplifiez en une ligne l'expression : var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); c- Dessin sur le canvas : rectangle, cercle, remplissage: exercice :  créer 1...

Créer ton premier serveur web en Python 🌐🐍 Tu vas apprendre à lancer un vrai serveur web sur ton ordinateur, avec Python, et à y accéder depuis ton navigateur via http://localhost:8888/ . Public : 11 → 18 ans Ressource prof : client/serveur + réseau local 0. Avant de commencer : c’est quoi un serveur web ? Quand tu tapes une adresse dans ton navigateur (par ex. https://www.example.com ), ton ordinateur envoie une demande à un autre ordinateur : le serveur . Ce serveur renvoie des fichiers (HTML, images, CSS, JS…) que ton navigateur affiche. Client : ton navigateur (Chrome, Firefox…). Serveur : un programme qui attend les demandes et renvoie des réponses. Protocole : le “langage” de communication. Ici : HTTP . Dans cette activité, ton propre ordinateur sera à la fois client et serveur. L’adresse spéciale localhost signifie “moi-même / mon ordinateur”. ...

Python – Set, Dictionnaire, Liste, Tuple Quatre “boîtes magiques” pour ranger des données : parfait pour débutants (10–18 ans) et rappel express pour les pros. SET (ensemble) 1. Set : un sac d’objets sans doublons Un set (ensemble) contient des valeurs uniques , dans n’importe quel ordre . C’est pratique pour savoir si une valeur est présente, ou pour supprimer les doublons. Exemple de base myset = {"apple", "banana", "cherry"} Propriétés importantes : Pas d’index : on ne fait pas myset[0] . Pas de doublons : {"apple", "apple"} devient juste {"apple"} . Très rapide pour tester : "banana" in myset . Opérations utiles fruits = {"apple", "banana", "cherry"} # Ajouter un élément fruits.add("orange") # Supprimer un élément (erreur si absent) fruits.remove("banana...

Test d’entrée Scratch – Niveau Seconde 💡 Questionnaires à choix multiples pour évaluer la compréhension de programmes Scratch (lecture de scripts, variables, boucles, conditions…) 🧑‍🎓 Pour l’élève Ce test te permet de vérifier ce que tu sais déjà sur Scratch. Lis bien chaque programme avant de répondre. Pour chaque question, coche une seule réponse (A, B, C ou D). Fais de ton mieux, ce n’est pas noté comme un contrôle classique, c’est un diagnostic. 🧑‍🏫 Pour l’enseignant Chaque question cible une compétence : évènements, séquences, conditions, répétitions, variables, entrées utilisateur, etc. Vous pouvez insérer vos propres captures de scripts Scratch dans les encadrés prévus. Barème suggéré : 1 point par question, 10 points au total. Utilisable en début de 2 de , mais aussi fin de cycle 4 ou en remédiation. Question 1 – Évènement clavier Compé...

Connexion entre 2 ordinateurs avec Python et les sockets Objectif : comprendre comment deux ordinateurs peuvent “se parler” sur un réseau grâce à Python 🐍 et au module socket . Niveau recommandé : 2nde NSI / début L1 – mais adaptable 6ᵉ → Terminale 🧑‍🎓 Pour les élèves À la fin de cette activité, tu sauras : ce qu’est une adresse IP et un port , la différence entre un serveur et un client , comment écrire un petit serveur en Python, comment un autre ordinateur peut s’y connecter et envoyer un message. On peut tester : sur 2 ordinateurs du même réseau (idéal), ou sur un seul ordinateur , en ouvrant 2 fenêtres de terminal (mode “simulation”). 🧑‍🏫 Pour les enseignants Notions travaillées : modèle client–serveur, IP, port, socket TCP, flux d’octets, encodage UTF-8, côté bloquant de accept() / recv(...