Coding Challenge

In this multi-part coding challenge I show how to use a noise field and polar coordinates to create a perfect GIF loop. Code: thecodingtrain.com/challenges...
p5.js Web Editor Sketches:
🕹️ Polar Perlin Noise Loops: editor.p5js.org/codingtrain/s...
🕹️ Perlin Noise GIF Loops: editor.p5js.org/codingtrain/s...
Other Parts of this Challenge:
📺 Polar Perlin Noise Loops: • Coding Challenge #136....
🎥 Previous video: • Coding Challenge #135:...
🎥 Next video: • Coding Challenge #137:...
🎥 All videos: • Coding Challenges
References:
🖋️ Étienne Jacob's tweet: / 1096403588069425152
📓 Étienne Jacob's Blog Post: necessarydisorder.wordpress.c...
🔗 noise() reference: processing.org/reference/nois...
💻 ffmpeg: ffmpeg.org/
🗄 Perlin Noise: en.wikipedia.org/wiki/Perlin_...
Videos:
🚂 Blobby!: • Coding Challenge #36: ...
🚂 Drawing with Fourier Transform and Epicycles: • Coding Challenge #130....
🚂 Heart Curve: • Coding Challenge #134....
🚂 GIF Loop: • Coding Challenge #135:...
🎥 Perlin Noise: • 13: What is Perlin Noise?
🔴 Coding Train Live 169: • Coding Train Live 169:...
Related Coding Challenges:
🚂 #36 Blobby!: • Coding Challenge #36: ...
🚂 #130 Drawing with Fourier Transform and Epicycles: • Coding Challenge #130....
🚂 #134 Heart Curve: • Coding Challenge #134....
🚂 #135 Making a GIF Loop in Processing: • Coding Challenge #135:...
Timestamps:
0:00 Introduce coding challenge
0:16 Summarize the previous coding challenge 'Polar Perlin Noise Loops'
0:40 Visualize noise loop
1:20 Describe the goal of the coding challenge
2:06 Explain move from JavaScript to Java and Processing
2:36 Let's code
3:03 Compute values for a noise loop
4:19 Map values to position
5:04 Update the challenge with suggestions
5:52 Re-define the goal of the coding challenge
6:32 Find multiple noise values
7:52 Create a NoiseLoop class
9:20 Add a noise loop object to update the position
9:50 Define a value function to return noise values
11:54 Use noise loop to update the position
13:00 Change how noise values are initialized
15:00 Create a Particle class
15:55 Add multiple particle objects
16:47 Experiment with different parameters
19:55 Set up looping scene
20:22 Record Processing sketch
20:57 Create GIF with FFmpeg
22:50 Show GIF loop
23:09 Mention different noise algorithms
26:00 Conclude coding challenge
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: thecodingtrain.com/discord
💖 Membership: kzbin.infojoin
🛒 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...
#gifloop #perlinnoise #polarcoordinates #p5js #processing

[@riot1133]

polar ᵖᵉʳˡᶦⁿ noise loops

[@Aelidiil]

LMAO the editing is so good in this one 😂 when you edited your self over the footage I was laughing so hard! I've learned so much from you sir keep up the fine work!

[@TheCodingTrain]

That's all twitter.com/mathblank!

[@Argon270]

yeah that was pretty funny lol and the two of him were equally energetic too

[@BuFu1O1]

I'm laughing

[@igricRBX]

The power of video editing. :)

[@ahmedsami3569]

Your videos became the best parts of my recent days, I like what you are doing, You are inspiring me to keep the passion and motivation to the thing I always enthusiastic about. Thank You so much! 👌

[@Kupkeks]

I love how enthusiastic you are about programming. Please never loose this!

[@elyaizen]

You have the coolest job in the world. And not only that, you're the best at it. IMHO

[@Ezechielpitau]

Just recently discovered your channel and absolutely love your videos. Very interesting topics and also (at least for me) just the right difficulty of challenges. So that sometimes I pause and code it myself first, then see if you've done it differently. Also, I am sure for newer coders it's very helpful to see you code something and sometimes it doesn't work at all at first. Keep it up :)

[@Carlosdreaming]

Wonderful!!! This Perlin noise loops are awesome!! Thanks!!!

[@offtheball87]

I used polar noise in a sketch a while ago to generate random polygons to help create interesting continents for world building. It's a really cool technique!

[@XKCDism]

I like the edit! very dynamic.

[@rarestaiden185]

Dude i love your stuff thank you for showing us these stuff i have fun following along it is so much fun

[@johnj8639]

I love how creative your coding changes are you always have really interesting and artistic ways of demonstrating all these algorithms and programming concepts, I would love to see you come up with examples of how to use miltithreading in java. Maybe you could use it to make your own rendering engine to handle some types animations, or combine it with the project you used to render 3D objects, I think that would make an awesome coding challenge

[@CodingWithUnity]

My dream is to be able to be as natural at coding on camera as you are, its so inspiring! Also this video was prettttyyyyyy freaking awesome.

[@MC-rw9rk]

"i don't know what a reasonable range is but lets give myself a range between zero and a million" this made me snort

[@Gonras]

I love your videos so much!

[@spidertyler]

you and code bullet are my favorite coding channel, but when it comes to the challenges you easilly win in cool points

[@omkarbhale442]

Challenges and consistency 😏

[@juschu85]

It absolutely makes sense not just to replace Perlin Noise with Simplex Noise since it would break some of the existing projects that use Perlin Noise. But that doesn't mean you can't add Simplex Noise under another function name and add a note in the documentation for the noise function that Perlin Noise shouldn't be used anymore but it won't be removed.

[@mirrorimage7077]

I was just thinking with the last video that it was kind of disappointing you didn't scale this stuff up to something large, so this is really satisfying. The best part about scaling up is that it's still mostly comprehensible, but it creates this immensely complex multi-layered image. It gives me the same feeling I got when I first started making spirographs with turtle.

[@morganstoodley8591]

Please do a tutorial on ray tracing! Also great video!

[@cheako91155]

You could give the movement speed a non uniformity by altering diamitamiter of x&yNoiseLoop with another NoiseLoop.

[@harshveer4769]

great job Dan!!

[@kingtarekdz]

amways there is new thank's a lot for you work go on and take us to the new ideas

[@fareast1010]

Thank you for informative tutorial, I hope you could make a tutorial about curl noise

[@albertrisenielsen1405]

I love how everytime you pull up the gif in 1:29 the compression just dies.

[@dkkoala1]

You made a logical error when changing the "center" of the noise circle, because you are basically changing the diameter of the circle path instead of just moving the circle around in the noise space. The more appropriate place to change the center of your circle is in the noise(xoff, yoff) function and make it noise(xoff + cx, yoff +cy). Changing the diameter is bad because for large diameters you are losing the smooth property of perlin noise. This is because you are constantly moving around the circle with the same angle, but for bigger diameters the circle has a bigger circumference, which means you are technically moving larger distances in the noise space, which is designed to be smooth in small distances but not in large distances.

[@Kitulous]

what about making a derivative coding challenge? you draw a continuous function with your mouse (it draws as a shape with vertices) and simultaneously, on a different graph or with different color or both you get a derivative of this function! this would be cool to watch and also it is very educational!

[@michelboller7701]

perhaps, if you use vertex (x, y) for a single particle, you can detect the loop through your path through the canvas

[@wkool9430]

heyy nice, another great video (at least I assume since all your videos are great!), I finished that snake game btw, should I submit that somewhere?

[@TheCodingTrain]

You can submit a link to the coding train website if you like! github.com/CodingTrain/website/wiki/Community-Contributions-Guide

[@wkool9430]

@@TheCodingTrain Thanks! I will look into it, after the video ;D

[@Guil118]

Your pronounciation of Étienne Jacob is damn fine. Also great video! MY MAN!

[@Guil118]

I was going to go eat but I now have this to watch instead.

[@Kitulous]

@@Guil118 you could've taken the food with yourself and watch and eat simultaneously! I do it all the time!

[@Guil118]

@@Kitulous But I would not have been able to entirely focus on the video.

[@Kitulous]

@@Guil118 teach that ability in yourself.

[@slyer7695]

Love from Italy!!!! ❤️❤️❤️❤️ 🇮🇹 #LoveFromItaly6

[@VLS-Why]

Yes yes yes! I've been hoping you would make a video on higher dimensional noise and simplex noise. You should look into opensimplex rather than simplex though because simplex still has active patents preventing it from being used commercially without licensing

[@TheCodingTrain]

Yes, I'm planning to use this code: staffwww.itn.liu.se/~stegu/simplexnoise/ Any suggestions where I can read up on more about the patents, history?

