Motion Graphics UDF

[scintilla4evr]

Hello! I've been working on this UDF for some time, but when I read Seeking "kinetic typography" capability in au3 topic, I decided to share it. This UDF brings some functions for creating animations in GDI+ without worrying about rendering or calculating.

Features:

• Adding basic shapes (rectangle, ellipse) and text
• Animating object properties (like position or size)
• Animatable transformations (translate, rotate, scale)
• Double-buffering
• Rendering to a window or GUI control

Enjoy!

Motion Graphics UDF

Edited July 16, 2016 by scintilla4evr

[scintilla4evr]

Update: 

• Animatable solid brushes and pens
• Drawing lines

Motion Graphics UDF

[mLipok]

Very nice.

About the problem with Au3Check in your script.

Try to not use this kind of notation:

Local $hBrush = ($oOutline.brush)($iTime)

but instead use this:

Local $hBrush = $oOutline.brush($iTime)

 

try my "Example 1 - Basic Animation.au3"  modyfcation Motion Graphics UDF 0.0.2_mod.zip

You will see what I mean.

EDIT: Need some more learning

 

Edited July 11, 2016 by mLipok

[scintilla4evr]

New version:

• Added LayeredWindowRenderer
• Fixed issues with brushes and text

Motion Graphics UDF

[scintilla4evr]

Version 0.0.4:

• Added time transformations
• Added arcs
• Added time events (call a function at a specific time)

Motion Graphics UDF

[spudw2k]

Pretty neat demos and UDF; thanks for sharing  When I run most of them (at least on this PC) they start out very fast, then slow down-not gradually, instantly.  When I move the mouse the speed picks up again and when the mouse is at rest for a few moments, the speed drops again.  

Does this happen to you?

[scintilla4evr]

15 hours ago, spudw2k said:

Pretty neat demos and UDF; thanks for sharing  When I run most of them (at least on this PC) they start out very fast, then slow down-not gradually, instantly.  When I move the mouse the speed picks up again and when the mouse is at rest for a few moments, the speed drops again.  

Does this happen to you?

Yes, I think it's something with AutoIt's GUI, because it happens in every script that renders something with GDI+ like this.

[scintilla4evr]

0.0.5:

• Clipping the view with a rectangle
• Added images

Motion Graphics UDF

PS. Image in the 14th example is taken from Intel's ad "Jim Parsons and a Special Guest Want You To Wake Up"

Edited July 15, 2016 by scintilla4evr

[qwert]

Thanks, again, for this UDF.  You've added impressive capabilities in these updates.

But could you provide one more example?: show simple typing of a couple of text strings ... with some timing control parameter to adjust the rate of display.

I see how to control text sliding into view.  But I'm unsure of how to produce a typing effect.

 

 

 

[scintilla4evr]

0.0.6:

• Added 4 string animations

Motion Graphics UDF

[scintilla4evr]

0.0.7:

• Added hatch brushes
• Added GUIControlRenderer
• Added keyframed animations

Motion Graphics UDF

[qwert]

16 hours ago, qwert said:

with some timing control parameter to adjust the rate of display

I'm sorry to keep bringing this up.  With all your great additions, I still can't manage to control the pace of the text display.  The following, for example, has no affect other than delaying the display of the end result.

:
$oScene = _MoGraph_SceneCreate()

$oText = _MoGraph_TextCreate(_MoGraph_AnimatedStringCreate("Lorem ipsum dolor", 0, 50, $MOGRAPH_TXTANIM_LEFTTORIGHT), 10, 10, 380, 0, "Impact", 36, 0)
_MoGraph_SceneAddObject($oScene, $oText)
Sleep(1000)
$oText2 = _MoGraph_TextCreate(_MoGraph_AnimatedStringCreate("Lorem ipsum dolor", 0, 50, $MOGRAPH_TXTANIM_RIGHTTOLEFT), 10, 60, 380, 0, "Impact", 36, 0)
_MoGraph_SceneAddObject($oScene, $oText2)
Sleep(1000)
:
:

With so much capability, I hope there's a way to orchestrate use of the features with timing.  Am I just missing it?

 

 

[scintilla4evr]

4 hours ago, qwert said:

