LiveCoding - The Universe Within - Part 1

[@MrSefsdf]

I am a software engineer and I find your videos super inspiring. you show the fun part of coding in a way that could be entertaining to children and yields quick and very satisfying results. undergrad cs teachers around the globe, take some notes, this should be part of your curriculum.

[@TheArtofCodeIsCool]

Aww thanks. Yeah shader coding gives instant feedback, thats one of the things I love about it.

[@lennemo99]

As a first-year computer science student I find your video to be very helpful as you show a side of programming which is really fun and interesting yet not so commonly taught where I study

[@unveil7762]

WOW finally someone that speak clear , goes fast and explain as is suppose to be!!! Thanks!!!

[@andreidoanca4262]

mate, this tutorial is so interesting. I'm just getting into shaders and I love it. it's so much different and interesting than other types of programming. dankjewel

[@playonce4186]

This makes me so happy I always wanted to create this effect THANK YOU BRO!

[@realcygnus]

Shaders are the coolest thing since sliced bread imo ! .....its hard to teach old dogs new tricks but I'm trying. THANKS for the very useful content.

[@TheArtofCodeIsCool]

I'm glad you like it! If you are new to shader coding then I suggest my beginners tutorials to get you up and running.

[@realcygnus]

Oh Yea watched them ALL & followed.....& eagerly awaiting more......imo its one of the few areas that presently seems to lack abundant content as far as vids/youtube TUT's. If you don't mind, Where/how did you learn it primarily ? university? books/self-taught ?

[@TheArtofCodeIsCool]

I learning all of this by just looking at a lot of other peoples shaders and then playing with my own. There is still plenty of stuff I have to figure out. I wish there were some good video tutorials to learn from ;)

[@realcygnus]

at least you are walking the walk !

[@unexpectedbehavior]

these videos are incredible, thank you!!

[@Danieru_Stardust]

This is a very cool visualization! I will use it on my online live set, you are cool!!

[@rochbouchayer9120]

Seriously this video is so insanely cool. You areso pedagogue, you explain everything clearly. Perfect !

[@TheArtofCodeIsCool]

aww thanks man!

[@urssounds]

Jeez! This channel is mind-blowingly good! Crazy stuff! I am so learning this!!

[@TheArtofCodeIsCool]

Yeah! Go go go! :)

[@N7Z6O6ypHI]

Awesome! And detailed. Thanks!

[@Bubatu7]

I really liked the effect in your last video, glad you're making a guide covering it.

[@TheArtofCodeIsCool]

Glad you liked it!

[@julcrm]

WOW!! that looks amazing

[@TheArtofCodeIsCool]

Thanks!

[@akella_]

Thank you for your videos!

[@TheArtofCodeIsCool]

Thanks for watching!

[@julienvergnaud866]

Awesome as always

[@stefanvonulan1269]

This is so cool and educative ! Thanks a lot :))

[@dj_e8]

Joined Patreon. These skills pay the bills.

[@TheArtofCodeIsCool]

Aww thanks! Its people like you that make the internet awesome!

[@mactyler]

Dang dude, seriously great stuff in here! Loved the video.

[@TheArtofCodeIsCool]

Thanks!

[@sah71sah]

Thank you so much, I learned a lot.

[@TheArtofCodeIsCool]

Great!

[@danielaguirre5078]

Im learning a LOT from this videos, Thank you so much!!!

[@ReviveNRepair]

Excellent video, I learn new things in each one :) I think it's more standard for PA and BA to be called AP and AB in this case, based on how the vectors are calculated. Both start in point A. AB = B - A AP = P - A Just a naming thing, the first letter is the starting point and the second letter is the endpoint.

[@TheArtofCodeIsCool]

Yes you are right. I do these off the top of my head and sometimes I get it the wrong way around.

[@ReviveNRepair]

​@@TheArtofCodeIsCool I see, it happens to the best of us. I noticed it when I drew the vectors to understand the function. Keep up the good work, your channel is a gold mine 👍

[@manapotion1594]

After 3 years this effect is now on every blockchain startup landing page :D

[@LensTutorials]

