
Alternating Charge Line Generation

Conducting Plate Generation

Double Charge Generation

Dipole Generation

Negative Monopole Generation

Positive Monopole Generation

Random Distribution Generation

Random Distribution Generation

Random Distribution Generation

Positive Shell Generation

Water Molecule Generation

Random Distribution Generation
Inspiration
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 frontend 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 frontend and backend. 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
 python
 javascript
 matplotlib
 jquery
 flask
Log in or sign up for Devpost to join the conversation.