Particle Sandbox using Javascript

new mode: tilt mode [only for mobile phones]

• finally added tilt mode which moves the particles here n there based on the tilt of the device. i have made it so that this works only on mobile phones. it basically enables device tilt control (works magically for non-ios devices. i have added motion permission request for ios devices, hope it works). then it reads the acceleration and changes the graviy of the game based on the acceleration. this is just a try to make the game more interactive on mobile phones. it moves particles based on the phone movement when tilt mode is on.

• it is on by default. it turns on after a few seconds when you click the screen, then the real fun beginsss!!!

• you can turn it off from the panel window.

• i have tried to make it as smooth as possible by adjusting the scale of the gravity change in proportion with the tilt acceleration of the device. hope it works man!!

• new file tilt.js handles the tilt logic. trying my best to keep the code modularized.

• i could not upload a proper video showing the tilt mode in action, but you can try it yourself in the demo site by firing it up in your phones. would love to get feedbacks on this mode!!!

changelogs [commit history]

• add tilt mode, tilt perms asking to be implemented later onn (dc16e9f)
• tilt mode perms ask add for ios13+ (1fd3930)
• perms on by def, turned it off (60ef00f)
• testint with scale of tilt (8a45501)
• smooth out the scale for better tilt in phone (421f8b3)
• add info abt tilt mode in readme (cae85ce)

Optimization

i have optimized this sandbox to handle hundreds of particles at 60fps. the techniques of optimization that have been used in this project are:

spatial grid partitioning [ O(n^2) -> O(n)]

-the problem was that, in the previous version (v1.0.0), every particle checked every other particle for collisions which lead to the game being slowed down a lot when new particles were added.

• to solve it, i have implemented a special hash grid. it divides the canvas into a lot of cells. each particle only checkes for collisions with neighbors in its own or neighboring cells. this brough the time complexity down to nearly linear, which allowed more particles to be spawned with smooth gameplay. :)
• also, in grid systems, particles in a cell generally dont see the other particles in another cell even if they are right across each other but in this sandbox, i have implemented 3x3 neighbor search so that it checks all surrounding cells i.e. 8 cells.

object pooling

• the spawned particles have to be destroyed in some modes like explosion, blackhole and bubble mode. this constant creating and destroying of objects for particles cause GC spikes which lead to micropauses and stutters hindering the gameplay exp.
• to fix this i implemented a particle pool which recycles the particles instead of deleting them and reinitializes them when needed. this made those modes quite smoother than before.

Line mode caching

• in the previous version, the loop actually checked if particles are close and drew lines between them. This caused the ctx.stroke() function to be called 2 times for every single connection and required caching to solve. for 100 particles it called 200 draw calls.
• to fix this i used a bitwise pair key which checked for existing pair of lines and will skip the second draw. this means the cpu usage is reduced by 50% for the lines. that is A LOTT.

[FPS stats] - you can check those in the readme file. in the Optimization section.

changelogs 🛠

• spent a lot of time on optimization…
• now you can see fps count on bottom left on your screen, i have tried my best to keep it on the higher end even in high demanidng modes like the line mode and trace mode.
• skip the tutorial prompt was being asked even when the tutorial was turned off, fixed that.

commit history for this devlog

• lil bit update in readme.md..add restart btn info (675e18f)
• optimization 1st attempt with poolign (8b808cd)
• line mode optimization +object pooling fixed (dae09c0)
• show fps in bottomleft and show tutorial popup fix (97914aa)
• update readme with optimization (5cb58da)
• update optimization stats (5872f15)

changelogs [MOBILE RESPONSIVE NOW HOORAYY!]

• show challenges in hidden panel too (e84be14)
• add variable max particles with slider & reduce vrtical panel space (031c6f2)
• add mobile touch support - asked by a voter (a7378b8)
• make it a bit mobile-responsive (a850454)
• make mobile site work on landscape only (8123e4b)
• add panel toggle button (d1ce0dc)
• fix particles left and right click/longpress for mobile (98067e2)
• add refresh button, make it a lot more mobile responsive (f0acb25)
• improve the ismobile fucntino check logic (4390356)

sidenote

• yayy i have finally made this game mobile responsive. yep. you’ve heard it right, it works perfectly in mobile phones. i have attached a demo video to this devlog showcasing how it works in phones.this was the most asked feature to add, so i had to add it.
• also, i have added a slider which lets you select maximum particles based on your choice. the particles max threshold is not limited now. its upto you. asked by a voter
• panels are now toggelable. i mean, you can toggle to hide and unhide the panels now. more screen territory, more fun i guess.
• added a refresh button too which refreshes the game.
• story mode is a bit shortened cause a voter asked for it.
• in mobile phones, game only works in landscape view so that makes it more fun i guess. story mode, explosion mode and cyclone mode are not available in mobile phone cause i had some issues implementing them ( sometimes u may get cyclone mode using the dice but u cant rlly add new cyclones as im confused about implementing it in mobile ) so will do it in next versions.

