Coding Challenge #24: Perlin Noise Flow Field

In this coding challenge, I use Perlin noise to create a two-dimensional flow field with the p5.js library. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #23: ...
🎥 Next video: • Coding Challenge #25: ...
🎥 All videos: • Coding Challenges
References:
🗄 p5.js noise() reference: p5js.org/reference/#/p5/noise
Videos:
🔴 Livestream Archive: • Live Stream #46: Perli...
🎥 My videos about Perlin Noise: • 13: What is Perlin Noise?
Related Coding Challenges:
🚂 #11 3D Terrain Generation with Perlin Noise in Processing: • Coding Challenge 11: 3...
🚂 #132 Fluid Simulation: • Coding Challenge #132:...
🚂 #C4 - Coding in the Cabana Worley Noise: • Coding Worley Noise
Timestamps:
0:00 Introduction
0:35 Two dimensional Perlin noise
2:02 Scale
5:08 Create a vector
5:45 Draw vector as a line
7:09 Random angle
8:10 Flow field
9:24 N-dimensional Perlin noise
9:53 Add zoff
11:56 Add Particle class
15:26 Add particles
16:26 Add edges()
17:34 Have particles be affected by vectors
18:34 Flowfield array
21:00 Follow()
22:56 Set magnitude of vectors
26:42 Add alpha
27:36 Store particle's previous position
27:56 Draw line between current and previous position
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: / discord
💖 Membership: kzread.infojoin
🛒 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...
#perlinnoise #arrays #p5js

