Coding Challenge #88: Snowfall

Подписаться 1,7 млн

Просмотров 171 тыс.

50% 1

Let's attempt to create a snowfall simulation using p5.js, sprite sheets and Perlin noise wind! Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #87: ...
🎥 Next video: • Coding Challenge #89: ...
🎥 All videos: • Coding Challenges
References:
🖊️ Alca's Snowflakes Codepen: codepen.io/Alca/pen/ppEgxb
📖 p5.js reference: p5js.org/reference/
Videos:
🔴 Coding Train Live 112: • Coding Train Live 112:...
Related Coding Challenges:
🚂 #128 SketchRNN Snowflakes with ml5.js: • Coding Challenge #128:...
🚂 #155 Kaleidoscope Snowflake #SupportP5: • Coding Challenge #155:...
🚂 #127 Brownian Tree Snowflake: • Coding Challenge #127:...
🚂 #129 Koch Fractal Snowflake: • Coding Challenge #129:...
🚂 #111 Animated Sprites: • Coding Challenge #111:...
Timestamps:
0:00 Intro
1:00 Snowflake class
2:30 Snowflake array
5:30 Gravity
10:30 Offscreen
17:15 Pick 2 Random Numbers
25:00 Pick 1 Random Number
36:57 Change Angle
40:12 Noise Wind
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: ru-vid.comjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#snowfall #snowflake #perlinnoise #wind #christmas #p5js #javascript

Опубликовано:

31 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 223

@chriscalver8595 8 месяцев назад

4:04 - "a beautiful snowflake....i have a keyboard now, i don't know how to use it but i'm very excited about this addition."

@papalevies 6 лет назад

You are like the Bob Ross of programming

@Baekstrom 5 лет назад

"There are no mistakes in programming. You just turn it into a happy little feature"

@gorgestboi1028 4 года назад

@Tim Laursen it’s not a bug, it’s a feature

@kuisma8 Год назад

Happy accidents create killer features 🤖

@anthonyzornig Год назад

way better than Bob Ross because Bob was no Progresive :)

@onelius 6 лет назад

This was fun! Watched this as real snow fell (and is still falling) behind my window next to me. It's mesmerising. Happy holidays!

@mattygamesow7933 6 лет назад

This livestream was so awesome! i hope you continue too make more holiday themed videos :)

@deansundquist9601 5 лет назад

I love the edit of this. Very funny exit, thanks for these videos. This one is a great treat for us that watch the live stream.

@DaCashRap 6 лет назад

Happy New Year, Dan! Thank you for your work. You are a great teacher and an amazing inspiration for other people.

@3mroos4 6 лет назад

the 50 minutes went really fast! so fun watching u having fun! merry christmas!

@TheCodingTrain 6 лет назад

Thanks so much!

@Naej7 6 лет назад

Beautiful ! I suggest that you let the snowflakes fall on the ground to see the floor becoming whiter and whiter, and why not make them melt as well :D

@TheCodingTrain 6 лет назад

Great idea!

@danilo2735 6 лет назад

Merry Christmas, you're the best, you deserve everything.

@TheEuphoricism 6 лет назад

This was fantastic from start to finish. Well done!

@aronpop1447 6 лет назад

This is awesome!! Merry Christmas

@charbelsarkis3567 6 лет назад

You'd think after years of programming you'd eventually never forget the this dot. 35:23

@TheCodingTrain 6 лет назад

Never!

@Kitulous 6 лет назад

I love languages where you can forget this dot and it still gonna work as if this dot was there! Java, Kotlin, C#, C++, hello :)

@mxcha 6 лет назад

I miss these! Do these more often

@backspacerhino 6 лет назад

Could you make a video with destroyable terrain, something like Worms or Pocket Tanks? I have absolutely no idea how to conceptualize such a thing. And I've been watching your videos for a while now and every single time I am amazed all over again at how much happiness you have in your eyes when you're programming and teach us. Thanks!

@pv2803 6 лет назад

Merry Christmas Dan!! 🌲☃️

@danielalvesaarte 6 лет назад

Merry Christmas! Amazing Challenge! It's was really fun.

@Reynevan94 6 лет назад

How about replacing the loop deleting flakes off the screen with FIFO queue, with length of maximum number of flakes that are allowed to be rendered? I think with some adjustments of that lenght it could make the code even faster, and maybe it would be somewhat new comparing to previous approach

