16.10: Particle System with JS Array Functions - Topics of JavaScript/ES6
HTML-код
- Опубликовано: 1 окт 2024
- In this video, I demonstrate higher order array functions in the context of my simple particle system coding challenge.
🎥 Simple Particle System: • Coding Challenge #78: ...
🎥 for...of video: • 16.4: for...of loop - ...
🚂 The Coding Train website: thecodingtrain....
💖 Support this channel on Patreon: / codingtrain
🛒 To buy Coding Train merchandise: www.designbyhu...
📚 Book recommendations: www.amazon.com...
💻 github.com/Cod...
🎥 For an Introduction to Programming: • Start learning here!
🎥 For More Coding Challenges: • Coding Challenges
🔗 p5js.org/
🔗 processing.org
📄 Code of Conduct: github.com/Cod...
I love your videos, please never stop doing them :)
"Do I qualify as a functional programmer?" So... if you don't I don't think anyone does.
Your humility goes beyond compare.
Thank you for your inspired work.
We all have a lot to learn!
You are very humble and Its very helpful watching you code , and don't hesitate to leave in all the debugging that is enjoyable and very helpful. I will be using this lesson while I attempt to refactor the Asteroids game. i have been learning with while i build it. i was inspired by your videos to use it as my learning project. I am diving into es6 or maybe stumbling might be a better association. Here is a link if you're interested ( customstairpro.com/asteroid/index.html ) . I will add it to git hub and all that when I'm done. still working on initiating all the levels and the variety of game play. as well as mobile button so i can play it on my tablet. Thank you
That was a good Idea, the way you make each individual little video about one function, than group all them in one nice and clean example. Very well done!
This series has been so helpful so far!! Thank you. Somehow I got through 10 videos in one sitting lol
Simple and great example with lots of potential!!
I'm glad ur embracing ES6 and Higher order functions! Only got a small advice you might wanna consider, perhaps chaining your class calls, so instead of update and show being 2 different lines, you could return the class instance so you could do p.update().show() :)
Good advice, but only in moderation. Some patterns work really well with this (i.e. Builder), but generally you don't want to have
myInstance.method1().method2().method3().method4()...methodN(); as it convolutes the meaning of the code segment. Watch out for bad code smell :)
avatar098 completely agree :) should be used only in moderation and just when it makes sense :)
avatar098 if you're doing a lot of method chaining, just put each method call indented on it's own line like:
const nums = new Array(100)
.fill()
.map((_, i) => i)
.filter(x => x > 10 && x % 3 == 0)
.join('
');
jquerize all the things. ye idk how i feel about this
victornpb it's a common pattern in JS :)
you are so awesome!
I used to hate java. At college studying IT there was java everywhere. And I could not understand. I am a Linux guy, I love kernel code, I love programming at sys level, programming in C. Also had a lot to do with C++. And java was a academical approach - at least for me. And back then (2011/12) also JS was more like to be used for alert boxes and simple mathematical operations;?back then PHP was the bitch to rule the shit. I had quite an extensive journey to sys and net administration for the last 6 yrs. 4 months ago I wanted to get an updated overview of what's going on with web dev etc. blew my mind!
I had assumed that JS was some Hippe language to be disappeared within 2 or 3 years. I thought ruby might be the way to go.
Well, obviously the wrong horse to make a bet on. Now you come into play. All I missed is being filled by you. Even more efficiently than autodidactically consuming JS by myself. Thank you so much for thate
Shiffman, you are a very functional programmer of higher order! Rejoice by the Emperor.
Why splicing the objects??
Instead we can make the particle object position to zero and alpha to 100.
Hope u get it.
Hi
I executed the following snippet without {} for arrow function and I get the result as 15. However when I put the braces I get undefined
let ar1=[1,2,3,4,5];
let reducer1=(acc,currentvalue)=>{acc+currentvalue};//I get undefined with {} .However without {} i works perfectly
console.log(ar1.reduce(reducer1));
Why?
These videos deserve more views.
Awesoem things just cool
sir can you make for me....or solve it please..
document.onclick = initall;
function initall(){
document.onclick = init;
}
for (var i=1; i
Isn't this really inefficient? You're looping through the same array 5-6 times, whereas before it was only 1. These higher order functions also have lower efficiency than using a simple for-i loop.
Yes, this is an excellent point!
Thanks for the video though! Always love watching these to learn more than I know.
I'd guess the larger concern is that each call to these 'functional style' functions produces a new array, with a cost of memory use and garbage collection. As for looping, it's probably not much of a difference between doing "5X" once or "1X" 5 times. But I could be wrong.
I'am trying to mimic your code, so i can learn practicing. Everything looks the same but my particles amount are only 51 instead of 255. How i can change the amount of particles that i have? Anyone?
18:54 - basically everyone who started to program :D
For the sort function, what if you get 0? What is a.col - b.col at 17:40 is equal to 0? Is that a positive or negative or true or false?
That's exactly how you should teach coding!!!
you know what, a lot people rag on you for writing old school for loops, and there are many cases where it indeed helps readability or understandability, but a plain for loop with a cached length variable is the fastest way to loop in javascript, by a wide margin. there are many benchmarks out there about it, so whenever someone complains about the plain for loop just say "it's technically the fastest way to loop in javascript." because it's true!
thanks for this comment!
YOURE THE COOLEST!
Such a great series
Thank you!
I didn't not understand the reduce part why did you add that 0 and createVector(0,0) in the return part of the arrow function
I'm learning Haskell at college and suddenly it is just like the good ol' JS thanks to your videos!
Nice series dan. It helps me a lot to understand about high order function that before i cant really understand by watching another videos. Your simplify and fun explaination makes me feel comfortable and excited to learn about this series and at last makes me understand about higher order function. You are my fav dan. Cheers!
thank you!
you lost me bro....
Hey!! you are awesome!! Thanks for share your incredible knowedge of javascript and another stuffs!! You inspire me everyday! Thanks!! Saludos desde Argentina!
I noticed the issues you were having with fill(). So, to keep with your ES6 higher order function theme, I wrote a method to fill an array using ES6 Generators.
Here's the gist: gist.github.com/n-j-m/fb726239a62b48eee0720ddc60200cee
Hope it helps (and maybe you'll do a tutorial on generators??).
You make learning programming fun! Keep up the good work!
Since this video is roughly mainly about es6 syntax for array things, my question is this :
What is the current es6 browser support and could it be used in big, say like asp. Net mvc, projects? Or is backwards compatibility a hindering factor in that regard?
I'm very much like you in that inline/higher order functions make me uncomfortable. I don't feel that they add a ton of value for how much readability they detract. But, that's the way the industry is now, so I think it'd be awesome if you keep using them consistently so we can all get more comfortable with them :)
for those who also have performance concerns when using these functions for animation, there's fast.js :) github.com/codemix/fast.js
I love the way you teach code! Where have you been my coding lifetime! Can you do a short video on sorting an array by the price of an item, please?
I love how you are passionate about programming :)
how did you download javascript becuse im trying and i cant do it for some ressone it will be relly helpful
Thanks for the videos. My brain hurts slightly less now!
Are there any hidden/included parallelization behind these functions?
In order to remove a loop, you can put the update and show inside of the filter : particules.filter( p => {p.update();p.show();return !p.finished();});
And the sums can be particules.reduce((a,p) => {a.x+=p.x;a.y+=p.y;return a;}, {x:0,y:0});
You’re the best glad we got back to graphical stuff. It’s much more fun to watch.
Would love to see you code the game Ballz! It would be interesting to see how you'd go about it
Watched all series in one start ) Thank you for such a greate tutorial )
can you please make a tutorial on kepler's law
I am the number 500 liked .. Thank you ..
That habit of using short var names is really a bad one... you should try to not do it :)
Agreed!
When I make my particle system, the particles don't move, the update function just changes the position of the next particle that is created. Any ideas?
Edit: Nevermind I got it, I forgot to make sure it was redrawing the paricle, rookie mistake (forgive me I'm only 12)
Glad you got it working!
such enthusiasm, bravo!
one liners don't literally need to be on one line, put some line breaks in there :)
You are my hero, i looked for this for weeks
what text editor you use?
Super vidéo, merci :)
You could also update and show in filter function all in one go?
yes, good point!
Perfect!!!
I've learned so much from your videos! Do you reply to all incoming emails?
I try to but I admit I miss quite a few and/or reply very late!
Quite understandable, thanks for trying though & keep up the brilliant work!
You could have made the forEach a oneliner: particles.forEach(p => p.update() || p.show()) ;
Thanks for the tip!
If for some reason the update returns TRUE the show wont run
That's actually expected behavior for a logical OR operator, as it's evaluated left to right, if the left side is true it'll short-circuit the right side and won't test it, the same is for an AND operator if the left side is evaluated to false.
Exactly, so using OR condition just to try run 2 line of code instead of using {} isn't a good idea, at leas I would not use it.
That's correct, I was merely pointing out that there is a way to condense the code if you really wanted to and knew the result of the expressions...
Ok now I'm so obsessed with this but don't even know why... Thanks!!!
Was there no live stream last friday
Yes, I was traveling unfortunately.
I thought i missed. Phew!
Thanks. It's nice to know about these array functions, so that I know what is going on. But I never write them myself when I write code! I try to write code in a way that could be written simularly in ANY other language. And this way is not always available.
I also find I want to use the integer from for loop often. If I have multiple arrays of the same length, keeping the data separate. And I want to access data[i] and loadedFileData[i] in the same loop. So I often use the default for-loops all the time to stay consistant.
It makes them a lot more flexible at the very least. It's nice to know about these parameters. I haven't seen any parameters show up for functions like these in Visual Studio. So as far as I know, you can't easiliy check what the parameter is actually referencing if someone named it poorly.
Thank you for this helpful feedback!
You could have done particles.fill(() => new Particle());
in the line where you did
particles.fill().map(......);
Would this work? Was fill() a higher order function?
I'm asking because you didn't explicitly say if fill is a higher order function in its explanation video, and I cba to Google it lol
I believe fill() is not a higher order function.
ok then, didn't really check heh. could have been better that way however
This is probably not the greatest place to submit a coding challenge idea, but I just thought about it. Try making reversi?
Hmm. That would be a great machine learning project.
Another good challenge too would be doing the same thing using pure Canvas. I didn’t try, and maybe I’m missing something about P5, but I’m guessing this approach would be sluggish on older mobile devices.
first