TP1re année14 livrablesQuiz corrigé
BrickGarden ton jardin en 3D
Tu as un inventaire JSON de tes briques. Aujourd'hui tu le fais pousser : un inventaire en 3D, un générateur de fleurs possibles, et un jardin que tu publies — sans écrire une ligne de code.
Par Josselyn C., prof de BTS SIO. Publié le , mis à jour le .
- On manipule
- claude.ai (gratuit, Artifacts) · ton inventaire JSON de la séance précédente
- À la fin
- un jardin 3D publié (avec son lien) + l'œil qui comprend « données → 3D »
- Pour qui
- SLAM et SISR, 1re année
- Durée
- environ 3 h
- Prérequis
- L'inventaire JSON de tes briques fait au TP « L'IA voit-elle vraiment ? » (sinon, un exemple est fourni).
Compétences : C1.6 Organiser son développement professionnel
Suite directe de « L'IA voit-elle vraiment ? ». Règle d'or : ce ne sont pas des photos magiques — ce sont tes données qui pilotent la 3D.
Le défi : faire pousser ton inventaire
La dernière fois, tu as transformé une photo de briques en un inventaire JSON propre (type, couleur, quantite). Aujourd'hui, on lui donne vie, en 3 paliers, toujours dans Claude Artifacts (le navigateur, sans coder) :
| Palier | Ce que tu construis | Niveau |
|---|---|---|
| 1 · Inventaire 3D | tes pièces affichées en vrai 3D, étiquetées, que tu fais tourner | prise en main |
| 2 · Générateur de fleurs | l'appli calcule quelles fleurs tu peux construire avec tes pièces, et les montre en 3D | le vrai défi |
| 3 · Le simulateur | tu ajustes ton stock (+/- de pièces), les fleurs possibles se recalculent en direct | planifier |
| 4 · L'optimiseur | l'appli trouve le meilleur bouquet possible avec tes pièces | décider |
| 5 · Le jardin 3D | tes fleurs plantées dans un jardin 3D que tu publies en un lien | le waoh final |
0. Récupère ton inventaire
Il te faut l'inventaire JSON de la séance précédente (ta liste de pièces vérifiée). Ouvre-le, garde-le sous la main : tu vas le coller dans chaque prompt.
Flag A1
Checkpoint
Note ton inventaire JSON et son total de pièces (additionne les quantite). Rends : ton JSON + le total.
Rappel express — Claude Artifacts
Quand tu demandes une page web, Claude construit une vraie page vivante à droite (l'Artifact). Trois repères :
| Onglet / bouton | À quoi ça sert |
|---|---|
| Aperçu | le rendu de ta page (ce que tu verras) |
| Code | ce que Claude a écrit (tu peux regarder, pas besoin de comprendre tout) |
| Publier | donne un lien public à partager |
Et l'historique des versions te permet de revenir en arrière si une modif casse tout. On s'en sert dès que ça coince.
Palier 1 — Ton inventaire en 3D
On commence par afficher tes pièces en 3D, proprement, pour prendre la main. Ouvre claude.ai et copie ce prompt (colle TON JSON à la fin) :
Crée une page web avec une scène 3D (Three.js) que je peux
prévisualiser. À partir de mon inventaire JSON, affiche mes
pièces en 3D :
- un petit groupe d'objets 3D par type de pièce (une forme
simple par pièce : cube, cylindre…),
- de la couleur indiquée dans le JSON,
- autant d'objets que la quantité (ex. 12 pétales = 12 formes),
- une étiquette avec le type et la quantité au-dessus de
chaque groupe.
Je dois pouvoir tourner la scène à la souris. Fond clair,
bonne lumière.
Voici mon inventaire :
[ colle ici ton JSON ]
→ une scène 3D apparaît à droite : tes pièces, groupées, en 3D. Fais-la tourner. Change une quantité dans ton JSON, redonne-le : le nombre de formes change !
Ajuste-la (dis-le, ça change)
| Tu demandes… | …et la scène change |
|---|---|
| « espace mieux les groupes, qu'ils ne se chevauchent pas » | c'est plus lisible |
| « ajoute un titre “Mon inventaire 3D” et le total de pièces » | un en-tête apparaît |
| « fais tourner doucement la scène toute seule » | ça devient vivant |
Explore ta scène
Rends-la lisible et vivante : demande « quand je clique sur un groupe de pièces, affiche son type et sa quantité dans un petit encadré », puis « ajoute une légende des couleurs en bas de l'écran ». Ton inventaire devient explorable, pas juste joli.
Flag A2
Checkpoint (données → 3D)
Dans ton JSON, change une quantité (ex. 12 pétales → 20), et redonne le JSON à Claude. Rends : une phrase sur ce qui a changé dans la scène — pour prouver que ce sont bien tes données qui pilotent la 3D.
Flag B1
Production
Rends : une capture de ton inventaire en 3D (on doit voir plusieurs groupes de pièces colorées). En une phrase : qu'est-ce qui, dans la scène, vient directement de ton JSON ?
Palier 2 — Le générateur de fleurs
Voici le vrai défi, et le plus bluffant : au lieu d'afficher les pièces en vrac, on va demander à l'appli quelles fleurs tu peux construire avec ce que tu as. C'est la même idée que l'appli des 2ᵉ années (« qu'est-ce que je peux monter ? »), version découverte.
Sur une nouvelle page (garde l'autre), copie ce prompt :
Crée une page web avec une scène 3D (Three.js) que je peux
prévisualiser : un générateur de fleurs.
Voici des recettes de fleurs (pièces nécessaires) :
- Tulipe : 4 petale, 1 tige, 1 feuille
- Marguerite : 8 petale, 1 tige, 2 feuille
- Pâquerette : 6 petale, 1 tige, 1 feuille, 1 centre
À partir de mon inventaire JSON, calcule pour chaque fleur
COMBIEN je peux en construire (le facteur limitant), et
affiche :
- un petit tableau "fleur → nombre possible",
- ces fleurs construites en 3D (pétales en cercle autour
d'un centre, tige verte, feuilles), avec les bonnes
couleurs, que je peux faire tourner.
Dis-moi aussi, pour la fleur que je peux faire le MOINS,
ce qu'il me manque pour en faire une de plus.
Mon inventaire :
[ colle ici ton JSON ]
→ tu obtiens un tableau « fleur → nombre possible » et tes fleurs en 3D. Change une quantité dans ton JSON : le nombre de fleurs possibles change sous tes yeux.
« Qu'est-ce qu'il me manque ? »
La partie la plus utile : pour la fleur que tu peux faire le moins, savoir ce qui te bloque. Demande à l'appli :
Pour chaque fleur, affiche aussi : si je veux en faire UNE
de plus, combien de pièces de chaque type il me manque.
Exemple attendu : "Tulipe : il te manque 2 petale rose".
Flag B2
Production
Rends : pour ta fleur la plus limitée, ce que l'appli dit qu'il te manque — et vérifie-le à la main (recette × quantité voulue − ton stock).
Flag D1
Investigation
Cherche l'appli Brickit (elle scanne un tas de Lego et propose quoi construire), ou un configurateur 3D d'un site de meubles ou de voitures. Rends : en 2 phrases, qu'est-ce qui est « données → 3D » là-dedans, comme dans ton appli ?
Flag E1
Extension (le cœur)
Ajoute une 4ᵉ recette de fleur de ton invention (choisis ses pièces) et fais-la calculer. Rends : ta recette + le tableau « fleur → nombre possible » obtenu + une vérification faite à la main.
Palier 3 — Le simulateur « et si… »
Un bon outil ne fait pas que constater : il aide à décider. On transforme le générateur en simulateur : tu ajustes ton stock, et les fleurs possibles se recalculent en direct.
Sur la page du générateur (Palier 2), enchaîne :
Ajoute des commandes pour modifier mon stock à la volée :
- pour chaque type de pièce, un bouton "+10" et un "-10",
- quand je change un stock, recalcule et réaffiche aussitôt
combien de fleurs de chaque type je peux faire (et mets
à jour la 3D),
- montre d'un coup d'œil les fleurs devenues possibles
grâce au changement.
→ clique « +10 pétales » : le nombre de fleurs possibles bondit sous tes yeux, le jardin se remplit. Tu peux planifier tes achats.
Flag B3
Production
En jouant avec les boutons, trouve le plus petit achat qui te permet de faire 1 fleur de plus de ta fleur la plus limitée. Rends : l'achat trouvé (ex. « +2 pétales roses ») et la fleur débloquée.
Palier 4 — L'optimiseur : le plus beau bouquet
Dernière marche de logique : au lieu de « combien de chaque fleur », on demande LA meilleure combinaison. Avec tes pièces, quel bouquet utilise le plus de pièces possible ?
Ajoute un bouton "Meilleur bouquet". Quand je clique :
- calcule la combinaison de fleurs qui utilise le PLUS de
mes pièces au total, sans jamais dépasser mon stock,
- affiche ce bouquet (la liste + en 3D),
- dis-moi combien de pièces de chaque type il me reste
après l'avoir construit.
Flag E4
Extension
Change tes recettes (ex. rends la tulipe plus gourmande) et reclique « Meilleur bouquet ». Rends : le bouquet optimal avant et après le changement, et pourquoi il a changé (1 phrase).
Palier 5 — Ton jardin en 3D
Dernière étape : on plante tes fleurs dans un vrai jardin 3D, et on publie. Sur la page du générateur, enchaîne :
Transforme ça en jardin 3D : pose les fleurs que je peux
construire sur un sol vert, réparties comme dans un jardin.
Ajoute un ciel clair, et je veux pouvoir me déplacer autour
à la souris. Mets un petit panneau avec le nom du jardin
et le nombre total de fleurs.
Compose ton jardin (dis-le, ça change)
| Tu demandes… | …et le jardin change |
|---|---|
| « range les fleurs en rangées bien alignées » | un jardin ordonné, façon pépinière |
| « ajoute un petit chemin de terre au milieu » | une allée apparaît |
| « mets un soleil et des ombres douces » | l'ambiance devient réaliste |
| « agrandis les fleurs les plus nombreuses » | on voit tout de suite tes stocks |
Publie ton jardin
Clique sur Publier → tu obtiens une URL. Ton inventaire de pièces est devenu un jardin 3D en ligne, partageable. Franchement : pas mal, pour « quelqu'un qui n'a pas codé ».
Flag E2
Le waoh final (à publier)
Publie ton jardin et récupère le lien. Puis ajoute une touche à toi : fleurs qui se balancent, couleurs qui changent au clic, un titre rigolo… Rends : le lien publié + une capture + une phrase sur ce que tu as ajouté.
Flag E3
Défi (compare avec un voisin)
Compare ton jardin avec celui d'un camarade : qui peut construire le plus de fleurs, et pourquoi (quel stock, quelles recettes) ? Rends : le constat en 2 phrases.
Défis bonus — pour aller plus loin
Tout fini ? Voilà de quoi pousser ton appli encore plus loin. Prends-en autant que tu veux — chacun se rend séparément.
Défi 1
Le prix du bouquet
Donne un prix à chaque type de pièce (ex. pétale 0,10 €, tige 0,30 €…). Fais calculer par l'appli le prix de chaque fleur et celui du meilleur bouquet. Rends : le prix de ton bouquet optimal.
Défi 2
La fleur rare
Ajoute une recette de fleur « rare » très gourmande (beaucoup de pétales). Combien peux-tu en faire ? Qu'est-ce qui te manque pour en faire une de plus ? Rends : le résultat + les pièces manquantes.
Défi 3
Le duel de jardins
Récupère le JSON d'un camarade et fais afficher deux jardins côte à côte, avec le total de fleurs de chacun. Rends : une capture du duel + qui « gagne » (le plus de fleurs).
Défi 4
Le jardin vivant
Demande que les fleurs poussent (animation : elles grandissent au chargement) et que le vent les fasse onduler. Rends : le lien publié de ton jardin animé.
Chapitre final — Tu as compris la chaîne
Récapitule le chemin d'aujourd'hui : d'une simple liste de nombres, tu as fait un inventaire 3D, un générateur de fleurs, puis un jardin publié. Sans écrire une ligne de code.
| Étape | Ce que tu sais faire |
|---|---|
| Inventaire 3D | demander à Claude une scène 3D pilotée par un JSON |
| Générateur | faire raisonner une appli sur tes données (recette ↔ stock → faisabilité) |
| Simulateur | rendre l'outil interactif pour planifier (« et si j'achète… ») |
| Optimiseur | faire décider l'appli : la meilleure combinaison sous contrainte |
| Jardin | composer et publier une scène 3D partageable |
| Esprit critique | vérifier les calculs de l'IA, revenir en arrière quand ça casse |
Mini-quiz (vérifie-toi)
Exercice Réussi À revoir
- La 3D que tu as faite, c'est un scan de ta vraie fleur ou une reconstruction à partir des données ? Explique.
- Une « recette » (nomenclature) de fleur, c'est quoi ?
- Tu as 20 pétales, 6 tiges, 10 feuilles. Une tulipe = 4 pétales + 1 tige + 1 feuille. Combien de tulipes ? Quelle pièce te limite ?
- À quoi sert le bouton Publier d'un Artifact ?
- Une modif casse ton appli : que fais-tu ?
Voir le corrigéMasquer le corrigé de l'exercice
1. Une reconstruction à partir des données : tes chiffres (JSON) pilotent la 3D. L'IA ne sait pas refaire ta vraie fleur exacte depuis une photo.
2. La liste des pièces nécessaires pour construire une fleur (ex. tulipe = 4 pétales + 1 tige + 1 feuille).
3. 20÷4=5, 6÷1=6, 10÷1=10 → 5 tulipes ; c'est le pétale qui limite.
4. À obtenir une URL publique pour partager ton appli.
5. Je reviens à la version précédente (historique) et je redemande une modif plus petite.
Tu avais trouvé ?
Tu es bloqué ? La checklist
| Symptôme | Essaie ça |
|---|---|
| Pas de scène 3D qui apparaît | ajoute « une page web que je peux prévisualiser, avec Three.js » |
| Écran noir | « ajoute une lumière, un fond clair, et centre la caméra » |
| Ça rame / plante | « limite le nombre d'objets (max 20 par type) » |
| Les calculs de fleurs semblent faux | donne la formule : « nombre possible = plus petit de (mes pièces ÷ pièces nécessaires), arrondi en bas » |
| Une modif a tout cassé | reviens à la version précédente (historique), redemande plus petit |
| Mon JSON est refusé | vérifie qu'il est valide (virgules, guillemets) — jsonlint.com |
Glossaire
| Mot | Définition |
|---|---|
| Artifact | une vraie page web vivante que Claude construit à droite du chat, modifiable et publiable |
| Three.js | la librairie qui permet d'afficher de la 3D dans une page web (Claude l'utilise pour toi) |
| Procédural | généré automatiquement à partir de règles/données (ici : la 3D construite depuis ton JSON) |
| Recette / nomenclature | la liste des pièces nécessaires pour construire quelque chose |
| Faisabilité | « combien puis-je en construire ? » : le plus petit rapport (stock ÷ besoin) |
| Facteur limitant | la pièce qui t'empêche d'en faire plus (celle qui manque en premier) |
| Publier | obtenir un lien public pour partager ton appli |