L’IDE web de turtleSpaces, c’est l’environnement Logo complet de turtleSpaces, directement dans votre navigateur. Écrivez du code en blocs ou en texte, exécutez-le aussitôt et regardez vos tortues dessiner en 3D juste à côté. Rien à installer, et aucun compte n’est nécessaire pour commencer.
L’organisation de l’écran
L’écran est partagé en deux :
- À gauche se trouvent l’en-tête du projet et une rangée d’onglets : Blocks (blocs), Text (texte), Help (aide), History (historique), Printer (imprimante) et Debug (débogage). Une fois connecté, un septième onglet, Claude, ouvre un assistant IA.
- À droite se trouve la vue 3D où dessinent vos tortues, avec la console en dessous et les commandes d’exécution tout en bas.
La barre de menus occupe le haut de l’écran.
Les panneaux
Blocks (blocs)
Construisez des programmes en faisant glisser des blocs depuis la palette de gauche. Les blocs sont classés par catégorie (mouvement et pose, crayon et couleur, conditions et contrôle, procédures, déclencheurs, etc.) et la palette peut être filtrée par recherche. Les listes déroulantes au-dessus du canevas choisissent la tortue et la procédure en cours d’édition, et le bouton ▶ l’exécute. Les modifications faites en blocs s’appliquent immédiatement.
Blocs et texte sont deux vues d’un même programme : ce que vous construisez en blocs peut s’ouvrir en texte, et inversement.
Text (texte)
Un éditeur de code avec coloration syntaxique, indentation automatique et complétion. La liste déroulante à côté des onglets choisit ce que vous modifiez : Full Workspace affiche toutes les tortues et procédures, ou vous pouvez choisir une seule procédure.
Les modifications faites dans l’éditeur de texte s’appliquent quand vous appuyez sur Update. Revert annule vos modifications depuis le dernier Update. Pour ne pas avoir à appuyer sur Update à chaque fois, activez Settings › Auto Update, qui applique vos modifications dès que l’éditeur perd le focus.
Sous l’éditeur se trouvent Save, Open, Publish, Fork et Share (voir Enregistrer et partager).
Help (aide)
La référence des commandes intégrée. Cherchez une primitive, ou parcourez-les par catégorie et insérez-les dans votre code. D’autres onglets couvrent les couleurs, la caméra, l’interface, la syntaxe Logo et les messages d’erreur. Le même contenu se trouve sur ce site, dans la Référence.
History (historique)
La liste des commandes que vous avez tapées dans la console. Cliquez sur une ligne pour la remettre à l’invite, prête à être modifiée ou relancée.
Printer (imprimante)
turtleSpaces dispose d’une imprimante virtuelle. Ce que votre programme y imprime s’affiche ici, où vous pouvez l’enregistrer, l’imprimer ou l’effacer. Elle s’active et se désactive dans Settings › Printer.
Debug (débogage)
Montre ce que fait votre programme pendant son exécution : Errors (erreurs), Containers (vos variables), States (la position, le crayon, etc. de chaque tortue) et Loops (les boucles en cours).
La console
La console sous la vue 3D fonctionne comme un interpréteur Logo classique : tapez une commande, appuyez sur Entrée et elle s’exécute aussitôt. L’invite indique à quelle tortue vous vous adressez, et le texte affiché par votre programme apparaît aussi ici.
Les commandes d’exécution
La barre en bas de l’écran pilote votre programme :
- Backtrack annule le dernier pas de la tortue.
- La liste des procédures et Run lancent une procédure (Run vous demande ses entrées si elle en a besoin). La liste Inline à côté choisit son mode d’exécution.
- Pause suspend le programme et Continue le reprend.
- Le bouton en forme d’œil surligne chaque ligne de code pendant qu’elle s’exécute, pour suivre le déroulement.
- Stop arrête le programme.
- Reset remet les tortues à leur point de départ ; appuyez deux fois de suite pour tout réinitialiser.
Le bouton drapeau, en haut à droite, lance la procédure drapeau de votre projet, comme le drapeau vert de Scratch.
Si un programme rencontre une erreur alors que vous êtes connecté, Shelly la tortue apparaît et propose que Claude vous explique ce qui s’est passé, soit l’erreur en général, soit à partir de votre code. La réponse s’affiche dans le panneau Claude.
Les menus
- File : créer un projet à partir d’un modèle, ouvrir un de vos projets enregistrés, parcourir les projets publiés ou les modèles 3D, et enregistrer. Les sous-menus Upload et Download importent des projets, images, sons, modèles et données, et exportent votre travail en image PNG, en modèle STL pour l’impression 3D, en vidéo MP4 ou GIF animé, ou en enregistrement WebGL rejouable. Share As transforme votre projet en modèle consultable ou en page jouable.
- Editor : rechercher, taille de police, indentation, ranger l’espace de travail et faire passer du code entre l’éditeur et la console.
- Turtle : retour à l’origine, effacer l’écran, revenir en arrière ou réinitialiser, et changer le modèle et la taille de la tortue.
- Settings : thème clair ou sombre, langue, police de la console, son, imprimante, Auto Update, complétion de code et Live Coding.
- View : déplacer la caméra, orbite automatique, format d’image, affichage des axes et plein écran.
- Examples : ouvre le navigateur d’exemples.
- Help : relance la visite guidée de Shelly et renvoie vers la visite, la référence, les livres, les tutoriels et la communauté sur ce site.
- Feedback : envoyez-nous un message depuis l’application.
L’IDE web est disponible en English, 日本語, Français, Español et Polski ; changez de langue dans Settings.
À droite de la barre de menus se trouve le menu utilisateur : créez un compte ou connectez-vous, puis ouvrez votre profil et vos groupes ou déconnectez-vous. Le bouton ◥ à côté passe en plein écran.
L’en-tête du projet
Au-dessus des panneaux, vous pouvez saisir le titre du projet. À côté, by indique qui l’a créé (rempli automatiquement). Au-dessus de la vue 3D se trouve une description d’une ligne, modifiable.
Enregistrer et partager
- Save enregistre votre projet dans votre compte turtleSpaces (il faut être connecté) ; Open charge un de vos projets enregistrés.
- Fork enregistre une copie du projet actuel comme nouveau projet à vous.
- Publish rend public un projet enregistré, pour que d’autres le trouvent dans la galerie des projets publiés. Vous pouvez l’étiqueter par type, difficulté et catégorie, puis le mettre à jour ou le dépublier plus tard.
- Share crée un lien vers un modèle 3D consultable ou une version jouable de votre projet.
Les galeries
Deux galeries s’ouvrent en plein écran dans l’IDE web :
- Projets publiés : les projets partagés par la communauté. Play en lance un ; Remix ouvre votre propre copie dans l’IDE pour la modifier.
- Exemples : des programmes d’exemple à filtrer par type, difficulté et catégorie.
Déplacer la caméra
Dans la vue 3D :
- Glisser avec le bouton gauche fait tourner la caméra autour de la scène.
- Glisser avec le bouton droit vers le haut ou le bas rapproche ou éloigne la caméra ; vers la gauche ou la droite, la fait pivoter.
- La molette zoome et dézoome.
- Glisser avec le bouton du milieu, ou avec les deux boutons, déplace la vue.
Avec une souris à un bouton ou un pavé tactile, Ctrl+clic remplace le clic droit. View › Camera Controls en donne un rappel.
Sous le capot
L’IDE web fait tourner le même moteur Logo que la version de bureau de turtleSpaces, écrit en Go et compilé en WebAssembly. L’interface est construite avec React, Radix UI et CodeMirror 6, et le dessin est fait en WebGL dans un worker en arrière-plan, pour que la page reste réactive pendant que vos tortues travaillent.
Le premier téléchargement du moteur est volumineux. Ensuite, votre navigateur en garde une copie : les visites suivantes démarrent bien plus vite, et un téléchargement interrompu reprend là où il s’était arrêté.