The real code behind a
ฝัง
- เผยแพร่เมื่อ 18 มิ.ย. 2024
- @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
✅ Hyperplexed’s original video: • If Pixar Made Programm...
✅ Hyperplexed’s channel: / @hyperplexed
✅ My final code: codepen.io/kevinpowell/pen/Vw...
✅ His final code: codepen.io/Hyperplexed/pen/OJ...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Fantastic breakdown Kevin! Thanks so much for featuring my video, it's truly an honor.
Thanks for continuing to make such awesome videos, and really happy that you liked it 😊
Wow 2 legends ❤️
@Hyperplexed @KevinPowell Thanks to you both for all that you do. I've learnt so much from both of your channels. I hope you keep up the great work for years to come.
Ultimate crossover😮
Hey! @Hyperplexed big fan... both of you, never disappoint when it comes to thinking out of the box!
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.
I've been following him since basically day-one of his channel. I love his approach a lot!
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[Math.floor(Math.random() * items.length)]
😁👍
Watching one of my favourite webdevs dissect another one of my favourite webdevs. This truly is the greatest crossover of our time.
Kevin doing more tutorials that include js is really 🔥🔥
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.
Kevin is slowly turning from the king of CSS to the king of front end development
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
This crossover was better than the entire Marvel Cinematic Universe
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 ❤
I like this collaboration ❤... Hyperplexed & Kevin... we need more, hopefully in the future 🙏 😊
Amazing video, thank you! Appreciate that you are reiterating that it is all about the thought process behind it.
This is awesome, your dedication to teaching is commendable.
Liked the way you broke down the problem and solved step by step, it was really easy to understand
Awesome stuff as always! Btw the blue and red background lights look great on TH-cam's ui blur. Especially on the landscape sidebars. Nice job!
Too cool, totally gonna swipe this and remix it for one of my projects. ^_^
Bravo, this video itself, is an excellent production.
Very professionally done.
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.
And as to _why_ you would want to eliminate a square root calculation, the reason is that they are expensive to calculate (in CPU time). And since this code is run every time the mouse moves on the page, the processing power that is saved by _not_ performing a square root calculation is probably measurable.
You can do squares simply with x**2
Kevin and Hyperplexed content , a match made in Heaven! Thanks to you both , Web is better than ever!
Hyperplexed is a coder and an artist
I just saw the other video, this is great!
Love this!
I didn't know about hyperplexed. Instant subscriber. Awesome content, thanks for the (implicit) recommendation!
beautiful
Hyperplexed + Kevin Powell
Am I dreaming?
Demn! I've always dreamt of this ❤
congratulations! very complete video which means very professional, guess a lot of work and time to make, top quality result.
Now, we need another TH-camr to take a deeper look at Hyperplexed's video editing to see how he always manages to create videos that look amazing :D
I love hyperplexed he inspired me to start learning web development
Kevin talking about JS is just feels odd. Like your violinist friend suddenly play Debussy on a public piano. It's not unreasonable, that she has that skill, but it's still kinda surprising and tantalizing to watch. XD
Haha I feel the same anytime a violinist plays piano.
Kevin and Hyperplexed Colab would be 🔥🔥🔥
This is another perfect use case of rxjs
When I clicked on this video I was not expecting the best explanation of javascript random number generator functions I have ever heard lol
wow, thanks for sharing
Both are legends
top!!!!
HYPERPLEXED the goat
Hyperplexed video for a Hyperplexed video.
Is anyone else bothered by the lack of a shrink animation for the box-shadow glow? I get that it's gonna affect performance but the effect would look so much better with the glow tapering off imo.
Either way I love seeing my two favourite CSS channels in the same video.
I wonder if it wouldn't be better if instead of adding X number of span for each stars , it would be better to have one canvas covering the page(maybe with a point event none) and with all the animation tacking place inside the canvas instead.
The problem that the stars are not been created in small movements around the same star can may be because of the calculate distance you used was based on Pythagoras theorem so it was only calculating the straight distance between the two points{displacement}. Hyperplexed may be used a different approach
What do you use to record your screencasts and edit them?
A normal video of mine is done with OBS to record my screen. In this I used a bit of that, plus some snappify for a lot of the code animations, with editing done in Premier. Most of the fancy stuff in this one was directly from Hyperplexed's video though, and I'm not sure what he uses. I was able to reproduce the slide transitions relatively easily in Premiere, but I wouldn't be surprised if he uses something else like AfterEffects for a lot of what he does, but I honestly have no idea 😅
My toxic trait is that me thinking i will be able to break down other animations too but fail to do so...but still quite good learning
Nice AD dude congrats
invoking tailwind to grab a couple of colors is insane
4:09 You missed the opening curly braces
Dunno if this has been mentioned before, (either here or on hyperplexed video) but `const mousePosition = { x: e.clientX, y: e.clientY }` wont work when scrolling the page.. use ` const mousePosition = { x: e.pageX, y: e.pageY }` if your page allows the user to scroll.
It’s great! Except it should be done via or at least elements, NOT by polluting the DOM with a bunch of semantically incorrect !
(Shoutout to @frankslaboratory for this sort of thing)
saying this is DOM pollution with incorrect semantics just shows you have no idea what semantics are. Care to enlighten us as to what you think a span means semantically and why this is "pollution"?
Also, you aware that canvas is a pain in the ass to make responsive, is more memory intensive than a bunch of spans and performs like shit on Firefox?
canvas is *great* for a lot of things, but I think for this it's a bit of overkill. The animations here are all high performant using transform properties, and spans and divs have no semantic meaning anyway, plus they're removed relatively quickly, so you never have more than ~10-20 of any at any given time. I think you can make a case for canvas here, but I have a feeling the code would be more complex, and I'm not sure if there'd be a huge benefit.
this is why i will never shit on frontend the js is pretty trivial but i will never get which css things to change. Enjoyable to watch but I don't think I will ever be touching css 😂
anyway Sir, my college senior in laboratory gave us task to make " * " inside input:password which it automatically give us disc " • ".
when i looked into it, i cant find any solution other than javascript by stacking a container with absolute position inside password field. And using array that display the asterisk based on how many character exist when we are typing.
like if the javacript check that the input has 9 characters then it return the value into the container inside of password field.
So we also doing CSS transparent to the text of password field to hide the disc.
So its like we covering the field with container that return asterisk * .
is there any way of how to deal with this without javascript?
also i think there are lot of application who use "*" for password instead of dots. But i think that those software are using different tools that automatically set the value to asterisk for password field and not disc like HTML
Sure, make a font, swap out the disc for an asterisk in the font and use @font-face and font-family to style your input element.
The dot needs to be position fixed not absolute as you're dealing with the viewport and not the closest ancestor.
Just a common thief Kevin
And then there's Ana Tudor level 🤯😅
4:10 Not having the { drives me nuts
The "how long" function seems a little silly, no? Would the best solution not be to instead sum up the distance that the mouse has moved since the last star, and once that distance passes a threshold, draw another star and reset the distance?
That way you can still create stars by wiggling the mouse or moving it smoothly across the screen
The issue if you only measure time is, if you move the mouse quickly, they end up being very spread out. So you want to use distance for fast mouse speeds, and time for when it's just wiggling around or moving slowly.
@@KevinPowell Ah, I meant something more like:
let mouseDistance = 0
const lastMousePosition = {x: 0, y: 0}
const STAR_DISTANCE_THRESHOLD = 100
window.onmousemove = (e) => {
const currentMousePosition = {x: clientX, y: clientY}
// Star setup ...
mouseDistance += calcDistance(currentMousePosition, lastMousePosition)
if (mouseDistance > STAR_DISTANCE_THRESHOLD) {
// Create star...
mouseDistance = 0 // or mouseDistance -= STAR_DISTANCE_THRESHOLD
}
lastMousePosition.x = currentMousePosition.x
lastMousePosition.y = currentMousePosition.y
}
That way you're looking at more the distance along the line that the mouse creates, rather than the absolute distance between any two stars. Maybe I'm missing something!
Love the video!
To be honest, I'm more impressed by the video editing than by the code x_x
Yep a common thing how they deliberatly leave code out and then they get thumbs down for missleading.
04:11 missing {
.
I had trouble reading the title 😅
Yeah it was a little awkward, I've updated it :D
Oh man, thanks. But now I'm triggered. I watched the Hyperplexed video days before you reviewed it now. And back then I was already biting my tongue, when seeing createElement and appendChild in a onmousemove handler and other fauxpas. So:
1) Please, just: DON'T DO IT! That is not, what you want for high performance purposes. You alter the DOM each time. Instead, create all spans at program init and just reuse them in onmouseover. Hide/unveal them. Use classes or inline styles, but visibility instead of display to make it easier for the render (tree) management to update.
2) Don't use Math.random for random item picks, use your own integer based short pseudo random routine. It will be much faster.
3) Pythagoras distance calculations are very slow: Swap it against some simpler algorithm or at least: Don't apply sqrt!!! Just compare the sums of powers of the triangle legs (cathetus).
Your audio is desynced from your lips....
thanks, now i unsubscribed from hyperplexed cz he does not tell us everything!
It's crazy how you can get ad revenue by just re explaining an already perfectly explained video.
Not really doing this to make money from, but sure 🤷
@frankmcnulty1515 rude 🙄
Congrats Kevin, your first encounter with a proper bellend on TH-cam.
@@hyperprotagonist Eh, probably not the first. Also had a lot of fun researching a word 'bellend'. English is fascinating.
Dude, I literally wished that Hyperplexed made a more detailed explanation of what he did in his video. And here is Kevin, doing just that. It's awesome and very helpful. So, whichever ad revenue Kevin makes from this, he deserves fully.
`math.hypot` for calculating hypotenuse