Thank you so much for your tutorials!

[@adriancardenosocerezo]

Genius!!!

[@bpunsky]

This channel is awesome. Good work, keep it up! :D

[@TheArtofCodeIsCool]

Awesome. Thanks for watching!

[@nateshrager512]

Cool one, cant wait to watch this

[@TheArtofCodeIsCool]

Awesome!

[@CharlesHolbrow]

Thank you for the tutorial. Which video do you explain the DistLine function in?

[@TheArtofCodeIsCool]

I explain a version of the distline function in 'the simplest 3d' though this version is different. In this case:The formula for the line is a+ab*t which in plain english says, start at point a, and then go t steps in the direction of b. This way, no matter what t you pick, you'll always have a point on that line. t = clamp(dot(pa, ba)/dot(ba,ba), 0., 1.) 1) dot(pa,ba) projects pa onto ba (and vice versa). This gives us a number that tells us the similarity between these vectors (1=they are the same -1=they are opposite, and anything inbetween or outside). Other people have made videos that explain the dot product. 2) /dot(ba,ba) normalizes the value obtained in 1 such that a point closest to a maps to 0, and a point closest to b maps to 1 3) clamp 0 1 makes sure that the value doesn't go out of the 0 to 1 range (the a to b range) because we want the distance to the line segment, not the distance to the infinite line. 4) length(pa - ba*t) -> pa is the position of point p with respect to point a, ba*t is the position of the closest point on the line segment with respect to point a. pa-ba*t is the vector from point p to the closest point on the line segment. We take the length of that to get the distance to the line segment. Perhaps I should have explained that in the video but it is already a long video and it would have added 10 minutes ;) Hope that helps!

[@CharlesHolbrow]

That's perfect. Thanks for your help!

[@blender5528]

i like your videos :) .... you try to make understand in detail ,that awesome bout you ... and felt like circles of this shader was similar to raindrops shader tutorials :D

[@TheArtofCodeIsCool]

Thanks! And thank you for watching.

[@orsonpeters]

The 'random motion' you use for each grid cell is actually a Lissajous curve with random parameters.

[@TheArtofCodeIsCool]

Yes. You are right :)

[@cylvesterband810]

Hi Martijn, love your tutorials! Very well structured and thought trough. Thank you! I have one question though: I love to use the bookofshaders editor because it has those sweet debugging sliders and more space for code on screen etc... It gets stuck with the for loop for the netlayer though. The editor complains: x'[]' : Index expression must be constant I looked it up and it seems that something changed in the WebGL-Standard at some point... or it might be browser specific... I'm a little confused because it works in the shadertoy-editor. What am I missing here?

[@TheArtofCodeIsCool]

Not sure, as I have never used that particular editor but maybe doesn't support loops? You could 'unroll' the loop, which is basically just pasting the looping code multiple times.

[@cylvesterband810]

@@TheArtofCodeIsCool I will try. :-) Still strange that this seems to be editor behaviour. My thought was, a programming language is a programming language is progr... Keep up the great work!

[@mrdixioner]

