How to Code: One Snakey Boi with Perlin Noise
Vložit
- čas přidán 7. 06. 2024
- Perlin Noise is controlled randomness. Rather than canvas particles teleporting from one location to another, Perlin Noise will move your particles randomly, but with a degree of control. Each value that a Perlin Noise function returns is related to the previous value in some manner, giving off that illusion of controlled randomness. You'll see exactly what I mean as the video goes, but be sure to drop any questions you might have in the comments.
Get access to over 50+ free and premium tutorials at chriscourses.com
📃Table of Contents
00:00 Project overview
00:58 Initial canvas setup
12:34 Download Perlin Noise library with NPM or Yarn
17:16 Whiteboard explanation of Perlin Noise
19:20 Integrate Perlin Noise with singular circle
25:26 Cool Perlin Noise drawy boi
25:52 Add multiple circles for snake-like effect
32:15 Particle galaxy effect
33:44 Colorize the canvas and snake
40:28 Add variety with radius and color changes
41:17 Outro / Intro to chriscourses.com
🔗 Links
CodePen Example: codepen.io/chriscourses/pen/O...
@chriscourses/perlin-noise: www.npmjs.com/package/@chrisc...
Canvas Boilerplate: github.com/christopher4lis/ca...
Thank you so much chris. Your canvas videos helped me a lot to understand object oriented programming and also helped me to make outstanding websites. It was longtime ago since your last canvas video.I was thinking that you are not making that kind of vids anymore. But now I am very happy to see a new canvas video on your channel. You are an awesome teacher.thank you so much.please make a video or blog that how we can make our own npm packages. Have a good day
i have downloaded all of your canvas based videos 😃
thanksss a lot to you
Thank you so much for the way you explain, following you since a long, helped me a lot !
Great video, thank you Chris!
hello to everyone! I just want to say thank you!!!
Hi Chris..
You made a great video
Thanks man, glad you liked it 🙌
Hi Chris I have enjoyed and learned much from your videos. I have a question though, how can I use Perlin-noise in Eclipse, where I run your projects?
Hey Chris, love your content! Your videos was the beginning to my web dev as in it inspired me a lot by seeing what a few lined of codes could do. It's just endless. Thanks. Also I was wondering whether you could show us how to actually export this canvas and use it on our web page. For eg, the colliding balls video, how to put that up as a background to our webpage to give it a good look fluid look. Thanks again
This is for sure going to come, have had a ton of people ask for it, and I remember how confusing it was when I first started with canvas. Probably sometime this week as long as the post streak continues.
Cool bruh. Keep the streak up!
Will try to expand this to terrain generation!
I kind of wonder though, using Math.random() on x and y coordinates would do move the ball in random positions making it seem like teleporting, but if we used it on dx and dy to change direction and speed then it should worked, right?
Dumb question but why would we use a const inside a for loop? Aren't we changing the value of the const variable? I was under the impression consts stay constant and unchanged.
please can you help me to install noise , i try to install but nothing i have erorr , please
Setting up the package.json and webpack took longer than the canvas project itself. Maybe you should update the video with the configuration of these elements. And thx for your videos!
definitely 360 degrees of hue
Fun fact: a ton of procedurally generated games use Perlin noise. Best example: Minecraft.
get message in codepen that require Uncaught TypeError: _require is not a function . error mate. error. too bad. life goes that way
Most of that could have been written as a random(-5,5)