Toutes les réalisationsProduit personnel · application web

Mosaipix

Un studio de pixel art dans le navigateur : une photo, une idée ou un modèle deviennent une grille numérotée, à colorier à l’écran ou à imprimer.

PublicDes enfants, des parents et des enseignants, c’est-à-dire des gens qui n’ouvriront jamais un mode d’emploi.
Le vrai problèmeTransformer une image en pixel art est facile. La rendre coloriable, lisible et imprimable l’est beaucoup moins.
Ce que j’ai faitTout, du traitement d’image à la feuille imprimée.

Trois points de départ, une seule grille

On arrive rarement avec la même envie. Mosaipix propose donc trois entrées qui aboutissent au même objet : une photo à transformer, une idée à décrire en une phrase, ou l’un des vingt-quatre modèles prêts à colorier. Le reste de l’application ne sait plus d’où vient la grille, ce qui évite d’avoir trois éditeurs à maintenir.

Page d’accueil de Mosaipix : le titre « Transforme. Pixelise. Crée. » à gauche, une fusée en pixel art sur une grille 16 × 16 à droite.
L’accueil Un seul bouton, et deux promesses affichées sous lui : aucune photo envoyée, projet enregistré en local. Ouvrir en grand
Onglet « Un modèle » : vingt-quatre motifs classés par thème, chacun avec sa taille de grille et son nombre de couleurs.
Les modèles Chaque vignette annonce sa grille et son nombre de couleurs : on choisit sa difficulté avant de se lancer, pas après. Ouvrir en grand
L’éditeur : outils crayon et gomme à gauche, palette numérotée, pourcentage de progression, et la grille 16 × 16 dont chaque case porte le numéro de sa couleur.
L’éditeur Chaque case porte le numéro de sa couleur. C’est le principe du coloriage par numéro, transposé à l’écran. Ouvrir en grand

La photo ne quitte pas l’appareil

C’est la décision structurante du projet. Le public visé, ce sont des familles et des classes : les images qu’on y dépose sont des photos d’enfants. Toute la transformation — réduction de la grille, réduction du nombre de couleurs, numérotation des cases — se fait donc dans le navigateur. Rien ne part sur un serveur, et le projet en cours est enregistré sur l’appareil.

Une seule fonction sort de ce cadre : quand on décrit une idée en une phrase, cette phrase est envoyée pour générer une image. Le texte, donc, jamais une photo. L’application le dit à cet endroit-là, au moment où ça compte, plutôt que dans une page de confidentialité que personne n’ouvrira.

Le but, c’est le papier

Colorier à l’écran est agréable, mais l’usage réel finit souvent sur une table, avec des crayons. L’application exporte donc une grille vierge numérotée accompagnée de sa légende de couleurs, prête à imprimer. Et comme une classe n’a pas toujours de connexion, les modèles restent disponibles hors ligne.

Les réglages suivent la même logique : de 8 à 64 cases de côté, de 2 à 20 couleurs. Une grille de 64 cases en 20 couleurs occupe une soirée ; une grille de 8 cases en 3 couleurs occupe un enfant de cinq ans. C’est le même outil.

D’un prototype Python à une application

Mosaipix a commencé comme un script Streamlit : on chargeait une image, on réglait deux curseurs, on regardait le résultat. Ça marchait, et ça ne servait à personne — il fallait installer Python pour l’utiliser. La réécriture en application web a changé la nature du projet : aucune installation, aucun compte, et un lien qu’on peut envoyer à un instituteur.

Ce que ce projet démontre

Du traitement d’image côté client, une interface utilisable par un enfant, une sortie imprimable soignée, et une contrainte de confidentialité assumée dès la conception plutôt que rattrapée ensuite.

Technologies

Next.js, React et TypeScript, déployé sur Vercel. Application web installable et utilisable hors connexion, en français et en anglais.

Essayer Mosaipix Parler d’une application web