Particle Simulator

I think I may have solved the problem, but I have destroyed the layout.

Overflow property of CSS doesn't behave as expected. I wanted to make the y-axis scroll-able and the x-axis to not be clipped but it doesn't behave that way and it makes two of them scroll-able.

Added arrow tails and tooltips for the right control panel.

Now the tool tips get displayed correctly.

Was loosing my head over why my tooltips weren't showing up and someone (who's probably going to comment here) showed me this:

Did a little bit styling on the properties panel too. It takes me longer because I'm not good at designing and CSS but I'm trying to learn :)

Working on a new style for my Particle-Simulator. So far, it looks good.

Adding more controls. For gravity I want to make it so that the website gets the orientation of the device (which would also be customizable). And I am trying to make the configurations savable and loadable.

Now the simulation can lag without making your browser lag >:)

Trying to use web workers to separate the calculation and drawing logic.

Still working on the collision logic. It works but I have to make sure it goes well with the optimization.

The collision logic now works. Thanks for World for bringing this into my attention. I am now thinking of working on gravity and optimization to allow multiple collision checks or more particles.

Trying to work on a new collision logic.

My project is now ready for Ship V2.
Here is what I have changed in the last two hours:
-- Added Tooltips; (pretty helpful if you don't understand what the controls do based on their names).
- Fixed bugs; especially the collision with the walls when the simulation speed is in the negatives. It was a pretty simple fix actually; I removed it but not before actually trying to make it work.
- Updated ReadMe.

feedbacks appreciated :)

Didn't realize I spent so much time without devlogging.
I am currently in the process of reworking the UI of my particle simulator's control panels (mainly the layout). I am thinking of also adding tooltips since the labels aren't that descriptive. Additionally, I am reworking some of the input handling on the controls.

I have been working on the properties panel. (It is where you can configure the particles properties.) Here are the changes:
Added input functionality to the input fields. (You have to press enter after changes/ I may update this to a single button after all edits.)
Added toggle to control the states of the property fields and particle state (updating or not).
The particle now doesn't update when it's properties are being edited.
You can view the particle's properties if you toggled it.
Your cursor now should change based on the availability of the input field.
When the properties are updated, sometimes other properties would sort of glitch so I have fixed that. (Added compatibility of edits)
Tried to fix the issue of indexing when having large amounts of particles.

After trying to use WebGL, I have returned to fix my secondary control panel.
As you can see from the video I attached, I have used input elements to display particle properties. I haven't added methods to control those properties yet but you can get some information through it.

Never mind, Going back to 2d context and arcs. ChatGPT wasn't help either so not checking that checkbox.

I have decided to switch to webGL for my particles since I've been told it's very efficient. Here is what I've got now, I will try to make it more performant.

Made the the particles selectable and hoverable. Colored them green and red to signify it being hovered or clicked. Red = Clicked, Green = mouse over (hovered).

Added a secondary control panel for secondary functions like viewing particle data (and more are to be implemented).

Made the control-panel initialization modular and learned what ^ (bitwise XOR (Exclusive or)) is. It goes through the bits of the number and checks if input bits are the same. If they are the same it will output false(0) else true(1).

| a | b | XOR |

| 0 | 0 | 0 |
| 1 | 0 | 1 |
| 0 | 1 | 1 |
| 1 | 1 | 0 |

And bitwise means it goes through the bits of the numbers.
2 = 10.
3 = 11.

so by using the operation 2 ^ 1 we are checking bits of 2 with bits of 1.
10 (2) ^ 01 (1) = 11 (3)
11 (3) ^ 01 (1) = 10 (2)

Using this I was able to achieve finding the opposites of arrows from my array.
0 <=> 1
2 <=> 3

Since I wasn't able to post devlogs because the website wouldn't let me. Here are the things that I have worked on:
- I added right click functionality to the particle simulator.
----Now if you hold right click the particles would be pulled to your mouse cursor.
- Worked on my banner image.
- Researched on how I could make my particle simulator be faster and handle a lot more particles.
- Made the creation of control panels more modular for my upcoming feature.

Working on my banner image and added back hue change from earlier (It happens during collisions). You can see it glitching though so I'm going to remove it for now. After I finish my banner image I'm going to ship this project.

Finally, After so many tries I got the collapsing and expanding of my control-panel including its proper styling working. There is an issue though, for some reason the mouse interaction doesn't work after you collapse it and even after you expand it, it doesn't work until you turn off then turn on the mouse interaction toggle.

Tried many methods and figured out how to make the push force invert as it should.
Also added simulation speed controller. You can speed it up by increasing the number and slow it down by going under 1 and above 0 (because it pauses it).

• Found the culprit and fixed it
• Now the random radius logic also applies to the newly created particles. --------- If you have checked the random radius checkbox, the newly created particles would have random radii. And vice-versa. I am now going to add a simulation speed controller because not being able to see what is happening at a smaller scale is not fun.

I fixed the issue with the radius changing logic, now you can choose whether if you want every particle to have the same radius or randomized radius with your input as the maximum. This is me playing with them: (Worked 1 hour on this last time. I just forgot that I haven't yet posted this devlog and video. (the video is a little bit big so I will work on my current devlog until then))

Added this: (sorry I can't remember what new thing I added. I was trying to post my devlog yesterday but it wouldn't let me) A confirmation message?

Refactored to code so that it works with the control panel:
Got one feature working.

Here is all of the three logics applied:

Look at this now, isn't it really cool:

P.s I have also figured out where to add the mouse interaction values to the collision value. I am now going to be working on an interface or this simulator. If you have any ideas on what rules I should add next, I will try to make it work.

-- Implemented the Mouse based interaction
I am now trying to figure out how to make it work with the collision part of the code. I tried ignoring it; it doesn't provide accurate acceleration. I also tried adding it which it makes it chaotic.

Update:
-- Added collision to my particle simulator.
Details:
-- It uses 2D elastic collision that works based on the mass of the particles (an arbitrary value now based on the area (or something close to it) of the particles).
-- If you look at it closely, the tiny particles move faster when a large particle collides with them and the large particle loses some of its speed.
-- The particles also don't change their direction if their momentum is greater than the particle that collided with them.
I used this formula to achieve this:

Update:
-- Made the movement of particles less random.
-- Added bounds from which the particles cannot pass through.
-- Added lines that are drawn between the particles.
-- Experimented with different rules.
Now Working on:
-- Collision between particles.

And this was what I was going to post now:
Learned how to change the properties of the particles and how I could animate them so I created this

The website wasn't working for me a few minutes ago here is what I was going to post a devlog about:
Got my particle simulation working. It can now create particles at random places on the website window. I am using a tutorial by Franks Laboratory and learned a thing or two about OOP in javascript.

Started working on my second project Particle Simulator. (IDK how to change the folder name without messing up hackatime)