Atom Simulation

Now this is a big one! I have spent hours trying different ways to add isotopes to this. I thought I would add some common isotopes and not let the user make any other atom. Then I ditched it and tried to just say not in data. Then I tried to reduce the number of elements then I thought that how many isotopes can I actually add? So Iooked up on how many isotopes exist of all known elements I found a study of NUBASE in 2022 with 3588 ground state isotopes in their website. It had a lot of detail. I have used clause to parse it into a json file and it has 25k lines. I have asked the shipwrights and they said it’s fine so I did it. So now I have each possible ground state isotope and its basic properties in my project so I just linked it to javascript and then decided I wanted an entire window dedicated to isotopes and as my project had been bad for so long so I redid the html and finally touched css. Didn’t take me too long it has become very easy to create basic cards after my last project. Then I created a few functions for the isotopes which basically act as a validator which I made previously for protons. Also I deleted a lot of my code. So as seen in the video, Isotopes are divided into stable, radioactive and invalid. Any isotope which my database doesn’t have does not exist in ground state which is way bigger of a scale I was thinking about so I am proud of it. Also the name and symbol have been changed as well. the css looks very bad as I just did it very fast so that it at least looks like it is real. Next is redoing the nucleus to increase the randomisation and maybe I am thinking of redoing the isotopes window and the UI. Mostly thinking of working on UI now but idk what I do tomorrow. Thanks for reading!!

Very long devlog here. I have added a lot of stuff and have failed to add a lot of stuff too. The first task at my hand was making the nucleus into individual particles.The problem I ran into was when there were less than 14 nuclear particles they were too far away from each other. So I made a few if statements for better alignment in lower atomic number elements. Then I added colours for identification I will change them in the future. After adding colour I saw that the protons and neutrons aren’t mixing and are forming rings instead and so far I cannot fix it. Next thing I added was electronic configuration. I have used Aufbau’s principle for the electronic configuration which is kinda inaccurate as my model doesn’t use it but I added it because I can. Also I have not added all the exceptions like chromium. The next step was adding ions and isotopes. I spent so much time adding isotopes and failed terribly but the ions have been working out. Currently they are also inaccurate because I have yet to add a block for impossible structures and also the names just add ion instead of saying oxide or chloride. There is a type section currently because I first added just anion neutral and cation detector but then decided I want all ions and isotopes as well. The most amount of time spent this time is for sure the failure of my isotopes addition. Also I have been tweaking the tilts to make them look better. My devlog makes it look simple but it took so much freaking trial and error to do all this I am seriously burned out now. But it’s too fun for me to stop. Thanks for reading!!

I have now added buttons for user to add and remove subatomic particles. The neutrons are kind of useless because I have currently linked it to the periodic table I added to the code (yes I added all the elements as mentioned in previous devlogs). So the atomic mass is hardcoded for every element but in the future I will switch back to mass number when I add isotopes to the this. And now the most obvious change. I have added a tilt to all the electron paths and the shells so that I can have a 3d effect. I looked up on how to make this 3d and decided it was wayyy too out of my league, though what I am doing is already out of it, but I decided I will try a 2.5d style and this is as far as I have gotten. I have also made it so that the outer shells move faster than inner ones for better effect. It looks kinda ugly as I have neglected css but I am waiting for a general structure to be finished before I do that. I have to say that canvas is very complicated. And I am having to use a lot of loops and I am having difficulty understanding my own code. I hope by moving forwards I can get more comfortable with all this. Thanks for reading!!

I have added functions to calculate the mass number and the charge on each configuration. Then I have added the properties of each element in the periodic table into the code and made a div so that it can be seen in the web page. In the video below I am changing the number of electrons and protons to showcase it working I am yet to add an input on the screen. Also for each element I have added its atomic number, symbol, name, atomic mass, period, group and category. I believe it will prove useful in the future when I add a proper description. I am also going to add isotopes in the future. It was very boring to copy all the elements from he periodic table though. Thanks for reading!!

edit: I just noticed a bug. I am not changing the number of neutrons so the mass number is wrong in every case. As I set the detection of each element by the number of protons I didn’t realise it. Sorry for the error

The visual difference in this update may not look a lot but the code has changed a lot. Previously all of the stuff was just hardcoded values and now I have turned them all into proper dynamic values. I have given it a configuration to accommodate all 118 elements properly. Also made it so that the increasing number of shells reduces the spacing so the shells don’t clip out of bounds. Also having lesser shells spreads them out more so it looks zoomed in. All seems to work fine now. Almost all hardcoded values are turned into functions so I am going to try to add a way so the user can directly add an electron to the system. I am yet to touch the protons it’s still just balls revolving in a certain configuration, far from my vision. Thanks for reading!!

So I redid all the code of the javascript. I created different functions for the shells, nucleus and the electrons. After that I made a loop for the electrons so that they spawn in the shell structure of 2,8,8 and don’t overlap and another loop inside that to make sure that they all are revolving around the nucleus in their own shells. Then I made a loop for the shells with the same calculation of the radius so that they form properly along the revolving electrons. And damn was all of that hard to understand and create. In my previous projects I had not worked much with loops so I had to learn all about them and damn does this project use a lot of maths. It’s lowkey kind of fun playing with numbers and seeing varying results on screen. I think I will have to ditch these functions in the future because my end goal is to get all the 118 elements in there but this is an important learning step for me. Thanks for reading!!

Finally figured out how to move the electron along the path. Had to use Sine and Cosines to designate the movement. One problem which came up was that the new frame was not erasing the previous position of the electron so I did a clearRect so erase the previous frame but it currently is clearing everything including the shell and the nucleus. I am going to re write everything into separate functions to fix it.

This project is kind of ambitious for me as it is a complicated one, but as a science. student I have always wanted to build something like this. I just spent a couple of hours experimenting and learning about canvas. First time using it. I really love that I have to use maths, physics and chemistry to make a project. The vision I have with this project is having a way to add electrons and protons and neutrons to make different elements and their isotopes. I will try to get then entire periodic table. And as my previous projects I don’t know how I will do it. I will learn as I build. This is very fun so far and I hope it doesn’t take as long as the last one. Thanks for reading!!