Coverflow effect for image?

[Eddy Yanto]

I have a number of images on stage with "More Effects and Capabilities" selected. I've also defined a few "Generic Input" to be used for tweening the properties of the images, such as (the variable names speak for themselves but I'll just add a short description of each):

RotationY : for Rotation Y tween property

ScaleX, ScaleY : for adjusting the X and Y of Scale property

X, Y, Z : for adjusting the X, Y and Z position of the image

 

Here's a screenshot of my stage:

 

What I am trying to achieve is to be able to make the images flick to the left or right using external TCP control, using "setInput" command to be precise. So far, I am able to open up a socket and set the input variables from external program.

 

Here's a short animation of what I am trying to achieve : https://s3.amazonaws.com/e-static/index.html

 

What I am wondering and would like to know (from users who has done this before) is:

1. Is it possible make the image perspective tween from normal horizontal facing to diagonal facing with farther side shorter than the nearer side?

2. I am able to setInput from external program but I noticed a considerable delay that when WO is accepting multiple commands, it seems to add the commands to the a queue and parse them one by one. If the commands being sent is to animate the position and Rotation, then I suppose the queue would be long and the animation effect would be slow and abrupt. Consider this block of code that set the X position of the image:

 

	String command = "";

	for (float i = 0; i <= 1; i += 0.05) {
		command += "setInput X " + i + "\n";
	}
	
	myClient.write(command);
	myClient.write("setInput X 1\n");

Is there a way to improve this?

3. Are there any similar alternative to what I am trying to achieve? Thank you.

 

 

 

 

Eddy

[Mike Fahl]

Doing the "tweening" from the outside is going to be slow and choppy no matter what. Let WATCHOUT do the tweening instead. Simply supply a second parameter ot setInput, which controls the transition rate (in milliseconds if memory serves me - please check the manual for details).

 

Mike

[Eddy Yanto]

Mike, thanks for pointing me to the transition rate parameter. Now, using the third parameter, the animation tweens nicely from one value to another within the specified transition rate.

 

Here's the related bit from the manual (page 246):

A third, optional parameter allows you to specify a transition rate, causing any

property controlled by the input to change gradually to the specified target

value. This parameter is specified in milliseconds.

Btw, I've been playing around with all the tweening methods:

 

 

I would like to be able to tween the image from A to B using one or more tweening variables but I just can't get it to look like it yet. Using the Rotation Y tweening, I got the image C which looks like <link : http://en.wikipedia.org/wiki/Parallelogram> parallelogram instead. And I am wondering if it's possible at all to tween an image into something like that as I can't find other related tweening methods under the "Tween" menu to experiment with anymore. Any advice is appreciated!

 

 

Eddy

[Eddy Yanto]

Here's what I've got so far: https://s3.amazonaws.com/e-static/tween.html

 

Also, links to my watchout file and utility (done in Processing) that is used to control the tweening : https://github.com/eddyyanto/watchout-tweening

 

Help and advice is appreciated! Thanks!

[jme]

Hi Eddy,

 

I´m not 100% sure what you want to do but have you tried to set the anchor position to the right edge of the media file and the rotate around the Y-axis?

 

Best regards

Dataton support /jme

[lichtler]

Hey Eddy,

 

your tween looks like a rotating cube? I think you should work more with the 3. dimension of Watchout. You can set the anchor position in the Media Cue in the z - way to the half of the image resolution. Rotating now arround the y-axis will automatic generate the three-dimensional look...

 

Another idea is to use the corner tweens. (would be a lot of programming work...:-))

 

Best wishes!

[Eddy Yanto]

Hi Eddy,

 

I´m not 100% sure what you want to do but have you tried to set the anchor position to the right edge of the media file and the rotate around the Y-axis?

 

Best regards

Dataton support /jme

 

Hi jme, where do I set "Right Edge" for the Anchor Position? Under "Media Cue" dialog box, I found only "Top Left" and "Center".

 

 

 

 

Hey Eddy,

 

your tween looks like a rotating cube? I think you should work more with the 3. dimension of Watchout. You can set the anchor position in the Media Cue in the z - way to the half of the image resolution. Rotating now arround the y-axis will automatic generate the three-dimensional look...

 

Another idea is to use the corner tweens. (would be a lot of programming work...:-))

 

Best wishes!

 

Hi lichtler, yes, it's sort of rotating cube. I've tried to make the images to look like rotating cube but it seemed rotation tweening isn't the right method to do it. I just tried corner tweens which is only available in WatchOut 5.2. I am half way through it now and it seems I am able to make it closer to what I am trying to achieve compared to rotation tweening. Will post result later, thanks!

[Mike Fahl]

You need to pay attention to where the vanishing point is. This is set in Preferences, and is indicated by a symbol in the stage window while the Preferences dialog is up. Put the vanishing point at the center of your animation, and it should help.

 

Note that the vanishing point currently is a show-wide setting, so it can only be set at a single position on stage. This works fine in many cases. But occasionally you'll need more control over where exactly the vanishing point is. E.g., in order to make the same kind of "rotating object" on multiple screen areas. This is currently not possible to accomplish since there's only a single, global vanishing point, which all rotated objects will point towards. The next version of WATCHOUT will allow you to create "local" vanishing points, providing more fine-grained control over the perspective.

 

Hope this helps.

 

Mike

[Eddy Yanto]

Hi Mike,

 

 

Thanks for the explanation on the global and local vanishing points.

 

I am not using Rotation tweening for this time, I did it another way which I deem easier - tweening a combination of properties of the image: Position X, Scale X and Corners. I've got exactly what I wanted using this combination of tweenings, here's a demo of tweening which is controlled using external program : https://s3.amazonaws.com/e-static/coverflow20120912/coverflow.html

 

I found another problem though, when I tried the tweening in Production machine and also in Display machine controlled from Production, it works great. But when I update/sync the show over to a Display and run it as cluster and try to control it directly, there seems to be a gap in between the images which doesn't appear in Production machine. Here's a short slowed down clip of the display/cluster that I took: https://s3.amazonaws.com/e-static/coverflow20120912/display.mov (6MB). There is a gap and also overlap between the tweening of the images which doesn't show up on Production.

 

Here's my updated WatchOut files which includes the images and inputs and also the program used to control the tweening (it is done in Processing http://processing.org/) : https://github.com/eddyyanto/watchout-tweening

 

Any idea what causes this and is there any workaround?

[Eddy Yanto]

Hi Mike,

 

 

So, I've been trying for a while to make the image tweening effect to animate consistently on both Production and Display using my half baked method. I tried to make it smoother by increasing the display framerate from 60 to 100 fps and also reorder the tweening (first by calling corners tween then scaling and x position), but obviously they didn't work.

 

Earlier today, I tried the approach you suggested and set the vanishing point to the center. The vanishing point makes more sense to me now and it could potentially solve the inconcistent animation I was having by using multiple tweenings.

 

 

So now, having set the vanishing point to the center of the stage, I create a composition and put all my images into it. I arranged the images to form a box with each image make up each side of the box. When I am done doing the composition, I put it on stage and enabled the "Rotation Y" tweening. I am able to make the "box" turn by dragging on the path manually. I am trying to hook up an external "input" to "Rotation Y" but there doesn't seem to be any outlet for me to type in the "input" variable.

 

Can tweening of the composition, let's say "Rotation X" be controlled from external application using "input" variable? Thank you very much!

[Mike Fahl]

No, tweening of position, scaling and rotation only works with individual media files, and comes with additional restrictions and requirements (see the manual for details).

 

Mike