sharable link disco mode fix and other bug fixes, final devlog btww

• in this update, the first thing i did was i fixed the disco mode popup not showing issue in the sharable link part. other than that, i focused on fixing all the minor bugs that were hampering the user experience.
• there were a lot of minor typos and issues in the code that were making the sharable link feature quite buggy. the major culprit thati found was the lack of effort i put into applyModes() function when writing it the previous week. it literally was soo wrong lmaoo. but i have fixed it now and it works as smooth as butter ;)

disco mode popup fix

• the logic i used to fix the disco mode epilepsy safety popup not showing in the shared url site is quite simple, i basically put a timeout of 1.5 seconds which checks if the disco mode is turned on in the sender’s end and if it is on then i show the popup in the receiver’s end.
• this did not take much time, most of the time was occupied by other bug fixes in the code.

applyModes() fix

• in my previous versions, the applyModes() function which was used to apply the modes in the receiver’s end in the shared url feature was kinda wrong. like, there were a lot of conflicts of modes in that fn. fyi orbit mode needs to cap particles, bubble mode needs some particles beforehand, orbit and blackhole mode dont work together as their logic is exactly inverse of each other.
• how did they get passed in the older versions u may ask, i was in a hurry to make the sharable link update in the previous updates so i messed up the code and did not verify it too much. my bad
• but no need to worry now, i have tried my best to fix all the loopholes in the function and now the sharable link feature works very good!!

ending notes

finally after a long month of developing this project, it has come to an end for a while and im very happy of how this has turned out to be. ts taught me to work with objects in js.

happy coding!

improve readme, manage reminders command - final devloggo

• i have made another command which can be used to manage multiple reminders. u can select which the reminders which u wanna delete using this command. to use this,follow the steps given below:

1. Press Ctrl+Shift+P to fire up the command palette.
2. Type delete active reminders and you will see an option saying remindMe: Manage/Delete active reminders. Press enter.
3. Now you will see a popup window with your active reminders lists (ONLY IF YOU HAVE GOT ANY ACTIVE REMINDER).
4. Choose the reminders that you want to delete and press OK.
5. WOOHOO! The reminder/s have been deleted.

btw the gif attached to this devlog explains this new command very well.

update the readme

• i have changed the readme. the readme is finally looking like a readme file of an extension lol. put a lot of effort in the readme file by putting in a few gifs so that its easy for users to understand this extension.

ending notes, ig

• finally its time to publish this extension!! excited for this!

changelogs

• add manage reminders command and add content to readme.md (27af541)
• add vsix (5455a60)
• change name to remind-me-extension (e476284)

designing the logo of this extension

• this project is finally getting to see an end resut and im quite excited for this. i have spent a bit of time on desigining the logo for this extension using figma.
• this lapse timelapse shows my thought process, iterations and ideas behind the logo of this extension. i tried a lot of iterations but the first draft was set in my heart, so i could not do anything except ship the first draft as the final logo for this.
• also, im working on a few extra features which i will disclose in the next devlog. or shall i say, the FINAL devlog

remove residue command added, devlog 5

• since i have made the major update to the extension already, this is just a qol update to it. whenever the user set s a reminder then the text // REMINDER SET FOR TITLE IN TIME shows in the line where the #REMIND had been triggered. But, if the user does too many reminders then this may increase the lines of code.

• so to fix this the user can fire up the command palette in vscode and simply choose Remove residue. this will remove the // REMINDER SET … lines from the code. and ur code looks great as before !!!!

• this update was a quite simple one, i just had to tweak a few parts of the old code and add a small block of code related to registering this command. it checks for the // REMINDER SET FOR … IN … using regex and removes the line. if no line found, it does nothing.

• i have used regex so much in this project but still im so much confused in regex code. shoutout to all regex translator websites that have been helping me lol, and claude too for helping me with regex stuff.

notification shows up, devlogg 4

• yess guys, finally i have fixed the notification system of this extension. now the base of this extension is ready. i have finallly made a basic working version of this extension.
• for this, i had to do a bit of bug fixing in the old version and i had to compare the time duringwhich the command is triggered to the time which the user’s time is reached and when it is reached, a vscode info msg is shown.

BUT THERE IS A CATCH:

• THIS DOESNOT WORK IF DO NOT DISTURB MODE IS TURNED ON IN VSCODE. I THOUGHT MY CODE WAS MESSED UP BUT GUESS WHAT, THE DND WAS ON IN VSCODE AND THE REMINDER WAS NOT BEING SHOWN. SO FOR IT TO WORK PLZ TURN OFF DND IN VSCODE.
  sry for the caps, had to let my anger flow somewhere..