I recently became interested in shaders, but I have known about your channel for a long time. You have the best and most detailed videos on shaders, especially the latest ones with Russian subtitles (I don't know English). I repeat your videos in the Godot game engine, in which I can write the code almost unchanged, moreover, the result of the shader is displayed instantly. Thank you for your wonderful videos !!! I have one question: how can a single point of minimum size be displayed in a shader so that it is visible?

[@VideoNash]

thanks.

[@milanstevic8424]

@9:05 This is probably a wrong (and old video) to ask, but do you ever use a LCG (linear congruential generator) as your pRNG, and why not? My experiences with it were awesome, back in my ActionScript days, as it works with integers and thus it's much more performant, and in my case, for the visual purposes at least, it was pretty stable for some reason (or incoherent should I say) even when I didn't use the prime numbers as instructed. So I wonder whether it's just a habit for you, or maybe you have deep reasons to mostly rely on the sine function to hijack the noise, or is it only the simplicity you're striving for -- I'm aware that GPUs are probably highly optimized for floats (and sines) anyway. (Fun fact: Flixel used my LCG implementation, and I think it still does, though the core of it was really a one-liner, and a little bit of QoL surrounding it.) Now that I'm in C# for a decade and some, I've moved on to PCG (permuted congruential generator) and xxhash, and these two solutions I'd recommend to anyone who's trying to stay on top of things in a "standard" game dev environment. First for simplicity, then for being robust and highly unpredictable, and last but not least both are crazy fast. But, obviously, neither of the two are fit for use in shaders. What else would you recommend as a dirty hack? I'm guessing that fract is your best friend whatever you do.

[@TheArtofCodeIsCool]

To be honest, I haven't given it much more thought than 'does it look good'. These days I actually prefer a method that does not use sine because the sine version gives bad results on some older hardware. I'm not familiar with the LCG algorithm you mention but a quick glance at wikipedia makes me think that this is a sequential algorithm where the new value is computed from the previous value. In shaders you can not do that because all pixels are calculated in parallel, at the same time.

[@milanstevic8424]

@@TheArtofCodeIsCool Aaah you're right. You can immediately tell that I'm not a shader person :) Yes, the sequential nature of it is actually preferable, because you can 'seed' it in normal circumstances, but obviously that doesn't work with parallel execution, and especially when fragments don't cross-talk and have no common memory. Though I wonder if fragments could, in theory, share a memory segment similar to how they have a common access to textures? Is this why people use a noise texture sometimes, to guarantee a better distribution? (And is it faster when compared to sine? Probably not.)

[@RusticRaver]

brilliant thx a lot!

[@TheArtofCodeIsCool]

:)

[@Kholaslittlespot1]

I'm interested in who you were talking about when you said about someone's experiences inspiring you. Who was it?

[@TheArtofCodeIsCool]

Michael Pollan

[@alexpaww]

This looks amazing! I actually made a personal (not to be released) android live wall paper for my phone from this. I know a bit of OpenGL, so porting it was not a problem. The problem is FPS though: rendering this on a 2160x1080 phone screen results in a measly 20 fps. Do you have, per chance, any hints what could be optimized in this? I tried reducing the floating point accuracy to mediump, but that resulted in very nasty visual glitches, and the stars not moving at all and staying in a fixed grid. So thats no good. I thought about maybe rendering it to a framebuffer texture a quarter of the size and then rendering that to a full screen quad, scaling it up. Would that actually cause the fragment shader to be evaluated less often? Sorry for the long text, any help would be appreciated. Love your videos man.

[@alexpaww]

Nevermind, rendering to a framebuffer object with quarter of the screen resolution worked! I got a nice 60fps now :)

[@TheArtofCodeIsCool]

Nice!

[@SismoMentalPeru]

HOW TO DOWNLOAD THE VIDEO TO THE PC

[@FannyPackDave]

was it FannyPackDave who inspired you? I think it was FannyPackDave

[@shemnamo772]

This Tutorial is awesome!! I just have 1 small question, I followed this tutorial to create a shader in a different language(a variation of OpenCL). What copyright license would you apply for that. Am I allowed to share the code? Can I please render the video for commercial use? Thank you very much, you taught me a lot!!

[@bhuwansharmaa]

awesome video :) one question :--> you said your coordinate space goes from -0.5 to 0.5 but after your aspect ratio correction, doesn't it change? I'm always confused with this and when i try to make any pattern I face this aspect ratio problem like sometimes with applying rotation matrix i struggle with finding the center point ...

[@TheArtofCodeIsCool]

nope, the aspect ratio change does not change the fact that the boxes go from -.5 to +.5 even if you didn't do any aspect ratio correction, the boxes would STILL go from -.5 to .5, they just wouldn't be square. If ever you get confused, its always a good idea to just output your uv coordinates as colors to get a better picture of whats going on. Check my video on KIFS fractals for a good dose of UV visualization.

[@8eodorosk]

a question please. at 30:04 why is this happening? i mean why it gets all the screen white and after we multiply it is "corrected"??

[@TheArtofCodeIsCool]

