Explications techniques

Pièces mécaniques

La partie mécanique du DrawBot s'organise autour de deux bras articulés mis en mouvement par deux moteurs, d'un support feuille A4 et d'un porte-stylo. Chaque sous-ensemble a été modélisé sous Onshape, imprimé en 3D pour les pièces structurelles, et découpé à l'imprimante laser pour les planches et le support feuille.

Poulies, bras et courroies

Les poulies fournies avec le kit se sont rapidement révélées insuffisantes pour transmettre proprement le mouvement. Nous avons donc redessiné un système avec roulements et des poulies de plus grand diamètre. Le vrai défi a été le dimensionnement précis du logement des roulements, pour bloquer la bague intérieure (qui joue le rôle d'axe) sans écraser les mauvaises bagues. Pour ça, une rondelle conique sur-élève la poulie et applique la pression au bon endroit, et un anneau intermédiaire comble le vide entre les deux roulements.

Les bras finaux sont au nombre de trois (un fixe en bas, deux mobiles au-dessus). La poulie est solidarisée au bras mobile, l'axe est vissé par-dessous sur le bras fixe. Une ouverture de 19 mm garantit l'appui sur les bonnes bagues, et les fixations du support moteur sont intégrées directement au bras pour éviter une pièce supplémentaire. La courroie, de type ouvert, est refermée par de petites bagues de jonction imprimées, assez compactes pour passer librement dans le mécanisme.

Supports moteurs et planches

Les deux moteurs sont placés sur le même axe vertical pour éviter tout déséquilibre. Deux supports moteurs différents ont été nécessaires : le premier avec la partie tournante vers le bas (pour le bras du haut), le second avec la partie tournante vers le haut, parce que le bras du bas ne pouvait pas tourner avec le premier modèle. Les planches qui forment les bras ont demandé de nombreux prototypes, le temps de stabiliser l'emplacement exact des pièces imprimées et des fixations.

Porte-stylo

Le porte-stylo a évolué d'un simple coulissement 3D à un mécanisme à vis lisses actionné par un servomoteur via un système de levier (inspiré d'un projet de l'année précédente). Le support du stylo est resté réglable pour accepter n'importe quel modèle. Un clip d'épaisseur adaptée fixe l'ensemble sur la planche.

Support feuille, angles, clapet et charnières

Le support feuille A4 (21 × 29,7 cm) est découpé au laser, avec des trous positionnés par atelier de pièce en contexte pour s'aligner sur la base de la machine. Quatre angles en L imprimés en 3D, avec inserts vissés par le dessous, définissent l'emplacement de la feuille sans vis apparentes. Un clapet vient s'encastrer dans ces angles pour plaquer la feuille et éviter qu'elle ne se plisse sous la friction du stylo. Deux charnières en deux parties (3 colonnes d'un côté, 2 de l'autre) traversées par une longue vis font office de pivot entre le support et le clapet.

Chaîne logicielle et firmware

La chaîne logicielle transforme une image en mouvements moteur. Elle suit toujours la même séquence : image → SVG → GCODE → liaison série → FluidNC → moteurs. Plusieurs outils ont été testés avant de stabiliser l'interface finale.

De l'image au GCODE

La première version utilisait Inkscape pour vectoriser une image en SVG, puis Processing pour relire ce SVG, échantillonner les points le long du tracé et produire un fichier GCODE (coordonnées des points + commandes lever / descendre le stylo). Cette chaîne fonctionnait mais restait peu pratique.

Nous sommes ensuite passés à une interface web maison, écrite en HTML / CSS / JavaScript, basée sur p5.js (équivalent de Processing en JS) et imagetracer.js (équivalent d'Inkscape). Tout se fait dans le navigateur : import d'une image, conversion en SVG avec réglages (seuil de luminosité, détection de contour, inversion, niveau de détail, lissage), génération du GCODE, et envoi en série vers la carte.

Fonctions de l'interface

• Charger une image et la convertir en SVG selon plusieurs critères de tracé.
• Construire un fichier GCODE à partir du SVG, ou rejouer un GCODE existant.
• Communiquer en série avec la carte, ligne par ligne, pour piloter les déplacements.
• Régler les paramètres moteurs (taille des bras, type de moteurs, format du papier).
• Un simulateur affiche en direct ce que la machine est censée tracer, utile pour anticiper le rendu et le temps de production.

Firmware ESP32

Côté carte, l'ESP32 fait tourner FluidNC, un firmware open-source qui lit la configuration machine dans un config.yaml puis interprète le GCODE reçu pour piloter les moteurs pas-à-pas. Cette couche évite de réécrire un contrôleur de mouvement complet : on se concentre sur la génération du GCODE et le réglage des axes.

Assemblage et fabrication

Le montage assemble dans l'ordre les planches découpées au laser, les pièces imprimées en 3D, les deux moteurs et leurs supports, les bras articulés avec poulies à roulements, la courroie refermée par les bagues de jonction, le porte-stylo à vis lisses et son servomoteur, puis le support feuille avec ses angles, son clapet et ses charnières. La carte électronique et le bouton d'arrêt d'urgence sont fixés sur leur support dédié.

Une part importante du travail a été itérative : les premiers prototypes de bras et de support moteur ont permis de fixer les bonnes cotes (logement de roulement, ouverture 19 mm, position des fixations) avant d'arriver à la version finale. La même logique a été appliquée au porte-stylo et aux pièces de maintien de la machine, pour stabiliser l'ensemble malgré le poids déporté côté stylo.

Vidéo d'assemblage de la machine.

Site web et documentation

Le site sert de support de documentation pour tout le projet : présenter la machine, expliquer le workflow image → tracé, et regrouper les livrables techniques (pièces, électronique, fiche technique, vidéos). Il a été pensé clair, sobre et lisible plutôt que démonstratif.

Stack technique

• HTML5 sémantique — une page par grande section (accueil, électronique, fiche technique, équipe, explications).
• CSS3 modulaire — un fichier par page (style-index.css, style-pcb.css, style-fiche.css, style-equipe.css), un fichier global de tokens (base.css) et un fichier de corrections finales (style-final.css).
• JavaScript vanilla — un seul fichier script.js pour la navigation mobile, l'apparition au scroll (IntersectionObserver) et la lightbox d'images.
• Typographie Lora pour les titres, DM Sans pour le corps, DM Mono pour le code, chargées via Google Fonts.

Démarche

L'identité visuelle est volontairement sombre, rouge / noir, pour donner un ton industriel cohérent avec un projet d'ingénierie. Chaque page reprend les mêmes composants : barre de navigation fixe, en-tête avec fil d'Ariane, sections numérotées, grilles responsives et pied de page commun. Le site est responsive dès le départ (mobile, tablette, écran large) avec des points de rupture à 768 px, 1100 px et 1350 px. Les images s'agrandissent dans une lightbox, et les vidéos utilisent la balise <video> native.

Au-delà du code, l'intégration a consisté à rassembler tous les contenus produits par l'équipe — photos de pièces, vidéos d'assemblage et de dessin, captures Onshape, schémas KiCad, descriptions techniques — et à assurer la cohérence du dossier (textes, structure, hiérarchie) jusqu'à la mise en ligne.