Shader Coding: Space GIF step-by-step

[@RusticRaver]

my favorite GLSL learning channel by far, thx guru

[@marcasrealaccount]

9:40 not gonna lie, even though it screwed up the circles i still liked the effect.

[@lordsqueak]

Indeed cool effect. Also the [buy him a beer] pop ,,,lmao

[@changemaker9751]

@@lordsqueak Haha ..He hides these kind of details in his videos as a movie director.Only the man who has divine wisdom can see them :O

[@satychary]

Excellent way to show 'code -> art'.

[@ryanfuxa6738]

Man this some mind control level stuff right here man.

[@BetaTester704]

The fact the you say Gif as Jif is unforgivable.

[@TheArtofCodeIsCool]

You mean unforJifable?

[@BetaTester704]

@@TheArtofCodeIsCool Possibly.

[@MartinToernby]

Hurray! I've done a shader without sticking 100% to your approach. This is the first time, I've actually added something intentional and making it work - rather than just enjoying graphical screw-ups. I'll display my utter happiness by posting the entire thing: void mainImage( out vec4 fragColor, in vec2 fragCoord ) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = (fragCoord-0.5*iResolution.xy)/iResolution.y; // Time varying pixel color vec3 col = vec3(0); vec4 mo = iMouse / iResolution.xyxy; vec2 gv = fract(uv * 10.)-.5; vec2 id = floor(uv * 10.); float dm = smoothstep(0.,6.,2./(length(mo.xy - (uv * 0.5) - vec2(.5,.5))*6. ) * 0.5); float m = 0.; for(float y = -1.; y

[@TheArtofCodeIsCool]

nice one! Share it on the facebook group if you like :)

[@prietjepruck]

Another great video Martijn. Dank je wel.

[@ikesau]

super cool. Definitely a fan of these short and sweet effects. They cover a lot of ground.

[@xamogxusx]

Cheers man! You are great teacher! And that shader looks very cool

[@rtcwkillz]

Could you do a tutorial explaining each Built-in Functions in glsl?

[@davidmurphy563]

Sorry, I'm up to 6:25 - shouldn't line 15 be `gv-offs` not `gv+offs` as you put?? It doesn't make a difference with perfect circles but with a non-symmetric shape you'll have the wrong side surely? Maybe I've miscalculated, I'll play around with it this evening. I'm so blown away by your channel btw, this stuff was always a black art and you just make it so clear. Thank you so much buddy.

[@gijsb4708]

Incredible recreation!

[@afr65536]

Thank you for creating this video. It is very informative.

[@changemaker9751]

Anyone who wants to convert radian into degree ,just do this: float radianToDegree = (45 * 3.14 ) / 180; float sine = sin(radianToDegree); float cosine = cos(radianToDegree);

[@СергейФёдоров-щ8ш]

Nice Shader Coding space FX ) thanx

[@JustYesntMan]

another great tutorial !

[@mkgamesartvisuals]

Love your videos, awesome work!!!

[@DaveAlexKD]

Love your videos man!

[@4.0.4]

This was a very good explanation.

[@grodzillaaa]

This is so cool, I love it!

[@mecdos]

i wasn't able to recreate this in Metal. I can't get the circles to animate at different pace.

[@DenilsonSa]

Feedback: the keyboard noises are painful to hear when using headphones. Otherwise, great content, I learned some stuff from your video!

[@lukegilb6783]

yeah i definitely had to switch to speakers

[@dimontools]

Great tuttorial. Thank's a lot !

[@mrdixioner]

Big Thanks!!!

[@lumixraku]

It is so amazing!

[@d74g0n]

Do you pronounce it "Jraphic interchange" ? Dinosaur fan stuff?

[@nietaki]

Hey Martijn, one more question: in line 28 in the final shader you use `smoothstep` where the second argument is smaller than the first argument. If I'm reading the GLSL docs right, the first arg should be smaller than the second one or else the result is undefined. Can you say what result were you aiming for and why it's going to work in the configuration you put in the video? Once again thanks for making these videos, they are incredibly useful and inspiring

