Coding Challenge #24: Perlin Noise Flow Field

Sdílet
Vložit
  • čas přidán 29. 06. 2024
  • 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: czcams.com/users/thecodingtrainjoin
    🛒 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

Komentáře • 293

  • @emilybjoerk
    @emilybjoerk Před 7 lety +254

    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  Před 7 lety +92

      Really great point, thank you.

    • @PhilBoswell
      @PhilBoswell Před 7 lety +17

      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 Před 6 lety +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 Před 6 lety +4

      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 Před 6 lety

      ill do it soon

  • @ilustrado7291
    @ilustrado7291 Před 7 lety +204

    I can't stop watching your videos man!

    • @ilustrado7291
      @ilustrado7291 Před 7 lety +2

      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 Před 7 lety

      ***** 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 Před 7 lety +2

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

    • @HenriqueMRocamora
      @HenriqueMRocamora Před 7 lety

      I KNOW THAT FEEL

    • @hiperesp
      @hiperesp Před 5 lety

      Me2 haha

  • @J_Abad
    @J_Abad Před 7 lety +79

    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

  • @RicoGalassi
    @RicoGalassi Před 4 lety +30

    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 Před 11 měsíci

      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
    @mctuble Před 7 lety +1

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

  • @ya64
    @ya64 Před 7 lety +1

    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!

  • @EricDiazMD
    @EricDiazMD Před 7 lety +1

    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.

  • @abara5678
    @abara5678 Před 7 lety +18

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

  • @Algebrodadio
    @Algebrodadio Před 7 lety +82

    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  Před 7 lety +39

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

    • @Algebrodadio
      @Algebrodadio Před 7 lety +2

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

    • @erispe
      @erispe Před 3 lety +2

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

  • @vaguebrownfox
    @vaguebrownfox Před 2 lety +3

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

  • @frmcf
    @frmcf Před rokem +3

    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.

  • @rosslahive
    @rosslahive Před 5 lety +1

    This is really good stuff man.

  • @70TakeAway1
    @70TakeAway1 Před 7 lety +3

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

  • @adilrabbani3562
    @adilrabbani3562 Před 6 lety +11

    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.

  • @likeyou3317
    @likeyou3317 Před 5 lety +3

    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..

  • @theetherbelow
    @theetherbelow Před rokem

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

  • @anthonyikedakolar9375
    @anthonyikedakolar9375 Před 7 lety +5

    dude you are blowing my mind

  • @gloverelaxis
    @gloverelaxis Před 4 lety

    This is the funnest code-related channel out

  • @nikhobo
    @nikhobo Před měsícem

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

  • @stephenwalsh1006
    @stephenwalsh1006 Před 8 lety +7

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

  • @marco_gallone
    @marco_gallone Před 5 lety +5

    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!

  • @meikurogame9595
    @meikurogame9595 Před 7 lety

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

  • @Hyuts
    @Hyuts Před 5 lety +2

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

  • @karanverma1
    @karanverma1 Před 8 lety

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

  • @brothajonze
    @brothajonze Před 2 lety +1

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

  • @possumcode
    @possumcode Před 6 lety

    That is sooooooooooo cool !

  • @dawnstar24
    @dawnstar24 Před 9 dny

    25:42 the people laughing in background feels like he is doing a comedy skit.

  • @nofacee94
    @nofacee94 Před 7 lety +1

    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.

  • @leberkassemmel
    @leberkassemmel Před 7 lety +47

    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 Před 7 lety +11

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

    • @leberkassemmel
      @leberkassemmel Před 7 lety +1

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

    • @sallerc
      @sallerc Před 7 lety +1

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

    • @leberkassemmel
      @leberkassemmel Před 7 lety +1

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

    • @sallerc
      @sallerc Před 7 lety +1

      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.

  • @emrenitim83
    @emrenitim83 Před 3 lety

    Thank you, great video

  • @rebnoz5356
    @rebnoz5356 Před 7 lety +4

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

    • @JesseUnderscoreMartin
      @JesseUnderscoreMartin Před 7 lety +2

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

    • @kenan2386
      @kenan2386 Před 3 lety

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

  • @exdcode3369
    @exdcode3369 Před 7 lety

    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)

  • @JohnDoe_1237
    @JohnDoe_1237 Před 6 lety

    0:06 omg nice, this looks great
    :D

  • @skydeng1647
    @skydeng1647 Před 7 lety

    learn a lot, thank you !!!

  • @deathtrips
    @deathtrips Před 8 lety +16

    looks good

  • @thomaswaller4517
    @thomaswaller4517 Před 8 lety +1

    That is a really nice program. Good job mate.

    • @TheCodingTrain
      @TheCodingTrain  Před 8 lety

      Thank you!

    • @thomaswaller4517
      @thomaswaller4517 Před 8 lety

      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.

  • @Simmonsstummer
    @Simmonsstummer Před 2 lety

    Ok this was amazing

  • @CharIie83
    @CharIie83 Před 6 lety

    really impressive

  • @PrivateIsleProductions

    excellent work

  • @SpringySpring04
    @SpringySpring04 Před 2 lety

    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

  • @danielk1560
    @danielk1560 Před 4 lety +2

    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 Před 4 lety +2

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

  • @lemonlordminecraft
    @lemonlordminecraft Před 6 lety

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

  • @nane1890
    @nane1890 Před 8 lety

    omg! you're awesome!!!

  • @sehyunkim4736
    @sehyunkim4736 Před 6 lety

    It's bunch'a cool stuff!

  • @stanger963
    @stanger963 Před 6 lety +8

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

  • @nagesh007
    @nagesh007 Před 2 lety +1

    Thanks a lot

  • @DerpRaptor
    @DerpRaptor Před 2 lety +1

    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.

  • @alexpraturlon1873
    @alexpraturlon1873 Před 7 lety

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

  • @juan_w_fer
    @juan_w_fer Před 7 lety +4

    Daniel, I must thank you and CZcams'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  Před 7 lety +3

      So glad to hear, thank you!

    • @jesuschrist6979
      @jesuschrist6979 Před 7 lety

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

  • @Stoupik
    @Stoupik Před 7 lety

    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 < 0) {
    position.x = width - 1;
    }
    if (position.x > width - 1) {
    position.x = 0;
    }
    if (position.y < 0) {
    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!

  • @bono95zg
    @bono95zg Před 7 lety

    love how detalied the tutorial is haha

  • @kevnar
    @kevnar Před 6 lety

    The crux.
    Such a great word.

  • @tranceemerson8325
    @tranceemerson8325 Před 4 lety

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

  • @deenchen4822
    @deenchen4822 Před 4 měsíci

    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.

  • @stephendelacruzone
    @stephendelacruzone Před 6 měsíci

    Wow! 🤩

  • @onnio7998
    @onnio7998 Před rokem +2

    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 Před rokem +1

      Would be great to see that video and code.

  • @danrobinson1729
    @danrobinson1729 Před 8 lety +2

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

  • @Pingoooeen
    @Pingoooeen Před 3 lety

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

  • @torwine4895
    @torwine4895 Před 2 lety

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

  • @Shockszzbyyous
    @Shockszzbyyous Před 7 lety

    Your awesome

  • @Mustafaismail22
    @Mustafaismail22 Před 7 lety

    thanks 😘

  • @AB-Prince
    @AB-Prince Před 6 lety

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

  • @aurelianobuendia24
    @aurelianobuendia24 Před 6 lety +41

    Im the only one hearing those creepy laughs ?

    • @zahidahmed586
      @zahidahmed586 Před 6 lety +2

      AHHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAHAHAHAHAHHAHAHAHAHAHAHAHHAHAHAHAHAHAHAHAH

    • @marcthompson647
      @marcthompson647 Před 5 lety

      No you aren't

    • @pflintaryan8336
      @pflintaryan8336 Před 4 lety

      i think they are having party next door.

  • @johankarlsson20
    @johankarlsson20 Před 6 lety +1

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

  • @kairotox
    @kairotox Před 5 lety +2

    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.

  • @Eddytorial
    @Eddytorial Před 5 lety

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

  • @aurelb62
    @aurelb62 Před 7 lety

    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.

  • @alexandralazarevski3265
    @alexandralazarevski3265 Před 7 lety +1

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

  • @definty
    @definty Před 3 lety

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

  • @oguzyardmc8551
    @oguzyardmc8551 Před 6 lety

    Okey I liked

  • @noahmccann4438
    @noahmccann4438 Před 6 lety

    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.

  • @NicolaiWeitkemper
    @NicolaiWeitkemper Před 5 lety

    Might be a nice screensaver

  • @msoulforged
    @msoulforged Před 5 lety

    Yay we drew the hairs in the drain!

  •  Před 6 lety +1

    25:00 the force is strong with this one

  • @realcygnus
    @realcygnus Před 7 lety

    Top Notch

  • @jialiu518
    @jialiu518 Před 7 lety

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

  • @linchen7258
    @linchen7258 Před 5 lety

    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...

  • @yasiin_miim3278
    @yasiin_miim3278 Před měsícem

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

  • @ResanChea
    @ResanChea Před 4 lety +3

    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

  • @tobyzxcd
    @tobyzxcd Před 7 lety +12

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

    • @TheCodingTrain
      @TheCodingTrain  Před 7 lety +2

      +Toby Brooks happy belated!

    • @tobyzxcd
      @tobyzxcd Před 7 lety

      Thanks Dan, and Thanks for the Great Video !

    • @WhiteIce2112
      @WhiteIce2112 Před 7 lety

      Toby Brooks we share the same birthday.

  • @mariaarkadieff1572
    @mariaarkadieff1572 Před rokem

    Thank You for this wonderful and educational video! I am a beginner to drawing but a syntax enthusiast, as it helps me to learn sustainability. Would be nice to go through the JS syntax whenever there are more then one-two lines of codes.

  • @kocaksaid
    @kocaksaid Před 6 lety +4

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

  • @mohamedmhmood2940
    @mohamedmhmood2940 Před 7 lety +3

    انت انسان مبدع

  • @logy80
    @logy80 Před 7 lety

    WOW

  • @kevnar
    @kevnar Před 4 lety

    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 < rows; y++) {
    float yoff = 0;
    for (int x = 0; x < cols; x++) {
    float xoff = 0 is resetting the y loop, and vice versa. (Processing version)

  • @sariaghaziri6448
    @sariaghaziri6448 Před 5 lety

    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!

  • @NinJaTurtleSplinter
    @NinJaTurtleSplinter Před 7 lety +9

    21:20 for a second i thought hes not wearing pants

    • @redpepper74
      @redpepper74 Před 4 lety

      Oslo Cloonson Yep, I did a double-take too. Deception 100

  • @robogaming3045
    @robogaming3045 Před 5 lety +1

    And remember kids: Shiffman is a particle

  • @SunroseStudios
    @SunroseStudios Před 2 lety

    when the particles wrap you're updating their position before you set the previous one
    we know we're like 6 years late but just fyi

  • @theom3050
    @theom3050 Před 7 lety +4

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

  • @puffolino1
    @puffolino1 Před 7 lety +11

    You should have names the edges function border control :P

    • @dannydk6
      @dannydk6 Před 7 lety

      Luca Muscat clever

    • @joecamroberon9322
      @joecamroberon9322 Před 5 lety +1

      Or “portal control” since they are teleporting to the opposite side.

  • @kennys1881
    @kennys1881 Před 6 lety

    @0:38 the good feeling when u really do it..

  • @kps2642
    @kps2642 Před 7 lety

    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

  • @umarfarooque8500
    @umarfarooque8500 Před 4 lety

    i challenge you make random moving particle and make attraction each other like gravity

  • @arpandhatt6011
    @arpandhatt6011 Před 5 lety

    webassembly to the rescue

  • @nagesh007
    @nagesh007 Před 2 lety

    Mind Blowing . Here, particles follow flow flied (i.e : flow flied can be considered as path). Currently, Flow flied is generated using noise. Imagine, there is start point and destination point for a particle. Particles need to reach the destination using generated flow flied... In each iteration, we can alter the flow flied based on the feedback obtained from particles colliding the obstacles(boundaries) then we would have achieved kinda very basic autonomous driving ... Correct me if I am wrong

  • @momostein10
    @momostein10 Před 7 lety

    Isn't it better just to look up the noise value per point, then you don't have to look for the closest vector.
    But i do think that this would be worse with a huge amount of particles

  • @robloxfan60
    @robloxfan60 Před 8 lety

    Hi, Dan. Could you do a short tutorial on how you set up your local server? Maybe just a quick few minutes at the beginning of the next stream? Thanks a lot!

  • @Marcello30able
    @Marcello30able Před 7 lety +5

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

    • @JesseUnderscoreMartin
      @JesseUnderscoreMartin Před 7 lety +4

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

  • @ThEsOuNdInYoU
    @ThEsOuNdInYoU Před 7 lety

    i like your videos, but preview of your finished work could be longer, because right not it to short i think.