hasnainroopawalla / circuit-sim

Digital logic gate simulator using React, TypeScript and p5.js

Circuit Sim

Live Demo

A digital circuit simulator build using React, TypeScript and P5.js.

Data-latch circuit

Save circuit

Import chip

Features

• Sandbox environment for digital chips
• Save the current circuit as a custom chip
• Import chips using blueprint strings. Example:
  • blueprint string for the NAND custom chip

    {"main":{"inputs":[{"id":"chip.input.0"},{"id":"chip.input.1"}],"outputs":[{"id":"chip.output.2"}],"chips":[{"id":"chip.AND.3","name":"AND"},{"id":"chip.NOT.4","name":"NOT"}],"wires":[["chip.input.0/output.0","chip.AND.3/input.0"],["chip.input.1/output.0","chip.AND.3/input.1"],["chip.AND.3/output.0","chip.NOT.4/input.0"],["chip.NOT.4/output.0","chip.output.2/input.0"]]}}
    

Contributing

• Post any issues or suggestions on the GitHub issues page.
• To contribute, fork the project and then create a pull request back to master.

License

This project is licensed under the MIT License - see the LICENSE file for details.

circuit-sim's Issues

Import/export custom chip

Use blueprint string

Edit/view custom chip

Sharp edge when repositioning IOChip with connected wire

Logger service

Delete entity

Double/right click on an entity to delete it

Define project theme

• Primary/secondary colors
• Styles etc.

Custom chips within a custom chip

Debug mode toggle

• Render chip, wire and pin IDs

Wire waypoints for neater circuits

Color generator service

A service that generates colors for the chips

Create custom chip

Dialog box to input custom chip name and color

Help button

Add a ? help icon that provides a basic tutorial to use the simulator

Hover functionality

• Ghost of input/output chip on hover
• Show pin names on hover