I wrote my readme in this session, so nothing really to say. It was just typing typing typing and finishing this beautiful readme to be able to submit this project.

Implemented pause logic.
I implemented pause logic and added an indicator, which shows, which sorting algorithm is currently active. The pause logic was quite painful, cause it just didnt want to stop. Neither with break, nor with return. After a long long long trouble shooting session, I found out, that I forgot .current and it just wont detect correctly, what a stupid bug to troubleshoot 20 min for. Also I fixed an edge case in the demo vid xD

FINALLYYYY
Today was the final coding session. I finally got the UI right and am okay with it. Its not the best, but its acceptable. I decided to only use icons, to keep it clean, but I ran into the problem, that the icons arent clear enough to showcase the specific sorting algorithm. So I decided on making a tooltip. But the build in HTML tooltip is too ugly and the delay is annoying. I did some research and found a W3Schools tutorial, they are the goat (here it is). I didnt expect front end being so time intensive, but I did need to adjust every value so it looks good, which is very hard to do :(. Ah, I also fixed the bug that when there is the minimal amount of pillars, it will be weird while shuffling (that wasnt proper english). Also the icons changes depending if we are shuffling or sorting and the disables and reinables, which is cool. Uhh, I remembered sth, I need to implement canceling while sorting. Also the vid is one fix old, i did fix the typo in the sorting alg.

Thats enough, Ima do CSS tomorrow. Today I added a slider style and 2 other sliders for the shuffling and sorting speed. Then I hid those 2 and the remove and adding pillar buttons. Also added some CSS for flex, justify content, space between, to seperate the drop down, which I added too. I tried to add a scrolling drop down thing, but failed, uhh, I also adjusted the pillar speed and camera angle. Also I found out, that I can call functions from an array, so I can store a function in an array and then call it like that, thats weird, but also huge. Dont wanna write too much today, cause I still have stuff to do. Ah, also added prevention of shuffling while sorting.

Slider!! Today I added a slider that controls the adding and removing of pillars. I had some minor problems. (No, they were huge, but I feel better saying that they were minor ). First of all, I needed to figure out how to set default values. Normally its just value=””, but this doesnt work for a input type range. After some research I found out that its simply defaultValue, I feel dumb. Then I tried to add/remove pillars with useEffect and monitor the changes of the slider. This worked, but also didnt. I needed to manually update the pillars. It didnt do it automatically. Then my brain suggested something genius. Using onChange. But now I need to do an extra function for it. I thought, maybe I use a while loop once. While the number array is smaller run add function and while its bigger, the remove function. This was uhh, not that good, because it somehow resulted into an infinite while loop, because js is asynchronous. I also tried with a for loop. This threw the error, that I set the 2 useState too often. After some experimenting I ended up with my current solution. I also added 2 useState variables for the sorting delay and shuffling delay. I am still searching for a great mathematical, anti-proportional, linear function to adjust it corresponding to the pillars count. Ahh and I also updated the camera adjusting logic a bit.

HOLY WAS THIS A STRUGGLE !!
In this session I implemented adding and removing numbers for a slider in the future (hopefully tomorrow). THIS WAS A PAIN. Especially the camera handling. The very very basic adding and removing function was quite easy, since its only adding numbers or splicing numbers from the array (stack overflow my goat). The camera thing was quite hard though. When I add enough numbers it could make the pillars taller than the viewheight, making them sticking “off screen”. The fix was zooming out. But the fix on stack overflow needed to let it be a JSX element, which somehow didnt work. Finding the fix was one problem. The other problem is, that after finding the fix, it still didnt work and the camera “fell” down. After a long debugging session with various console.logs, I finally found the problem and it was one of the stupid ones. I used z, where it should have been y, thats dumb, but eyy, here we go. There were also a few other bugs, like having an infinite while loop when only having one pillar and shuffling. This was fixed by making the minimum number 2. The other bug was, weird camera behaviors happen, when reducing the number while its shuffled. Fixing it with an instant sort before reducing the number of pillars was my approach. Ya, that was about it. I am done for today.

Better Shuffling logic!!!
Before the refinement of the shuffling logic today I just simply randomized the numbers in the array, so that there are new numbers. That introduced one problem, actually two. Numbers could dupe!! I tried to fix it while using numbers with one decimal. The other problem was I could not add an animation anywhere. This is why I decided to make a brand new shuffling logic today. I first tried to fix the duping problem, by checking if this number already exists. This took a while, because I need to figure out how to only watch an array to a specific point, to ignore the upcoming numbers. This resulted in a growing or shrinking animation, which wasnt what I wanted. Then I thought, maybe I can shuffle in another way. Not by changing the value, rather by swapping numbers randomly. Just like in a deck of cards. So I loop through each digit and randomly choose a number in the whole array and then swapping those. This ensures every place got changed. Now there was another problem. It sometimes changed with it self causing it not to do anything. This was fixed by adding a while loop which generates new positions if the position is the own position. While writing this devlog I also thought of another problem. When the total count of numbers is very low, this shuffling method might not shuffle it enough, so I am looping it 2 times, if there are less then 10 numbers in it. Ya, thats about it. Now lets get to the slider which increases the blocks.

Finally something after a long time. I was on vacation during that time, so I needed to use some time to understand what I have done before that. Then I implemented another sorting algorithm!! Selection Sort!! If you take a look inside my commits, you can see it being committed. After implementing selection sort I took a small break and didnt devlog, cause it didnt even took that long. After the break I decided to add a little highlighting animation, that changes the color of the pillars, that are being swapped. That took waay longer that expected, but was the easiest thing to do. I just had to save the 2 values being swapped and somehow pass it inside and get the colors changed. After the highlighting, I decided its time for another sorting alg. The Insertion Sort. That somehow took longer that selection sort. Due to it being almost the exact opposite of bubble sort, I always fell back to it. While researching for insertion sort, I found this great website and quite liked its finishing animation. I also felt that the selecting animation is kinda off for insertion sort. It shouldnt be 2 pillars that are selected. It should be 3 or 1, since one pillar is inserted between 2 other ones and not 2 pillars being swapped. So I made a highlighting version with only one pillar being highlighted and created an if statement of doom inside the meshStandartMaterial. I thought this version was also better for bubble sort than the selection one and switched it too.
Ya, that was all of it, I think, Have a great day though :)