changelogs

new mode

• slither mode (p): in this mode, the particles tend to wiggle and slither around the screen. i have tried my best to make it look as much spontaneous as i can. it still is not that much spontaneous and you can see patterns on it but still, i guess its quite fun. this mode is best when played with 0 gravity mode turned on. also, when disco mode is turned along with these, you will get to see a whole new dimension heheehe. did not find any other key so made it p. the mode works by making sure each particle moves towards its neighboring particle for a while and then each folow the other one so it makes sort of a chain which is then a momentum is banged to the particle randomly so it goes past the required path and again steers on to the next neighboring particle. each pricle changes the other one making the whole hting quite spontaneous and alive.

challenges UI

now, the challenges indicator shows even when the panel is hidden by ‘h’. the challenge indicator has been added to the info text shown when the panel has been hidden. it gives info about the time left for the next challenge to happen.

• the challenge opt in issue has been fixed. a popup shows in the game after a few seconds of starting, to ask the user if they want to opt in for the challenges and if they choose yes then they better be ready for a fun challenges. sadly, i have not come up with fun challenges yet though, the current challenges quite simple actually. there are 5 challenges i have put up till now. they are quite simple.

• challenges are continuous, they donot stop. they keep coming one after another. for now, i have onl made 5 challenges so after all these finish, they will circulate again randomly. but it will not happen in future versions, im thinking to make it so that the user gets some kind of achevement like thing if they finish all challenges. not sure how i would implement it though.

• if the user opts in to the challenges then they get to see the time remaining for the next challenge to appear in the panel, above the particles count thing.

• in the current version, if a user opts in to the challenges then they cant quit. they must face those challenges.

• for future updates, i want to make sure the challenge info is shown even when the panel is closed, in the top left corner of the screen along with other infos.

this time, i wanted to add sth more fun to this game. so, i have added challenges. the user gets bombed with a lot of challenges throughout their playtime in this simulation, they will be challenged to spawn more than X particles, eat X+ particles using Y mode and more and there will be a time limit like 20 seconds, 30 seconds or so. the user has to complete the given challenge within the given timeframe. if the user completes it then they will be greeted with a fun message and maybe sth more ;) and if they are unable to complete it, they will be roasted and trolled (simple) with a popup message.

current progress

• challenges are asked at random. they are stored in an array. once all the challenges are finished, they are repeated again ( but they are not repeated until nd unless all the challenges are not played ).
• they give different win/loss msgs every time (theres an array each for win and loss texts)
• are doing a challenge and completing it, the next challenge popups up in 5 seconds in my current repo, it is just for easy debugging. i will try to crank it up to a minute or so or maybe new challenges will spawn every 2-3 minutes at random or so.

future improvements

• i am thinking to add a opt-in button type thingy for the challenges because ts migght be annoying for users who donot want to do such challenges and want to simply have fun with the simulation. idk where to add the button/text for the optin but i will try to make it work perfectly in the next update.
• i need to find a way to make the challenges feel more fun but less intimidating at the same time. i might add a button in the panel for challenges on / off maybe a checkmark type button.

there is a lot more work to do in this feature.

changelogsss

new mode again!

new mode

• disco (d): in this mode, the particles change their color continuously (every 0.8s fyi). also added an epilepsy warning before the starting of this mode so that it doesnot cause any harm to anyone [ it was suggested by a voter in the previous updates ].

ui

• show an epilepsy warning window when disco mode is turned on.
• the pcount text changes its colors based on the number of particles ( more towards shades of red if the count is high enough). these colors show for 3 seconds only. sth that needs fixing in the next update (hopefully), is that the pcount text changes color only for the 1st time they reach the number of partciles, after that the pcount text doesnot change color. so yeah, needs some fixinnn.

🐛🐛

• cursor was being hidden in the dice mode, this issue has been fixed simply by doing cursor: default inside the rollDice() function.
• disco mode was causing issues with the mono colorscheme so had to disable disco mode when mono is selected, to save performance and fix some bugs. similar issue were found with bubble mode and disco mode so disabled disco mode when bubble is turned on.

ending note ig

also, if you have not noticed it yet, there is a small easter egg in the modes section. check out the 1st column and read the keys out a loud. they spell, BINGOOOO! im feel like im done with this project now, i might stop working on this after this update, who knows… my creative juices have really started draining.

