Stack Animation Development

[atreiu]

I'm currently trying to understand the Stack Animation samples,

and I thought it my be interesting for other developers, too.

You will find the source-code for the animations in the "Effects" folder. I took a look at the Linear Grid Animation:

function GetGridRect(k1, k2, Width, Height, cWidth, cHeight, iWidth, iHeight,

  IconSize, CellSize, IconXOffset, IconYOffset, BordersSize: Integer): TRect stdcall;

begin

  Result.Left := Round(iWidth * CellSize * sin(k1 / k2 * Pi / 2)

	+ ((Width - CellSize) / 2 + IconXOffset) * (1 - sin(k1 / k2 * Pi / 2)));

  Result.Top := Round(Height - (CellSize * (cHeight - iHeight) + IconYOffset + BordersSize) * sin(k1 / k2 * Pi / 2));

  Result.Right := Result.Left + CellSize;

  Result.Bottom := Result.Top + CellSize;

end;

Here a more detailed look at the grid animation and the parameters:

k1 = current animation-time in ms

k2 = max/end animation time in ms. This is what the users sets as "Animation Speed"

Width = Width of the opened Grid, including Borders

Height = Height of the opened Grid, including Borders

iWidth, iHeight = Number of Icons in a row/column of the opened Grid

cWidth, cHeight = Indexes to identify the single Icons on the grid. Just like chess: Top Left Icon is (0,0), next to it is (1,0),...

IconSize = ending Size of the Icons. This is what the user sets as "Icon size"

Cellsize = Icon Size + margin

IconXOffset = seems to be zero all the time, not sure for what it's needed

BordersSize = Size of every Border of the grid (not all together)

Only the orange parameters are variable for one grid. the other values stay constant for this grid.

What you have to calculate as the Result are the coordinates of the Icon-Cells (Icon+Margin) TopLeft and BottomRight corners.

In the attached txt-file you see a complete dump of the parameters and the result values of the grid, that is shown the Screenshot.

It's only the open Animation, close Animations will always be the reverse open Animation.

EDIT: i missed some parameters in the dump. reuploaded, now.

dump.txt

[AndrewYY]

(original post) This is some good stuff! I'll see if I can make something out of it I'll try to implement a variation of my wobble animation.

Now for fan stacks:

k1: current time in milliseconds

k2: total time in milliseconds

width: width of the fan's curve*

height: height of the window*

width2: width of the window*

index: index of the icon with 0 as top

count: number of icons

maxcount: "auto mode threshold"

*I assume this is what it is.

orange text is variable.

red text is set by user in dock settings.

It is also important to note that the icons 15px movement to the right is built in to Bobah's dock, and the rotation of the fan icons is as well. To prevent movement to the right, move it to the left There is no way to prevent fan icons from rotating.

OK. To any other animation developers out there :slant: Here's something to make your life a lot easier.

Since the original code is hella difficult to read through, I've come up with a method to easily navigate through stuff using position variables.

Basically, it works like this. The icons start off at this position:

xstart := (Width - CellSize) / 2 + IconXOffset;
ystart := Height;

And they always end in the following position(for grids).

xend := iWidth * CellSize;
yend := Height - (CellSize * (cHeight - iHeight) + IconYOffset + BordersSize);

Then, you just have to add bits of math to wherever you need to offset the position, and run between start to end.

For the more complex animations, I also have xmiddle and ymiddle. Then I run a bezier curve from start to middle to end.

function Curve(p1,p2,p3,time:real) : real;

//calculates x coord of point on curve

//calculates y coord of point on curve as well;)

//hell, it could calculate z coord as well o_O dunno why you'd need that

var

pp, ppp: real;

begin

pp := p1+(p2-p1)*time;

ppp := p2+(p3-p2)*time;

Result := pp+(ppp-pp)*time;

//or if you like obfuscated code, use Result := p1+time*(2*(p2-p1-time*p2)+time*(p3+p1));

//this will allow you to not have any variables, but all readability will be sacrificed.

end;

Use the above, for Curve with xstart for p1, xmiddle for p2, xend for p3, and a value between 0 and 1 for time. WIll return the x value. Do the same putting in ystart for p1, ymiddle for p2, and yend for p3 to get the y value.