I'm sorry to keep bringing this up.  With all your great additions, I still can't manage to control the pace of the text display.  The following, for example, has no affect other than delaying the display of the end result.

:
$oScene = _MoGraph_SceneCreate()

$oText = _MoGraph_TextCreate(_MoGraph_AnimatedStringCreate("Lorem ipsum dolor", 0, 50, $MOGRAPH_TXTANIM_LEFTTORIGHT), 10, 10, 380, 0, "Impact", 36, 0)
_MoGraph_SceneAddObject($oScene, $oText)
Sleep(1000)
$oText2 = _MoGraph_TextCreate(_MoGraph_AnimatedStringCreate("Lorem ipsum dolor", 0, 50, $MOGRAPH_TXTANIM_RIGHTTOLEFT), 10, 60, 380, 0, "Impact", 36, 0)
_MoGraph_SceneAddObject($oScene, $oText2)
Sleep(1000)
:
:

With so much capability, I hope there's a way to orchestrate use of the features with timing.  Am I just missing it?

 

 

To delay the text animation, you have to change the 2nd and 3rd parameters in the _MoGraph_AnimatedStringCreate calls. Adding Sleep() doesn't affect the rendering, because timing is calculated when calling _MoGraph_RendererRenderFrame() or _MoGraph_RendererRenderNextFrame().

Here is the basic idea of how to add delay:

; mumbo jumbo code before

$iStart = 100
$iLength = 50

$oText = _MoGraph_TextCreate(_MoGraph_AnimatedStringCreate("Lorem ipsum dolor", $iStart, $iStart+$iLength, $MOGRAPH_TXTANIM_LEFTTORIGHT), 10, 10, 380, 0, "Impact", 36, 0)
_MoGraph_SceneAddObject($oScene, $oText)

; blah blah after

 

Edited July 16, 2016 by scintilla4evr

[qwert]

Thanks for your response. 

I did a simple substitution to confirm what I think you're saying, but I got an unexpected result:

a "slot-machine" effect on the last two lines, followed by the first two lines flowing into view from the left.

:
$oText = _MoGraph_TextCreate(_MoGraph_AnimatedStringCreate("Lorem ipsum dolor", 100, 150, $MOGRAPH_TXTANIM_LEFTTORIGHT), 10, 10, 380, 0, "Impact", 36, 0)
_MoGraph_SceneAddObject($oScene, $oText)

$oText2 = _MoGraph_TextCreate(_MoGraph_AnimatedStringCreate("Lorem ipsum dolor", 100, 150, $MOGRAPH_TXTANIM_RIGHTTOLEFT), 10, 60, 380, 0, "Impact", 36, 0)
_MoGraph_SceneAddObject($oScene, $oText2)
:

Is there another parameter involved?

[scintilla4evr]

7 hours ago, qwert said:

Thanks for your response. 

I did a simple substitution to confirm what I think you're saying, but I got an unexpected result:

a "slot-machine" effect on the last two lines, followed by the first two lines flowing into view from the left.

:
$oText = _MoGraph_TextCreate(_MoGraph_AnimatedStringCreate("Lorem ipsum dolor", 100, 150, $MOGRAPH_TXTANIM_LEFTTORIGHT), 10, 10, 380, 0, "Impact", 36, 0)
_MoGraph_SceneAddObject($oScene, $oText)

$oText2 = _MoGraph_TextCreate(_MoGraph_AnimatedStringCreate("Lorem ipsum dolor", 100, 150, $MOGRAPH_TXTANIM_RIGHTTOLEFT), 10, 60, 380, 0, "Impact", 36, 0)
_MoGraph_SceneAddObject($oScene, $oText2)
:

Is there another parameter involved?

No, because _MoGraph_AnimatedStringCreate does not affect the starting position of the text. It only changes the contents. If you want the 2nd string to flow into view from the right you can do one of two things:

• add an EaseValue to control the position of the text
• set $iHorzAlign argument (10th) of _MoGraph_TextCreate to 2, so the text will be aligned to right

[qwert]

What you're describing seem to be tweaks to specific internal functions rather than a general capability to choreograph entire sequences ... sequences that can produce a dynamic text result like the example on this site: here

Can you describe how a general capability should be implemented?

 

 

[scintilla4evr]