[@VLS-Why]

@@TheCodingTrain Found it interesting that Nokia bought it and held onto it for a while patents.google.com/patent/US6867776

[@blazkemperle2636]

You should be in the Unesco World Heritage List!

[@arttu1229]

You should make a series of postgresql like u did for git and github

[@alejandroalfonsohernandez3766]

Can u make a series of videos about Computer Graphics 3D? Like Raytracing, Z-buffers using OpenGL library (GLM : OpenGL Mathematics). And explaining all the math behind?Thanks in advance!

[@Smittel]

OneLoneCoder has a great series with tons of videos about all that, wrapped up in a game engine that uses the windows console text output buffer

[@TheCodingTrain]

I'd like to! You can follow topic ideas here: github.com/CodingTrain/Rainbow-Topics/issues

[@lorenzm7412]

You NEED to do a slimemold, i really cant do something that organic myself o.o

[@AnonymouseLlama21]

If you programed the hairy ball theorem (a topological theorum) in 3D on a sphere and then used a vector field it would look cool

[@totheknee]

24:50 - Duuuuuude, tlhe visually-significant directional artifacts are real, yo.

[@WildAnimalChannel]

To make a wibbly circle loop in time I guess you'd have to map through a torus in 3d noise.

[@TheCodingTrain]

Stay tuned! Going to attempt this tomorrow with 4D noise.

[@ed_halley]

Okay, now make the animation tile-able (dots crossing the West edge appear on the East edge, etc.)!

[@SpeckyYT]

17:37 OwO

[@metadaat5791]

Hi! Awesome video :) One tip: You should have done ffmpeg -i output/gif-%03d.png because your filenames have leading zeros. Therefore you probably lost 9 or 10 frames somewhere

[@TheCodingTrain]

Zoinks! thanks for the tip!

[@michalbotor]

btw. to create a 1D looping path you could also: *) sample a 1D perlin noise P[0], ..., P[N] for the "first half" of the desired duration and then use P[N-1], ..., P[1] for the "second half" of it, *) sample a 1D perlin noise P[0], ..., P[N], construct a dotted line L[n] := 1/N * (P[N] - P[0]) * n + P[0], for 0

[@d34dc0de]

"On purpose" :D

[@zakki5630]

You should make some 3D renders using perlin noise, like mountains

[@TheCodingTrain]

kzbin.info/www/bejne/f3ylYpuNjMqXg80

[@DaveHoskinsCG]

You don’t have to use sin cos to loop, a simple number wrap will be more efficient.

[@gruselhaus]

Choo Choo 🚂

[@Lycam]

The perlin in bee voice

[@TECHN01200]

Why not clamp all the values down into a single circle in (n+1)D space so there is only one space to deal with?

[@angelowentzler9961]

I want a simplex nose too

[@diogoalmeida762]

Hi! i'm making a litlle game in processing...But i got a problem that is i dont know how to set the coordinates to be the same on every monitor type using fullscreen...like in a 1920x1080 the coordinates are different from a 1600 x 900. Can anyone help?

[@eflat__major]

What is the round thing called at 01:26? I want to make one of those.

[@Car0linaPh03nix]

Did he ever make those two videos?

[@user-on3bp6mz4c]

можно ли сделать чат с другом, например подключить телефоны, и можно ли сделать онлайн игру?

[@jasonmemm9994]

What library/graphical framework did you use to call render() and other draw methods?

[@michalbotor]

he uses processing.org/ which is like java but with all draw functions build-in.

[@jasonmemm9994]

@@michalbotor What does processing use? I got it, but there are so many built-in libraries I can't see.

[@techlearner2746]

Sir have you completed Bsc . Please answer me.

[@mirrorimage7077]

Polin noise loops? Perlor noise loops?

[@Cornellie]

5:03 lmao

[@user-lp1is2zq9n]

0:17 Like if you see a half face in shape)

[@KingJellyfishII]

Now let's code it in Python. 10x slower, but better in every other way.

[@KebabuNaikintojas]

What language is he using to do this stuff?

[@TheCodingTrain]

This video uses Processing (which is built on top of the Java programming language). For more info, visit processing.org and also this video might help kzbin.info/www/bejne/d57PcpyBqM6sZtE.

[@juschu85]

