Coding Challenge #24: Perlin Noise Flow Field

[ad_1]
In this Coding Challenge, I use Perlin noise to create a two-dimensional flow field with the p5.js library

Support this channel on Patreon:

Send me your questions and coding challenges!
Contact:

p5.js noise() reference:

p5.js:
Processing:

Source Code for the Video Lessons:

For More Perlin Noise videos:

For More Coding Challenges:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

33 responses to “Coding Challenge #24: Perlin Noise Flow Field”

  1. Dave David Avatar

    *thinks hard about solution to problem*…I think I'm gonna need an array…

  2. MrSerozka Avatar

    What does noise() function do?

  3. Julian Puppo Avatar

    Im the only one hearing those creepy laughs ?

  4. said koçak Avatar

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

  5. Vertigo 101 Avatar

    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

  6. Mathieu Gouttenoire Avatar

    Can you add the processing version on github please

  7. Sophia Kornienko Avatar

    You should also check if any particle is off the flowfield! Simon

  8. EJ Rodriguez Avatar

    Subtle but I noticed that you are tired while doing this video probably because you were sick

  9. Shramee Srivastav Avatar

    http://codepen.io/shramee/pen/GmJmrY?editors=1010
    Created these Perlin dancers, I created this before I saw the complete video and there are a few fundamentals differences in implementation 🙂

    1. Initially, I was using sine and cosine functions to calculate the lines which was very slow, so implemented your matrix modification idea since it's more than twice as fast 🙂
    2. Instead of grabbing 3d noise, I'm using 2d noise increase x and y offsets by one 50th times each frame.

    Second difference above gives me lovely wave like movement since particles copy the movement of those following them so I thought I'd share this… 🙂

    Thanks a lot Dan, love your videos a lot!!!

  10. Dan Martins Avatar

    Love the videos. I wanted to share the program I came up with based on this. It uses an input image to choose the colour of each particle, essentially retracing the original with lots of individual lines. (Examples at the link) https://github.com/bikefrivolously/perlin-noise-art

  11. Hyperlaze Avatar

    How can people downvote this

  12. Alexandra Lazarevski Avatar

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

  13. Emily Björk Avatar

    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.

  14. Roman Havlíček Avatar

    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 <0, height> (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!

  15. Sebby Sebastian Avatar

    Hello! Where can i find the code for the Processing version?

  16. Nin Ja Turtle Avatar

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

  17. Alex Avatar

    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"

  18. Aaron Wolbach Avatar

    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.

  19. mohamed mhmood Avatar

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

  20. aurelb62 Avatar

    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.

  21. Nomino Avatar

    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?

  22. Jia Liu Avatar

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

  23. Michael Dere Avatar

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

  24. Michi Lo Avatar

    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!

  25. Bono Music Avatar

    love how detalied the tutorial is haha

  26. Juan Fernández Avatar

    Daniel, I must thank you and YouTube'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.

  27. Robert Evans Avatar

    Editing is an amazing skill that can make great videos. What if you produced half the amount of videos and took some time to script and edit these to make them better?

  28. Alex Praturlon Avatar

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

  29. Eric Diaz Avatar

    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.

  30. Abara Avatar

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

Leave a Reply

Your email address will not be published. Required fields are marked *