Not logged in, Join Here! or Log In Below:  
News Articles Search    

Submitted by Francis Shanahan, posted on October 23, 2000

Image Description, by Francis Shanahan

This is a small program I wrote which implements a nice effect reminiscent of the art of Vasarely. This picture shows four shots from the program. It's a square grid which twists and bulges with time. The top left shows a bulge with a texture mapped grid. The top right shows the same but with just the grid and it's inverted in the bulge. The bottom left shows the grid twisting, I like the lines view because you can see what's going on, the bottom right is this same effect with a texture added. Lots of screensavers are built on this code and it's a nice effect to add to your demos. I'm will have a small tutorial soon. Source code is available at

Francis Shanahan

Image of the Day Gallery


Message Center / Reader Comments: ( To Participate in the Discussion, Join the Community )
Archive Notice: This thread is old and no longer active. It is here for reference purposes. This thread was created on an older version of the flipcode forums, before the site closed in 2005. Please keep that in mind as you view this thread, as many of the topics and opinions may be outdated.

October 23, 2000, 12:53 PM

I Like It! b4 i look @ the source, can you explain what algo you use to animate the grid points?


October 23, 2000, 12:57 PM

Very nice.

Kurt Miller

October 23, 2000, 01:03 PM

He also posted a COTD w/a description, available here

Francis Shanahan

October 23, 2000, 01:07 PM


The Algorithm:
The idea is to consider points inside a square of side 2, and to distort those that lie inside a unit circle ( the sums of squares of the x and y coordinates are not greater than unity ). This distortion takes two forms, twist and bulge.

Firstly, each point inside the unit circle is put into the form (rCosA, rSinA) where A is the angle made by that point with the positive x-acis, adn r

Chris Killpack

October 23, 2000, 02:27 PM

There are a million and 1 ones to deform the UV co-ordinates of each grid corner, for example springs. An interesting one to try is feedback, where you calculate the new UV co-ordinate as a function of the previous frames U and V.

U(t) = U(t-1)*sin( timer + 0.628f );

Although it can be quite tricky to such a system stable (not talking about the example above).

Also try using feedback on the source texture. Warp the texture, then copy the warped result back into the texture and use this as the source for the next frame. Make sure that you distortions are subtle and vary over time. Works quite well.

I should insert that obligatory phrase - YMMV.


Timothy Barnes

October 23, 2000, 06:21 PM

Wow. That's such a cool trick. I've never seen such a good application of simple texture mapping. :) Although the algorithm for morphing the verts doesn't look that simple. I'll check it out.

Francis Shanahan

October 23, 2000, 07:06 PM

Thanks for the compliment. Actually the algo is extremely simple to follow, especially when you see the code, it's about 10 lines in a loop. Take a look at it and let me know if you have any questions.

Martijn Stoffels

October 25, 2000, 04:52 PM

Nice effect.

Timothy Barnes: You should watch more demos. It's a quite overused effect in oldskool demos.. :)


This thread contains 8 messages.
Hosting by Solid Eight Studios, maker of PhotoTangler Collage Maker.