And for good measure, here's one for straight lines:

function Line(p1,p2,time:real) : real;

//calculates x coord of point on line from (p1,y1) to (p2,y2)

//also calculates y coord of point on line from (x1,p1) to (x2,p2), if you catch my drift.

begin

Result := p1+(p2-p1)*time;

end;

Works the same way as curve, only it takes 2 points instead of 3.

Edited May 26, 2009 by AndrewYY

[atreiu]

This is some good stuff! I'll see if I can make something out of it I'll try to implement a variation of my wobble animation.

Yeah, well, there are still some unknown things here for me. First:

Cellsize * iWidth + BodersSize*2 ≠ Width

Not what i expected, that's making positioning a little bit strange. There are some wired pixels out there

Second: If i give constant Values to the function, I expect a constant result. But it's not:

if i use

  Result.Left := Round(iWidth*CellSize); //constant
  Result.Top := Round(iHeight*CellSize); //constant
  Result.Right := Result.Left + CellSize;
  Result.Bottom := Result.Top + CellSize;

I still got a slightly movement of the Icons, from left to right, ~15px. That shouldn't be, I think.

Somebody with an explanation out there?

EDIT: Oh, and AndrewYY, you can not draw outside the width/height of the Stack-Window. So your wobbling have to be limited to the borders. But if you make the resulting icons a little bit smaller in the end, you should still be able to do a good wobble.

[AndrewYY]

Is there a variable for the icon's begin size?

and also, what language is this in (fail)? I figure if I'm gonna write in it, might as well understand the syntax

