The Shader Art of ilithya

Howdy and welcome to another issue of Frontend Horse, where we ride alongside developers to learn their excellent frontend techniques! Saddle up, take the reins, and make that weird clicking noise with your mouth that horses like. It’s time to ride!

Today we’re going to be digging deep into an awesome shader made by ilithya. Shaders are SUCH a cool topic, and while they can get pretty complex, you can get a really great effect with just a few lines of code. Many flashy, award-winning sites are utilizing shaders along with other WebGL tech.

Summer Screen

I’ve been following ilithya’s shader demos for a while and wanted to write about her work weeks ago, but quickly learned that I was out of my depth with shaders. Instead, ilithya helped me write the Introduction to Shaders issue as a warm-up. Now it’s race day!

Let’s dive deep into how ilithya made this awesome shader, Summer Screen.

There’s a few things going on here. First, we’ve got these vertical line sections that are shifting back and forth. Then we’ve got these gradients coming in from the top and bottom like color waves on a beach. Let’s figure out these two effects.

First we’ll check out a shortened version of the GLSL code so we can see what’s going on. You might see a new language and some math here but don’t worry! We’ll trot through them nice and slow…

Continue Reading

---

So Long, Partner

Well, that’s the end of the trail for this week. I appreciate you riding with me.

Follow @FrontendHorse on Twitter, and if you enjoyed this, I’d be over the moon if you share it with a friend or tweet about it.

Special thanks to ilithya for speaking with us about her shaders. Go check out her website and follow her on Twitter.

This is the part where we ride off into the sunset. You take care.

Your Neigh-bor,

Alex