@Rezz

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

The UI looks good enough. Fixed the close button not showing up due to lack of contrast. this theme looks better with the brown and beige anyway.

I just realised I need 3 devlogs for the mission 😢. I am now working on making the UI better as the colour theory may not be fitting.

Pheobe OS is my attempt at the Personal OS mission. I have been addicted to watching these videos of pheobe chubi on Instagram so I created this OS in her theme. All the features added are from the guide. Other than that I made a gallery and a video player to watch some videos of pheobe so other people can also see what I find cute about this.

Final Devlog!! I am finally done with this one! I have polished UI as much as I could. The CSS is a nightmare. I tried to change the entire UI but it broke the entire thing and I kept adding new attributes at the bottom instead to redoing the already existing ones so it became so messed up that I could not tell what was working and what was not. So I just kept adding until everything just worked out and it somehow works and I am not going to touch it. I also tried to make audio play instantly as site opens but failed. The grid in which the main three apps are placed is a nightmare I have made it symmetrical after at least 20 tries. The weather and pomodoro kept fighting each other. I also added the scroll feature to the to do list so whenever too many tasks are added it will just become scrollable. And I removed the scroll bar because it looks bad. With this it is officially over. This project was way out of my league as a beginner. Thanks for reading!!!!!

I am tired of CSS now. After the last devlog I first redesigned the layout of the music player. Then I decided that my weather app missed an important functionality which was location detection. So I had to learn how to do that and then I also made it so that when the user opens the website it will automatically ask for location. If the user denies it will default to Tokyo. Then I added song progress control and refined the UI of the music player. Then I remade it 5 more times until what we have here. Still not satisfied. I did the. background again to make it look like the sky a little bit. Plain pink looked bad. I am going to make it again. Then started my nightmare. I tried to make my three apps into a dashboard so I created a new div and made it into a grid and then tried to fit all three inside the grid and make it look like it does now. Firstly I had to learn all about how this works and then I had to try it for the first time. The pomodoro and weather kept breaking. All their contents kept spilling out. No matter what I did it was not working. I could not understand what the error was so I wrote new rules at the bottom of the css and due to all that My css is now a 1000 lines long. I am afraid to clean it up because I don’t want it to break. There were so many problems with creating the dashboard. The background was moving when scrolling. The credits are now inside the music player for some reason. When adding the location detector I broke the code and spent 2 hours figuring out what the problem was only for it to be wrong linking of html id of a div. My CSS currently must have at least 4 duplicates of the the Pomo and weather and the dashboard. There is still refinement to do. But it’s almost over. I think this was too much as a second project. Thanks for reading.

Added background music. Selected a few royalty free quality lofi songs from the yt channel Tama’s little music shop. I will credit them in the readme. Adding the music and its basic ui was fairly simple. I just created a div, added two options and linked the music. Added a button to play and an input to set volume. Then added all their functionality in the javascript took very simple functions and It is all working properly. I am going to add a couple more sings maybe but for now All the features I wanted to add are there and I just have to polish the UI properly so it looks like a proper focus dashboard instead of a 4-in-1 project. Thanks for reading!!

I have finally added petals to the project and boy was it tough. Maybe the most difficult thing I have done in this project. They are still not perfect after hours of making nd remaking. Trying to make different petals, animating their flow in the wind. Making them look like they are falling from the tree. At first I made them look horrendous so I had to design them a bit. They still look not good enough so maybe I will change the look. But the most difficult part was the animation. I must have written the keyframes more than a hundred times because it looks so unnatural every time. I just could not figure out how to make it look natural. But I have now reached a point where I believe it looks decent enough for me to move forward towards the completion of the project and after I have finally added everything I want in there I will polish it and possibly assign an sig to each petal. I am not sure tho. Thank you for reading!!

Added the sakura tree properly. I tried to make an svg myself but I heavily underestimated the skill requirement to do it. So I gave up and added a free premade sakura tree svg which has been attributed in the bottom of the page as asked by the source website. I have given is -1 z index so it appears properly and gave my cards an alpha value so that I can have transparency as it look pretty. And I have to say sag is some serious stuff. All these vectors were destroying me and I couldn’t do any better than before so I decided I should use this. I hope it is allowed. Going to add the falling petals next. Thanks for reading!! Credit: https://www.vecteezy.com/free-vector/sakura-tree

This is kind of an embarrassing devlog. I have been trying to polish the theme so I decided to add a sakura tree and also reverse the pallets in the background and the cards. Well as you can see the tree looks nothing like it should because what I tried to do was create a few new divs in html for the tree like the trunk, branches and the blossoms. I created individual classes and spans for each and tried to design them in css and I failed miserably as we can see there. I have now found out that in these situations we are supposed to use an svg file to make the tree which is what I am gonna do next. I really regret the past three hours I spent rotating branches to make it look like I wanted to. My vision is to make a tree and then change the background into a sky and have all three of my applications under the tree with petals falling and loft music playing. I hope I can reach there. I genuinely spent so much time in the html and css to make this tree which looks like a brown explosion. Thanks for reading.

No visible changes this time but I added Data persistence finally. I was holding up on it because it was looking too complicated but it was no too bad, took me a couple of hours. Did break my code once when I tried to change my previous functions but then found out that I can just add new ones to do the work instead of modifying the old ones. THAT is something important I learnt. I am going to do devlogs more often as in this project I have posted too less. I tried to add recommendations for search in the weather search but it’s too complicated. Thanks for reading!!