HTML5 Circuit Simulator

This electronic circuit simulator is highly interactive giving the feeling of playing with real components. It’s very helpful for experimentation and visualization. Best of all, thanks to the power of HTML5, no plug-ins are required! The original implementation, in Java, belongs to Paul Falstad who kindly gave his permission for me to build this port.

HTML5 Circuit Simulator

How to use this

When the simulator starts up you will see an animated schematic of a simple LRC circuit. The green colour indicates positive voltage. The grey colour indicates ground. A red colour indicates negative voltage. The moving yellow dots indicate current.

To turn a switch on or off, just click on it. If you move the mouse over any component of the circuit, you will see a short description of that component and its current state in the lower right corner of the window. To modify a component, move the mouse over it, click the right mouse button (or control-click if you have a Mac) and select “Edit”. You can also access the edit function by double-clicking on a component.

There are three graphs at the bottom of the window; these act like oscilloscopes, each one showing the voltage and current across a particular component. Voltage is shown in green, and current is shown in yellow. The current may not be visible if the voltage graph is on top of it. The peak value of the voltage in the scope window is also shown. Move the mouse over one of the scope views, and the component it is graphing will be highlighted. To modify or remove a scope, click the right mouse button over it and choose “remove” from the menu. There are also many other scope options in this context menu. To view a component in the scope, click the right mouse button over the component and select “View in Scope”.

The “Circuits” menu contains a lot of sample circuits for you to try.

Some circuits, eg Basics->Potentiometer, contain potentiometers or variable voltage sources. These can be adjusted using sliders that are added to the right hand tool bar, or by positioning the mouse pointer over the component and using the scroll wheel.

Here’s a video to help you get started.

Read more: HTML5 Circuit Simulator


About The Author

Ibrar Ayyub

I am an experienced technical writer holding a Master's degree in computer science from BZU Multan, Pakistan University. With a background spanning various industries, particularly in home automation and engineering, I have honed my skills in crafting clear and concise content. Proficient in leveraging infographics and diagrams, I strive to simplify complex concepts for readers. My strength lies in thorough research and presenting information in a structured and logical format.

Follow Us:
LinkedinTwitter

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top