I did a search and came across pascal... Is this it? What compiler should I use? (as you can tell, I have little idea as to what I'm doing.)

Edit: ok, it's in Delphi :slant: gonna need someone else to compile stuff for me then.

For now, I'll just scrub through the linear animation code and see how it works.

Edit: also, I'm not sure how the background is animated then.

Edit2: nevermind. I got it

Edit3: nevermind, I dont

[haran]

Is there any way to actually create an effect (like fountain and liner).

If there is, how do we do it and with what program?

[atreiu]

Is there any way to actually create an effect (like fountain and liner).

If there is, how do we do it and with what program?

Sure, that's what we are trying here

First you need Borland Delphi 7 to compile the source code into a working .dll to test your new animation.

The Source Code for the Linear-Animations is the file:

/xwindowsdock/effects/linear/linear.dpr

You actually don't need to understand a lot of coding in Delphi (you only need basic knowledge about the syntax and the IDE), then you have to change the algorithm I'm trying to discover/explain above.

Actually, you need more understanding about mathematical descriptions of animations, than of coding. If you understand the function GetGridRect() i posted above, you should be fine.

But if you have no clue, what I'm talking about, you better leave it to others

[AndrewYY]

  Result.Left := Round(iWidth*CellSize); //constant
  Result.Top := Round(iHeight*CellSize); //constant
  Result.Right := Result.Left + CellSize;
  Result.Bottom := Result.Top + CellSize;

I still got a slightly movement of the Icons, from left to right, ~15px. That shouldn't be, I think.

Perhaps cellsize is varying because the icon changes size from dock size to grid size? That might be causing the shift...

[atreiu]

gah darn it. I knew it was gonna be delphi ... I'll try my best at understanding it, but you'll have to compile it for me

Well, it doesn't really matter, what language it is, does it? It's pure math anyway

Sure i can compile one or the functions for you, but I think it's difficult, because as i said, it doesn't behave completely like i expect it to behave :/ But maybe you have a deeper understanding...

What I'm trying to say: i think there is a lot of try & error needed, and i can't compile every small change for you. But give it a try!

Perhaps cellsize is varying because the icon changes size from dock size to grid size? That might be causing the shift...

Damn, I forgot to include the cellsize in my dump... you could be right. I check it out and repost a (hopefully) complete dump.

[AndrewYY]

Also, I believe iconxoffset and iconyoffset calculate exact position of the stack on the screen... logically, that's what it means to me o_O

[atreiu]

Also, I believe iconxoffset and iconyoffset calculate exact position of the stack on the screen... logically, that's what it means to me o_O

Not sure about that, because the values do not change, if i move the dock away from the Screen edge for example... I have a feeling, that they adjust the position of the Icons on the Stack-Window. But I don't know, because they don't seem to change.

Cellsize stays constant, all the time. Also iconXYoffset. Can't be the source of the movement...

Edit: Here is the dump of the function:

  Result.Left := Round(iWidth*CellSize); //constant
  Result.Top := Round(iHeight*CellSize); //constant
  Result.Right := Result.Left + CellSize;
  Result.Bottom := Result.Top + CellSize;

It clearly says, the Results are constant. Still a movement visible on the Stack. This can only mean, that the Stack-Window is moved by Bobahs function, something we can not control through the Animation-API.

dump.txt

[AndrewYY]

see anything wrong with this?

It should work in theory (though there probably will be some math errors I made)

function GetGridRect(k1, k2, Width, Height, cWidth, cHeight, iWidth, iHeight,
  IconSize, CellSize, IconXOffset, IconYOffset, BordersSize: Integer): TRect stdcall;
begin
  var
	percentage: real;
  percentage := k1/k2;
  If percentage<=0.5 Then //Step 1: move icons to y position
	Result.Left := Round((Width - CellSize) / 2 + IconXOffset);
	Result.Top := Round(Height - (CellSize * (cHeight - iHeight) + IconYOffset + BordersSize) * sin(k1 / k2 * Pi));
  End

  Else If percentage<=0.8 Then //Step 2: move icons to x position
	Result.Left := Round(iWidth * CellSize * (-cos((k1 / k2-0.5)* 2 * Pi)*0.5 + 0.5)
	  + ((Width - CellSize) / 2 + IconXOffset) * (1 - (-cos((k1 / k2-0.5)* 2 * Pi) + 1)/2));
	Result.Top := Round(Height - (CellSize * (cHeight - iHeight) + IconYOffset + BordersSize));
  End

  Else Begin //Step 3: shrink everything a tiny bit for the wobble effect
	Result.Left := Round(iWidth * CellSize * (cos((k1 / k2-0.8)* 5 * Pi)*0.1 + 0.9)
	  + ((Width - CellSize) / 2 + IconXOffset) * (1 - (-cos((k1 / k2-0.5)* 2 * Pi) + 1)/2));
	Result.Top := Round(Height - (CellSize * (cHeight - iHeight) + IconYOffset + BordersSize));
  End;

  Result.Right := Result.Left + CellSize;
  Result.Bottom := Result.Top + CellSize;
end;

I don't know delphi. Is this the way if/else statements and variable defining works?

Edit: to clarify, this is something like the algorithm I used to do my "wobble" example, only instead of scaling to 120% and down to 100%, I scale to 100% and down to 90%

[atreiu]

see anything wrong with this?

It should work in theory (though there probably will be some math errors I made)

[...]

I don't know delphi. Is this the way if/else statements and variable defining works?

Edit: to clarify, this is something like the algorithm I used to do my "wobble" example, only instead of scaling to 120% and down to 100%, I scale to 100% and down to 90%

It's a good start, i would say (of course there are some problems, too, step 3 seems broken...)

Here is the compiled version and source. I had to correct the syntax a little bit.

This version also creates a dump-file C:dump.txt, which should help you to debug the problems. It's getting very big, very fast, so be sure to delete it from time to time...

(Setting animation-time up to ~5sec helps a lot to understand the problems, too.)

andrew.zip

[AndrewYY]

Is it the dumping that causes the framerate to lag? Just making sure I think so, because after deleting the dump file, animation plays smoother.

OK, I just installed borland delphi 7 (made an account on their site). If you can guide me through the compiling phase, I can do it on my own from here on

edit: oh shoot, I dbl posted

I'll let you off this time - mps69

[atreiu]

OK, I just installed borland delphi 7 (made an account on their site). If you can guide me through the compiling phase, I can do it on my own from here on

edit: oh shoot, I dbl posted

It's very easy:

Just doubleclick the dpr to open it, (a ressource file will be recreated), no other settings or adjustments needed.

Make your changes.

Then to compile just go into menu: "Project" -> "Build all Projects" and your .dll file will be overwritten/recreated with the new version.

(PS: Yeah, the dumping makes it slower, especially if the dump-file gets big).

[AndrewYY]

HAHA! I got it!

And I nailed the bug!... *testing*

*uploaded*

andrew.zip

[atreiu]

HAHA! I got it!

And I nailed the bug!... *testing*

Hehe, cool! If you discover some interesting things about the parameters etc., something that could help others, please let me know, so i can add these info to the first post.

EDIT: tested your version: Looking good! Sadly, the Icon size doesn't really wobble, because it seems not to depend on the Cellsize (which is what you can calculate). Anyway, it looks nice Could you smooth out the transition between step 2 and 3? There is a really big gap, between these stages.

Then you should pack it and upload it for everybody (i would suggest the Docklet-Thread).

[AndrewYY]

alright. Found a bug in the code that was causing the leap between steps 2 and 3. Fixed it. Now it looks more wobbly

Since the zoom out causes the icons to be squished horizontally, I'll optimize the look of that before release

[haran]

Sure, that's what we are trying here

First you need Borland Delphi 7 to compile the source code into a working .dll to test your new animation.

The Source Code for the Linear-Animations is the file:

/xwindowsdock/effects/linear/linear.dpr

You actually don't need to understand a lot of coding in Delphi (you only need basic knowledge about the syntax and the IDE), then you have to change the algorithm I'm trying to discover/explain above.

Actually, you need more understanding about mathematical descriptions of animations, than of coding. If you understand the function GetGridRect() i posted above, you should be fine.

But if you have no clue, what I'm talking about, you better leave it to others

O thanks. Exactly the answer I was looking for. And I googled Borland Delphi 7 but I'm not too sure what to download so can you please post a link to it.

Also, your animation is very good. But to make it better, slow it down just a little from the vertical to horizontal opening (hope you know what I mean).

EDIT: I don't think I need a link anymore

[AndrewYY]

Also, your animation is very good. But to make it better, slow it down just a little from the vertical to horizontal opening (hope you know what I mean).

I believe you're talking to me Take a look at the Docklets thread for the release, with all the bugfixes and the like.

http://www.aqua-soft.org/board/showthread.php?t=51162

@Atreiu: I never did manage to get it looking like the wobbly effect in my preview, but it looks quite nice now

[Panta]

...It clearly says, the Results are constant. Still a movement visible on the Stack. This can only mean, that the Stack-Window is moved by Bobahs function, something we can not control through the Animation-API.

I'll try to help, please don't shoot me!

If I understood your conversation correctly, the Stack Window does move along the animation; adjusting Preferences>Stack>Effects first two sliders to 100% and the third to 1% may help seeing it.

Sorry if I misunderstood the problem; I'm just trying to help somehow...

[AndrewYY]

I'll try to help, please don't shoot me!

If I understood your conversation correctly, the Stack Window does move along the animation; adjusting Preferences>Stack>Effects first two sliders to 100% and the third to 1% may help seeing it.

Sorry if I misunderstood the problem; I'm just trying to help somehow...

The problem Atreiu describes, from what I understand (I haven't tested anything) is that The icons are moving around even when he tells them not to.

[atreiu]

The problem Atreiu describes, from what I understand (I haven't tested anything) is that The icons are moving around even when he tells them not to.

yeah, that's the point You can't notice it, if you have animation anyway, because the movement is too small (~15px). But as i tried to do a no-movement animation (just fade in), i noticed that "not moving Icons" are impossible. I guess this is a bug, in bobahs implementation.

[Panta]

Ah, OK, now I understand... and thanks for not shooting me!!

[AndrewYY]

yeah, that's the point You can't notice it, if you have animation anyway, because the movement is too small (~15px). But as i tried to do a no-movement animation (just fade in), i noticed that "not moving Icons" are impossible. I guess this is a bug, in bobahs implementation.

I found the source of the problem!

The icons have to zoom between original size and final size. In order to fix positioning problems, Bobah shifts each icon from left to right (as that's what happens anyways in the animation).

The way to make the icons stay still is by moving the icons back from right to left manually

Example:

Fade.zip

[BOBAH13]

@AndrewYY: Why did you make grid's icons so close each other ? Of course you can, but my dock doesn't prepare for it