Newsletter #11 - The Shader Art of ilithya

August 07, 2020

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.

Before we hit the trail, make sure you check at the bottom for another Livestream Announcement! We’ll have Jhey Tompkins on the stream this week, so check below for details!

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

Frontend Horse Livestream

Thank you to everyone who came to watch Adam Kuhn and I on the livestream, it was a ton of fun! We had some pretty rough technical difficulties, but we made it through and I learned a ton from him.

Adam debuted his awesome webcam homage to the classic a-ha song, “Take On Me.” He showed us how it works, along with a few of his other pieces. Check out the video here!

This upcoming Wednesday I’ll be joined by Jhey Tompkins, another creative coder who will teach us how he made some of his super fun pens. You don’t want to miss it! Head to twitch.tv/trostcodes now and hit Follow. You’ll get notified when we go live!

Jhey-Tompkins.png

I could send out an email as we go live, but I don’t want to spam anyone, so following on Twitch is the best way to opt-in to those notifications. I really hope to see you there, we’ve got some fun stuff planned.


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

Subscribe to get future issues in your inbox!