This wonderful crazy world is full of charged particles and electric fields. Seeing them is believing them!

What it does

You can specify a maximum of five particles and their charges (in the range of -10 to 10 coulombs) as well as their x, y coordinates in a 2D plane, with the origin (0,0) being in the centre of the generated image and (10,10) and (-10,-10) defining the top right and bottom left corners respectively. You can also generate a random set of five particles instead of submitting particular charge locations and magnitudes.

A generated image illustrates three quantities: the charge position as a scatter plot with red markers representing their locations, the equipotential levels as a contour plot with a color scheme from strongly negative (purple) to strongly positive (yellow), and field lines as a stream plot with vectors emitted from positive sources and directed into negative sources.

Twelve sample images provided, four of which are randomly generated charge distributions. Two are monopoles with negative and positive charge source respectively. Two are a set of two charges with equivalent magnitudes with either opposing signs or identical signs, commonly called the dipole set and the double set. The water molecule is modelled as one positive source of charge 2q and two negative charges of -q with an angle of approximately 108 degrees between the negatives. The water molecule from large enough distance behaves as a dipole set, as illustrated in the graph. The remaining three graphs illustrate: a conducting plate from a positive plate made of three charges +q and a negative plate made of two charges -q, a positive shell made of four positive charges +q isolating the effects of a core negative charge -q, and an alternating line of positive and negative charges.

How we built it

Image generator backend: Python script receives charge list [[x,y,q]] and some flags. From this, it calculates scatter plot of positions. It then calculates the potential field across a meshgrid with resolution [x,y]=50, contour levels are calculated up to a standard deviation away and remainder is collapsed into average ± standard deviation points, and contour plot is generated from this set. It then approximates the electric field by estimating the gradient of the potential meshgrid and a streamline plot is generated. All three plots are overlaid in a figure: contour, scatter and streamline.

The front-end is done in HTML, CSS and JavaScript/JQuery. The data is sent in JSON to the corresponding python files in Flask, where the graphs are generated and displayed in HTML.

Challenges we ran into

JQuery's asynchronicity and JavaScript's refusal to cooperate, the communication between front-end and back-end. Our original idea to generate 3D graphs generated spikes everywhere. Calculations of contour levels and coloring, gradient potential estimations and streamline generation.

Accomplishments that we're proud of

Pretty graphs :^)

What we learned

New libraries/frameworks, all the joys JavaScript has to offer. Matplotlib and plotly graphing methods, numerical field estimations and meshgrids.

What's next for Electric Field Visualization

Adding more sliders, generating preset systems of interest, adding colour schemes. Flexibility is high.

Built With

Share this project: