Category: Apple Motion

Demo of Trekkie Starship font

Designing Fonts for 3D

Designing fonts for 3D

Making 3D easy

Apple Motion and Final Cut Pro X

Most fonts used for text behave in a specific manner. Each character glyph has its own “metrics”: width, height, position relative to the “base point” (the intersection of the vertical line passing through the insertion point and the baseline reference); there’s a bounding box, and several other aspects (e.g., x-height, m-width, and kerning). These measurements and dimensions have a purpose in placing the glyphs in response to input devices such as a keyboard (real or virtual) and designed to emulate real world typesetting. The most important aspect is that one character is drawn at an insertion point, then the insertion point is advanced by the character’s width for the next character to be added.

Designing fonts for 3D modeling is different. It is no longer important to advance the insertion point by any measurement, and in fact, it is more important that various glyphs stay aligned on a specific point.

Fonts designed for this purpose have zero-width characters. What that means is, you can add a character of a specific shape, then duplicate that character and replace the character with another glyph and it will automatically be exactly aligned with the first character. (This duplication becomes important when the two or more glyphs require different features like color, weight, edges and any other available feature.) No matter how many of these zero-width characters are placed, they are always aligned to each other as a part of the model, or, like a jigsaw puzzle, they all have the exact same center point and since there . Multiple characters can be placed together in a single text object and they will align to create an image.

As an example: the Olympic Rings font. The Olympic Games symbol is five linked rings. In any other font, if you were to take the bullet character (Option-8) as the circle source, you would have to deal with the font metrics of the font you chose. With the Olympic Rings font, you can simply type “34567” and the five separate rings will automatically, perfectly, align to form the logo. Convenient!

Does that mean you can’t or shouldn’t simply use a bullet character? No.

There is a feature in Motion 3D Text you may not be aware of — that of the bounding box. When text is selected and overlays are turned on, Motion draws a box with control points on the corners and midpoints around the text, taking into account the distance from the insertion point, the character’s typographic width, its ascent and descent. When you convert the text to 3D Text, that bounding box snaps to the actual tangent edges of the glyph (or group of glyphs that make up the text). It is possible to use guidelines to find the center of the text by aligning the midpoints of the bounding box (of 3D Text) to any set of guidelines.

Below shows the difference between the characters “34567” typed for Olympic Rings, a font designed for 3D “modeling” where glyphs are designed to a specific point in space and glyph placements are related to each other and a standard typeface where character spacing advances the insertion point of the next glyph. For Olympic Rings, it does not matter which order of characters you type (except if you think about it in terms of “stacking” the characters upon each other!)

Font designed for 3D

Note: not all characters designed in these specialized fonts are zero-width designed to match placements of other related characters. Also note the bounding box of the olympic rings “text” and how the control points line up with the onscreen guides and how the bounding box makes contact with the tangent edges of the character group.

For Olympic Rings: there are two sets of related characters. The first is the linked rings. The other is the Korean P-C symbols with respect to the position of “PyeongChang” text which was designed as a single character for this font.

In most cases, when seeking the glyphs used to build a model, it is best to keep Font Book open with the font in use selected. Set an insertion point in the canvas (or viewer in FCPX) then copy the character from Font Book and paste it to the text object. Both Motion and Final Cut will set the font correctly and apply the pasted character.

In general, it is recommended, when building “models” from fonts, that you center the text in the canvas so that all building occurs around the (0,0) position location. After you have completed assembly of the model, then move the object to its needed location in 3D space.

Zero-width characters make aligning various parts of a model the most simple it can be. The alternative is to manually align each character using either anchor points, or a combination of Center alignment and adjusting the baseline of a character until the bounding box center line control points exactly match a set of guidelines perpendicular to each other.

Previously mentioned was the technique of duplicating characters and pasting new replacement characters to build the model. In some instances, it is desired to “type” several characters  to form a complex shape all with the same 3D features applied across the entire text object. An example would be a video wall. Each character is a rectangle at a different location in the designed space. Adding a texture to the front face of a text object like this allows a drop zone to be used over the entire object, each separate character receiving its own piece of the drop zone without having to do anything more complicated of sophisticated to split up any media applied to the drop zone.

video wall feature - fonts for 3D
Every character shares the same features of the 3D Text. Object created by typing a “string” of characters.
Olympic Rings Font - fonts for 3D
Every character uses different features of 3D Text (for example: color). Every character is used individually, duplicated to maintain relative positioning and another, different, solo character pasted into the Text field.

