4.4: Particle Systems with Image Textures - The Nature of Code

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

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

50% 1

It’s time to expand beyond grayscale particles! In this video I demonstrate how to make a fire or smoke-like effect by using image textures and additive blending with a particle system. Code: thecodingtrain.com/tracks/the...
p5.js Web Editor Sketches:
🕹️ Texture Maker: editor.p5js.org/codingtrain/s...
🕹️ Image Texture: editor.p5js.org/codingtrain/s...
🕹️ Shader (WebGL): editor.p5js.org/codingtrain/s...
🎥 Previous video: • 4.3: Particle Systems ...
🎥 Next video: • 5.1 Autonomous Steerin...
🎥 All videos: • The Nature of Code 2
Videos:
🎥 Purple Rain: • Coding Challenge #4: P...
🎥 Snowfall: • Coding Challenge #88: ...
Timestamps:
0:00 One more particle system video!
0:57 Hopefully you'll make something neat.
1:25 Adding applyForce() to our particle class.
3:24 I've already made an image texture.
4:37 Adding the image texture to the sketch.
6:28 Adjusting the way the particles look.
7:17 Let's see if there's a way to improve performance.
8:58 blendMode(ADD)
9:53 Let's try using blendMode(ADD)!
10:36 Adding in color, yay!
11:53 Please share what you create!
12:22 What's next?
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
✪ Nebula: go.nebula.tv/codingtrain
💖 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...
#forbeginners #javascript #p5js

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

28 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

You are Bob Ross of generative art!

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

I am a normal middle school student, after a long exhausting day seeing your video on my recommendation list is the best!

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

When I saw a preview of this video in the last episode, I couldn't wait to see it

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

I can't stop watching this channel man

@Thulasidharan-go7tg 3 года назад

Good job Dan! LOVE FROM INDIA 🇮🇳

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

Couldn't have asked for more!

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

Just discovered you! Great video love the enthusiasm :)

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

Liked it a lot! Thanks!

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

Dan, love this series! I know you mainly do software-specific coding (and I know you have some videos which utilize your webcam), but would you ever consider making a series on some software that interacts with hardware? Like programming smart lighting? Or something that utilizes a google home? ..I know google homes have routines and things like that and apps like IFTTT, but I'd love to see hardware interactions in the future! Keep up the stellar work!!

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

Yes, I would love to do some content like this!!! Maybe this summer?

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

Good Job!

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

Blend Mode is neat!

@adityakr.2289 3 года назад

Amazing sir

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

Great!!! Thanks!!

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

Nice to see you use textures, nice video, idea might be to improve render time you could use pg = createGraphics(width,height); to draw offscreen (helps when a lot of particles), then draw image, boosts the frames with 30 to 60% depending on task. after it its indeed webgl

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

Thanks for the tip!

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

Really good video! I would like to try doing this in a shader, would be great for performance! Also, doesn't seem like it would be too hard considering i'm pretty new t shader programing.

@tlt.programmer 3 года назад

Отлично!

@james-barnett 3 года назад

Cool!

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

Correct me if I'm wrong but rather than deleting every particle after it's finished maybe it would be better to first initialize some kind of a list with particles and then simply reuse them - when their lifetime reaches 0, reset their position to and lifetime. It has to do with memory management and garbage collection from what I've heard

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

thank you sir

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

What happens if you fuse this code with a fractal equation? Would you get chaotic realistic fire or smoke for example?

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

since fading the texture seemed to be so expensive, you could try pre-rendering it at 255 levels of transparency and swapping out the texture on each frame. obviously this will just offload cpu work to a lot of memory, but it might be faster overall.

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

youre the awesomest

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

Look at me! I've travelled back in time! Where's your god now😈

@Max-os4xb 3 года назад

Jo wtf how

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

youtube is broken

@user-ve7pm3rl2n 3 года назад

Hello sir, I've learned a lot from your amazing tutorials. Because China cannot access RU-vid, could I reprint and translate the Processing Tutorial series to a Chinese video website? I will indicate the author and original address and won't use it to get revenue. I hope more beginners can find interest in code.Tkss

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

I think one of the things that was making the perfomance so slow was that you called applyForce twice, one time to add the upwards force of the flame, and the second time to add the wind. I think a way to solve that would be to sum the two vectors, and then only use applyForce once.

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

Apply force, while it is adding vectors together, it is simply that. The most expensive operation you can do is always going to be rendering to the screen, and the layering of alpha'd particles tanked the performance. You can go back and look at the performance when he calls apply force twice as opposed to once and it doesn't effect the performance at all.

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

the main problem is how tint works in p5js, it samples all the canvas pixels and manipulate the opacity / tint from it every frame, so in theory a smaller canvas should be faster in this case

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

It’s the layering of all the particles with transparency that’s the problem, it’s incredibly expensive

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

Do this but with raycasting! Make a light source !

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

If you watch this on your phone, at 4:32 tap repeatedly on your screen to see the circle changing

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

Hi. I am trying to learn Javascript using P5.js. I would like to use the Webstorm editor from JetBrains. Do you know how I would actually show the animations, etc with a different editor and setup than the one you're using? Any help would be much appreciated. P.S. I suppose this question shows how much of a beginner I am, but that's the way it is:)

@kossboss 9 месяцев назад

It will work just like in his recent videos with vscode. Just need to have the index.html file there pointed at the right script urls for p5 js and your local scripts

@Thulasidharan-go7tg 3 года назад

Hey Dan.... Can u make videos about touches in p5.js?

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

Hello! I am from India, I am watching your previous videos and I am not able to export signed package, can you help please. Or can you make a video on - How to export processing sketch? Please🙏

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

Hey dan, whatever your name is. I have a question bout box2d in processing. The issue is with the revolute joint. In rv.initialize(body1.body, circle.body, circle.body.getWorldCenter()); function, how can i make the point of rotation be at the corner instead of center. Am working on a game using this engine and there is not a single thing about this topic on the entire internet. It would be very cool if u could help me out and potentially help others

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

Just precomputing and caching the results of all the tint() calls with different lifetimes would crank your frame-rate way up. As it is, you're burning huge amounts of CPU just repetitively calculating the same tint() values over and over.

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

With WEBGL wouldnt the computation of the tint be done by the GPU instead? Or behind the scenes P5 always uses the CPU whether the WEBGL renderer is enabled or not?