To choreograph sequences like this, you need to break down all animations to small parts that can be represented with "keyframes".

In the "I LOVE blah blah", you can find 4 animations (in order of appearance):

1. Letter 'I' rolling from the bottom
2. Word 'LOVE' rolling from the left
3. Word 'KINETIC' rolling from the right
4. Word 'TYPOGRAPHY' rolling from top

No, you have to translate these animations into code (I Love Kinetic Typography.au3):

; Move 'I' at the start from 340;230 to 340;140:
$oI_YValue = _MoGraph_EaseValueCreate(230, 140, 0, 50)
$oText_I = _MoGraph_TextCreate("I", 340, $oI_YValue, 0, 0, "Rockwell", 48, 1, _MoGraph_SolidBrushCreate(0, 0, 0, 220))
_MoGraph_SceneAddObject($oScene, $oText_I)

; Move 'LOVE' after 'I' from -160;100 to 20;100:
; 3rd argument is 50 to match the end of 'I' animation
; 4th argument is the end of animation (start+length)
$oLove_XValue = _MoGraph_EaseValueCreate(-160, 20, 50, 100)
$oText_Love = _MoGraph_TextCreate("LOVE", $oLove_XValue, 100, 0, 0, "Rockwell", 48, 1, _MoGraph_SolidBrushCreate(0, 0, 0, 160))
_MoGraph_SceneAddObject($oScene, $oText_Love)

; Move 'KINETIC' after 'LOVE' from 520;100 to 190;100
$oKinetic_XValue = _MoGraph_EaseValueCreate(520, 190, 100, 150)
$oText_Kinetic = _MoGraph_TextCreate("KINETIC", $oKinetic_XValue, 100, 0, 0, "Rockwell", 48, 1, _MoGraph_SolidBrushCreate(0, 0, 0, 220))
_MoGraph_SceneAddObject($oScene, $oText_Kinetic)

; Move 'TYPOGRAPHY' after 'KINETIC' from 110;-60 to 110;60
$oTypography_YValue = _MoGraph_EaseValueCreate(-60, 60, 150, 200)
$oText_Typography = _MoGraph_TextCreate("TYPOGRAPHY", 110, $oTypography_YValue, 0, 0, "Rockwell", 48, 1, _MoGraph_SolidBrushCreate(0, 0, 0, 220))
_MoGraph_SceneAddObject($oScene, $oText_Typography)

The most important types of all these sequences are objects created using _MoGraph_EaseValueCreate or _MoGraph_KeyframedValueCreate. Here is the basic syntax for both of these functions:

• _MoGraph_EaseValueCreate($iValueStart, $iValueEnd, $iStart = 0, $iEnd = 100, $oEasing = _MoGraph_LinearEasingCreate())
  • $iValueStart - value the object will represent before the animation will start
  • $iValueEnd - value the object will represent after the animation ends
  • $iStart - time when the animation should start
  • $iEnd - time when the animation ends (start time + animation length)
  • $oEasing - object representing how the value will change

If the current time is between $iStart and $iEnd, the output value will also be between $iValueStart and $iValueEnd

• _MoGraph_KeyframedValueCreate($aKeyframes)
  • $aKeyframes - 2D array of time-value pairs

_MoGraph_KeyframedValueCreate is basically a wrapper function for multiple _MoGraph_EaseValueCreate's

[qwert]

Almost there.  I generally follow what you're saying, but the example script produced an empty screen, for me.  I confirmed that each of the 4 steps is executing, but the resulting GUI is blank.

Any idea what's missing?  (New example is on the same directory as MoGraphics.au3, and the other examples still display properly.)

[scintilla4evr]

1 hour ago, qwert said:

Almost there.  I generally follow what you're saying, but the example script produced an empty screen, for me.  I confirmed that each of the 4 steps is executing, but the resulting GUI is blank.

Any idea what's missing?  (New example is on the same directory as MoGraphics.au3, and the other examples still display properly.)

I think you don't have Rockwell font installed. Change it to something else, like Times New Roman or Courier New.

[qwert]

An excellent analysis!  I completely overlooked that.

Clarendon gives me the kind of result I was hoping for.  With only a couple adjustments, I was able to get what I've posted below.

Thanks for sticking with me on this.  And thanks for a great UDF!