Experimental Triangle Image Transitions with WebGL

Some experimental animations using triangles for image transitions with WebGL.
Triangles_Featured

From our sponsor: Get started on your Squarespace website with a free trial

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? ?

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,

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

Yuriy Artyukh

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.

http://cssing.org.ua

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.