So that’s an overview of the design considerations for creating specialized fonts for use in making 3D “models” in Final Cut Pro and/or Motion. The video wall example is much more conducive to the Final Cut Pro Title text environment – all characters used typed into one title text object. However, in general, it is recommended developing any of these designs in Motion for convenience. It is a much more versatile environment capable of building very complex designs!

Demo of Trekkie Starship font - fonts for 3D
Created from a specially designed font for this particular model.

 

starbase 1 trekkie starship font - fonts for 3D
This entire model uses a single character from a font designed for 3D (any font with a zero-width circle shape!)

 

 

 

confetti motion project

Making Confetti – in Motion

Making Confetti: an Apple Motion tutorial

[Note: this is a response I gave a questioner recently on Apple’s Support Communities Motion forum.]

Little bits of paper do not fall in the real world flat, vertically. They “flop”, follow invisible currents and eddies in air flow to push and flip them and create *seemingly* random motion. The problem with emitters is: everything is emitted in exactly the same way… unless…

One of the features of Emitters (and Replicators) is that they can be made to Play video (image sequence) frames with the option to start playing on a random frame in the “sequence”. With that in mind, all we have to do is create ONE shape with the motion animation we need. We will rely on the emitter to start playing that sequence on a random frame within the sequence.

All objects in Motion (with the exception of Camera and Lights) must exist inside a Group. The initial shape you create will automatically be placed within a group… perfect. It often helps (most of the time actually — and this is a good habit to get into) to center the shape in the canvas. Go to Properties > Transform and on the right edge, disclosure mark > select Reset Parameter. That will center the object and reset its Rotation, Scale, Anchor Points etc.

Groups can be 2D (and 2D Fixed Resolution) or 3D (plus other options which are relatively, largely, unimportant… for another time.)

Set the Group to 3D. [Inspector: Group: Group Controls: Type: 3D — or, just click on that little icon on the right side of the Layers List column – 2D groups have 2 side-by-side rectangles with a bar overhead and 3D groups are like a stack of 3 squares rotated in 3D space. Clicking that icon will toggle the state.]

We’re going to use behaviors to control animation because it makes it easier to make alterations to suit our needs at any time.

Start playing your project.

To your shape: start by adding a Behaviors > Basic Motion > Spin behavior. The default spin is around the Z axis. Increase the Spin Rate to 135-180º (come back to these later to tweak these values for the look you’re going for.) Go into Properties and for the Anchor Point, offset the X to say 30 or so, Y to 60 or so, and Z to 150 or so (the actual values will depend somewhat on the original size of your shape). [Your Shape size can be anything – it can ultimately be controlled within the Emitter/Replicator.]  The Anchor Point is the point around which all Transform properties are centered and which animation originates. It is a convenient way to create “orbital” rotations instead of simple spins.

Add another Spin Behavior and set the Axis to Y. Set the Spin Rate to 100º give or take.

Add another Spin Behavior and set the Axis to X. Set the Spin Rate to 135º give or take.

You should get something like:

 

confetti-1

[The shape I used IS a circle, but I later changed the Shape > Geometry > Curvature to 0 to create the rectangle shape. You can adjust that to anything in between.]

That’s pretty good, but it’s still going to look a little weird when all the pieces are doing that same action and — it’s “too regular”. Let’s move on

Go to the Properties inspector and for each Rotation (XYZ), right click on the parameter and Add Parameter Behavior > Oscillate.

Start with these settings (and experiment afterwards):

For (rotate) X: Speed 16; Phase 13

For Y: Speed 37; Phase 11

For Z: Speed 35

[Leave all other parameters at their default]

At this point you get something much closer to realistic motion (barring gravity):

confetti-2

 

This animation is not exactly looping – I just cut it this close.

This is the “particle” we will Emit. (What’s the word for one piece of confetti? Confetto?)

 

Select the Group level of the shape and type K to create a Clone. Clones are like inline image sequences and emitting them will provide us with extra parameters we can exploit [Play Frames and Random Start Frame, etc]. Clones are also somewhat flexible since they are created “in real time” and they are the *entire animation from beginning to end* as one “thing”. With the behaviors animating a shape, the “length” of the existence of the shape is not fixed… so to speak… very difficult to explain, but if you keyframe this kind of animation, you would detect an “animation seam” [start/end difference] but behaviors will progress smoothly even if the “life” of the object has technically ended. [Don’t think about it too hard – just keep it in mind for later projects.]

Turn off the visibility of the Group containing your animated shape [Uncheck the checkbox on the left edge in the Layers List]. It does not need to appear during playback. (You cannot delete the group – any changes you make to the group or anything within it is immediately reflected in the appearance of the Clone! Clones are not a “snapshot” – they are “living, breathing” objects… although a 2D flat projection of its original.)

