Live Coding: Making the American flag with math!

For the fourth of July I decided to make an American flag. This shader is made from scratch, no prior knowledge is necessary.

========== Social Media Links ==========

Twitter: @The_ArtOfCode

========== If you want to follow along ==========

Live Version:

========== Other videos to watch ==========

[antoinedevldn]

Those videos are like medidation, incredibly relaxing while learning so much! Thank you so much!

[jeffg]

Thanks for creating this series.
hand coded shaders is a beast to take on (for non mathematicians)

[Janokins]

I'd never heard of fwidth before, very handy!

[prietjepruck]

Another great video. Shaders are complicated but you make them look easy. Thanks.

[DanielBrainbox]

Thank you so much :) For the last 3 weeks i was trying to port shadertoys examples to unreal engine and was able to port 4 examples successfully but still struggling with some examples especailly when it comes to textures in iChannel0 or 1 and while porting the code i always tried to understand what each line does and now you are explaining it in detail which is amazing :Thank you so much for sharing youir knowledge with us.

[doutorenigma]

If I knew half of the math you know maybe my parents would love me

[shrippie-]

Glad to see a programmer who isn't a total goober

[alejo]

Loved the video and shadow implementation! Small issue I see is the left side of the flag should not be moving, as it's the stick part of the flag, can be fixed by multiplying by uv.x the movement. Great video tho!

[SheepyPeka]

Yo that sculpturing (is what I call it) technique with the dot product is really useful and would have saved me a lot of time when I made a shader that needed me to create full on letters lmao
This is really cool yo I love it

[yanchen]

Thank your for your demostraction of amazing tutorial.

[meerminman]

Nice work, always a pleasure to watch your videos

[EHSejersen]

I would think the stripes variable could be done like ' float stripes = float( sin(...) > 0.); ' so you create a Boolean expression and convert the result to a float, where true = 1. and false = 0., that way you don't have to do smoothstep and think about resolution.

[Adeith]

Great as always, I think i can manage the Swedish flag

[tebicap]

I propose you to make a particles effect starting from a point and moving it around, something like fireworks but with some kind of direction force.

[jeffg]

The stars & stripes of corruption.

Can you explain why it's "minus 0.5" to bring things towards center.
I thought 0, 0 was bottom left, and 1, 1 is top right.
So, wouldn't subtracting 0.5 from the coordinates move it down and left more? (off screen)

[hajjex_]

Ay man, can you make position based fluid simulations tutorial?
Pls

[Dumbledork]

I have a video suggestion. idk how hard it would be but you should try following a Bob Ross tutorial. I see these 3D modelers doing that on youtube but its kinda weird since Bob is working with 2D layers of paint blobs & they're like, ok let me load a tree in there & render some fog.

[LoserHands]

The bottommost y-coordinate of the blue rectangle ("union" or whatever) would be located 7 13ths down, so like 53.85% might be more snug. Snugger?

Awesome vid!

Edit: 46.14% when flipped
Edit2: a flag with more bespoke art could be interesting. Like how the Mexican flag has its eagle serpent and cacti, for an extreme example.
Edit3: you mention the Mexican flag as an example of a difficult flag lol. I'll try.

[alvarobyrne]

Could you please do a tutorial on multipass rendering? thanks in advance

[davidmurphy]

I followed along nicely right up until the pixilation issue at the end where I neither got the issue nor the solution. I blame my wobbly calculus and not knowing what's really going on with fwidth. I guess the way to properly get it it is to remake it myself.

Anyway, excellent vid as always. Thanks buddy.