 If you've watched the latest Hyperplex video, you'll have noticed that his animations don't neglect any detail, from the different rotations in the stars to ensuring that the spacing is just right, and of course, nailing the soft glow effect. It's simply all there, matching the Canva effect to perfection. And while Hyperplex does a fantastic job of breaking down his thought process throughout his video, he leaves some of the details out. So today, we're going to go behind the code and explore the complexity of what he makes seem so simple. For this video, as with all Hyperplex videos, the breakdown comes first, taking what looks like a complex effect and breaking it down into smaller, more manageable parts. As the animation follows the mouse, he starts there with a mouse move listener, and while he lets us know that this tracks the position of the mouse and appends it to the document, there's a little bit more going on behind the scenes here to actually make this work. He had two variables being used, but to use those, we need to declare those two variables first, in this case, simply grabbing the mouse position. So far, so good, except we have a dot, and well, what even is dot? Hyperplex does tell us that he called it dot when he created it, but there's a little bit more going on here, as we also need to use the create element method to, well, create the dot before we name it. Now that's not all though, because if we do all of this, the dot won't actually appear. For that, we'll turn our attention over to the CSS for a second, where we can start with what Hyperplex shared with us. And while having a size is important, as he alludes to, it needs to be white because it's a span and without a background declared on it, it won't do very much for us. And since we're using our JavaScript to set a top and a left on our element, this clearly needs to also have a position absolute on it as well, or that top and left won't actually be doing anything. And with all of that in place, we can now draw dots all over our viewport. Next up, we can return to our JavaScript where Hyperplex points out that those dots shouldn't hang around forever. And we're introduced to the remove child method, which he uses for this next step, and then wraps it all in a set time out. So they stick around for a little while until we finally get around to removing them. And in my opinion, this is where the beauty of Hyperplex videos really shine, because as he mentions here, this is the base of everything that's going to happen. Yes, there's a lot more flash that we need to build on top of this, but this shows how we can take some flashy effects and distill them down into solvable problems, which is what is at the core of all of his videos. But of course, the following bits are the fun ones, and they also so happen to be where a lot more is hiding behind the scenes. So let's continue uncovering everything. First, grabbing a star from Font Awesome. This is particularly easy, especially if you're using CodePen, as Hyperplex often does, where you can add Font Awesome with only a few clicks. Of course, if you were doing this on your own project, it's easy enough to add Font Awesome yourself or to find a more custom solution with an SVG or whatever else you might like. But since Hyperplex did go with Font Awesome, let's stick with that. And having it in place, we need to do a quick update on our Javascript to give our element the correct classes, and calling this dot now doesn't make much sense anymore, so we can change that too. And of course, a quick update to the CSS as well, and now look at that, we're drawing stars instead of dots. Next, Hyperplex turns to Tailwind to steal a few colors from their color scheme that he likes, and he makes a list of those colors. But we need to do some digging again because he mentions creating a function to randomly select one of the three colors without actually diving into how that function works. To do this, he has one variable in his code defining two functions, one called RAND and the other one called SELECT RANDOM. Starting with RAND, this takes two parameters, with one being our min and the other being our max. Because it's an arrow function, having it all on one line means that we're implicitly returning the result, but to make it a little bit easier to read and to be able to focus on the math, let's put this on multiple lines for now with an explicit return. To break this down a little bit more, let's ignore the math functions to start with. The plus one at the end here ensures that we don't end up with a zero, in case our min and max end up being the same number, and this is important because we multiply this number by a random decimal number, and if we were multiplying by zero, it would break the entire purpose of what we're building here, which is to have a random number and not always just spit out a zero. And now having random numbers is good and all, but having decimal places mixed in can cause some issues if you're trying to get a random item in an array, so that's solved with the math floor method, which rounds down to the nearest integer. The problem here is, as I just said, math floor will always round down, so even if you have a 5.99, it will give you a 5. Because of that, if we use this as is, we could get results that are lower than our min parameter, so to ensure we're always returning a value between our two parameters, we use the plus min at the end here. With all of that in place, let's go back to having this set up with an implicit return, and while we have one const statement here, you can use one const statement to declare multiple variables by comma separating them, which hyperplex did here. I can't be certain, but I'm going to assume it's because the second one, select random, relies on rand that we just broke down. Instead of comma separating them, we could just as easily look at it like this, and for now, why don't we do that so we can focus on this select random function? It takes an array as a parameter, and it picks a random number between zero, and however many elements are inside of that array. We always want it to start at zero, and we have the minus one at the end, because in JavaScript we always start counting at zero, so the first element in our array would be zero, and the last one would be the total length minus one. Great, now we can move those back together and finally use it to pick a random color for our star. That makes things much more interesting, and next up we can definitely make things a little bit nicer by introducing some animations to have them fall down and fade out, which hyperplex animation does nicely, though we do need to apply that animation to our stars themselves, which leads to us also having to figure out how long to make that animation, because if it's too short it definitely doesn't look great. And now quickly, before we move on to the next part where hyperplex fixes an issue, a little quick CSS tip that if the zero percent keyframe of your animation is where your element would be if you never applied an animation, you can actually skip that keyframe completely. Back to fixing the animation though, where if our star falls down and fades away, it then reappears back at the top, hyperplex takes a nice approach, avoiding trying to play with timings, and instead pokes a little bit of fun at the animation fill mode property, which to be honest, I usually forget the name of myself, since I generally stick with the shorthand for most parts of my animations anyway. But when we declare the animation fill mode to be forwards, what it does is, instead of having the element jump back to where it was before the animation started, it keeps the element at the 100% keyframe, so in this case it stays in an opacity of zero, and we never see it again before it's removed by the JavaScript. Now with all of that in place, hyperplex improves the animation, and when he does this, he actually does bring some purpose back to the zero percent keyframe as he changes the scale and rotation to start with, then also adds a middle keyframe as well to help give a little bit more movement as the star is falling, and then to help with the randomness of it all, he creates three different animations, and then he uses his select random function that he created earlier to be able to randomly apply to the stars, so we get different types of animations happening as they fall. Before we add that in though, we should first circle back to the animation fill mode that he mentioned earlier, because while I said that I like using the shorthand, now that we have three different animations, the easiest solution is to use the long form for the animation duration and fill mode, and then turn our attention back to the JavaScript where we can assign one of the animations at random, and whichever of those animations is applied, they're all going to use the same duration, and of course very importantly, as we now know, the animation fill mode of forwards. Once again, hyperplex continues to show us how we can take something complex and break it down into simple goals by comparing what we have so far to what our actual goal is and what we're trying to achieve, and he decides that the next step that we should try and address is the spacing between our stars. To do this, he suggests that we find a way to calculate the distance our mouse has traveled, and like any good dev, he does this with a little googling to find the answer, which of course hints that maybe we should do the same thing as he doesn't dive into the specifics of how it works. Now, some people might be frustrated by that, but diving into this function isn't really what he's trying to do here. Rather, it's exploring the thought process of how to break down a problem which is the most important skill a developer can have, and then of course also knowing how to search for solutions using Google are maybe even an AI tool these days. But since we're going behind the scenes, let's explore how he did it, or rather, let's dive into the solution that he found from Google. Looking at it like this, it might seem a little bit strange, but it's simply using Pythagorean theorem to figure out the distance that's been traveled. If we were only moving left to right or straight up and down, we wouldn't need this, but since we can move them out all over the place and it's going in diagonals, we do need to use a little bit of Pythagorean theorem to actually get the distance that has been traveled. The real trick here revolves around knowing where the last star was though, and to do that, he showed us code that looked like this, but in reality, it looks a little bit more like this. The first thing Hyperplex did here was set up an origin position and just set it to a zero zero for both our x and our y, to say that's where we're going to be starting, and then we're setting that for both our origin position for our stars and mouse position. We're then using that calc distance function within an if statement, where here what we're doing is we're getting the last star position, as well as our last mouse position, and we're checking if the mouse has moved more than 100 pixels. If it has moved more than 100 pixels, we're then going to create a star. Now, of course, that does mean that within our mouse move that we're doing, we do need to be updating the mouse position as long as our mouse is moving, which is nice and easy to do. And then any time our star gets created, we also want to update that last star position as well. With this all in place, the calc distance will always know if there's been 100 pixels or not. And once we pass that threshold, a new star will be created as we move our mouse around the screen. Now this code could be fixed up a little bit, or maybe even a lot from what we have right now, because it's definitely getting a little bit messy. This is on me though, and not hyper plexed as his final code is much cleaner. But for the moment, let's keep on going because at this stage he adds in the glow and we'll talk more about cleaning things up in a minute. Now for that glow, interestingly, at least for me, he simply went back to how it all started by adding those dots back in. But instead of leaving them as normal dots, he used divs and gave them a pretty substantial glow by using a box shadow and it worked out wonderfully. And even though he's using divs, which are block level elements, they're actually zero pixels in both width and height because they're position absolute. And well, not bad. I think it looks pretty good for everything that we've done so far. We have the glow that was actually really easy to do. We have the stars that are falling. And overall, I'm pretty happy with it. Clearly the background is different, and there's other changes that could be made to this. This is basically where his video brought us to. But it turns out there's more. As I mentioned, this all looks a bit messy right now, not to mention if I look at my version, which we have right here, and compare it to his final code pen, there's actually a few other differences as well. Like if I just wiggle my mouse a little bit without traveling far in his code pen, it will still make stars where as in what we've created so far, it won't. Why is that? Well, diving back into his code, not only is he checking for distance, but he's also checking for time and seeing how long it's been since the last star was made as well. He's also made a few improvements to how the glow has worked, and a few other things, plus he's cleaned the entire thing up compared to what we've looked at so far. But despite that, this is where our journey ends today, because I think it highlights what I wanted to explore here, which is how wonderfully hyperplexed breaks down complex problems into simple steps, but also how much time and effort he puts in behind the scenes in creating his wonderful examples, and that isn't even mentioning the effort that he puts into making the videos themselves. And while some people like having their hands held as they go through tutorials, like I normally do on my channel, if you want to learn a lot, go and read through his final code, which he shares on all of his videos, and do your best to understand the complexity that he always makes so simple. You'll learn a ton trying to break it all down like we've done today.