Experimental Triangle 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:

Why

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,

…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:

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

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:

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!

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.