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