Wow, these necessary-disorder GIFs are a plethora of intriguing ideas! Thank you Dan, for taking us the first few steps in that direction! You always claim that you don't have a great artistic instinct, but you have an amazing eye for possibilities! And that fits perfectly to what you are doing here.
I loved that ending, it's so different, but fitting! I'd love to see more of you outside of the studio talking about things, whether it's a whiteboard in a park or spheres and ropes on a sidewalk or stuff like that! =D
Instead of simply mapping the noise to either 0 or 255, multiplying it by a large enough number will achieve a similar effect, but near the edges you'll get some anti-aliasing for free, which looks substantially better. You actually did that on accident in a previous video where you multiplied the value by 255 twice.
An interesting consequence of using this rotational plane approach: the difference in radius between one end of the plane and the other means one side of the image will be passing through the noise field at a higher rate than the other. The more you try to compensate for that difference, the longer the resulting loop.
You only need one additional dimension to represent time so 3d noise is plenty to make a loop. You just need to move the entire coordinate space instead of only shifting a singular time axis. Kinda like looking at a cut-away slice of a torus.
I've always used a circle made from a Midpoint Circle algorithm. You'll avoid the trig functions, and have all the loop points at setup. And of course you can scale/stretch those points, etc.
For everyone who's interested: pastebin.com/NGfVDiMS You can use the code when you run it inside Processing and you have the OpenSimplexNoise.java tab with the class inside it. Also you will need to install the PeasyCam Library so you can move the camera around freely. The library can be installed by going to Sketch -> Import Library... -> Add Library... and then searching for PeasyCam. There's also a second draw loop which does not use a circle but a 2d plane instead.
Now make it so it can take different paths through 4d space, render out multiple ones, then pay them in a random sequence to obfuscate the looping. THEN, have some and at other 4D points, with some starting there, with all paths leading to close loops. I call it a 4D time flower.
your videos are the BEST. I watch them when I have problems coding. one question: at the end, I see a familiar neighborhood. Do you by any chance live in New York? again, best UA-cam channel I have ever seen.
Are you not going to mention that 4D is needed so that the plane can loop but still every part of the plane moves through space at the same pace? (Which makes me curious as to what a 3D implementation would look like.)
I think it’s possible you can implement your torus slice explanation more literally and not invoke noise of higher dimension than 3 and still loop 2D noise. Although if your torus is small there may be a visible ‘boiling speed’ gradient across the slice as the points more distant from the axis of revolution will boil faster than the inner points on the slice that are closer to the torus axis. You want a torus like a hula hoop, not like a donut. But with a hula hoop it’s hard to get both slow boiling and a short loop duration. While with a donut it’s hard to get even boiling speed across the slice.
The Coding Train actually it occurs to me, and maybe you mentioned this or the animator who makes the gifs mentions it already, that you could work with 3D noise but instead of it being a function of XYZ it could be a function of rho, theta, and z. Cylindrical coordinates. Then there would be no speed gradient penalty across the slice for small donuts.
The Coding Train I thought I had it working in Maya, but I used the dot product for my cylindrical angle and it loops, but it goes backwards and forwards. I’m starting to see the problem with the cylindrical coordinate systems and 3d.
At the whiteboard, he was suggesting that this looks like a 3D torus, but the implementation is in 4D. If it was a 3D torus as he drew, then yes one side would animate more quickly, but he rotates the 2D plane in two extra orthogonal directions. For a comparison that is easier to imagine, think of a line segment rotating about one end like a propeller in 2D (one extra dimension). In that case, the animation speed would vary place-to-place on the line. But if you imagine instead rotating the line in 3D (2 more dimensions) like it's travelling around the round side of a cylinder, then all the points of the line are moving at the same speed/animation rate.
Thanks for this explanation! Do you think my analogy of the torus is too misleading? It's the way I like to think of it, but I'm worried maybe I'm leading people astray. If you like to write a short explanation / correction I could include it in the description or pin a new comment!
Yes, if you didn't offset the rotating plane away from the rotation axis, the bottom edge of the screen would not change. I assume you have to get it far enough away from the rotation axis so that the difference in "speed" between bottom and top edges is not noticeable. Oh wait there are other comments about this and saying the 4D noise makes it irrelevant. ua-cam.com/video/3_0Ax95jIrk/v-deo.html&lc=Ugw77BdmjxYhAylk9PF4AaABAg.8s60aNhK0jr8s62h3R6hVB
Etienne Jacob not if your 3d noise is s function of rho, phi, and Z instead of x, y, and z. The cylindrical coordinate system will allow you to have constant evolution rate across the slice. The noise itself will be crushed into fanning planes that radiate from the central axis. And you'll still only be using 3D noise.
Etienne Jacob I’ve been playing with it in Maya and I have a seamless cylindrical texture using the dot product for angle but half of it mirrors the other half. is the problem with 3d cylindrical coordinates that the texture goes backwards and forwards. I’m starting to see the problem now that I’m trying it.
Would it be possible to iterate some params for the noise to match the sun at a given instant. Then I would get a machine learning params = model() and the noise algorithm as the loss function. A way to figure out what the sun is doing and predict it.
Got a question, can you do a tutorial on how to install processing on a raspberry pi 3? I finally got my pi up nd going, but everything I find on getting the programming language on the pi is out dated and doesn't work.
What do you do outside of yt? (If you do sth) because this is all in like processing so more visual based. I know that you know alot about java outside of visual stuff but then why are the challenges always visual challenges? The cap at the end is nice on you btw
Dan do you think a masters in mathematics is worth it? I'd love to understand the higher level math that goes into graphics programming, and I think it would compliment a CS bachelors well.
Anyone know how we can generalize the 4d looping to n dimensions? For example if we wanted to create this exact coding challenge in 3d, we would need a 5d noise loop.
Can you make the snake game again and explain it more in depth because im in middle school and its hard for me to understanf when yoi are going fast. You could also help me or us out by explaining other videos too. Your videos are great and you are a funny person.
There really is no need to use 4D noise here. 3D works too, just loop your XY plane around a circle in the XZ plane. it will produce a similar result and is much faster.
There is this js library. github.com/blindman67/SimplexNoiseJS I badly included it in this p5 sketch editor.p5js.org/hellonearthisman/sketches/deiJ6SL7K
@@KanalMcLP You can use Perlin noise to generate fractal noise. Perlin noise is not fractal (unless you claim "well yes but only one octave"). Fractal noise is not perlin noise and perlin noise is not fractal noise.
@@KanalMcLP Perlin noise does not sum multiple octaves. Perlin noise only makes a continuous connection between discrete points in the n-plane. (Which is the same as (Open)Simplex noise does, only each differs in which points they choose to connect.)
You can trivially see this: look at the images generated in this video, there's no cases where you'll see very high values very close to very low values, because the noise is generated with a single octave.
"Entitled" has two meanings. The first and more common is "to furnish with a right or claim to something". The second is "to give a name or title to". The various writing style guides are divided on whether "titled" and "entitled" can be used interchangeably.
@@quillaja yes but language is constantly evolving and it does feel correct. The only way "entitled" feels right with the second meaning is when it's is used as a past-particible adverb. Eg I read a book entitled "how to cook"
so nice and amazing. but i want to give coding challenge, to create a 4d universe using Einstein's field equation. i hope, you will accept my problem as well as challenge.
your torus example is not very accurate, you are actually looping around the four-dimensional equivalent of the torus. you would loop in a torus-like shape if you changed y and z instead of u and v. but then the upper part of the image would change less than the lower part and you wouldnt wnat it to,
McLP not if your 3D noise is a function of (radius, angle and Z) in cylindrical space, instead of regular XYZ space. Then there’s no speed gradient across the slice.
Fantastic as always! My favorite coding youtuber of all time.
Wow, these necessary-disorder GIFs are a plethora of intriguing ideas! Thank you Dan, for taking us the first few steps in that direction!
You always claim that you don't have a great artistic instinct, but you have an amazing eye for possibilities! And that fits perfectly to what you are doing here.
I loved that ending, it's so different, but fitting! I'd love to see more of you outside of the studio talking about things, whether it's a whiteboard in a park or spheres and ropes on a sidewalk or stuff like that! =D
Best ending to a Coding Train yet! Keep up the great work Dan.
13:22 - Love how you just walk by the Pearle store when saying "... and I'll see you..." lol
That vlog just cought me so off guard in the best possible way. More!
This is really cool! There's so much you can do with this stuff, it's insane! :D
Instead of simply mapping the noise to either 0 or 255, multiplying it by a large enough number will achieve a similar effect, but near the edges you'll get some anti-aliasing for free, which looks substantially better. You actually did that on accident in a previous video where you multiplied the value by 255 twice.
Oh, yes, good point!!
You are so awesome, stay positive!
These Coding Challenges are like bob ross painting a picture but bob ross is very excited about his picture
That's exactly it
It's a little bit difficult to get that we need 4D coordinate to loop a 3D value. However, it really makes sense.
Thanks for the sharing!
An interesting consequence of using this rotational plane approach: the difference in radius between one end of the plane and the other means one side of the image will be passing through the noise field at a higher rate than the other. The more you try to compensate for that difference, the longer the resulting loop.
What an actual lad.
You only need one additional dimension to represent time so 3d noise is plenty to make a loop. You just need to move the entire coordinate space instead of only shifting a singular time axis. Kinda like looking at a cut-away slice of a torus.
I've always used a circle made from a Midpoint Circle algorithm. You'll avoid the trig functions, and have all the loop points at setup. And of course you can scale/stretch those points, etc.
Snow day :D that was a good one... refreshing ending I may say :D
Loved the ending, you should do that more often haha
Thanks, Mr. Shiffman!
For everyone who's interested: pastebin.com/NGfVDiMS
You can use the code when you run it inside Processing and you have the OpenSimplexNoise.java tab with the class inside it.
Also you will need to install the PeasyCam Library so you can move the camera around freely.
The library can be installed by going to Sketch -> Import Library... -> Add Library... and then searching for PeasyCam.
There's also a second draw loop which does not use a circle but a 2d plane instead.
Awesome 😊
Now make it so it can take different paths through 4d space, render out multiple ones, then pay them in a random sequence to obfuscate the looping.
THEN, have some and at other 4D points, with some starting there, with all paths leading to close loops.
I call it a 4D time flower.
your videos are the BEST. I watch them when I have problems coding. one question: at the end, I see a familiar neighborhood. Do you by any chance live in New York? again, best UA-cam channel I have ever seen.
my life is a constant hurkey jurkey feeling
How 'VSauce'ian of you at the end there! LoL Thanks for the great videos!
"The last three hundred and seven coding challenges"
Ok, since coding challenge number negative one hundred and seventy
Are you not going to mention that 4D is needed so that the plane can loop but still every part of the plane moves through space at the same pace? (Which makes me curious as to what a 3D implementation would look like.)
Thank you for the comment, I should have been more clear about that I will try to come back to the topic!
I have never seen you draw a decent rectangle. Time to practice!
I think it’s possible you can implement your torus slice explanation more literally and not invoke noise of higher dimension than 3 and still loop 2D noise. Although if your torus is small there may be a visible ‘boiling speed’ gradient across the slice as the points more distant from the axis of revolution will boil faster than the inner points on the slice that are closer to the torus axis. You want a torus like a hula hoop, not like a donut. But with a hula hoop it’s hard to get both slow boiling and a short loop duration. While with a donut it’s hard to get even boiling speed across the slice.
Thank you so much for taking the time to write this and clarify! Super appreciated.
The Coding Train actually it occurs to me, and maybe you mentioned this or the animator who makes the gifs mentions it already, that you could work with 3D noise but instead of it being a function of XYZ it could be a function of rho, theta, and z. Cylindrical coordinates. Then there would be no speed gradient penalty across the slice for small donuts.
The Coding Train I thought I had it working in Maya, but I used the dot product for my cylindrical angle and it loops, but it goes backwards and forwards. I’m starting to see the problem with the cylindrical coordinate systems and 3d.
Yay! Dan!
Mike Boyd's next challenge: draw dotted lines on a blackboard like Dan
Yay more random noise
Can you do a processing tutorial about Q learning please?
It would actually be a great idea! And why not a following about Deep Q Learning with Tensorflow JS!
Thank u very much
love you bro...
Does this mean that the outer edge of the torus would be travelling faster (and therefore, animating quicker) than the inner edge?
At the whiteboard, he was suggesting that this looks like a 3D torus, but the implementation is in 4D. If it was a 3D torus as he drew, then yes one side would animate more quickly, but he rotates the 2D plane in two extra orthogonal directions. For a comparison that is easier to imagine, think of a line segment rotating about one end like a propeller in 2D (one extra dimension). In that case, the animation speed would vary place-to-place on the line. But if you imagine instead rotating the line in 3D (2 more dimensions) like it's travelling around the round side of a cylinder, then all the points of the line are moving at the same speed/animation rate.
Thanks for this explanation! Do you think my analogy of the torus is too misleading? It's the way I like to think of it, but I'm worried maybe I'm leading people astray. If you like to write a short explanation / correction I could include it in the description or pin a new comment!
You could've used two 2D noises with different offsets if you wanted to decrease lag.
By the way your voice sounds different outside of your studio.
Can you elaborate how do I do that? I am actually trying to animate and loop a 3d noise which means I would need a 5d noise.
@@n305 Did you find how to it ?
Based on my understanding, does one side of the image loop "slower" than the other side?
Yes, if you didn't offset the rotating plane away from the rotation axis, the bottom edge of the screen would not change. I assume you have to get it far enough away from the rotation axis so that the difference in "speed" between bottom and top edges is not noticeable.
Oh wait there are other comments about this and saying the 4D noise makes it irrelevant. ua-cam.com/video/3_0Ax95jIrk/v-deo.html&lc=Ugw77BdmjxYhAylk9PF4AaABAg.8s60aNhK0jr8s62h3R6hVB
Could you do the one with the rock and the water going on it?????
Couldn’t you do this in 3 dimensions? By moving the plane around in a 3d circle?
SweatersJPG yes, but even better would be in 3d cylindrical space, not 3d rectangular space.
@@digitalArtform the parts near the center of the circle would change less than the parts far from the center. With 4D noise, we have uniform change
Etienne Jacob not if your 3d noise is s function of rho, phi, and Z instead of x, y, and z. The cylindrical coordinate system will allow you to have constant evolution rate across the slice. The noise itself will be crushed into fanning planes that radiate from the central axis. And you'll still only be using 3D noise.
Etienne Jacob I’ve been playing with it in Maya and I have a seamless cylindrical texture using the dot product for angle but half of it mirrors the other half. is the problem with 3d cylindrical coordinates that the texture goes backwards and forwards. I’m starting to see the problem now that I’m trying it.
@@bleuje Move the plane around two Möbius loops? :P
Would it be possible to iterate some params for the noise to match the sun at a given instant. Then I would get a machine learning params = model() and the noise algorithm as the loss function. A way to figure out what the sun is doing and predict it.
Is there also an opensimplex library for p5.js?
I found this but haven't used it yet! github.com/joshforisha/open-simplex-noise-js#readme
Love your videos 😊
This episode is stright from Dimension C-137
. 😅
CC_137_4D_Noise_Loop
As always awesome, but what's you think of create some like Angry Birds clone tutorial?
Could you show us how to calculate Worley noise? That could make some awesome terrain generation, but I'm not finding java or c# implementations!
Height maps generated from looping simplex noise will achieve the ending 3d terrain
Loved the ending. Are you planning to make something similar to the gif loops in necessary disorder posts?
neat!
I caught up, at last.
You are ❤️
Got a question, can you do a tutorial on how to install processing on a raspberry pi 3? I finally got my pi up nd going, but everything I find on getting the programming language on the pi is out dated and doesn't work.
What do you do outside of yt? (If you do sth) because this is all in like processing so more visual based. I know that you know alot about java outside of visual stuff but then why are the challenges always visual challenges?
The cap at the end is nice on you btw
I teach at tisch.nyu.edu/itp!
Now do 5D perlin noise so you can generate every possible timeline.
Dan do you think a masters in mathematics is worth it? I'd love to understand the higher level math that goes into graphics programming, and I think it would compliment a CS bachelors well.
I really like your channel and I want to learn javascript here but I don't know which video to start.pls help me.
Start here! ua-cam.com/play/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA.html
Nice outro. Maybe we could do some episodes outside some time? =D
Anyone know how we can generalize the 4d looping to n dimensions? For example if we wanted to create this exact coding challenge in 3d, we would need a 5d noise loop.
just go in a circle within the last two dimensions (always use two more than you want to show for that reason)
But how do I actually loop a 4d noise without going 5d?
0:29 Joy Division!
How does this have a dislike? Who doesn't like this?
Couldn't you have just done it with 3D noise by moving through 3D space in a torus?
Yes, but there would have been one side of the image moving more quickly than the other.
Sometimes I forget you're talking to a camera in these vids.
BTW just tested the 4D noise and it was not slow on my desktop, your laptop might just be having a hard time. love the video tho
My own gif imgur.com/a/2NPNqsV
Can you show how to dowload plssdd
Can you make the snake game again and explain it more in depth because im in middle school and its hard for me to understanf when yoi are going fast. You could also help me or us out by explaining other videos too. Your videos are great and you are a funny person.
I did the snake game twice actually! Does this one help? ua-cam.com/video/OMoVcohRgZA/v-deo.html
wow, close up ending. Don't see that much. :)
Is it just me, or did he bring trigonometry to a modulo fight?
10:17 - make a Zebra noise loop pls :)
Please make a tutorial on processing.py
There really is no need to use 4D noise here. 3D works too, just loop your XY plane around a circle in the XZ plane. it will produce a similar result and is much faster.
That would work, however points closer to the axis of rotation will change more slowly to points on the outside.
@@zabotheother423 So use a radius far from the axis of rotation
I hope u make this to p5 code.......thanks
There is this js library. github.com/blindman67/SimplexNoiseJS
I badly included it in this p5 sketch editor.p5js.org/hellonearthisman/sketches/deiJ6SL7K
Perlin noise and fractal noise aren't the same! Fractal noise is the sum of several "octaves" of noise.
but perlin noise is by far the most common type of fractal noise if not the only
@@KanalMcLP You can use Perlin noise to generate fractal noise. Perlin noise is not fractal (unless you claim "well yes but only one octave").
Fractal noise is not perlin noise and perlin noise is not fractal noise.
@@Tordek but what is perlin noise if not the sum of different octaves at different amplitudes of plain noise?
@@KanalMcLP Perlin noise does not sum multiple octaves. Perlin noise only makes a continuous connection between discrete points in the n-plane. (Which is the same as (Open)Simplex noise does, only each differs in which points they choose to connect.)
You can trivially see this: look at the images generated in this video, there's no cases where you'll see very high values very close to very low values, because the noise is generated with a single octave.
Does anyone here continuously get errors for using the .mousePressed() function for DOM elements
even though u are using it correctly?
Try asking on discourse.processing.org/
@@BrettCooper4702 Thanks!
Dan, "entitled" means differently than "titled." Always love your videos, tho.
Zoinks!
"Entitled" has two meanings. The first and more common is "to furnish with a right or claim to something". The second is "to give a name or title to". The various writing style guides are divided on whether "titled" and "entitled" can be used interchangeably.
@@vezero317 nope u can't. And shouldn't.
vezero317 is correct.
@@quillaja yes but language is constantly evolving and it does feel correct. The only way "entitled" feels right with the second meaning is when it's is used as a past-particible adverb. Eg I read a book entitled "how to cook"
The edditing of this video is not opensimplex... 😄😄😄
so nice and amazing. but i want to give coding challenge, to create a 4d universe using Einstein's field equation. i hope, you will accept my problem as well as challenge.
otherwise guided me plz @the coding train
your torus example is not very accurate, you are actually looping around the four-dimensional equivalent of the torus. you would loop in a torus-like shape if you changed y and z instead of u and v. but then the upper part of the image would change less than the lower part and you wouldnt wnat it to,
McLP not if your 3D noise is a function of (radius, angle and Z) in cylindrical space, instead of regular XYZ space. Then there’s no speed gradient across the slice.
now do 5D noise :D
lol