How to Code Procedural Terrain with Perlin Noise (JavaScript & p5.js)

Поділитися
Вставка
  • Опубліковано 8 січ 2025

КОМЕНТАРІ •

  • @RachelfTech
    @RachelfTech  Рік тому +19

    I had a lot of fun working on this and learning more about procedural generation! Excited to do more with it in the future :)

    • @AsatteGames
      @AsatteGames 3 місяці тому

      Could you make a tutorial of this on Godot? It would be awesome!

  • @cmtg4471
    @cmtg4471 10 місяців тому +3

    Wow you have explained it really well, also the final result with the ray casting and the 3D height map is so cool!!! I have already saved it on my playlist so I could get back to it anytime, thank you for this.

  • @pavlepaunovic8839
    @pavlepaunovic8839 Рік тому +7

    Nice video Rachel. I am too guitarist/dev. So its nice to see double colleague 😁 Wish you success with this channel. All the best

    • @RachelfTech
      @RachelfTech  Рік тому +1

      Awesome! Thank you, I appreciate it!

  • @DerAua
    @DerAua 7 місяців тому +4

    I love how you like your projects so much they make you smile 😍

  • @phillip2994
    @phillip2994 9 місяців тому

    Awesome Rachel! Would love to see you talk more about the raytracing too!

  • @kemaluemusic
    @kemaluemusic Рік тому +6

    While I love technical explanations and deep dives into specific ideas, I still really enjoy this way of "explaining how to use something and now go wild with it", and you are really good at that, your explanations are simple, quick and concise. I'm really enjoying your new channel so far. 😄
    Btw, fun fact: The developer of perlin noise worked on the first TRON movie, and his reason for developing this algorithm was that he wanted to break out of the solid-shaded look of that movies computer generated imagery.

    • @RachelfTech
      @RachelfTech  Рік тому +4

      Thank you! Yeah, I wasn't sure how in-depth I wanted to go with this (I actually ended up cutting a bunch of stuff from this video because it felt like too much information all at once). Still figuring out the best way to make videos like this! Will probably experiment with different formats.
      I read about that, cool background story!

    • @kemaluemusic
      @kemaluemusic Рік тому +1

      @@RachelfTech I think it depends on what kind of people you want to speak to with this channel, because if this is all about checking out some cool tools and explaining just how to use them, this is a pretty good format. People who want more of a technical and theoretical background will be craving more, and the videos will for sure get way longer at that point. 😅
      Maybe a longer project might be interesting, something you could cut into multiple videos.

  • @NKGD2557
    @NKGD2557 Рік тому

    Wow! I have followed your guitar channel since a long time ago and I didn't know that you had a programming channel! Cool explanation and video. Keep going!

  • @VforVallee
    @VforVallee Рік тому +1

    Sweet! Looking forward to these new projects of yours 🤘🏻

  • @tamoorkhan3262
    @tamoorkhan3262 Рік тому

    Simple, to the point, and brilliantly explain. Keep it up. 👍🏻

  • @stuartedwards5672
    @stuartedwards5672 Рік тому +1

    Really keen to see a video on how you handled raycasting. It looks really good.

  • @electricity2703
    @electricity2703 Рік тому

    It's awesome to see you programming and even in graphics 🎉

  • @smanzoli
    @smanzoli Рік тому

    Glad you showed the 3D option at the end, very easy with P5 to get there frm where you were, and it was the right objecitve, very nice!

    • @RachelfTech
      @RachelfTech  Рік тому +1

      For the 3D version I actually switched to Three.js because I wanted to try it out, but I know p5 has 3D functionality as well!

  • @allegro1355
    @allegro1355 Рік тому

    That was fantastic! Thank you! I hope you find sometime to espand on heightmap and some other P5 projects.

  • @MrEscen
    @MrEscen 6 місяців тому

    Hey Rachel... didn't known you where also into this weird programming stuff.. I was already subscribed to your other channel... I love it!

  • @javiergarcialopez8365
    @javiergarcialopez8365 Рік тому

    This is awesome!!! I am waiting for the next 3D vídeo !!! 🎉

  • @oscarbavi7886
    @oscarbavi7886 Рік тому

    wow, congratulations, i'm waiting for the next shadows vídeo and 3d video

  • @williamrosa4005
    @williamrosa4005 День тому

    Very helpful, thank you!

  • @leechatt9709
    @leechatt9709 Рік тому

    Hi Rachel, Found this a very interesting explanation in generating Maps for games like this. Love to see a video were you get a map Repeating its self. Like if you went of the end of the map it would start blending in to were you stated. Like an infinite world. I suppose Command and conquer games where created like this. Im experimenting at the moment with perlin noise, and the way you explained it got me even more interested thanks. 😁

  • @Gantics-Antics
    @Gantics-Antics 4 місяці тому

    Really cool - if possible please revist this with road and town generation :D

  • @MyCodingDiary
    @MyCodingDiary Рік тому

    Nice one! now i am going to try this in python! thanks for the video! keep the great work!

  • @MundodasGuitarras
    @MundodasGuitarras Рік тому +3

    Wow I met you by your guitar channel, didn't know you were into IT as well

    • @RachelfTech
      @RachelfTech  Рік тому +4

      Hadn't really talked about it much before! Excited to share more in the future :)

  • @franzgriffle6063
    @franzgriffle6063 7 місяців тому

    Fantastic, did you do a deep dive into the subject? How can we link objects like trees to the dark green, grass lands to the light greens etc. if you haven’t I’d love to suggest a video on the subject. Thanks 😊

  • @TechnicallyMac
    @TechnicallyMac 10 місяців тому

    Really great video! Would love to see the raycasting video

  • @judgegroovyman
    @judgegroovyman Рік тому +1

    Great! I love guitar and tech so this is great :)

    • @RachelfTech
      @RachelfTech  Рік тому +1

      Awesome, thanks for watching! 😁🤘

  • @ExTorvo
    @ExTorvo 5 місяців тому

    Possible to think to considering add tilemaps ? I can't think out of the blue how to do it but since it's just the way is settled is types of terrain i imagine a colorless tilemap maybe 🤔

  • @sergodobro2569
    @sergodobro2569 Рік тому +1

    How did you implement shadows?!

  • @kirandevadiga4938
    @kirandevadiga4938 Рік тому

    hey could you explain how you got the raycasting based shadows on the terrain? I would love to hear how you achieved it!

  • @joshuacadebarber8992
    @joshuacadebarber8992 Рік тому

    I'd like to see that raycasting shadows video

  • @jmssun
    @jmssun 8 місяців тому

    Maybe look into wave function collapse for terrain

  • @robinj6997
    @robinj6997 5 місяців тому

    Are you using spatial derivative to calculate shadows from the height map? I want to see the tutorial because I'm stuck :(

  • @kevnar
    @kevnar 8 місяців тому

    Can you do a video that adds random towns on the map and then makes lowest-cost paths between the towns? It's easy enough with a fixed-size map, but infinite worlds... now that's a challenge.

  • @KJ7JHN
    @KJ7JHN 6 місяців тому

    Camera following multiple sequential splines please.❤

  • @halahsmith9931
    @halahsmith9931 Рік тому +3

    Do you do coding for a career? Are you a software dev? I know quite a few musicians who are devs so I’m curious if there’s a correlation lol

    • @RachelfTech
      @RachelfTech  Рік тому +7

      I did work as a software engineer, but I'm currently taking a break. Considering making a video on my background in tech in the future!

    • @halahsmith9931
      @halahsmith9931 Рік тому +2

      @@RachelfTech that’s so cool! Definitely look forward to the video if you decide to put it out!

  • @nubonguitar
    @nubonguitar Рік тому

    Just let me know when you release the BR alpha!

  • @alejandroaguirre5043
    @alejandroaguirre5043 Рік тому +1

    😮 you are software dev

  • @ninja_jambon
    @ninja_jambon 7 місяців тому

    Incredible

  • @STaSHZILLA420
    @STaSHZILLA420 Рік тому

    Wow. You're so talented. I hope you make more videos on coding. I've been recently learning python but you make js look so easy. Did yo teach yourself or did you take courses?

    • @RachelfTech
      @RachelfTech  Рік тому

      I'm currently thinking of ideas for the next video! Python was actually my first language as well. I studied computer science in college :)

    • @STaSHZILLA420
      @STaSHZILLA420 Рік тому

      @@RachelfTech Very cool. I'm super obsessed with wave function collapse as of late. I did the coding train tutorial but its pretty hard to fully understand.
      Can't wait for your next video!

  • @kevinlynch6221
    @kevinlynch6221 Рік тому

    Looks, rock star and brains...❤

  • @backstabba
    @backstabba Рік тому

    The problem with this terrain is that it isn't seamless. A map is usually a 2D representation of an oblate spheroid. Any ideas how to make that right?

    • @joshuacadebarber8992
      @joshuacadebarber8992 Рік тому +1

      Check out Sebastian Lague's video on procedural terrain generation

    • @balijosu
      @balijosu 4 місяці тому

      Sample a sphere out of 3D noise.

  • @namelastnamee
    @namelastnamee Рік тому +3

    you should plug this channel on your main

    • @RachelfTech
      @RachelfTech  Рік тому +6

      I just did a community post over there, but those don't get shown very widely. Thinking about how to advertise this channel better soon! Thanks :)

  • @UnderArea51
    @UnderArea51 11 місяців тому

    I try to imagine what would happen if Perlin Noise was applied to NetHack game.

  • @hatempire
    @hatempire Рік тому

    I wonder how many invites for DnD groups you had after this video, because making cool maps is such a useful and amazing skill for TTRPGs.
    Also, I'm wondering... is there a way to generate maps from riff inputs through guitar + USB interface? 👀 I'll try to do it is a funny dev study lol

  • @joaonuno439
    @joaonuno439 Рік тому

    No sound?

    • @RachelfTech
      @RachelfTech  Рік тому +1

      On the video? Sound appears to be working fine for me!

    • @joaonuno439
      @joaonuno439 Рік тому

      Its working now, thanks! 🙂

  • @Kobraisten
    @Kobraisten Рік тому

    you are my girl version or vice versa :D the guitar, the piano, the area of interest in coding, if I go back in time a bit, then also the hair! :D good job, in any case : )

  • @Marandal
    @Marandal 8 місяців тому

    I have finally found her! the female Charlie!
    By the way, thanks for covering Procedural terrain.

  • @stevenvillarreal8970
    @stevenvillarreal8970 Рік тому

    Working with JS is so much fun but the syntax is so complicated 😂.

  • @osamareema3008
    @osamareema3008 10 місяців тому

    I love you❤

  • @JAKEAVALON-rg8xm
    @JAKEAVALON-rg8xm Рік тому +9

    why are you laughting

  • @italiad1013
    @italiad1013 Рік тому +1

    Ok im not trying to be smart or anything n im interested but why would one want to create this?? Uses etc?? Again not being a jerk….👍subbed

    • @RachelfTech
      @RachelfTech  Рік тому +2

      It could be used for game development (or things like that, Perlin Noise was actually originally developed for work on the Tron movie), but I'm just doing it for fun :)

  • @Datomezz
    @Datomezz 7 місяців тому

    Why do you laugh all the video ? I didn't get a joke :(

  • @justgivenofox9543
    @justgivenofox9543 Рік тому

    A beautiful woman who’s amazing with the strings and works with computers. You got it all girl!