@luispato9702 6 лет назад

that was great fun to watch. one of your coolest coding challenges! Have a nice xmas time! =)

@kineticsquared 6 лет назад

Merry Christmas everyone. Thanks to you, Daniel Shiffman, we will never have to dream of a white Christmas again. Now we can make our own.

@asston712 5 лет назад

Filled to the brim with holiday cheer (and cookies) :) Merry codemas!

@markwilkinson276 3 года назад

4:00 cracks me up 😂

@EvieOConnorxoxo 6 лет назад

Watching from my spaceship! Merry christmas!

@abhaysharma8569 6 лет назад

towards the end all the possibilities just made you go crazy xD

@TheCodingTrain 6 лет назад

Indeed!

@TheFlamingWaldo 6 лет назад

You inspired me to try to make something like this in Python. I did all of my own uh 'physics.' If you could call what I did physics, anyways. I figured it looked simple enough, and it got me interested in trying to understand how to work with graphics. I'm mostly just a hobbyist programmer, but this was really fun!

@LouSaydus 6 лет назад

This guy is such a nut, i love it!

@giowelo 4 года назад

I watched this 2 years ago and I finally found your channel again

@OliverTacke 6 лет назад

That was real fun to watch. Thanks a lot!

@TheCodingTrain 6 лет назад

Thanks!

@beaverjoe9171 6 лет назад

Before watching this video, i thought i have absolutely know how to use object to make animation raining / blobby / particles / snowflake like this. And all my knows are your first 15mins tutorial....

@mrcode9798 Год назад

perfect project😍 thank you❤️🙏

@artistpw 2 года назад

If you've never seen information about W.A. Bentley, he photographed many actual snowflakes. Those would be nice to use in this little app. Love this and it was just a creative process.

@interestedgamer5525 6 лет назад

P5.js and You, both are Awesome.

@brettefantomet 6 лет назад

I would change this by either doing it in 3d and making the flakes spin(in the direction that makes it wider and narrower, alternating, not spinning like a clock on screen, and keeping the height static. More like watching a coin flip), or i would have the flakes twinkle by simply making them wide, then narrow, then wide, then narrow, by simply stretching(compressing?) the image.

@IbakonFerba 6 лет назад

This video inspired me to code a Snowflake generator! You can have a look at it here: www.openprocessing.org/sketch/492405

@TheCodingTrain 6 лет назад

Lovely!

@ArnoldsKtm 6 лет назад

This is so cool!

@legendarycomputerprogramme6574 6 лет назад

so cool, great video!

@TheJuliMf 6 лет назад

You can also create a limit of snowflakes, so you only push a new one if the length of the array is less than that limit

@IbakonFerba 6 лет назад

I was a bit skeptical at some points during the video, but the end result looks really nice!

@matteolinux9467 5 лет назад

Beautiful

@eugenetswong Год назад

Thanks for the great lesson, Mr. Train. It should be interesting for me to try an Atari 8-bit version. I would probably have to scale it down a lot, though.

@Marcox385 6 лет назад

Happy Holidays Daniel!

@TheCodingTrain 6 лет назад

You too!

@MarlyssonSilva 6 лет назад

Awesome!!!

@FalipeSheep 6 лет назад

You should make a series where you have like 20 mins per episode and you continue off the other one to make 1 amazing game and the fans can make the art work / sprites

@turkenits 6 лет назад

Good job! Happy New year (:

@StarContract 6 лет назад

עידן טורקניץ חנוכה שמח למרות שנגמר 😂

@vtvtify 6 лет назад

לא ידעתי שכל כך הרבה ישראלים צופים בערוץ הזה😂

@anteconfig5391 5 лет назад

That getRandomsize() function you wrote was weird way of doing that. I never thought of making it that way. If I wanted to use a random function to make some things more likely than I would think about it in a probabilistic way and write something like this: function getRandomSize(){ let it = round(random(3)); if (it == 2){ return smaller }else{return bigger} }

@juanrobles7737 6 лет назад

I hope everybody had a great Christmas.

@Luffi98 6 лет назад

omg so beautiful

@Yazaar_ 6 лет назад

”Is anyone still watching this”? YEAH, even 6 months later. 🤯

@aravinthr2024 4 года назад

I'm watching it still now bro

@RubyPiec 4 года назад

Even 1 year later

@aaronsundstrom9921 4 года назад

I’m even watching it now a lot later in may 2020

@randomaccount6146 4 года назад

@@aaronsundstrom9921 me too its fricking summer and Im watching him making snow XD

@lucemansster 6 лет назад

Lol I was watching it! Merry Xmass

@yatharthgohil 6 лет назад

You could have made the background blue. That simple change would have made it looks so better

@artistpw 2 года назад

Also, it may be nice if you could turn the snowflakes so that they could be oblique randomly.

@loganwaffle 2 года назад

3:59 “A beautiful snowflake!” ::funeral organ::

@arturitoproductions 3 года назад

This video is still producing joyful experiences :)