• but yeah, finally this is working. really excited to work on other aspects like writing the FAQ guide for this extension, buiding a basic branding and all.

• lets hope i get htis done before deadline

reminder finally workss ;dvlog three

-hey there, spent A LOT of time trying to debug my code and finally came up with the solution of the remind feature. yepp it works now finallyyy, woohoo.

remind

• i have changed the logic behind the remind feature now it works like this:
• you can simply write // #REMIND and a popup will fire up inside your vscode window which will ask you to enter the reminder info like the time and reminder title. in the format [time][unit] [task] for exmple: 10m fix the function
• then a status bar msg appears on vscode saying that the reminder has been set.
• this still works for any color theme, bet u can choose ANY and it will work :)
• u can still work with the old syntax if u want to, it still works, that is
  // #REMIND 10m devlog this update.. this also works perfectly.
• im yet to make the notification system. i have made a basic notification system that fires up info msg of vscode when reminder is over but i dont like it so i might need to rework in it in future update. not much into vscode extension dev so ts takin a lot of time. lets hope it workss..

improve parsing of remind input ..dvlogg2

• hey there, i have spent most of the time on this update on improving the logic behind parsing of the input remind.

changelogs:

SYNTAX:

• yep, i have changed the syntax for remind comment. now it allows seconds, mins, and hours all of them. before, the syntax was kinda limiting but i have tried my best ot make this new syntax very inclusive so that users can set the reminder that they desire.
  old syntax was // #REMIND (integer) HOUR/S

new syntax is // #REMIND (number) H/M/S info

• in the old syntax, decimals were not allowed but i have made them allowed inthe new syntax through this update.

remind comment recognized

• i have worked in making the remind comment recognize the reuqirements of the users and show info that the reminder has been set. it shows a basic information msg in the vscode window saying that the reminder has been set. im working on this feature still, confused on implementation but am sure this will be completed fully by the next dvlog. hope so..

future updatezz

• i want to show live remindercountdown in the bottom of the vscode window or basically the status bar, it will add more accountability i suppose.

first devloggg - add todo and remind comment

• first of all, i am making this project because i want to make a system in vscode similar to the remind me command of reddit which reminds the user after a specific time with the thing they said, i want to implement a similar system in vscode.

todo:

• i have made a basic syntax highlighting system for // TODO in comments which will make sure that the TODO text is highlighted and seen easily so that if a user has to do sth then they can simply comment // TODO and write what they want to do
• i have made the todo comment highlight background and color set to the theme’s background and foreground colors so that it shows correctly and is very visually pleasinggg to the users using any theme they like. this makes it much much better imo.

remind

• i have added basic syntax highlighting for the remind comment too, but unlike todo this remind has a fixed color set which is a quite scary red color coz i want it to grab the attention of the user as soon as they open the file .
• for the backend of the remind command, i have written a simple logic for the remind command which takes the syntax
  #REMIND N HOURS <TEXT> where N is an integer so for now the extension is limited to minimum 1 hour but i am trying to make it available for any time the user wants. will introduce that in the next update.
• currently, the reminder is stored in a local file in the filesystem of the user’s OS.

future updates

• i will make the reminders to work with any time frame the user wants to set
• will make the reminders to finally show some actual reminder notifications instead of them being stored in a file in the filesys.

peace out!

new commands like tree, hollywood,etc and bug fixes

final devlog i guess :D

-first of all, this update took a lot of time due to the complexity of the logic behind these commands but i absolutley love how this has turned out to be. been working on this app continously for the past week and finally im getting to see it as a REPLICA of my kitty terminal of my arch linux rice.

changelogs..

• clicking CTRL + C will fire up new line.

tree

• tree shows the visual hierarchy of the files in the current dir. i have used the concept of recursion to make the tree commmand work and took a lil bit help from claude too. for the symbols shown i have used the basic dashes and less than greater than symbols as i dont want to spend time searcihng for symbols in char map tool of windows. i love how this command has turned out to be, folders and files are colored differently. it doesnot show the hidden files cause, idk why lol

hollywood

• storytimee: i love the hollywood package in the aur. i used to do the hollywood command in my terminal to get the hacky hacker vibes so i HAD to add this command to this terminal sim.
• AND YES< FINALLY IVE ADDED IT… this took a while. it basically prints random characters and texts into the screen with two colors changing per few lines.

uname, exit

• uname command shows basic info of the os and kernel in use so it basically prints the info.
• exit comand is added so that you can MAYBE QUIT THE TERMINAL, who knows!!! what if there is a full on OS which shows up when u exit the terminal.