Because the brightness formula is 1/length(j) or 1/(the distance from the current pixel to the glowing dot). Because of the size of our boxes and dots, that distance is smaller than 1 so you get a brightness that is 1/(something smaller than 1) so you get a brightness value that is larger than 1 which is white. Another way of looking at this is that the glowing dots are too large for the boxes they are in such that we only see the white hot centers. What I'm doing here is effectively scaling them so you can see the whole dot.

[@changemaker9751]

Martijn why didnt the circle which is generated first move ?

[@TheArtofCodeIsCool]

Great question. It is because the noise function always returns 0 when you enter 0 as a seed. This makes it that the cell with id = 0,0 will have 0 speed for both x and y.

[@AtmosMr]

@@TheArtofCodeIsCool Ooo, I noticed that and worked it out too! I'm getting better! However, I still got a bit lost. With this method don't you draw some of, if not all the lines twice? Why no just draw lines from p[4] to the right (or whatever) ... actually, stop. I'm going to try it out and see if I can do it. I'll be back.

[@bruninhohenrri]

I'm trying to run on WebGL (canvas) and i got this error "Index expression must be a constant", on the p[9] array. How can i fix it ?

[@TheArtofCodeIsCool]

hmmm. I'm not sure but it could be that you are trying to compile to an older version of opengl that doesn't allow dynamic array indices? Really not sure though.

[@bruninhohenrri]

@@TheArtofCodeIsCool Yeah WebGL version 100 do not accept dynamic index, i had to update the code to version 330. But you can get the same results in version 100 by accessing the index by hand. Thanks for your time ! :)

[@jennylyv7053]

one question please~ why the line can't cross the third gird? which part of the code limit that? thanks alot!

[@TheArtofCodeIsCool]

In order to speed things up, and keep it parallel, we only consider the box the current pixel is in, and all of its direct neighbours. That way we only have to draw at most 9 lines per pixel.

[@rtcwkillz]

It's easy in canvas, but here is really hard.

[@autown]

Curious as to the naming behind "N21" and "N22". Besides N standing for noise, what were the numbers for? Is it, from 2 (vec2) to 1 (float), and from 2 (vec2) to 2 (vec2)?

[@TheArtofCodeIsCool]

You got it. :)

[@hunyoungha8729]

what video has explanation of DistLine function?? It is hard for me to understand clamp(dot(pa, ba)/dot(ba, ba), 0., 1.);

[@TheArtofCodeIsCool]

There is an explanation of a different approach in 'The simplest 3d' but here is a quick explanation of this approach. t = clamp(dot(pa, ba)/dot(ba, ba), 0., 1.) dot(pa, ba) is a measure of where the closest point to p, that lies on the line segment is. This value will be 0 when point a is the closest point on the line to point p (when pa and ba are perpendicular) and it will be the square distance from a to b when point b is the closest point on the line to point p. We want to normalize that so that it is 0 when point a is closest, and 1 when point b is closest and anywhere in between 0 and 1 if some point in between a and b is closest. To do this, we just have to divide by the distance between a and b squared, which is dot(ab, ab). If you don't see this, just write out the dot product: ba.x*ba.x + ba.y*ba.y You can see that this is almost pythagoras, its just missing the square root, hence the distance squared. So now we have a number that is 0 when point p is closest to a and 1 when its closest to b, but what if its closest to a point that lies outside of the ab line segment? Well then it will either be smaller than 0, or larger than 1. We want to get the distance to the line segment, not the infinite line, so we have to restrict our value t to the 0 1 interval, hence the clamp.

[@hunyoungha8729]

@@TheArtofCodeIsCool OMG, THAT WAS SOOOO CLEAR AND EASY EXPLANATION!! THANK YOU SO MUCH!!

[@ningno00]

Could you fix the Live version with source code can be found here: www.shadertoy.com/view/lscczl I don't know why it's doesn't work anymore.

[@TheArtofCodeIsCool]

Hmm, works for me. Maybe try a different browser?

[@rt1097]

i like the gv♂

[@Roger-xb7gg]

Amazing video, drop us a BTC address so we can toss you some tips bro 😏👍