[@TheArtofCodeIsCool]

When you swap the values it goes from high to low, instead of low to high. in other words: smoothstep(high, low, t) = 1 - smoothstep(low, high, t) For some reason this is not in the spec but it works, and everyone is using it.

[@nietaki]

@@TheArtofCodeIsCool thank you!

[@Bubatu7]

Great video, thank you!

[@clearwavepro100]

Great video!

[@CCV334]

Add .5 to id to center the effect e.g. vec2 id = floor(uv)+.5;

[@TheArtofCodeIsCool]

Good point!

[@ferhat3223]

perfect.

[@saege1173]

of course it is tea

[@donaldviszneki8251]

When you were writing your "xor" function it might have been nice if you plotted this function on its own

[@TheArtofCodeIsCool]

You are right. Maybe in a future video!

[@GrinyaPLAY]

Thank you! Do you know local or offline version of Shadertoy or alternative?

[@TheArtofCodeIsCool]

No, but I'm sure there are programs like that. You could also use unity (see my beginners shader tutorial for unity) and convert shaders from shadertoy to unity (I also have a video on that)

[@grodzillaaa]

During shader battles (showdowns) people use Bonzomatic (github.com/Gargaj/Bonzomatic)

[@limbicD]

VS Code + shader-toy

[@AmanKumar-tu2og]

Kodelife

[@BriceMarnier]

Also found "Shader Editor" on Google Play Store to work on my tablet (or smartphones...)

[@filmarto12]

awesome thx

[@MrNixaboo]

Thanks!

[@sumloser8650]

what's iResolution... Its coming up as a undeclared variable

[@TheArtofCodeIsCool]

It shouldn't, are you sure you spelled it right?

[@stephaneduhamel7706]

0.707 is not pi/4 but it's (approximately) sin(pi/4)=cos(pi/4)=inversesqrt(2)

[@TheArtofCodeIsCool]

Yeah I got my constants mixed up. 0.707 is about 1/sqrt(2) like you mentioned. It does need to be pi/4 though which is about 0.785

[@josephkalathil9354]

Noooiiiiccceee

[@frequencymanipulator]

Ahh, the use of the word 'Interweb' denotes an individual of class and sophistication.

[@bhuwansharmaa]

buy him a beer! :xd ... lol

[@ArthurStammet]

...-and another one : www.shadertoy.com/view/WsXXWr using a complex wave for turning on and off many lights

[@euglossine_tristanwhitehill]

🔥🍄🌳❤️⭐️

[@LightManDavid]

Wow, I just discovered this channel, my 'watch it later' list just exploded. Nice effect, kind of reminds me to this part of this demo kzbin.info/www/bejne/nIbEqKurp6qEgLc

[@LightManDavid]

An also this one: kzbin.info/www/bejne/Y4vbgZt6eJKladk also related to the torus video effect ;)

[@ruben7420]

Did he just say JIF .... I swear to jod I am going crazy.

[@TheArtofCodeIsCool]

I know, what I did was unforJifable.

[@shahriyarshahrabi6321]

hey, wanted to say thanks, used your idea as geometry pattern for my procedural color scheme algorithm www.shadertoy.com/view/3s23D3

[@TheArtofCodeIsCool]

Very nice!

[@Anticitizen666]

JIF = Jraphical interchange Format :)

[@Tynach]

Just like how NASA = National Ahronautics and Space Administration? Acronyms and abbreviations can be pronounced differently than how the letters are used in the words they're derived from. The developers of the .gif standard chose to pronounce it like the peanut butter brand, so it is correct to pronounce it that way.

[@TheArtofCodeIsCool]

LOL ;)

[@Anticitizen666]

@@Tynach Thanks Cholin!

[@СергейФёдоров-щ8ш]

Terminology - weapon of manipulator. Oo

[@coleraby]

I made use of that pattern here... www.shadertoy.com/view/tdsXWf

[@Rend3d]

Why did you lie? I know you drank beer. You can't do this job sober. )))