The real code behind a @Hyperplexed video

Key Takeaways

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 were introduced to the remove child method which he uses for this next step and then wraps it all in a set timeout 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 Code pen 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 an Allon 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 mint 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 five 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 setup with an implicit return and while we have one con statement here you can use one con 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 wanted 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 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 0% key frame of your animation is where your element would be if you never applied an animation you can actually skip that key frame 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 film 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% key frame so in this case it stays at 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 0% key frame as he changes the scale and rotation to start with then also adds a middle key frame 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 it 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 film mode that he mentioned earlier because while I said that I like using the Shand 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 we can 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 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 or 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 now 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 the mouse 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 a0 0 for both our 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 anytime our star gets created we also want to update that last star position as well with this all in place the Cal distance will always know if there's been a 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 hyperplex 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 pixels in both width and height because their 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 right here and compared 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 whereas 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 is worked and a few other things plus he's clean 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 hyperplex 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