##changelogs

new keybinding.

• H -> it hides the panel. allows more space to have fun with. when the panel is hidden, it shows a small text in the top left corner of the screen which gives info about the major shortcuts like toggle panel(h), restart(r), screenshot(q), etc

• Q -> screenshot. it snaps a pic of the current simulation you are doing. it ignores all the UI elements and shows your particles and their fun behaviors only. it took a bit too long to add this but finally it has been added. yay!

ui

• add a camera button that triggers screenshot by clicking it.
• add simple, but fun, animations on the dice and camera button in the screen above the spawn button. (dice is for random mode generator and camera is for snapping a quick screenshot.) used css keyframes animation for this.
• change the new update badge to CHANGELOGS button which redirects to github repo readme link.
• make the panel UI show the controls like LMB RMB etc in chips format to fit a lot of controls in small space and cause it looks good, too.
• now, the players will be notified to press ‘s’ if they want to skip the tutorial.

sounds

finallyyyy, i have added some simple sound effects to this game. currently, the only two elements which produce sound on click are the camera button (shutter sound - screenshot button ) and the dice button (dice roll sound effect)

this seems like a simple update but this has brought change to a lot of UI components. a lot of minor issues have been fixed in this update.

changelogs

new mode

• repel (x): the mouse pointer changes to a no entry sign like symbol and all the particles are repelled by the mouse pointer. they try to escape and run away from the mouse pointer as much as they can.

ui

• the game now shows achievement toasts when particle count has reached to certain levels, e.g. when the user make 50, 100, etc. number of particles.
  -improve the panel UI and add new space for 2 more modes. ( labelled as ‘?’ to create suspense hehe)

###..

• the dice applies random color palette along with the random modes so it brings more fun to the game. also, more variation is possible.
• in explosion mode, after the particle has exploded, the neighboring particles will change their color to any random color that is in the range of the current color palette. it makes the explosion mode seem more chaotic frr.

future updates, i guess

im thinking of adding a way to hide the panel so that the user can have fun with their whole available screen. also, im thinking of adding a screenshot shortcut. if you create sth quite chaotic and fun and want to share it with ur friends, simply click the screenshot hotkey or maybe button and it lets you download that screenshot.
so, this ship will be a major one. this time, i will ship after all my creative juices start draining out hehe. be ready for more chaosssss!!

changelogs

color palettes

• add new color palette system. i have introduced 5 color palettes (default/rainbow, ice, fire, neon and mono). there is a section in the UI panel for color palettes. color of all the particles will change to the selected palette on selecting it.

🐛 bug

• the friction slider was wrong all this time. there was a simple logical error in the code. fixed it.

changelogs

• refactor the code. yep, finally…took a while to do this cause everything was jumbled in the same file. finally, the project files are getting a good structure. i have made a new js folder which comprises all the js code in it. the script.js has been broken down into 6 js files. you can find proper information about this in the readme.md,

• cyclone mode has been fixed. yesterday, the particles were not staying in the cyclone mode properly. now, once they enter the cyclone, they revolve continuously around it. ngl, they are much more addicting now!!!

• add a restart keybinding. R when pressed r the simulation restarts to the initial phase, all the state variables are reset. you have a new blank canvas to start working on.

• im thinking of adding colorschemes to this simulation. it will change the look and feel of the particles, can add more fun to the game maybe. and im also considering adding some new modes: a repel mode in which mouse repels the particles, and more. lets see how will the future updates be.

changelogs

new modes

• cyclone mode (c) -> cyclones can be placed on screen (max 5) by right clicking, particles near the cyclone spin around it continuously. pressing DEL clears all the cyclones.
• explosion mode (e) -> click for a while on the particles and release it to make them explode. the longer you wait before releasing, the bigger it blasts.

ui rework

• the normie mode indicators in the panel have been replaced by a grid of clickable boxes with big letters representing the key of the mode. looks impressiveee.
• added a dice button which turns of a few modes randomly forming new chaos combinations.🎲 i love fidgeting with this dice button. this is the google equivalent of the i am feeling lucky button, imo.
• added a spawn button which spawns particles when clicked -> reqd for modes like blackhole, interact, and more in which left click was occupied by the major feature of the mode so needed an alternative method to spawn particles.

changelogs

• improve the orbit mode. fixed the bugs that i had mentioned in the previous devlog.
• the particles now revolve around the sun properly, like they should. took a bit of high school physikks concepts, formulas and a cup of ☕ to implement this system.
• particles are capped to 80 in orbit mode ( to overcome performance issues )
• the orbit mode is mentioned in the tutorial.