With the Clone selected, type E to create your emitter. [The Clone layer should automatically deselect visibility].

Set the Shape to Line; Start Point X to -1500; End Point X to 1500 (allows some “wiggle room”).

Check 3D.

Emission Latitude to 270º [downward motion]

Emission Longitude to 0

Emission Range – 90-120 [flexible]

 

Turn off Face Camera!!

 

Cell Controls:

Birth Rate 0

Birth Rate Randomness 60 [flexible – go lower]

 

Life 10 (or the number of seconds that equals the length of your project… or greater.. but not much greater!)

Speed 350

Speed Randomness 150 [Again – flexible values – season to taste]

Color Mode: Pick From Color Range

Choose a Rainbow like gradient from the Color Range (or create your own gradient).

Adjust the Scale and Scale Randomness to give some “depth” to the effect. [Actual values will depend on the size of your original shape.]

Make sure Play Frames and Random Start Frame are selected

As an option, increase Hold Frames Randomness to 2.0

You should end up with something like:

confetti-3

Which looks like fairly convincing confetti (the GIF is a low frame rate). All the particles appear to move in their own random motion due in large part to the random start frame in the original animation and due to the way behaviors affect objects vs. keyframes. There are no apparent “loop points” [end of sequence jumps to beginning of sequence].

 

Is this the only way to do this effect? No. It is just a method I prefer. Other options might include Random Motion simulation; Wind and Gravity are possibilities;  Randomize or Wriggle Parameter Behaviors on Rotation XYZ params, etc. or simply keyframing an animation and emitting it in this manner (although I wouldn’t recommend it).

 

The Apple Watch 3D Model that wasn’t released

 

Developed in August 2015 but never released.  Why? Apple never made the San Francisco system font available to other applications (system only) and the fonts are only available to those who have an Apple Developer account. Furthermore, developers could only use it for interface “mock ups” (although this model might qualify).  The Mickey Mouse watch face would have never been included because it  is © (and trademarked) by the Walt Disney Company… probably forever.

This model’s features:
built in clock display (which runs fast – it’s just a demo)
front “glass”
animatable position/rotation parameters
animatable dial/crown rotation
animatable button
drop zone w/Pan and Scale parameters
drop zone position and rotation parameters to animate turn effect
clock position and scale (in case of repairs!)
glass reflection intensity control

I developed a generator to go with this model:
https://www.youtube.com/watch?v=3dZ7560xcUc (dated Aug. 29th, 2015)
which is a frame accurate, settable and customizable watch.

The second half of this watch demo (the activity monitor) was another generator I created for the watch drop zone (also not released).

The state of this watch model/Motion template is in limbo.

I may develop the text font for this clock myself when (or if) I have the time as a substitute to the required version of San Francisco used in its making.

What makes me bring this topic up now is that there is a free Apple Watch Motion real 3D model recently released available on the FCP.co website here:
http://www.fcp.co/fcp-forum/templates/25572-the-watch-real-3d-2-0-motion-model#77888
(download link at the end of the post as “Attachment”)
by Pielle (his board username). As a nearly fanatical advocate for “real 3D” using Apple Motion I’d like to call it to your attention. It’s a beautifully done work and worth the download. I would caution you not to use Mickey, though, in any commercial work!

 

Pixar Textures – a must have for Motion 3D

PixarTextures-toMotionContent ⬅︎  Download this Zip file and unzip it in the Finder.

Type command-N to open a new Finder window.
Type command-shift-H to open your Home (user) folder.
Double click the Library folder (it’s available again in El Capitan!)
Navigate to Application Support > Motion > Library > Content.
Drag and drop the Pixar Textures folder into the Content folder. (You can trash the zip file sources.)

Restart Motion. Navigate to the Library tab > Content and you should find the Pixar Textures folder in the right column. Selecting the folder will open the collection, ordered by folder, in the content pane at the bottom.

Screen Shot 2016-05-11 at 12.39.51 PM

In the Test folder, you will find the NTSC color bars test pattern, and two Macbeth Color Checkers.

 

These are some of the finest textures you will find anywhere for use with Motion 3D Text. Each texture pattern comes with an image and a “bmp” (bump map) version as well as a “normal” version (new and improved bump map).  They are licensed under Creative Commons, available for personal or commercial use (attribution to “Pixar Animation Studios” required.) I am even allowed to transform and repackage these textures in this manner for use in Apple Motion.