Atom Simulator

Complete UI change!! The shipwrights told me my theme was very generic and looked very AI generated so I changed it into the theme of star charts used by astronomers in 17th-18th centuries. Renamed the periodic table to the atlas and over all made everything look like a diagram made on parchment. Also added a trail to the electrons to make it look a little bit more unique. My project is based on the Bohr model which was based on astronomy of that time which emerged from these star charts so I decided to use this theme to have a little personality and originality. Thanks for reading!!

Final Devlog is here guys after so many hours!! I have redone the UI to look less generic and a little more unique. The canvas is now having invisible borders so it blends in with the background. Added a header. Added red colour in case of invalid isotope and moved status to the to for better user experience. Also set the cap to 118 on both electrons and protons. Fixed the plus 10 button so it goes up to 118 instead of stopping if there is less than 10 electrons left to 118. That will be all I will ship this and other features will come in future updates like exit animations and ion panel. There is a lot more I could do but I have refined everything I made in this and that will be all for now as adding new things will create an unrefined product. I have set the default atom to chromium-24 just because it is not too small and not too big to help the users go lower and upward pretty quick. It was a long run and genuinely tough project. The amount of documentation I had to read was unreal. Thanks for reading!!!!!!!!!!!!!!

I have completed the animation now. The other electrons now move slowly into their new positions and make space for the incoming electron. I also made it so that it is fluid for +10 electrons as well. I also am moving towards my final UI so everything is black now instead of blue and I plan on making it more space like. Now comes the part where I tell you my struggles. I spent a lot of time trying to perfect the animation. To do this I had to make changes in a lot of my functions and I finally was at the end of my struggles after about 3 hours of work and there was just one bug I was unable to fix which was that whenever I spam added electrons they would go into one place and then teleport into their dedicated locations. To fix that I made a lot of changes. The problem was that the canvas was not giving new space assignment to the electron when it was being spam added and foolish me without committing decided to fix it and broke everything. I managed to break it so bad that program broke when adding a new shell. And because I had made so many changes I was not gonna spend another 3 hours fixing them one by one so I had no choice but to delete everything since the last commit which was my last devlog. and then I had to remake it from there. Lesson learnt. Thanks for reading!!!

I have finally added an animation to the addition of the electrons!! You can see in the video I have made it so that every added electron comes from outside the canvas and takes its place in the orbit. It is far from perfect right now but it’s the first step. The biggest problem in this was making sure it came in at the proper angle so it feels smooth and injects itself properly. I am thinking of animating the other electrons to slowly move and make space for the new electron so it doesn’t look like a flicker every electron added. The nucleus is still the same I am leaving it alone I will fix it in the end it’s too much for me. Also did a lot of CSS changes in the periodic table and the isotope panel and the control buttons. I am trying to make it look like an instrument more Than a button so hopefully it can happen. The next move is refining this animation and once it’s done I will redo the entire CSS to a space, science, observatory theme. Thanks for reading!!

This is making me give up guys. I cannot fix this nucleus this just isn’t working. I have been spending so many hours on this I used to do so much more daily but I just rage quit when I can’t fix this. You can see in the video is is still working in a sequence I cannot fix it. I did fix the flicker which happens every time a particle is added so it is very smooth now. also I added rotation to the shells by adjusting my already existing drawshell function. I made some changes in css though they are not noticable in the video as I removed most of them because the light theme didn’t suit the project. I am trying to make the theme more space and science like more like an observatory. I really wanna start on animations but I am holding it off for everything else to start working first. Thanks for reading!!

I am so freaking done with this!! I have been sitting here for so many hours trying to fix the nucleus and for some reason it is never working. I have created multiple new functions deleted those, changed those and one time is became a spiral pattern. Then I tried to randomise it and it became like a random splash. then the neutrons disappeared. then the count got messed up so every ten neutrons added get on screen. Then neutrons did not show up until we reached 24 of them. I tried every different way I could think of solving this but this is not working. At last I thought I should just go back to my old configuration because it was good enough but now it became like this and is overlapping into the first shell. I guess I deleted my old function where I had set its parameter to not overlap the inner shell but here we are. Also I found a way to make the periodic table work properly. It now pops up on screen so the user doesn’t have to scroll and disappears with th user input or if the user clicks the background. I will make it transparent in the future. Also I hope I can fix this nucleus this is so not it. Thanks for reading.

COMPLETE CSS OVERHAUL. I have redone the entire CSS to make it look WAYYY better and you can see the results. I am adopting a dark theme. I do want it to look more like space but I will see to it later. I added a toggle function for the periodic table. It looks kind of useless now but what I wanna do is make it appear on the screen instead of appearing below so that the use can select without having to scroll. Also the nucleus must be catching your eye. I tried to randomise it but for some reason it is randomising every frame so I have to figure out how to fix it. I am pretty sure it is a very simple fix that I am wasting so much time on. Also changed the colour of the shell, electrons and nucleus and gave the particles a little glow for dramatic effect. Also gave the elements in the periodic table colours according to their categories like Alkali metals, noble gases etc. Next I am going to fix the nucleus. Make the periodic table appear on screen and try to make the UI look better. I am also thing of any features I can add. Thanks for reading!!

Sorry for so long undevlogged hours. First time I got a warning. I really procrastinate on devlogs. There are many changes I made, the first being the addition of radioactive/stable status, half-life, decay mode, spin/parity, and atomic mass into the isotope tab. My vision is that I want people to explore the isotopes when they play around manually with the subatomic particles. This increased my database for isotopes to 45k lines, hopefully the person who told me it’s ok to use AI for data collection was true. And for enhanced UX I added +10 and -10 buttons as well as the ability to type the number of electrons in. And the biggest and the most obvious update was the periodic table. I spent so long figuring it out. At first I tried doing the entire thing in CSS, but thankfully the array of elements with so many seemingly useless information I created at the start helped out and I was able to assign each of them groups and periods to look like a periodic table through JavaScript, but La and Ac were acting up because they kept going down to the f block. I moved them up but it still looks not as good. I then added each element on the table to be clickable and the user would instantly move to the desired element and be able to test what isotopes it has and also all their properties. Also I removed the configuration because I am making the Bohr model visible so it’s inaccurate to have the Aufbau configuration. I am 1000% going to do frequent devlogs please forgive me for my past 3 devlogs. Also I made sure the most commonly used isotope is there by default on the isotope panel when the periodic table is clicked. I think I will look how to make the UI better first as the periodic table being on the bottom feels so weird and bad UI because the user needs to scroll to see the change. I’ll think for a fix. Thanks for reading!!!!!

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!!