Пікірлер: 292

  • @nikhobo
    @nikhobo8 күн бұрын

    Я не знаю английский, но преподаватель настолько экспрессивно рассказывает, что становится понятно. Спасибо! Это очень круто!

  • @ilustrado7291
    @ilustrado72917 жыл бұрын

    I can't stop watching your videos man!

  • @ilustrado7291

    @ilustrado7291

    7 жыл бұрын

    ProCactus Hahaha! Exactly, my man. These concepts and ideas are really interesting - and his energy and enthusiasm reminds me of the "perfect" college professor. Hehe. He's really fun. I remember 2 quotes: "The secret to creativity is knowing how to hide your sources" and "Steal like an artist". We'll stand on the shoulders of giants! ;)

  • @ilustrado7291

    @ilustrado7291

    7 жыл бұрын

    ***** ProCactus Hahaha! Nice! If you guys are on github (which is a must), you can upload your codes there so that we can all learn together. ;) Have fun guys!

  • @abara5678

    @abara5678

    7 жыл бұрын

    Me neither and i have never even written one bit in any Coding Language =)

  • @HenriqueMRocamora

    @HenriqueMRocamora

    7 жыл бұрын

    I KNOW THAT FEEL

  • @hiperesp

    @hiperesp

    5 жыл бұрын

    Me2 haha

  • @emilybjoerk
    @emilybjoerk7 жыл бұрын

    You are computing the whole vector field every frame even though you only use a fraction of the vectors. Give the perlin noise function as an argument to the vector follow function and compute the flow vector once per particle instead. It should improve your performance significantly and make it independent of the resolution and only depend on the number of particles.

  • @TheCodingTrain

    @TheCodingTrain

    7 жыл бұрын

    Really great point, thank you.

  • @PhilBoswell

    @PhilBoswell

    7 жыл бұрын

    A minor extra optimisation could be to save the calculated vector in the flowfield array so that particles in the same square can share it, assuming that wiping the array on each cycle doesn't slow things down again.

  • @drewjamesandre

    @drewjamesandre

    6 жыл бұрын

    Hey Emily, I see what you mean here! Nice tip. There is a lot of empty space that isn't actually touched by any particle, and it would make sense for each particle to calculate the vector of the "cell" it is currently occupying. I'm confused about one thing though. If the flow vector is only calculated once per particle, it seems like it would become less of a "flow field" and more of individual particles moving along a perlin noise defined 2d path, totally separate from other particles. Is that how you see it? So if two particles are close to each other, it may loose that appearence of a flow field?

  • @Moll-ayyy

    @Moll-ayyy

    6 жыл бұрын

    Drew André I'm not totally sure, but I'd imagine that all the particles would still behave like they all exist in the same flow field because they all access the same noise space, and the zoff variable would be changed globally. I think.

  • @3i33i

    @3i33i

    5 жыл бұрын

    ill do it soon

  • @vaguebrownfox
    @vaguebrownfox2 жыл бұрын

    "Ugh you're back, great!" gotta love Shiffman

  • @J_Abad
    @J_Abad7 жыл бұрын

    Instead of setting a max speed you could create a viscous friction force so that it's proportional to the particle's speed, that way everything will behave more like a fluid

  • @Algebrodadio
    @Algebrodadio7 жыл бұрын

    When your particles 'wrap around', you're giving their position space a toric symmetry. But the perlin noise doesn't have the same symmetry so it will be discontinuous at the boundary of the canvas.

  • @TheCodingTrain

    @TheCodingTrain

    7 жыл бұрын

    Oh, this is a very good and important point, thank you!!

  • @Algebrodadio

    @Algebrodadio

    7 жыл бұрын

    I love these videos - don't change a thing!

  • @erispe

    @erispe

    3 жыл бұрын

    Is this why the particles are getting stuck at the canvas border?

  • @RicoGalassi
    @RicoGalassi4 жыл бұрын

    Just watching some of your older videos Dan. Makes me wish I had you as a comp sci professor in college. I would've loved it so much more

  • @IARRCSim

    @IARRCSim

    10 ай бұрын

    Definitely. It is great he's sharing on youtube too, though. youtube reaches a lot more people and mostly people who are actually looking for content like his. Computer science students often need to take whatever class they're in if they want to graduate so the level of enthusiasm for what is taught tends to be lower.

  • @mctuble
    @mctuble7 жыл бұрын

    These are by far my favorite coding videos and are getting me interested again in coding. Thank you for that.

  • @ya64
    @ya647 жыл бұрын

    I just found this channel and learned so much already. I think Perlin Noise is my new favorite thing and can't wait to start playing with it!

  • @frmcf
    @frmcf Жыл бұрын

    I'm feeling so pleased with myself right now, because I followed through the first two thirds of the tutorial and then took it from there and came up with a lot of Dan's solutions by myself. I feel like a big boy who just used the toilet without any help for the first time.

  • @abara5678
    @abara56787 жыл бұрын

    Man i love this guy´s attitude and character =). So excited about what he is doing and a real sense of humor!

  • @EricDiazMD
    @EricDiazMD7 жыл бұрын

    Awesome! First video of yours that I've seen. I learned a lot. I hope you keep doing these. Thanks for what you've done so far.

  • @adilrabbani3562
    @adilrabbani35626 жыл бұрын

    Hey Dan! I like watching all your videos and wish I had a teacher like you at my University. You explain the most convoluted of things in a very fun and easy way. Taking them part by part. I am really thinking of applying for the Masters program at NYU after watching your videos.

  • @70TakeAway1
    @70TakeAway17 жыл бұрын

    I'm an accounting major but can't seem to stop watching your videos even though I understand absolutely nothing. Great work.

  • @likeyou3317
    @likeyou33175 жыл бұрын

    This is the most beautiful thing I've seen this day, shame on me that I haven't checked all of the coding challenges yet..

  • @marco_gallone
    @marco_gallone5 жыл бұрын

    This was my favourite illusion yet! This would look so cool if it were a candle blow out animation. You should keep it exactly as is but delete (or let the alpha fade out over time) previous points so that it creates a more dynamic smoke effect!

  • @theetherbelow
    @theetherbelow Жыл бұрын

    Was looking for inspiration for generative art for pen plotting and this video is still useful, 6 years later. Thank you!

  • @stephenwalsh1006
    @stephenwalsh10067 жыл бұрын

    Thank you very much for this series! You are a very talented teacher

  • @TheCodingTrain

    @TheCodingTrain

    7 жыл бұрын

    +Stephen Walsh thank you for watching!

  • @rosslahive
    @rosslahive5 жыл бұрын

    This is really good stuff man.

  • @anthonyikedakolar9375
    @anthonyikedakolar93757 жыл бұрын

    dude you are blowing my mind

  • @gloverelaxis
    @gloverelaxis4 жыл бұрын

    This is the funnest code-related channel out

  • @nofacee94
    @nofacee947 жыл бұрын

    Nice video. Optimization tip: You can create the paths with moveTo() and lineTo() (or with the line() function you are using) inside the for cols and for rows loops and then draw them with stroke() afterwards, outside of the loops; this will render it much faster - by rendering all the lines once instead of for each line. Bear in mind it will be a continuous line, so you will have to use moveTo to take the 'pen' off of the canvas and put it to the next line position. moveTo(xa,ya) e.g. 0,0 lineTo(xb, yb) e.g. 0,1 then update xa,ya and xb,yb with the next line positions inside the for loops and repeat. The call stroke() outside the loooops.

  • @meikurogame9595
    @meikurogame95957 жыл бұрын

    I swear to God I want that t-shirt so bad hahaha. You're always so fun and interesting to watch, keep up!

  • @Hyuts
    @Hyuts5 жыл бұрын

    I like the video as fast as my cursor can get to the button. Succinct as always. Thank you.

  • @rebnoz5356
    @rebnoz53567 жыл бұрын

    I don't know anything about programming, but stil I'm watching your videos, because you're so excited about it. 😅

  • @JesseUnderscoreMartin

    @JesseUnderscoreMartin

    7 жыл бұрын

    Philip Merian Why not start learning now? Daniel has a ton of great videos for beginners!

  • @kenan2386

    @kenan2386

    3 жыл бұрын

    @@JesseUnderscoreMartin Yea i agree Rebnoz should learn coding! Its not hard and is more than good to learn!

  • @leberkassemmel
    @leberkassemmel7 жыл бұрын

    I like you. You make your code big enough, so even with a resolution of 144p i can still read it. I know, i should get faster internet. But it is so expensive!

  • @sallerc

    @sallerc

    7 жыл бұрын

    Wow, that's dedication... I couldn't bare to watch anything in 144p :)

  • @leberkassemmel

    @leberkassemmel

    7 жыл бұрын

    salle rc Yes. But imo it is not worth 50$ a month more just to watch them in 360p...

  • @sallerc

    @sallerc

    7 жыл бұрын

    Michi Lo Ah I see. That's expensive, where do you live?

  • @leberkassemmel

    @leberkassemmel

    7 жыл бұрын

    salle rc Germany. Bavarian Forest. Nowhere near other civilisation.

  • @sallerc

    @sallerc

    7 жыл бұрын

    Didn't realize it's that expensive in Germany, but guess the "nowhere near civilization"-part has something to do with it :) You should move to Sweden, I pay like 15EUR/month for a 100MBit connection.

  • @Stoupik
    @Stoupik7 жыл бұрын

    Hi Dan. First of all, I love your videos. They really brought me to Processing and I became kind of obsessed with it. :) I really appreciate relatively simple code and outstanding results! But to this very coding challenge. I believe there's a bug in your edges() function (if not, please someone correct me). I am probably more unlucky than you were when you ran your program and my particles tested the edges to the limit. :) Your particles are allowed (due to edges method implementation) to have *y* values in a range ** (including border values. This was causing IndexOutOfBoundException when one of the particles was right on the edge (had y = height). In those instances the formula for flowfield's index (*x + y * cols*) gave invalid index. For example (pseudocode) size(400, 400); scale = 20; rows = cols = 400 / 20 = 20; flowField.length = 400; // index in the range from 0 to 399 particle = new Particle(200, 400); // particles coors in the grid col = 200 / 20 = 10 row = 400 / 20 = 20 index = col + row * cols = 10 + 20 * 20 = 410 => invalid index So the edge() function should be private void edge() { if (position.x position.x = width - 1; } if (position.x > width - 1) { position.x = 0; } if (position.y position.y = height - 1; } if (position.y > height - 1) { position.y = 0; } } Keep those videos coming, they are really fun and full of brilliant ideas. Thanks!

  • @karanverma1
    @karanverma18 жыл бұрын

    thanks a lot for such amazing stuff... looking forward for upcoming videos

  • @TheCodingTrain

    @TheCodingTrain

    7 жыл бұрын

    Thanks for watching!

  • @thomaswaller4517
    @thomaswaller45178 жыл бұрын

    That is a really nice program. Good job mate.

  • @TheCodingTrain

    @TheCodingTrain

    7 жыл бұрын

    Thank you!

  • @thomaswaller4517

    @thomaswaller4517

    7 жыл бұрын

    I have a question, I want to build a Indie game, with sound, and good graphics, and I want to code the whole engine myself, not use unity or anything, what language should I be using for such task? It's a Puzzle Platformer, and some creature like enemies will be in the game.

  • @danielk1560
    @danielk15604 жыл бұрын

    Thank You! Great video. Fortunately, I didn't have these performance issues... Was running it on 1920x1080 at 5 particles and got stable 80 fps!

  • @px64

    @px64

    3 жыл бұрын

    I was running in 4k with half a particle, same with me! , no lag at all..

  • @exdcode3369
    @exdcode33697 жыл бұрын

    You are so awesome!!! And I'm not even learning or using JavaScript!) might try to apply some of your challenges to Java, but not sure still if will be able to)

  • @kairotox
    @kairotox5 жыл бұрын

    I was trying to figure out a way to make the smoke like lines fade over time, and I'm not really a programmer, so I'm really just spitballing here, but one option might be to have the smoke draw on a transparent white layer that also draws every time the program draws. So every time it's adding a bit of white to everything that wasn't just drawn, eventually making old lines fade out. There's probably a better way to do it, and I'm not sure if my way would even work.

  • @DerpRaptor
    @DerpRaptor2 жыл бұрын

    Not sure if someone has said this yet, A problem that I've seen is that when you draw the line from prevPoint to pos, there's some overlap of the lines, which if you're using alpha will produce circles at each of the points where the line is drawn. If you have a maxspeed which all of the particles reach, they end up creating dots at a uniform distance from each other. A fix that I think works is to add "strokeJoin(MITIR)" which makes all of the points at which the strokes join a flat line instead.

  • @ResanChea
    @ResanChea4 жыл бұрын

    do you do these tutorials for the processing version? because i want to start learning processing more but most of the interesting projects are on p5js

  • @musicdudejoe263
    @musicdudejoe2634 жыл бұрын

    I'm confused, can you use function draw() in say notepad, or is it something specifically used within p5?

  • @deenchen4822
    @deenchen48223 ай бұрын

    The way the particles are limited with a maximum speed reminds me of how light is limited as the object with the maximum speed in the world.

  • @theom3050
    @theom30507 жыл бұрын

    I can't seem to find the processing version on github, have you upploaded it?

  • @alexpraturlon1873
    @alexpraturlon18737 жыл бұрын

    +Danial Shiffman Love the videos. I enjoy following along using processing and learning a bunch including the converting from P5 to processing.

  • @emrenitim83
    @emrenitim833 жыл бұрын

    Thank you, great video

  • @tranceemerson8325
    @tranceemerson83254 жыл бұрын

    cool you could use this to tell the particles to carve values off of a heightmap over time.

  • @JohnDoe_1237
    @JohnDoe_12376 жыл бұрын

    0:06 omg nice, this looks great :D

  • @skydeng1647
    @skydeng16477 жыл бұрын

    learn a lot, thank you !!!

  • @PrivateIsleProductions
    @PrivateIsleProductions7 жыл бұрын

    excellent work

  • @MrThonny15
    @MrThonny157 жыл бұрын

    You are saying that you have made the Perlin noise program for processing earlier but I can't seem to find it anywhere. I may have overlooked it on github but I think it is not there. Does any one know were to find it?

  • @linchen7258
    @linchen72585 жыл бұрын

    Thank you soooo much!! I really like Perlin noise! And I tried to follow the processing you upload in the Github...Can I ask why the effect is different from the version of p5js? sorry about the stupid question, I am just the beginner...

  • @SpringySpring04
    @SpringySpring042 жыл бұрын

    I can't get over the fact that there are random sitcom laughter clips playing in the background at some points of the video lol

  • @nagesh007
    @nagesh007 Жыл бұрын

    Thanks a lot

  • @Simmonsstummer
    @Simmonsstummer2 жыл бұрын

    Ok this was amazing

  • @AB-Prince
    @AB-Prince6 жыл бұрын

    You could also give a velocity to each vector by giving a w to the perlin noise and using it as a velocity

  • @possumcode
    @possumcode6 жыл бұрын

    That is sooooooooooo cool !

  • @CharIie83
    @CharIie836 жыл бұрын

    really impressive

  • @stanger963
    @stanger9636 жыл бұрын

    "There's a bunch of few different things" xD

  • @brothajonze
    @brothajonze2 жыл бұрын

    Just brutal watching this guy fumble and stumble over text that brackets his life.

  • @juan_w_fer
    @juan_w_fer7 жыл бұрын

    Daniel, I must thank you and KZread's new algorythm for recommended videos. Although I have some knowledge of Arduino and Python, this is the more interactive environment I want to have when coding(Battleship, Conway's game of life aren't that fun using print() in Python lol). Now I'm going to start watching your Processing playlist. Thanks, your videos are really nice to watch.

  • @TheCodingTrain

    @TheCodingTrain

    7 жыл бұрын

    So glad to hear, thank you!

  • @jesuschrist6979

    @jesuschrist6979

    7 жыл бұрын

    Juan Fernández try JavaScript learn native first then go to p5 for game development

  • @Marcello30able
    @Marcello30able7 жыл бұрын

    Hey! Quick question, is it possible to tie the flow fields speed to a microphone input?

  • @JesseUnderscoreMartin

    @JesseUnderscoreMartin

    7 жыл бұрын

    Marcello30able Anything is possible. forum.processing.org/one/topic/how-can-i-detect-sound-with-my-mic-in-my-computer.html

  • @lemonlordminecraft
    @lemonlordminecraft6 жыл бұрын

    I went back and watched them. Now I'm here.

  • @onnio7998
    @onnio7998 Жыл бұрын

    I got wayy into optimizing this. I can simulate 50 000 particles for 500 iterations in a second. The color of the traces can be dynamically changed. Thinking of making a video of it at some point.

  • @krccmsitp2884

    @krccmsitp2884

    Жыл бұрын

    Would be great to see that video and code.

  • @aurelb62
    @aurelb627 жыл бұрын

    I think the previous position is always the same position as "pos". In the 'update' function, you should apply 'updatePrev' before adding vel to pos.

  • @sariaghaziri6448
    @sariaghaziri64485 жыл бұрын

    I love your videos! But here I am struggling trying to decode your code from P5 to P3, any tips? I couldn't find a challenge done on P3!

  • @bono95zg
    @bono95zg7 жыл бұрын

    love how detalied the tutorial is haha

  • @sehyunkim4736
    @sehyunkim47366 жыл бұрын

    It's bunch'a cool stuff!

  • @arunprabhu8120
    @arunprabhu81204 жыл бұрын

    Sorry for such a silly query, but shouldn't zoff be incremented outside the y loop?

  • @aurelianobuendia24
    @aurelianobuendia246 жыл бұрын

    Im the only one hearing those creepy laughs ?

  • @zahidahmed586

    @zahidahmed586

    6 жыл бұрын

    AHHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAH

  • @marcthompson647

    @marcthompson647

    5 жыл бұрын

    No you aren't

  • @pflintaryan8336

    @pflintaryan8336

    4 жыл бұрын

    i think they are having party next door.

  • @gm_000
    @gm_0007 жыл бұрын

    I do not understand 25:30 - Why do the vectors mostly point toward left? And why multiplying by 4? If noise returns between 0 and 1 and we multiply by 2PI we should have already the correct values... What am I missing?

  • @ronnetgrazer362

    @ronnetgrazer362

    5 жыл бұрын

    When the increment variable was set to 1, all the tiles were mid grey. He then changed it to 0.1, and he got more variation, but nowhere near a range between black and white.

  • @iminni3459

    @iminni3459

    5 жыл бұрын

    The values tend to be around 0.5 so if you multiply by 2PI they will tend to be around PI (which is the left direction).

  • @Kitulous

    @Kitulous

    4 жыл бұрын

    @@iminni3459 Does this have to do something with the Gaussian distribution?

  • @iminni3459

    @iminni3459

    4 жыл бұрын

    @@Kitulous maybe I'm not really sure

  • @kevnar
    @kevnar6 жыл бұрын

    The crux. Such a great word.

  • @noahmccann4438
    @noahmccann44386 жыл бұрын

    Very cool effect. Have you considered doing a coding challenge based around a Navier Stokes fluid solver? Those seem quite similar to the flow fields you’re demonstrating here, however you can have the fluid (equivalent to the particles in your example) affect the flow field - similar to real fluids, rather than relying on Perlin noise to drive the field. My apologies if you’ve already done this in another video - I couldn’t find one with a quick search.

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    I have not but this is a great idea!

  • @alexandralazarevski3265
    @alexandralazarevski32657 жыл бұрын

    where is this video on wind flows based on geo locations! !! Dying to see this!

  • @Mustafaismail22
    @Mustafaismail227 жыл бұрын

    thanks 😘

  • @georgexu9591
    @georgexu95916 жыл бұрын

    Hi, Daniel, thank u for your hard work! I'm trying to write this in PDE, and got an error: "ArrayIndexOutOfBoundsException: xxxx". I found the problem is happening in the "edges()" function. Then I change the "pos.x = width;" and "pos.y = height;" to "pos.x = width-1;" and "pos.y = height -1;". And the problem solved temporarily. Do u have the same problem and how do u solve it?

  • @likeyou3317

    @likeyou3317

    5 жыл бұрын

    Just instead of: cols=floor(width/scale); rows=floor(width/scale); do cols=floor(width/scale) +1; rows=floor(width/scale)+1;

  • @nane1890
    @nane18908 жыл бұрын

    omg! you're awesome!!!

  • @TheCodingTrain

    @TheCodingTrain

    7 жыл бұрын

    Thanks for watching!

  • @FredoCorleone
    @FredoCorleone5 жыл бұрын

    Why not HSB from velocity angle to color particles? I guess that instead of _p5.Vector.fromAngle(angle)_ you could have used (polar to cartesian) _createVector(cos(angle), sin(angle))_ and instead of _v.heading()_ you could have used _atan2(v.y, v.x)_ . Am I right?

  • @stephendelacruzone
    @stephendelacruzone5 ай бұрын

    Wow! 🤩

  • @ariseyhun2085
    @ariseyhun20857 жыл бұрын

    Is the code to this in the processing version avaiable anywhere?

  • @Shockszzbyyous
    @Shockszzbyyous7 жыл бұрын

    Your awesome

  • @johankarlsson20
    @johankarlsson206 жыл бұрын

    All my Simplex Noise Flow Field creations as CodePen TV: codepen.io/tv/Dwgqqd

  • @drewjamesandre

    @drewjamesandre

    6 жыл бұрын

    awesome work!

  • @torwine4895
    @torwine48952 жыл бұрын

    Thanks a lot :-) Now i make beautifull pictures in Java. That's a nice playground.

  • @deathtrips
    @deathtrips8 жыл бұрын

    looks good

  • @cement_gaming

    @cement_gaming

    7 жыл бұрын

    hello there

  • @Pingoooeen
    @Pingoooeen3 жыл бұрын

    Love it! Even though what you did in the end was pointless

  • @nukiolbartes6279
    @nukiolbartes62793 жыл бұрын

    Whats the algorithm for the audio background noise?

  • @anonymousstudent5871
    @anonymousstudent58716 жыл бұрын

    WHY it is "createP is not defined"and "particle is not a contructor" keep showing up in my console?

  • @psdmaniac
    @psdmaniac3 жыл бұрын

    Can you make particle flow but with pressure? That you can't have many particles in one place. I have made something simmilar on mobile- vector array (vector values are based on touch data from the screen) and particles that are appearing in random position when flow outside the screen. It looks cool but without pressure all particles can be squized to 1px space and this looks bad.

  • @Eddytorial
    @Eddytorial5 жыл бұрын

    even i really like what's going on here i kinda wondering what happening next room, must be something really funny :)

  • @michaeldere2892
    @michaeldere28927 жыл бұрын

    Im new to this, how do I get started? I know some js, but willing to learn more.

  • @yasiin_miim3278
    @yasiin_miim327826 күн бұрын

    8:57 you are a great loving tecaher Daniel :)))

  • @connerverret6443
    @connerverret64434 жыл бұрын

    At around 13:30 of the video, what does the line this.acc.mult(0); do? I know that it is multiplying the acceleration vector by a zero scalar, but what does that actually do?

  • @TheCodingTrain

    @TheCodingTrain

    4 жыл бұрын

    I cover this in section 2.3 of nature of code! natureofcode.com/book/chapter-2-forces/

  • @belleluze
    @belleluze4 жыл бұрын

    My particles look like lines?! they also look like emitting from the corners. any ideas?

  • @kps2642
    @kps26427 жыл бұрын

    i like your videos man , but i am too busy with with c++, can i do this in c++ ? i do plan to learn JS in the future

  • @definty
    @definty2 жыл бұрын

    You could use the Simplex Noise algorithm its more effcient and does the same thing.

  • 5 жыл бұрын

    25:00 the force is strong with this one

  • @NicolaiWeitkemper
    @NicolaiWeitkemper5 жыл бұрын

    Might be a nice screensaver

  • @jialiu518
    @jialiu5187 жыл бұрын

    n dimension Perlin noise = the sound of minds being blown right now

  • @kevnar
    @kevnar4 жыл бұрын

    There's a typo in your github code for this project, in the flowfield class. void update() { float xoff = 0; for (int y = 0; y float yoff = 0; for (int x = 0; x float xoff = 0 is resetting the y loop, and vice versa. (Processing version)

  • @oguzyardmc8551
    @oguzyardmc85516 жыл бұрын

    Okey I liked

  • @msoulforged
    @msoulforged5 жыл бұрын

    Yay we drew the hairs in the drain!

  • @kocaksaid
    @kocaksaid6 жыл бұрын

    "We need to talk, meet at this camera. Actually never mind." -Shiffman 2017

  • @butzenmummel5093
    @butzenmummel50937 жыл бұрын

    Is there a way to delete the drawn pixels after an amount of time, so you can run an infinite animation and create some kind of "snakes"

  • @raphschru9865

    @raphschru9865

    7 жыл бұрын

    Yeah, you would have to decrease regularly the pixels' luminosity by drawing a new point over each of them, with the luminosity of the pixel in question minus a certain gradient

  • @jacobcowan3599

    @jacobcowan3599

    7 жыл бұрын

    Alternatively, draw over the entire screen with the background color but a very small alpha, so rather than clearing it's fading the old

  • @realcygnus
    @realcygnus7 жыл бұрын

    Top Notch

  • @Robag21
    @Robag213 ай бұрын

    How is this possible to export it in SVG file format?

  • @tobyzxcd
    @tobyzxcd7 жыл бұрын

    This was Uploaded on my birthday, Man... June 27th is an awesome day

  • @TheCodingTrain

    @TheCodingTrain

    7 жыл бұрын

    +Toby Brooks happy belated!

  • @tobyzxcd

    @tobyzxcd

    7 жыл бұрын

    Thanks Dan, and Thanks for the Great Video !

  • @WhiteIce2112

    @WhiteIce2112

    7 жыл бұрын

    Toby Brooks we share the same birthday.

  • @danrobinson1729
    @danrobinson17298 жыл бұрын

    This is so rad. I'm loving your books Dan.

  • @TheCodingTrain

    @TheCodingTrain

    7 жыл бұрын

    Thanks for the nice feedback!