How to Code: One Snakey Boi with Perlin Noise

Рет қаралды 14,028

Күн бұрын

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

Пікірлер: 22

@raajroy5931 3 жыл бұрын

i have downloaded all of your canvas based videos 😃 thanksss a lot to you

@ganishernematov47 3 жыл бұрын

hello to everyone! I just want to say thank you!!!

@christopher7540 3 жыл бұрын

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

@dadou9590 3 жыл бұрын

Thank you so much for the way you explain, following you since a long, helped me a lot !

@johncreativeproducts5688 3 жыл бұрын

Great video, thank you Chris!

@mubeensaiyed2819 3 жыл бұрын

Hi Chris.. You made a great video

@ChrisCourses 3 жыл бұрын

Thanks man, glad you liked it 🙌

@niranjanjyothi2416 3 жыл бұрын

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

@ChrisCourses 3 жыл бұрын

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.

@niranjanjyothi2416 3 жыл бұрын

Cool bruh. Keep the streak up!

@efraimgalindez1457 3 ай бұрын

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?

@Snoo29293 3 жыл бұрын

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?

@harmitchhabra989 3 жыл бұрын

Will try to expand this to terrain generation!

@JimZalewski 3 жыл бұрын

definitely 360 degrees of hue

@skyberna____2 Жыл бұрын

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.

@gektorix 2 жыл бұрын

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!