Animation effects with images

1

Hi

I am trying to create different animation effects for slideshow of images.
Have tried dealing with timeline by varying dimensions and changing dimensions over it.
I got some good results using timeline.
But facing difficulty while creating certain effects as timeline alone is not sufficient for that.

Below is the link

http://wowslider.com/jquery-carousel-animated-parallax-demo.html#

I am trying to create following effects
BOOK
DOMINO
SLICES

I am not sure whether these can be done simply by timeline animation or I will have to take help of other things. Please suggest the suitable approach for creating these effects.

Thanks : :slight_smile:

2

Domino and slices could be done entirely within a shader, book probably as well, but it would be a bit more fiddly because the rotated image expands beyond the bounds of the original image. Usually you want to drive these so that you can feed a value between 0 and 1 to represent the percentage of completion. You can definitely use timeline to control that value though. Have a squizz at http://transitions.glsl.io/gallery to see a few examples of transitions between two images just with a shader.

3

Compiling a shader file to get glsl file is new thing for me. They have given shaders for respective animation effects. If I want to use those shaders in my code what will be the procedure? Do I have to compile them to get GLSL file?

4

Here’s an example of porting one of their transitions to cinder, with as little modification to their shaders as possible. Unfortunately it’s friday evening here so rather than documenting this gist, i’m going to the pub, but hopefully it will be enough to get you started.

A.

3 Likes
5

Thank you lithium :slight_smile: I will try doing shaders with this as reference.

6

In addition to shaders you can also use one of the variations of the draw method to draw a piece of the image. Shaders will be much better with performance and while it’s good to eventually learn how to use them, there are different ways to do these effects.

void draw (const Texture2dRef &texture, const Area &srcArea, const Rectf &dstRect)

This lets you do something like this.

// which part of the image you want to draw    
Rectf src(0,0, myImg->getWidth() * 0.5. myImg->getHeight() * 0.5);
// where you want to draw it on screen
Rectf dest(0,0, myImg->getWidth() * 0.5. myImg->getHeight() * 0.5);
dest.offset(vec2(100,200));
gl::draw(myImg, Area(src), dest );

Combine this with 3d transformations and you should be able to accomplish all of these effects.

1 Like
7

Hi lithium
Tried the example you gave with inline shaders.
After comparing I found that few modifications in the shaders code given in the link works.
But still not comfortable with shaders and would love to have 2-3 examples for reference as you gave in previous session.
http://transitions.glsl.io/transition/979934722820b5e715fa

I am working on above effects.
Please help me with that

8

Thank you sharkBox…I have tried the same approach for some cases.
Seems shaders provides impressive quality … :slight_smile:

9

First of all, have a read of the excellent cinder guides they should explain to you how shaders work, at least as it pertains to cinder. It’s probably a good idea to go and read a more general tutorial (like the one on learnopengl.com) so you understand the core OpenGL concepts and then why things are done the way they are in cinder.

If, after all that you’re still stuck, i can help you with getting that particular image transition working. :slight_smile:

10

Actually i have worked on Openframeworks in which OpenGl was used.
GlSl is the only new thing.
Cinder tutorial is quite impressive.
Just wanted to know how those shaders can be used as when tried it was giving exception of access violation.
Better if I could get a syntax where all the frag and vert files can be used in a code.
Hence asked for the way you used the shaders in your code.