Smooth Transitions

Blitz3D Forums/Blitz3D Programming/Smooth Transitions

Axel Wheeler

(Posted 2011) [#1]

So I've been working on code to perform smooth transitions. Of any kind. You basically feed it start and end values, and a time (in millisecs). Then when you want the current value, you just ask. It will give you a linear or cosine-based interpolated value (or any mixture of these... see below) between the start and end values you gave it, based on the current time.

It is highly beta, so use care. For now it's pretty much a request for suggestions. Also if something like this is already in the code archives let me know and I'll gnash my teeth accordingly.

There is also some weird but fun example code at the end. Enjoy.

Here are the commands:

t.Transition=CreateTransition(startValue#,endValue#,mSecs#,cosine#=1.0)

Store the result in an identifier so you can refer to it later.

mSecs are 1000ths of a second. Cosine amount means 0=linear, 1.0=cosine, 1.5= a 50/50 mixture of the two. See the attached example code to see the difference.

GetTransitionValue#(t.Transition)

Use the identifier you got from CreateTransition. It knows what time it is; no need to specify.

It will return -9999 if the transition object has been purged, to minimize errors. You should trap this if there is any chance of calling a purged transition.

Expired transitions still exist (until they are purged) and will return the ending value.

PurgeTransitions(age=0)

Run this each game loop; it clears out all the old transitions. They do NOT delete themselves when the time expires; that would cause errors, which would be bad. So run this with an age of perhaps 5000 ms, just to be sure you are no longer referring to it.

CheckTransition(t.Transition)

If you want to see how much time is left (as in -324 ms) this is how you do it. The result is negative when there is time left, positive when it is overtime.

First the functions, then some example code:

Type Transition
	Field startValue#
	Field endValue#
	Field startTime#
	Field endTime#
	Field cosine#
End Type

Function CreateTransition.Transition(startValue#,endValue#,mSecs#,cosine#=1.0)
	Local t.Transition=New Transition
	t\startTime=MilliSecs()
	t\endTime=t\startTime+mSecs
	t\startValue=startValue
	t\endValue=endValue
	t\cosine=cosine
	Return t.Transition
End Function

Function GetTransitionValue#(t.Transition)
	If t.Transition=Null Then Return -9999
	Local straightProportion#=(MilliSecs()-t\startTime)/(t\endTime-t\startTime)
	If CheckTransition(t.Transition)>=0 Then straightProportion=1.0
	Local cosineProportion#=(1-Cos(straightProportion*180))*.5
	Local finalProportion#=cosineProportion*t\cosine+straightProportion*(1.0-t\cosine)
	Return finalProportion*(t\endValue-t\startValue)+t\startValue
End Function

Function PurgeTransitions(age=0)
	Local t.Transition
	For t.Transition=Each Transition
		If MilliSecs()>(t\endTime+age) Then Delete t.Transition
	Next
End Function

Function CheckTransition(t.Transition)
	Return MilliSecs()-t\endTime
End Function

Now the example code:

;Basic B3D stuff

Include "transitions.bb"

Graphics3D(1024,768,32,2)
SetBuffer(BackBuffer())
SeedRnd(MilliSecs())

Global frameTimer=CreateTimer(60)

;You don't need this variable in your code, but it's useful here because we are adjusting the value dynamically

Global transitionMethod#=1.0

;We are going to use really two transitions, but I'm creating three.  One for pitch, one for yaw, and one for roll (which is ignored)

Global p.transition,y.transition,r.transition

;This is just the stuff you see on screen

Local cam=CreateCamera()
MoveEntity(cam,0,0,-300)
CameraZoom(cam,150)
CameraRange(cam,200,400)
Local sun=CreateLight()
LightColor(sun,255,255,200)
RotateEntity(sun,45,45,0)
AmbientLight(150,150,200)

Local plane=CreatePlane()
RotateEntity(plane,-90,0,0)
PositionEntity(plane,0,0,5)
EntityColor(plane,32,32,32)
EntityOrder(plane,20)

Local clockHand=CreateSphere(20)
ScaleEntity(clockHand,.05,.05,.05)
PositionEntity(clockHand,0,1.05,0)
Local clockBase=CreatePivot()
EntityParent(clockHand,clockBase)

Local sphere=CreateSphere(32)
RotateEntity(sphere,0,180,0)
EntityOrder(sphere,10)
EntityColor(sphere,128,0,0)
FlipMesh(sphere)
Local tex=CreateTexture(32,32)
SetBuffer(TextureBuffer(tex))
ClsColor(255,255,255)
Cls
Color(0,0,0)
Rect(0,0,32,32,0)
Line(15,0,15,32)
Line(0,15,32,15)
EntityTexture(sphere,tex)
ScaleTexture(tex,.036,.072)
Color(255,255,255)
SetBuffer(BackBuffer())

Local thing=CreateCone(64)
RotateMesh(thing,90,0,0)
ScaleEntity(thing,.2,.2,1)
SetNewDirection(thing)

Local s=CreateSphere(16)
ScaleEntity(s,.2,.2,.2)
EntityColor(s,80,80,80)
EntityShininess(s,1)
EntityParent(s,thing)

Local c=CreateCylinder(16)
ScaleEntity(c,.1,.22,.1)
EntityColor(c,80,80,80)
EntityShininess(c,1)
RotateEntity(c,0,0,90)
EntityParent(c,thing)

Local c2=CreateCylinder()
ScaleEntity(c2,.02,.3,.02)
EntityColor(c2,80,80,80)
EntityShininess(c2,1)
RotateEntity(c2,0,0,90)
EntityParent(c2,c)

Local c3=CreateCube()
PositionMesh(c3,0,.97,0)
ScaleEntity(c3,.01,2,.05)
EntityColor(c3,80,80,80)
EntityShininess(c3,1)
PositionEntity(c3,-.29,0,0)

Local c4=CreateCube()
PositionMesh(c4,0,.97,0)
ScaleEntity(c4,.01,2,.05)
EntityColor(c4,80,80,80)
EntityShininess(c4,1)
PositionEntity(c4,.29,0,0)

Local piv=CreatePivot()
EntityParent(c3,piv)
EntityParent(c4,piv)

;Main loop.  You knew that, didn't you?

While Not KeyHit(1)
	WaitTimer(frameTimer)
	
	;If the transitions have expired, create new ones and purge the old ones (only expired transitions are purged.  This way there will always be a p.transition, y.transitoin and r.transition, which prevents errors.
	
	If checktransition(p.transition)>0 
		SetNewDirection(thing)
		purgetransitions()
	EndIf
	
	;Here we use the value from GetTransitionValue()  to rotate the pointer and it's support structure
	
	RotateEntity(thing,gettransitionvalue(p.transition),gettransitionvalue(y.transition),gettransitionvalue(r.transition),1)
	RotateEntity(piv,0,gettransitionvalue(y.transition),0)
	RenderWorld()
	v1#=MilliSecs()-p\starttime
	v2#=p\endtime-p\starttime
	RotateEntity(clockBase,0,0,-360.0*v1/v2)
	Text(0,0,"Pitch="+gettransitionvalue(p.transition))
	Text(0,20,"Yaw="+gettransitionvalue(y.transition))
	Text(0,40,"Use arrow keys (Up/Down) to adjust transition type.  0.0=Linear, 1.0=Cosine.  Currently "+transitionMethod)
	If KeyHit(200) Then transitionMethod=transitionMethod+.1
	If KeyHit(208) Then transitionMethod=transitionMethod-.1
	If transitionMethod>1.0 Then transitionMethod=1.0
	If transitionMethod<0.0 Then transitionMethod=0.0
	
	;Here we place a couple of visual markers for the values.
	
	Oval(GraphicsWidth()-GraphicsWidth()*(gettransitionvalue(y.transition)+180.0)/360.0,GraphicsHeight()*.9,10,10,1)
	Oval(GraphicsWidth()*.05,GraphicsHeight()*(gettransitionvalue(p.transition)+90.0)/180.0,10,10,1)
	Flip()
	Delay(10)
Wend

Function SetNewDirection(thing)
	Local ep#=EntityPitch(thing)
	Local ey#=EntityYaw(thing)
	Local er#=EntityRoll(thing)
	
	Local newp#=Rnd(-90.0,90.0)
	Local newy#=Rnd(-90.0,90.0)
	Local newr#=Rnd(-180.0,180.0)
	
	;Here we create the transitions objects.  Only p and y are really used.
	
	p.transition=createtransition(ep,newp,3000,transitionMethod)
	y.transition=createtransition(ey,newy,3000,transitionMethod)
	r.transition=createtransition(0,0,3000,transitionMethod)
	EntityColor(thing,Rnd(255),Rnd(255),Rnd(255))
End Function

Last edited 2011

Last edited 2011

Last edited 2011

Last edited 2011

Kryzon

(Posted 2011) [#2]

Hello Axel. This looks really interesting, thanks for sharing.

If you wouldn't mind, could you describe how are you using the Cosine function to retrieve the interpolated value, located in the GetTransitionValue function? most specifically the cosineProportion calculation.
Thanks again.

Axel Wheeler

(Posted 2011) [#3]

Certainly.

Local cosineProportion#=(1-Cos(straightProportion*180))*.5

We need to take a value from (0.0, 1.0) and stretch it, so the middle value is the same and the end values are the same, but all the remaining values are stretched toward the ends. The Cos() function does this, but it requires values (0, 180) to do it. Also it produces values from (1.0, -1.0). So there are three steps basically:

1. Convert (0.0, 1.0) to (0.0, 180.0)

2. Run Cos() on it

3. Convert the results, which are (1.0, -1.0), back to (0.0, 1.0)

Step 1 is accomplished by the straightProportion*180.0 part.

Step 2 is just Cos() of that result.

Step 3 is a kludgy way of flipping the result of step two (1.0, -1.0) around and compressing it in half to produce (0.0, 1.0). The "1.0-" part flips it to (0.0, 2.0) (which is not intuitive for me at least) and the "*.5" part brings it back to (0.0, 1.0) (which is much more intuitive!).

The result is a nice smooth curve.

The next line just creates the weighted average of the two (linear and cosine) based on the "cosine" argument. That is poorly named I suppose, especially since it is also (0.0, 1.0); I should have called it "cosineWeight" or something.

Does this help?

Here's a page that describes this and other interpolation methods. There's a better one out there but I can't find it right now...

http://local.wasp.uwa.edu.au/~pbourke/miscellaneous/interpolation/

Thanks for the feedback Kryzon!

Kryzon

(Posted 2011) [#4]

Perfect logic, thanks a lot.

EDIT: Do you think this could be used for 3D paths? that article states that "By a cute trick the cosine interpolation reverts to linear if applied independently to each coordinate". But I can't imagine why that might be.

Last edited 2011

Axel Wheeler

(Posted 2011) [#5]

I'm not sure what they're talking about there, although if you were to take the mirror image a cosine curve (from 0-1) and apply another cosine curve on that, you would presumably go back to a straight line. But it doesn't sound like that's quite what they're describing.

Are you planning to trace a smooth curve in 3d space through a series of set points? I would guess the hermite solution would be the best. I've implemented Catmull-Rom (hermite) interpolation for smoothing terrains but not for paths in 3d.

All my cosine function above does is move from point to point in a straight line, accelerating and decelerating.

Kryzon

(Posted 2011) [#6]

I was thinking applying this from point to point in a path (defined by a lot of these points), once for each axis and then combining the results as the final entity positioning.

Axel Wheeler

(Posted 2011) [#7]

I think that since cosine interpolation is a kind of fake smoothness it would look weird for that purpose. Imagine points going 0,0 - 1,1 - 2,2 etc. with a slope of 1.0. In this case linear interpolation is actually better and produces a straight line through the points. Cosine interpolation weirdly creates a smoothed staircase effect. So it has its limitations. For what you are describing I would think having the path curve to the horizontal at each of the referenct points would be unacceptable.

I thought I had posted my Catmull-Rom code at some point but I guess not. I'm creating a new thread with it. It may be adaptable to what you are doing but I never tried it. Good luck!