@taba1950 6 лет назад

Happy holidays to father Unicron and his coding train

@clairewong4858 6 лет назад

I needed to make snow and I found the purple rain tutorial first. I changed the lines to circles and after finishing that I clicked another tutorial and found this...I'm so silly. I hope you had a good Christmas :)) Update: thank god this isn't for processing lol I didn't struggle with lines --> ellipses for nothing

@Spiritusp 5 лет назад

I believe the right way to choose r is Pow(random(a, b), -1/3)

@MrEliteXXL 3 года назад

4:49 I love you so much ahaha

@IngoBartling 6 лет назад

That's funny😃 I tried this by myself this morning with processing and BlueJ.

@IngoBartling 6 лет назад

But my main problem is not the falling snow. It's the already fallen snow at the bottom which is getting higher and higher, but which is also melting. After some time the JVR is running slower and slower because of the comparison which snowflake touches other snowflakes. Trying to work with ArrayLists of ArrayList, but it feels to complicated and wrong. Any ideas?

@nbrijeshkumar590 6 лет назад

just use the fifo method for queue and reduce the length of the program .well happy new year

@ridilatrois7991 6 лет назад

OMG I LOVE THE THIS DOT SONG 😂😂😂

@Creuilcreuil 6 лет назад

49:00 found this to wrap a value in a range // return a value between mini - 1 and maxi + 1 function wrap(val, mini, maxi) { if (val > mini) return mini + val % (maxi - mini); else return maxi - (mini - val) % (maxi - mini); } this.pos.x = wrap(this.pos.x, -this.r, width + this.r);

@TheCodingTrain 6 лет назад

Cool solution!

@tonywalters66 2 года назад

Brilliant tutorial. Ta

@candycraft65 6 лет назад

great videos

@lokeshlkr 6 лет назад

this is the first time ever i watched a youtube video so long... :D

@lonesnakesniper 6 лет назад

this guy is a god

@cse9003 6 лет назад

Wow ur so awsome wish one day be like u 💚

@rednufos820 6 лет назад

"Let's make the wind bigger." made me laugh

@Trent-tr2nx 6 лет назад

question for more advanced coders: at 7:17 dan sets acc = gravity in update, which means that gravity is assigned whenever update() is called. I know this is not good form, because acc will never change, but how computationally expensive is this? Is JavaScript smart enough to know what acc will never change?

@TheFireBrozTFB 6 лет назад

if javascript wanted to be smart enough to figure out if gravity changes or not, it would take to much computing power, since it would have to check everywhere for that, also it would have to check if acceleration were being modified anywhere else, so javascript isn't smart enough to figure that out. now in programs as small as this, it would be easy, but, in large programs, it would take a lot of time. Of course, thats not based on research, just a hypothesis ;)

@anshnanda 6 лет назад

How do I make the snow pile up? Also great video, finally got through it all :)

@sibisita7019 6 лет назад

I love the this dot music

@zacharymcarthur9013 5 лет назад

Just curious but would this have worked for the Perlin noise wind, could you have applied the noise function to each snowflake but given them each a different starting noise position based off where they are located within the width of the canvas... (meaning maping the noise argument number to the width of the screen) That way they would go in the same general direction in a wave back and forth across the screen just at different rates?

@wildfyah 6 лет назад

Wow 😮

@zorkan111 Год назад

All cool, but we don't see accelerating snow. It reaches terminal velocity long before it gets low enough for us to see it.

@tornadofay 6 лет назад

nice job and happy new year, I'm like number 999 xD

@maliqgashi8543 6 лет назад

