So I was like "this.canvas, this.canvas, thiiiis.canvaaaaaaaaaasssss!", then "innerHeight, innerHeight, innerHeeeeeeight"... but it's way easier for me to be smart on the flip side, eh? :D Enjoyed every minute of it. Thanks, Paul.
Damn, Paul! When you hit F5 and that snow started falling I felt the whole world go silent 🤣🤣 Too bad about the minor bug though. This would have been some kind of record.
Not sure if this is bad practice, but when I make a resize handler for my canvas, I do this.canvas.width = this.canvas.clientWidth (same goes with height), which ends up using the width and height set in the CSS! Which means that you could wrap it in a parent element that's not the size of the window and it will fit itself just fine! Super cool!
Here's my little gift for you; you can highlight multiple lines in VS Code and Ctrl + arrow move 'em, just like you did the individual lines there in the beginning. Happy holidays!
Precalculate it. What you'd do is pre-draw the blurry snowflakes based on vx and vy to a hidden canvas, then you'd just blit across that chunk of the canvas for the snowflake.
You could avoid the for loop to create snowflakes with my favourite trick: Array.from takes a length and a map function. `Array.from( { length: flakes }, () => new Snowflake())`
Whats the background music? p.s: you're a legend. Edit: how do you make the canvas transparent and over the whole page while maintaining the interaction with the dom? (for example: snowflakes over the whole page and sill be able to click a button under the canvas)
Yeah I showed both ways, the resize handler is done with an arrow. The downside is that it is more fiddly to remove it unless you keep a ref. Music is Epidemic Sound :)
Why not, indeed! If you prefer it, use it. I suggest developers embrace a variety of approaches so that they build a toolkit of skills from which they can choose the most appropriate course of action. Here I just felt like making a class.
![Megan Thee Stallion - Mamushi (Remix) [feat. TWICE] [Official Audio]](http://i.ytimg.com/vi/5c0_u9PsrsQ/mqdefault.jpg)
That was a lovely video! Enjoyed it from start to finish 😁
Not that I didnt have faith in ya but I was also quite surprised when it worked first load!!! Hahaha thanks for another great vid Paul.
I added a bit of color to that snow and made a confetti version. There! Year-round flakes on the screen! 🎊
So close... So close... 😁 👍
Making snow with JS.. Like in good ol'days [sighs nostalgically]
So I was like "this.canvas, this.canvas, thiiiis.canvaaaaaaaaaasssss!", then "innerHeight, innerHeight, innerHeeeeeeight"... but it's way easier for me to be smart on the flip side, eh? :D Enjoyed every minute of it. Thanks, Paul.
Pair programming where the pair is in the comments and after the video is edited.
Damn, Paul! When you hit F5 and that snow started falling I felt the whole world go silent 🤣🤣 Too bad about the minor bug though. This would have been some kind of record.
I hope you shed at least 1 tear after it worked first time. Those are wonderful moments.
22:29 window.innerHeight
22:30 Paul changes selection from window.innerHeight to window.innerWidth
Paul weeps
these videos are so refreshing to my soul
Haha, this is so funnnnnn to watch! Great video!
Lots of fun. Thank you, and merry Christmas.
I laughed like an idiot when the orange connected with your noggin at the beginning.
Job done.
Born to teach 👏🏼
H w 97y
Heyy. I expected to see snowflakes all the way at 24:46 ... ❄️❄️❄️!
Nevermind. As always, great video!
Not sure if this is bad practice, but when I make a resize handler for my canvas, I do this.canvas.width = this.canvas.clientWidth (same goes with height), which ends up using the width and height set in the CSS! Which means that you could wrap it in a parent element that's not the size of the window and it will fit itself just fine! Super cool!
Yeah that works. I went for direct today but yeah
You are awesome Paul! thanks for the video
Great video!!! Thank you for creating great content I wish there was more like this online.
Love it! Thank you :)
That was awesome 🚀. I love how natural you're before camera!
btw sick sweater 😆
Awesome Paul! Happy snowy days :)
Awesome :D
awesome, but seems it uses CPU or GPU a lot?
Here's my little gift for you; you can highlight multiple lines in VS Code and Ctrl + arrow move 'em, just like you did the individual lines there in the beginning. Happy holidays!
I'm trying to add a blur to the snowflakes and that turns out to be very computationally expensive, even if i apply it to the canvas. any suggestions?
Precalculate it. What you'd do is pre-draw the blurry snowflakes based on vx and vy to a hidden canvas, then you'd just blit across that chunk of the canvas for the snowflake.
No bugs, it's a Christmas mirac... Oh
Happy winter holidays! And nice sweater btw :)
So I was like: hmmm, why does it have to be innerWidth .. 🤔 But great video again!
Haha
@@aerotwist vscode did that, I get that all the time, one second I look away and it suggested another variable :) Great video!
Haha, that intro - im only 10 seconds in, but that deserves a like :D
Another great video! your expressions kill me. 😆
I'm stuck with my face. A life long thing, apparently
Loving the fact you made a mistake... You are a human after all.
So. Close!
Will you publish it on github?
I hope one day I can become as talented as you in javascript...
Just practice :)
Cool ❄️
You could avoid the for loop to create snowflakes with my favourite trick: Array.from takes a length and a map function. `Array.from( { length: flakes }, () => new Snowflake())`
In 6 months I'm not going to understand what I did and why 😂
@@aerotwist ha fair enough. Definitely an important consideration
Wanted to suggest the same thing.
I wish my bugs would be as tiny as mistaking the innerWidth for the innerHeight
What's so frustrating is that I even said the right thing, I just chose incorrectly from the autocomplete!
You didn't show the canvas after u fixed the bug 😞
Hah did I not? Well it was fixed.
:O awesome!
Whats the background music? p.s: you're a legend. Edit: how do you make the canvas transparent and over the whole page while maintaining the interaction with the dom? (for example: snowflakes over the whole page and sill be able to click a button under the canvas)
Yeah I showed both ways, the resize handler is done with an arrow. The downside is that it is more fiddly to remove it unless you keep a ref.
Music is Epidemic Sound :)
@@aerotwist quick edit i commented mid video...my mistake. i changed my comment and asked another question. Thank you!!! pls upload more.
canvas { pointer-events: none; }
Maybe also change the background colour depending on your local time ;)
why not used a factory function ?
Why not, indeed! If you prefer it, use it. I suggest developers embrace a variety of approaches so that they build a toolkit of skills from which they can choose the most appropriate course of action. Here I just felt like making a class.
See a Paul Lewis movie, update it. =)
We expected buggs! 22:44
We did
That shouldn't count as a bug because you actually said "innerHeight" verbally but typed innerWidth! Now go tell Jake! lol
Well yeah, I feel like VSCode stitched me up there ;)
Dammit Paul, make a gist already!!!
It's less about the code and more about the way of thinking. The gist loses all that wonderful Paulness that only a video can provide.
@@aerotwisttrue , but we need the code at the end to compare with our code 😋