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 http://www.cornflakezone.com Francis Shanahan

 [prev] Image of the Day Gallery www.flipcode.com [next]

 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.

 DominicOctober 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?
10x
d

 bit64October 23, 2000, 12:57 PM

Very nice.

 Kurt MillerOctober 23, 2000, 01:03 PM

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

 Francis ShanahanOctober 23, 2000, 01:07 PM

Sure:

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 KillpackOctober 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.

Chris

 Timothy BarnesOctober 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 ShanahanOctober 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.
Enjoy
-fs

 Martijn StoffelsOctober 25, 2000, 04:52 PM

Nice effect.

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

Martijn