Experimental Triangle Image Transitions with WebGL

Some experimental animations using triangles for image transitions with WebGL.

Do you love triangles? I do. And because its boring to like all triangles, I specifically target my love to equilateral ones, like this one:

equilateral triangle
Isn’t this beautiful? ?


Nobody: …
Nobody at all: …
Me: lets make full screen image transitions with equilateral triangles!

And although that pretty much sums up the reasoning part, I also did this for the love. For the love of equilateral triangles.

So let’s get started! Just as I did in my previous animations, I will need some plane geometry in front of a viewer.

But if I use the three.js PlaneBufferGeometry,

Not epic. Boring triangles.

…those triangles are not what we are looking for. To create equilateral ones, i just created my geometry with math! The final result looks like this:

Woah, now this is pure beauty. Don’t judge me.

What’s the math behind that? Pretty easy actually: with equilateral triangles you know exactly all the coordinates and sizes:

equilateral triangle math

Knowing those sizes, I can easily calculate as many triangles as I need. Also, I can’t help sharing this amazing resource on all kinds of hexagonal and equilateral triangle grids. That’s an amazing read regardless of your geometric preferences.

Anyhow, I got this kind of grid:

equilateral triangle strip
I scaled this to fit the whole screen.

Animation the triangles

Now that we have a grid, we can use GLSL and a vertex shader to animate those triangles. I recommend you read more about shaders and GLSL in “The Book Of Shaders“.

The good news is that we can animate each triangle separately; we can even animate each of its vertices on their own!

An example animation.

In code that looks like this:

vec3 newPosition = move(position, progress);

Where the move function moves and rotates the default position with the change of the progress value. That could be a simple shift on the X-axis, for example:

vec3 newPosition = position + progress*vec3(1.,0.,0.);

Or anything you could imagine doing with numbers.

I had a lot of fun experimenting with those effects, hope you will like them. And the possibilities here are endless of course.

Tell me, or better show me, what geometry figures do you like to animate? 🙂

P.S.: I do love all kinds of triangles, I hope no triangle will get offended or mad after reading this article.

Tagged with:

Yuri Artiukh

Yuriy is a developer from Kyiv, Ukraine. Leading a small frontend agency riverco.de, also speaking at conferences, and open for freelance projects. Curious about CSS and shaders. Loves to learn every day.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!