#####—
been thinking of adding new modes in the next devlog which are cyclones ( click to place cyclones on the screen which tend to make other particles revolve around them when they pass through and maybe eat them if they revolve there for a bit too long ) and another is explode mode which explodes particles if they are put under pressure for a bit too much time ( will reveal the ‘how’ aspect in the next devlog )

its been fun doing this project, hope you feel fun playing it, too!!

changelogs

modes

-> add orbit mode (o): the mouse pointer turns into the SUN, yep this one 🌞, and guess what. the particles close to the sun start orbiting it. not so simple as it sounds. most of the time was spent in making the look and feel of the sun ( designing assets using js canvas ctx is a pita ). i like the current look of it, so not changing it anytime in near future.
-> brainstormed other modes like the canon trajectory thing i talked about in earlier devlogs, and a fan mode ( opposite of blackhole mode ) -> seems like a fun idea, lets see if i can implement it or not.

newspaper ad thing

add a newspaper advertisement like thing in the top right corner (30deg slant) which gives info of the latest changes so that you can jump right into action from the latest changes.

needs to be fixed ASAP

• in the current orbit mode, the particles revolve around the sun but they dont stay in the orbit. a tangential force (repulsion) acts on them and they get pushed out of the orbit. this needs to be fixed. need to apply the exact force as that tangential force but in the opposite direction so that they stay in the loop. need to use some physiksss. will do that in the next update.
• the orbit mode is not mentioned in the tutorial yet, need to add it there.

changelog

new mode:

• bubble mode (n): particles transform into floating bubbles with a nice glass effect. they can be popped into smaller bubbles by hovering over them which splits them into 2 bubbles. other modes are turned off when this mode is activated. new particles cant be spawned in bubble mode. added a different cursor for bubble mode ( the resize cursor as it looks like a needle hehe)

ui improvements

• mode labels and slider labels changed to the color #afafaf for good visibility
• reset buttons added to all 4 sliders
• toast colors fixed (solid dark green/red backgrounds that are fully visible)

story mode -> tutorial

• yes, finally. story mode has been renamed to TUTORIAL mode, self-explanatory ig. this tutorial mode walks the user through all the modes.

improved black hole [ on the request of a voter ]

• stronger pull force
• particles spiral in with swirl physics (was kinda tough to implement)
• cursor hides when black hole is active

Changelogs

new mode

• zero gravity mode (Z) — particles float freely in space

UI

• add toast notifications for all mode toggles
• reset buttons added to gravity and friction sliders (as per the request of a voter)

story mode REWORK

• story mode i.e. tutorial now walks you through this simulation interactively.

performance improvements (most requested in previous ship)

• replace the previous collision detection O(n^2) with a spatial grid system ( took a lot of time implementing this system)
• line mode also uses spatial grid now
• particle cap at 420 to prevent browser crashes ;)

• add a line mode which is toggled by ‘l’, it connects the particles which are near to each other by a line. this helps in viewing the connections between the particles more effectively, and looks cool ;)

• tried adding a cannon system (trajectory path projection for particles). in other words, tried making the particles have angry birds like projectile trajectory but failed miserably and dropped the idea. will surely get back to this feature in near future. for now, i am kicking this idea out from this project.

• add a shockwave effect when right click is done (it makes the game more interesting)

• add a gravity flip mode which flips the gravity of the game so that the particles fall upwards leading to more chaos in the particle simulation ;)

• improve the blackhole mode ( make it more interactive and fun by adding particles rotating around the blackhole as if they were being pulled in by the blackhole but trying to esacpe it)

• add merge mode (particles having similar colors (hue values) merge into a new larger particle of a new larger size). no need to worry about particles stacking up, just hit ‘m’ for merge mode and a lot of particles are gone ;)

• add story mode since a lot of the voters requested for it. it is toggled by ‘s’. when toggled, it displays various quotes in the middle of the screen which fade in/out to give a soothing vibe to the player.

• add trail mode which simply shows the trails of each and every particles. the more trails the more fun ;) (toggled by ‘t’)

add blackhole mode to particle sandbox. the cursor acts as a black hole and sucks in the particles demolishing them and taking them to the unknown world in the black hole. click b/B for black hole mode. have fun simulating particles!!

changed the UI of the panel to make it a bit minimal and simpler. used Space Grotesk font for more of a sandbox vibe. abstract the unimportant things from the labels of the sliders to include one word label for each slider e.g. gravity, friction, spawn, size

made a simple particle sandbox system, in which the particles can be simulated using sliders that control gravity, their damping /friction, amount of particles to be spawned and size of particles.