LogicSim

LogicSim est une petite web app React que j'ai développée pour le fun, afin de jouer avec des circuits logiques numériques directement dans le navigateur. Le concept est simple : choisir des composants, les placer sur la grille, les relier avec des fils, puis voir instantanément les signaux se propager dans le circuit (avec des fils qui s'illuminent quand ils sont “alimentés”).

Pourquoi je l'ai créé

J'ai toujours adoré les circuits logiques (ce côté “LEGO”, où l'on combine des portes simples pour construire quelque chose de plus grand), et je voulais un outil agréable à utiliser — pas une suite lourde, plutôt un bac à sable rapide.

Ce projet n'avait pas vocation à être complet ni parfait. C'était surtout une expérience : est-ce que je pouvais créer un éditeur de circuits fluide, visuel, et satisfaisant à manipuler ?

Ce que vous pouvez construire

L'interface est un éditeur de circuits en glisser-déposer : on choisit des composants depuis une barre latérale, puis on les dépose sur le board. Ensuite, on relie les broches en traçant des fils entre les points de connexion, et on peut interagir avec les entrées (interrupteurs/boutons) pour tester le comportement en temps réel.

Éléments disponibles (la base sur laquelle je me suis concentré) :

• Portes logiques : AND & NOT
• Entrées : interrupteur, bouton poussoir, clock
• Sorties : LED / ampoule, afficheur 7 segments

Un rendu “SVG-first”

L'un des aspects les plus fun du projet, c'était l'approche de rendu : tout est dessiné en SVG sur mesure — les portes, les composants, et même les fils dynamiques. Et comme c'est du SVG, le zoom reste net, et on peut obtenir des circuits vraiment propres visuellement (et clairement, c'était une grosse motivation).

Quelques détails d'UI auxquels je tenais :

• Les fils “s'allument” visuellement lorsqu'un signal les traverse.
• Zoom + déplacement (pan) pour naviguer dans de plus grands circuits.
• Bascule thème clair / sombre.

Modèle de simulation (comment ça marche)

Sous le capot, le circuit est essentiellement traité comme un graphe :

• Les composants exposent des broches d'entrée/sortie.
• Les fils connectent les broches entre elles et forment des réseaux.
• À chaque tick (ou interaction), les sorties sont recalculées à partir des entrées, puis les mises à jour se propagent dans le réseau jusqu'à stabilisation.

Pour les comportements séquentiels, le composant clock génère un signal périodique (pratique pour des circuits dépendants du timing), et l'afficheur 7 segments se contente de convertir les bits d'entrée en segments allumés.

Ce n'est pas une simulation électrique “parfaite” : c'est plutôt un évaluateur logique pragmatique, pensé pour l'interactivité et le feedback visuel.

Démo en ligne

Vous pouvez l'essayer ici : tout tourne directement dans le navigateur.

Ce que j'ai appris

Ce projet m'a beaucoup appris sur les défis liés aux éditeurs interactifs et aux simulations, notamment :

• Concevoir l'état de l'UI d'un éditeur “type canvas” (sélection, déplacement, hit-testing, rotations, etc.).
• Représenter un circuit d'une manière à la fois simple à afficher et simple à simuler.
• Faire en sorte que le SVG reste fluide et agréable à utiliser pour autre chose que de simples icônes.

Ça m'a aussi rappelé un point important : les contraintes, c'est utile. En gardant un périmètre réduit, j'ai pu me concentrer sur la finition (surtout le câblage et le rendu) plutôt que de partir dans trop de fonctionnalités.

Ce qui pourrait être amélioré

Quelques pistes que j'ajouterais si je le relançais :

• Sauvegarde/chargement des circuits (aujourd'hui, rien n'est persistant).
• Portes personnalisées / sous-circuits (composer des circuits en blocs réutilisables).
• Plus de composants (compteurs, bascules, d'autres portes logiques, etc.).
• Un meilleur ordonnancement de simulation pour les gros circuits (l'approche actuelle est très bien pour des montages petits/moyens).

Malgré ces limites, je suis content de ce projet comme “bac à sable interactif” : c'est typiquement le genre de truc que j'adore explorer.