[@TheArtofCodeIsCool]

Aww thanks man. I really appreciate the gesture but for now I'm happy if you can like / share my videos!

[@hanniffydinn6019]

Honestly if you are talking about psychedelic experiences, you are way off the mark here. They are hard to describe in words. But the closet thing they are to actually is 3D fractals like the mandelbox and variants of that. There are quite a few zooming into mandelbox 3D variations on shader toy.. They are more like that, especially when entering hyperspace on taking DMT. The colours are so intense though, they seem beyond the colours you see with normal human eyes. There are humans who have extra cones in their Eyes , so they can see more colours, it's even beyond that. The Alex grey psychedelic art is a good comparison, doing one of those in shader toy would be better. Do this in shader toy but make it Ultra colourful ! kzbin.info/www/bejne/d6nVZmOjZdFlnLs

[@TheArtofCodeIsCool]

Well I've never had one so I guess I don't know. :) I'll do the second part of my fractal explorer soon which might be closer to the mark.

[@hanniffydinn6019]

The Art of Code all the smartest people on earth have taken LSD! You should. It will change your life, you will not regret it. 👍😎

[@realcygnus]

imo intelligence doesn't have much to do with it statistically. They reveal the perspective that there does exist other perspectives(all equally valid). I used to advocate its use to others in my youth too, thinking that one has never really been fully awake/aware otherwise. There may be some truth in that but don't EVER do it because your being pressured into it. & if you do decide to try it know that environment/atmosphere/company can be crucial. I honestly wouldn't trade my psychedelic experiences for ANYTHING(well maybe a random half of them for a few million $ LOL). However it is NOT for everyone.

[@hanniffydinn6019]

realcygnus you are wrong, the smartest people do take LSD regularly. kzbin.info/www/bejne/g4Gkd5SeZc6Heq8 People like Steve jobs, bill gates et al in Silicon Valley take LSD, it's no coincidence, so I'd say statistically it's the realm of smart people. Of course psychedelics isn't for everyone, but it's the domain for people who are Intelligent enough to want answers. Enthogens have always been the domain of truth seekers and smarter set.

[@realcygnus]

Hanniffy Don't get wrong I am a fan(generally speaking). Not to put words in your mouth but drugs won't "make" you smart. It is true that psychedelics can(& usually do) show you that there is a Larger Reality, but from there its still up to you to evolve the quality of your consciousness which is more of a journey/path as opposed to an endpoint/goal. I think perhaps it could be a majority in the art world(like music). Its also important not to confuse subjective Enlightenment with objective intelligence. imo Gates is a bad example in that he would use a much larger percentage of his assets to benefit humanity if he was truly "enlightened" from his experiences. & btw it was Wozniak who was the actual "Brains" behind Apple(though I'm sure he tripped too since it was culturally common at that time/place). But imo these are both bad examples in that, the ability to make $ is a demonstration of neither spiritual enlightenment or intelligence(in a general sense). imo Enlightened ppl would be like Jesus, Buddha, Gandhi, or more currently the Dalai Lama & Tom Campbell. & the People that I think are thE most intelligent are typically physicists/mathematicians/information theorists etc. Like Newton, Einstein, Feynman or more currently Ken Tompson /Dennis Ritchie et al.(c & unix) or Linus Torvalds(Linux) & the numerable current theoretical physacists like Tom Campbell(on both sides of the spectrum !), Kip Thorne, Leonard Susskind, Jaun Maldencena & Nima Arkani-Hamed etc. & Many of the psychedelic philosophers/pioneers/advocates like Allen Watts, John C. Lilly, Terrence McKenna & Timothy Leary etc. were certainly geniuses in their own right. & you're right Psychedelics has ALWAYS been a(but not thE only) Path of truth seekers & BIG thinkers. There are just too many ppl to list in every category ! Anyway I Just think you MIGHT be in a belief trap, in thinking that its more statistically significant than it really is(specifically regarding intelligence). Academia is full of very bright people that never even considered it & ironically even some of the smartest ppl can have some of the dumbest ideas about life in general & Vice versa. I do respect your opinions however.