Really firs the bell and now the piano... The man that mede me think that i am not an idiot after all😂

@BV51Gaming 6 лет назад

Can you make a platformer for the next coding challenge? You could also use a physics engine like matter.js to make it.

@dappermink 6 лет назад

Is this piano keyboard a gift? :') It's an amazing idea anyway! Merry christmas Dan!!!

@Holobrine 5 лет назад

You could have returned the smaller of two random numbers instead of constantly generating them until the order is right.

@fdetv420 6 лет назад

I have a data visualization assignment And im not sure what to do Just putting that out there

@txnmyn6538 2 года назад

It's so lovely!! Can I try this snow in Processing as well?

@Tony49Romas 6 лет назад

Merry christmas everyone🎄😄

@jasperdiscovers 6 лет назад

cmd-shift-d to clone a line, so you don't have to copy-paste it ;) Merry Christmas!

@TheCodingTrain 6 лет назад

Thanks for the tip!

@grainfrizz 6 лет назад

Why do we perform the actions of the object in the draw function? Is it a bad idea to do it statically in the object's private methods instead, then just render?

@lleytonmorris6305 6 лет назад

Silly question but does anyone know the colour scheme of his coding console? I am using visual studio code and it has similar code color but they are still slightly different. any help would be appreciated

@korolevdenize 5 лет назад

Can anyone explain variable "flake" used within the for loop scope in sketch.js. It is not declared within the for loop. Does it need to be declared? Also, could you explain flake.snow()? Is flake an instance of snow object in this case?

@frankmyers4736 3 года назад

I'm a begginers in python and I don't really get the syntax but your videos let me understand workflow and how to make some thing from scratch using basic principals. thank you and keep up the awesome work! 👍 (edit) does this mean the same as self in Java?

@connorclub6244 Год назад

yes, they both just point to the current thing you are defining this in (actually not the same for python because self only appears in classes, but it doesn't really matter)

@haifengzeng464 6 лет назад

These textures are very lovely ,how can we generate it ? Can you do a post about that?

@khoaang6039 6 лет назад

I love You! Idol~

@DerEddieLoL 6 лет назад

How do i adjust me brackets so i get all those function suggestions like createVector() when i start typing "c...."

@rodrigocerna5756 5 лет назад

Hey, this is a great code. I have a question, how can i have the snow in my back like u. Please, share the secret to make that effect too. Do u use a program or something? Thank u so much.

@tobir.9575 6 лет назад

Hey Dan! I've been watching your videos now quite for a while and I really love them! Now i was wondering, where can actually watch your livestream?

@augustemmery-funch620 6 лет назад

he streams on this channel, usually on mondays.

@TheCodingTrain 6 лет назад

Check the GitHub code repo’s README for schedule updates!

@vaishnavvaishnav2421 6 лет назад

Merry Christmas Sir

@Krondelo 6 лет назад

I made a time consuming animation of snowfall in Flash, that was fun but so tedious! Coding is better.

@JohnJ-xm3fg 6 лет назад

16:55 I am predicting something like this: abs(random(-4, 8)) so it’s double as likely to be less than or equal to four. Let’s see if I’m right

@JohnJ-xm3fg 6 лет назад

Nvm pick two numbers approach... Edit: shouldn’t the following be better? function grs(){ let r1 = random(1), r2 = random(1); return r2 > r1 ? r1 : r2; }

@karlosm100 6 лет назад

Nice T-Shirt

@cannabclaus8036 6 лет назад

Best intro HAHAHAHA

@arsen3783 6 лет назад

Have you tried Firefox quantum? I've been using it for a while, never been happier honestly.

@ianchui 6 лет назад

YAY

@thealphadubstep5403 2 года назад

I have a question about this project and I am not too sure what the best answer is. Would it be faster to make a similar animation but with CSS? Because my university's website has a snowfall animation that's making my browser lag, lol

@leKtO_ 6 лет назад

Hey! I really love these JS "tutorials" they are really helpful and help me learn a lot! I was wondering if you'r skilled in PhP and could maybe do a tutorial on PHP MVC, because i have noticed that there's really no good tutorials online for that and it would be really helpful for a lot of us new programmers :)

@leKtO_ 6 лет назад

I understand that it goes off the theme/subject that you have on you'r channel but it would be awesome to see it