The real code behind a @Hyperplexed video

@Hyperplexed is a master at taking really cool and complex-looking designs and effects and breaking them down to their core concepts, showing that, often, they are a lot simpler than they might appear at first. To be able to do that though, and to keep his videos short and to the point, there is often quite a bit of complex code hiding behind those simple ideas.

In this video, I decided to take his latest video, which he had given a Pixar theme, and dive into some of the code that is hiding behind the scenes.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:35 - Creating elements as the mouse moves
02:18 - Why this simple step is so important
02:48 - Turning the dot into a star
03:31 - Adding colors to the stars
06:12 - Adding the falling animation
08:28 - Spacing out the stars
11:05 - Adding the glow
11:52 - The other hidden parts

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Hyperplexed]

Fantastic breakdown Kevin! Thanks so much for featuring my video, it's truly an honor.

[quanghungpham]

Hyperplexed has been my favorite channels because of the short, full content and exciting way of creating effects. The most amazing thing is he's teaching in Javascript code too. It's great to see Kevin is noticing him now.

[Aitch-Two-Oh]

Nice deep dive of the random colour function at 3:48, only here's how it really works... 😁

The '+ 1' extends the range to include 'max' as a possible output value and it affects the result only when 'min' and 'max' differ.

Floor always rounds down and that is what we want. Sidenote: adding 0.5 before flooring would round up/down to the nearest integer (and not what we want).

The '+ min' offsets the result to the requested range, but 'min' is always zero here so it does nothing.

Putting this together we can see the whole show in simplified form:

* items.length)]

😁👍

[neilpadfield]

Really great video, Kevin. I really liked the speed and flow of it, in some ways a bit like a Hyperplexed video. You went into the details but kept it moving along quickly.

[mykalimba]

9:30 A game programming "gem" that is very well-known to veteran game developers like myself is to eliminate the square root calculation when determining the distance between two points, if you are only concerned about comparing that length to some other distance. So instead of taking the square root of (dx squared + dy squared), you would simply compare the un-square-rooted value against the **square** of your comparing distance. For instance, in this case, you would just compare (dx * dx) + (dy * dy) against 10, 000 (which is the comparing distance 100, squared).

Also note that instead of using the Math.pow() function, I would opt for simple multiplication to compute the squares of dx and dy. I have no real idea what the Math.pow() library code is doing to calculate its result, but I have faith that a simple multiplication is something that would be fully optimized in a modern JavaScript interpreter.

[moritzschuessler]

What i really like at his video is the thought process. When seeing stuff you first think: "Thats really hard and i cannot do it" But when u actually break things down it get surprisingly easy. Thats a think more people should learn and maybe try to embed in their tutorials. You just get better and more confident when coding.

I dont see this in most tutorials (youtube and text) They just pre-chew all the code and new developers copy it without thinking about it. The next time they stumble above a problem they comment: "can someone make a course or tutorial with all the code - i want to learn it". Meanwhile everything is described well in the docs or can be archived with given informations from the post.

[MajorUnderdashPain]

Watching one of my favourite webdevs dissect another one of my favourite webdevs. This truly is the greatest crossover of our time.

[CLeovison]

Kevin doing more tutorials that include js is really 🔥🔥

[rajaulislamratul]

A few days ago I and a lot of people commented on kevins video saying that he should come up with more javascript contents on his channel and today he is explaining hyperplexed's complex javascript animation. Thank you kevin for always listening to our thoughts

[santoshparker]

Kevin is slowly turning from the king of CSS to the king of front end development

[AntonioGonzalez-wewx]

This crossover was better than the entire Marvel Cinematic Universe

[deadlyecho]

I like this collaboration ❤... Hyperplexed & Kevin... we need more, hopefully in the future 🙏 😊

[--bountyhunter--]

I always thought Hyperplexed was underrated
depending on how much effort he puts into his videos, hi definitely deserves more recognition
it was an amazing thing for you to mention his channel as well his effort

amazing video like always ❤

[pravinmane]

Liked the way you broke down the problem and solved step by step, it was really easy to understand

[vilijanac]

Bravo, this video itself, is an excellent production.
Very professionally done.

[stanimirnikolov]

Amazing video, thank you! Appreciate that you are reiterating that it is all about the thought process behind it.

[denizorsel]

Kevin and Hyperplexed content, a match made in Heaven! Thanks to you both, Web is better than ever!

[ScriptRaccoon]

I didn't know about hyperplexed. Instant subscriber. Awesome content, thanks for the (implicit) recommendation!

[joeerickson]

Kevin and Hyperplexed Colab would be 🔥🔥🔥

[oswaldoolea]

congratulations! very complete video which means very professional, guess a lot of work and time to make, top quality result.