AHHHHHHHHHHHHHHHHHHHHHH

Sorting algorithm was made today. I decided on the most basic bubble sort. It is basically just 2 nested for-loops. This wikipedia article (https://en.wikipedia.org/wiki/Bubble_sort) has a great code example for it. It was relative easy. But the hard part was to get the animation going. The second part of the vid shows how it was without the fix for the animation. Finding out what the error was, was the first major problem. Fixing it was also hard, because I needed to save the target position after the box was created. This doesnt work, because you cannot call things after a return. Then after a good half hour of struggling and no progress, I asked my father for help. He is a full time developer aaand I hoped, that we could fix this together. He did gave some good calls, but the coding is still done by myself. After some together struggling, that lasted around 30 to 40 min, he proposed something genius. Save a version of the array of numbers, before every sorting step. That meant we need to compare the 2 arrays to get the difference and how the numbers got moved. I then said we could use some complicated for loops and then comparing stuff. He smiled and let me do. After some programming it was finally done and worked. But it wasnt optimized at all and was a bit laggy. Then he couldnt hold on anymore, laughed and told me that there is a dedicated js function just for that. I almost crashed out . Ya, that was todays session. I only implemented the dedicated js function instead of that. Ahh and before asking my father I also found out that js async is weird and that we need to use useEffect, kinda an event listener to see when the useState value changes. Ya, now that was it. See u later or tmrw.

Shuffle mechanism

Today was very successful day. The two major breakthroughs are creating the boxes dynamically and shuffle the height by math.random. I am happy that I remembered, that I could use useState to make an array and use the Array.prototype.map() function to simultaneously create the different boxes. And I can change the order of the boxes with changing the order of the components in the array, sooooo, that should be quite easy to archive. The random shuffle thingi was also quite successful. I just Math.random’ed some value and floor it to 2 decimals. Then I do that for every place of the numbers array and set it as new numbers array. This will update the numbers array, because of useState and let React-Three-Fiber rerender the boxes, resulting in a shuffling. The sorting will need an async function though, or else it will be instant sorting, which isnt the goal of this sorting thing. Enough yap, back to coding, eventually, maybe.

After messing around abit and finding out that it is possible to have multiple meshes, I finally started with the actual project and made a Box func. While making it I decided on doing it with an Interface to be able to learn that (the whole point of this proj was to learn ThreeJS and NextJS). This Box func can be reused and the properties of this box can also be parsed inside. Soo every Box is the same and makes animating easier. I also added a simple moving animation. Then the quest was to level the boxes on the bottom. After a whole 5 min of struggling, I found a random post saying I could do scale / 2, which also worked. The moving the box was the hard part, because NextJS requires me to use useState, or else it wont get updated. This took me very long, very very very long to get right. The moving seems abit laggy in the vid, but in real life its smooth, i dunno why, but ya. The last part, was centering this whole thing, because the camera always points to [0, 0, 0] which is strange, but whatever, so i needed to move the boxes collectively somewhere else. So I tried alot of stuff, but finally found out that groups have props too, so I can group them and move them to the left and down. This was great !! Later I need to find out how to do this automatically, but thats not present-me problem, its a future-me problem.

First devlog

My friend @Leon gave me this idea to work with ThreeJS in NextJS, so I can get familiar with both at the same time. And I said, fine whatever. I had the idea to do a sorting algorithm showcaser with pillars of different heights. And code different sorting methods to sort these pillars. Soo I created a Next instance like my personal site aaaand messed up. So I had to delete it and install again, WITHOUT TailwindCSS. Finally having a working NextJS instance I installed ThreeJS, but then I ran into the problem that ThreeJS didnt like pnpm, soo I reinstalled the whole shit with npm, which obviously didnt work. So I debugged the whole shit and every reddit post and stackoverflow post said to reinstall it again, so the installer cleanly installs the JSX module that was missing, which it didnt. So I decided to just paste the whole error message into google and there it was. The holy stackoverflow post that gave me a command to reinstall the dependencies and advised me to reload my vscode window to prevent cache. THIS WORKED!!! My next task was to read and follow the React Three Fiber docs, which is threejs but in better for react, so also for nextjs. I followed it (which was very hard, since its written unclearly, but I think when you know the normal threejs it should be fine, which I obviously am not familiar with) and after some time got an overall idea how this thing works. Then I found a task in this doc and it is to create a spinning cube. I took it seriously and made it todays goal. And here we are. To be fair, it was okay to finish, since there was already a sample code written in vite or whatever it was. I just needed to rewrite that for my nextjs instance. Ya that was todays progress. I think when I got the motivation to continue later, it will be waay easier to do, since I know the basics now.

Holy yap, bye, see u later, maybe, well, bye