LogicSim

LogicSim es una pequeña web app en React que hice por pura diversión, para trastear con circuitos de lógica digital directamente en el navegador. La idea es sencilla: eliges componentes, los colocas en el tablero, los conectas con cables y ves al instante cómo se propagan las señales por el circuito (incluyendo cables que se “encienden” cuando están activos).

Por qué lo hice

Siempre me han gustado los circuitos lógicos (esa sensación tipo “LEGO” de combinar puertas simples para construir algo más grande), y quería una herramienta agradable de usar — no una suite EDA pesada, sino un sandbox rápido para experimentar.

Este proyecto no pretendía ser completo ni perfecto. Fue sobre todo un experimento para ver si podía crear un editor de circuitos que se sintiera fluido, visual y satisfactorio.

Qué puedes construir

La interfaz es un constructor de circuitos con drag-and-drop: seleccionas componentes desde una barra lateral y los sueltas en el tablero. Después conectas pines dibujando cables entre puntos de conexión, y puedes interactuar con las entradas (interruptores/botones) para probar el comportamiento en tiempo real.

Elementos disponibles (el “núcleo” en el que me centré):

• Puertas lógicas: AND & NOT
• Entradas: interruptor, pulsador, reloj
• Salidas: LED / bombilla, display de 7 segmentos

Render “SVG-first”

Una de las partes más divertidas fue el enfoque de renderizado: todo está dibujado con SVG personalizado — las puertas, los componentes e incluso los cables dinámicos. Al ser SVG, el zoom se mantiene nítido y el circuito puede verse muy limpio (y, sinceramente, esa era una gran motivación).

Algunos detalles de UI que me importaban:

• Los cables se “iluminan” visualmente cuando una señal está pasando por ellos.
• Zoom + pan para moverse por circuitos más grandes.
• Toggle de tema claro/oscuro.

Modelo de simulación (cómo funciona)

Por dentro, el circuito se trata básicamente como un grafo:

• Los componentes exponen pines de entrada/salida.
• Los cables conectan pines entre sí, formando “nets”.
• En cada tick (o interacción), se recalculan las salidas según las entradas actuales y se propagan los cambios por la red hasta que todo se estabiliza.

Para comportamiento secuencial, el componente de reloj genera una señal periódica (útil para circuitos dependientes del tiempo), y el display de 7 segmentos simplemente mapea los bits de entrada a los segmentos.

No es una simulación eléctrica “perfecta”: está más cerca de un evaluador práctico de lógica digital, enfocado en la interactividad y el feedback visual.

Demo en vivo

Puedes probarlo aquí: funciona completamente en el navegador.

Lo que aprendí

Este proyecto me enseñó bastante sobre los retos de construir editores interactivos y simulaciones, por ejemplo:

• Diseñar el estado de UI para un editor tipo “canvas” (selección, arrastre, hit-testing, rotaciones, etc.).
• Representar un circuito de forma que sea fácil de renderizar y también fácil de simular.
• Conseguir que SVG se sienta rápido y agradable en algo más complejo que iconos.

También me reforzó algo importante: las limitaciones ayudan. Manteniendo el alcance pequeño, pude centrarme en el acabado (especialmente en el cableado y los visuales) en vez de perderme en funcionalidades.

Qué se podría mejorar

Algunas cosas que añadiría si algún día lo retomara:

• Guardar/cargar circuitos (ahora mismo no hay persistencia).
• Puertas personalizadas / subcircuitos (componer circuitos como bloques reutilizables).
• Más componentes (contadores, biestables, más puertas lógicas, etc.).
• Mejor planificación de la simulación para circuitos grandes (el enfoque actual va bien para montajes pequeños/medianos).

Incluso con estas limitaciones, estoy contento con el resultado como “sandbox” interactivo: es justo el tipo de proyecto que me encanta explorar.