bug fixes:

• the touch command did not allow hidden files so i have fixed it. now if u do touch .abc.txt then it makes abc.txt which cant be seen from ls if you dont use the -a flag.
• (tried to add grep command and spent quite sometime on it but it started to mess this simulator so i rejected that idea :( )
• rm also did not allow to remove hidden files which i have fixed.
• cant write to files in ts versn, will fix in future.

a lot of changes to the virtual (fake) file system

in this update i have introduced a lot of changes to the file system. during this update i learned a lot about working with objects in js. i have used an object for file system and another for the files, for the subcommands or flags like -a,-r , i hsve used basic parsing and checking for the flag and running the code if the flag is called. a great learning opportunity. this sim lookin kinda real tho.
summary of the changes:

cat

• i have added the cat command which is used to view the contents of a file.

ls -a

• i have added the -a subcommand to ls so that hidden files can be seen. this will surely help me improve the lore.

spent a lot of time on the commands given below:

i have added a lot of checks and spent A LOT OF TIME on the mkdir, touch and rm commands so that this terminal sim feels a lot like the real terminal.

mkdir -> create new directory

rm -> remove a file

• inorder to remove a directory the -r subcommand can be added to the rm command.

touch -> create new EMPTY file

• if the file exists already and touch command is ran to it then nothing happens .. it doesnot overwrite the original file..

virtual file system started and other new commands too

• the virtual (fake) file system is basically an object which has its keys set to the directory names and value set to the directories and files they contain.

ls

• this is same as the ls command in the terminal, it lists the files under the current working directory (cwd).

pwd

• this prints the current working directory. used some basic printing logic so that this works even when the user is in any other directory than the root ~ .
• the ~ in the terminal line is functional now, it shows the current working directory like real terminals.

cd

• this changes the current directory to the specified dir. it is a basic command. but, in my code it basically changes the index of the file system object hehe. if it works, it works

future updates?

• in the next update i will try to add these stuff:
  -> i will add cat command which will make the files in the directories readable. this will add a new dimension to the game, a lore ;).
  -> i might add ls -al which basically lists the hidden files in the directories. this can add a lot to the lore im trying to make.
  -> other basic filesystem commands like mkdir, touch, rm.

improved the shareable link feature

modes and particles restore from the url:

• i have updated the shareable link feature and now the modes and particles are also restored from it.
• it still uses the base64 encoding, now for modes and particles, too.
• this update has finally made the shareable link feature functional.

disco mode handling

• for now, i have allowed disco mode to be shared like other modes with the url. e.g. if i turn on disco mode in my sim and share it to a frnd of mine then they get their sim with disco mode turned on by default. i am working on another update which focuses on proper disco mode handling so that if i share a sim with disco mode turned on then the new sim opened from that link will ask the user if they want disco mode or not, epilepsy warning stuff.

add a small yet fun btn animation

• the shareable link chain emoji button has a
  fun little animation now, trying to make the ui as fun as possible.

changelogs

• modes and particles restore from the shared url (74c3b88)
• share btn anim + disco mode integration (b2a42bb)

tab completion, command history and date command added

• i have added tab completion. it basically completes the commands when u type a character of it and press tab, e.g. if i type e and press tab then it autocompletes it into echo. there’s a catch, if there are more than one commands with the same characters like neofetch and name then it only autocompletes when the alphabet after the common one has been typed. not sure how to fix this, will prob fix in future updates.
• arrow key history has been added too. the history of previous commands/input can be tracked and checked using the up or down arrow key like how it can be done in a lot of terminals. keyboard shortcuts other than copy ,paste ,undo ,select all,cut, zoomin, zoomout have also been blocked to give the terminal vibe hehe.
• date command basically shows the date and time on the time of execution of the command.. this command is also kinda mandatory for all terminals lol.

will add the major commands like ls,cd,mkdir etc basically a whole virtual file system (fake) in the next update. long way to go!

neofetch go brrr

• add neofetch finally!! this took a lot of time. it shows the system info along with a cool ascii art of arch linux logo (copied the exact arch linux art directly from neofetch manually, tried using ai but didnot get any fruitful results.)
• the site looks awesome with neofetch. it can be ran with the neofetch command. the system info shown is false, obv. im trying to make this as fun as i can.
• neofetch runs everytime the site is opened, with different colors of the logo and titles each time.

ui improved + new commands