There is still a problem, or "problem", with the min and max value in your NoiseLoop class. No, it's actually a problem. But it's not a problem in the sense of an error. When you choose a min and a max value you expect two conditions to be true. A) No sampled value will be outside of that range. That's sometimes really important. B) When you sample a lot of values the lowest should be somewhere near min and the highest value should be somewhere near max. A is guaranteed this way as long the noise stays in the range [0, 1] (or [0, 1[ ? idk). But B will be more and more unlikely the smaller the radius gets. Of course, this condition can't be actually true or false. What's the exact definition of "somewhere near"? But I think we all agree 0.5 in the range [0.2, 0.8] is neither near 0.2 nor near 0.8. But if your radius gets small enough 0.5 could be your highest or lowest sample. So what's the problem with B? First, there's nothing going wrong. This is just how Perlin Noise works. Let's imagine this cloudy visualization of 2-dimensional Perlin Noise represents some height values of a landscape that has heights between 0 and 1. When you walk around in a big circle you will very likely walk through some of the lowest valleys and some of the highest hills. But when you only walk around in a very small circle you probably always stay on top of a hill, down in a valley or somewhere in between. How could we solve that problem? In the constructor of the class, we could go around the circle once with n samples, where n should be user-definable and/or the bigger the bigger the radius gets. Of course, when the radius is big enough the whole problem doesn't exist anymore and you could just skip this when the radius gets bigger than a certain threshold. You check those n samples for the highest and lowest sample and then you change the way you use the map function that returns the value. Don't map from [0, 1] to the range [min, max] but from [lowest sample, highest sample] to the range [min, max]. But when you do this condition A can't be guaranteed anymore. Perhaps there is a higher or lower value between the n samples you checked. So before you return the value you also have to constrain it to the range [min, max]. The smaller n gets the more often values will be constrained. So choose n big enough so it won't be visible. This way the class will be much more controllable since it actually does what you would expect from it by using (more or less) the whole range between min and max.

[@MrPointness]

There is, though, another problem when the radius gets big enough. And that is that since we move through the circle using a fixed angle, as we increase the radius, so does the distance between each individual point, and so, they start to be less and less related to their neighbors, eventually losing all "fluidity". While this could be solved for a single particle by making the angle interval depend on the radius, making it smaller as the radius grows, it comes at the expense of having each particle individual on a different period, which would make setting up a perfect loop a lot harder. While I'm sure some could find a clever solution to this, I would try to stay away from bigger diameters past a certain point.

[@bennybrouwer]

unfortunately, saveFrame() does not work in p5.js. See p5js.org/reference/#/p5/saveFrames A bit more complicated

[@bakarock90]

Can you do a series on Godot Engine with C++? Thanks++

[@johnydl]

You missed an even better demonstration of this: Repeatedly draw a blobby circle like from the start but walk the noise round in a circle too At the beginning your code is for (float a=0; a

[@TheCodingTrain]

Love this idea! If you implement it could you please addd here? github.com/CodingTrain/website/wiki/Community-Contributions-Guide

[@johnydl]

It's been a long time since I did any real programming, um might tweak the JS one rather than Java though

[@johnydl]

@@TheCodingTrain GAH I did the 'hard' coding work but the guide is not git hub newbie compatible if/when I work it out I might make a step by step for dummies guide cause I don't seem to be getting it xD I've been staring at it for 10 minutes already and I've only just realised I've missed step 0 upload my own version to my own repository... I kinda suck but I'll figure it out eventually. Thanks for the love and I here's the working version in the mean while: editor.p5js.org/JohnyDL/sketches/wZv0CEz7c Has a wibbliness slider, a loop speed slider (with reverse which shows off that it's repeatable) and a phase speed slider (which when at the same speed as the loop speed makes weird things happen which I could explain but I kind of saw coming)

[@cjvman]

Special guest Donald Trump at 1:12

[@historywnetstatls1547]

Thumbs up from me. My YT videos are very amateurish looking compared to yours 😄.

[@russellmurfet2599]

and😶‍🌫😶‍🌫😶‍🌫😶‍🌫😶‍🌫😶‍🌫😶‍🌫😶‍🌫... 😶‍🌫 you

[@russellmurfet2599]

😑 hay can not code this even thow it is "codeing"time... but i do not like it i mene you do not have to get rid of it...

[@uccohwrmtqle2xernixq7mdw39]

Liked this video just to cancel the dislike