• updated the CSS to make the term look like git bash, git bash is my only inspo for this project hehe.
• added two new commands: help and whoami. this update did not take much time, except for the css part.
• adding new commands is fairly simple. it is as simple as adding new key value pairs in an object. the command name is the key and the commands function is the value. thats it.

future updates?

• im thinking of adding a way to see command history by using arrow keys. it is a basic feature and is in almost all of the terminals out there, so this is a must have feature.
• tab completion also seems to be in a lot of terminals. e.g. if i type cat ab and press tab and a file named abc.txt is present then the command automatically auto completes itself with the abc.txt. not sure how do add it but will add it.
• i want to add a neofetch command too, maybe show neofetch at startup as thats MUST have. hehe /j

first steps :)

• i have made a basic html only version of this web terminal. i have added two commands till now, clear and echo. clear clears the screen. i may change its name to cls in the next update, cause why not :P and the echo command basically repeats what you type after it like echo hello returns hello.
• if the user types anything except those commands then the output is ‘command not found’.

future updates

• im trying to go with the UI and the feel of the git bash terminal cause it feels soo home. for that i will have to work on the css for it. also, im planning to make this site a sort of go to platform for learning linux commands and having fun tweaking them without having to install terminal ( ikr its pointless as cmd is alr there in windows, but whatever -_-

sharable URL feature

• i have made a button in the bottom right of the screen, right above the dice button, shows a popup when clicked, saying that the url has been copied and is ready to be shared!! - the current game state which is a json at first, is convered to a simple string which is encoded to a base64 type string.
• this string is added to the copied url which when opened on a new tab restores the game.

what have i achieved till now in this feature?

• i have made the button click copy link thing working and the game state encoding and decoding works perfectly.
• when load the game in a new tab, the url restores the sliders and palette.

need to be done in future updates

• i need to make the url to restore all the game modes opened by the user. it needs to restore the particles the user had ( im not sure if i will add this ), coz each n evry particle is different and if i save all those then we might have performance issues, but i will try it to see how that goes.
• i will have to make it so that if a user shares a link with disco mode enabled then the game asks the epilepsy thing before loading the simulation on the new tab to the new user.

changelogs

• screenshot popup info in readme.md (b32380c)
• add share btn and encode game state (fa82009)
• url restores clrscheme and sliders (51b35e2)

:)

• ngl this is rlly fun. learning a lot with this project. trying to improve this as much as i can. will ship once this feature is fully implemented.

screenshot popup ui

• in the previous versions, the user got a full preview of their screenshot if they click it which blocked their gameplay. this was kinda frightening for a few voters so i had to improve this.
• in this update, i have added a screenshot POPUP UI. which is a simple popup that shows in the top right corner of the screen and changed its text each time you press screenshot. i have added quirky lil titles for the screenshot popup to make it feel spontaneous and fun. it has 2 btns for viewing it in the game itself and downloading it.
• this took a while to implement but im rlly happy with how it turned out to be.

achievements - update

• i have added a few achievements. achievements system is really blasting off with the session storage system that i am using currently for it. im not able to add achivements related to the game modes, they are triggered even when im not in the game mode, so for now, i have added achievements related to the UI buttons only.
  *HINT: click the ui buttons for a few times, or play with the sliders and you will know what the achievements are ;) *

future improvements

• i really want to add the sharable link thing so that users can share their simulations with their friends. this update was solely focused on the screenshot thing and achivements. will look up for the sharable url for the simulations in the next update. peace out!!

achievements system

• you get various achievements based on awkwardly random interactions that you do. for e.g. u may get an achievement for pressing the dice button more the X number of times or so, or for spawning more than Y particles in Z mode. i have added this to make the games fun.
• im using session storage to store info about achievements. i tried using local storage but i wanted it to reset achievements each time the simulation is opened so i switched to session storage. this process took a lot of time.

ui

• panel ui has been improved a bit. i have added small headings in the panel sections like the sliders section or the PHYSICS section may i call. the palette section has also been improved / reduced in vertical height for more screen space for the panel ui to breathe easily.

failed updates

• i tried making the particles respond to shaking of the game browser window by detection the changes in window position and using some physicksss to change the direction of gravity but it did not take much time to start getting messy and slow af. so i had to abandon this idea. i want to make this so badly but not quite sure how can i do it without the lag..

future optimizations and updates

• currently, the achievement is just for test ( u get achievement for spawning more than 10 particles. thats it. its just for debug and dev purpose rn). i want to add some quirky achievements like roll the dice 5 times, finish all the bubbles in bubble mode and more.
• im thinking of making a way to share the link of your simulation to your friends so that the fun is shared with your friedn grp. lets see how this goes.

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.