Morphing Letters?

superflea's picture

Hi all,

I'm trying to find a way to morph 2d text (as an image from string element) from one font to another. I need to be able to set stages with either a slider or a value and the morphing needs to be very smooth. Essentially I just want to be able to display the letter and achieve a blend of two or more different fonts through a slider.

I tried a few things, like using a 3d mesh blend with a plane generator as object and two different images, but for some reason when the object morphs the image is stuck on the first, the second doesn't appear. Apart from that I'm out of ideas and suggestions would be appreciated.

Please note that I can't code GLSL or openCL shader and things like that, so I realise there is probably a more advanced way to do this in QC but it's way out of my league. Thank you for your time.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

toneburst's picture
Re: Morphing Letters?

Hmm.... I don't think there's any easy way of doing this in QC, to be honest. To do a proper morph between the two fonts, you'd need to work with the paths in vector format. QC doesn't really have any vector tools (though it is something that's been kicked around as an idea for a while now).

Sorry to be discouraging.

a|x

usefuldesign.au's picture
Re: Morphing Letters?

Yeah, like toneburst said, Blending Paths in Illustrator would be one way to get the intermediate shapes. Blends are pretty tricky if the start and end paths are significantly different too — so no guarantees there.

You could then import an .ai file and divide it into segments to isolate each step of the blend with the crop patch and feed that into a queue patch. Then you'd have a structure of the morph steps.

Other than that it sounds like a Core Image Filter task. I've thought about attempting this kind of thing in Core Image before but it's too advanced a task for me ATM.

superflea's picture
Re: Morphing Letters?

Thanks for the reply, luckily this was just a personal project so not a huge deal. I'll see if I can get Nodebox 2 to do something like that. Sometimes I wish I could just take QC and Nodebox 2 and magically mash them together!

toneburst's picture
Re: Morphing Letters?

I know what you mean. Nodebox's vector support is definitely something that would benefit QC massively. It's something I always thought I'd tackle with a set of Custom Patches when I learnt Objective-C. Somehow never got around to that though, sadly... :(

a|x

fdb's picture
Re: Morphing Letters?

Hi,

I'm one of the people making NodeBox 2. We would love to "mash" the two together, somehow. We're having an internal meeting about this topic next week, and I hope to be able to work towards that goal in the future.

In the meantime, we're keeping our eyes open towards advances in Quartz Composer (and other node-based systems, of course) and looking at possibilities to integrate the two.

All the best,

Frederik

superflea's picture
Re: Morphing Letters?

Wow, great to see someone from the Nodebox team around these parts, Frederik. This is obviously fantastic news.

I think the two programs could complement each other very well, even if you just decide to implement some approaches From QC into Nodebox and vice-versa. I miss having more QC-like inputs and outputs when I'm in Nodebox, and I miss vector work elements in QC, so by all means mash!

Node-based systems FTW!

fdb's picture
Re: Morphing Letters?

This is a hard problem since the number of points of two fonts can be different, and even aligned differently.

I don't know how to do this in Quartz Composer (since it has no support for vector data) but here's my approach using NodeBox 2 (including source code):

http://beta.nodebox.net/morphing-between-fonts

All the best,

Frederik

toneburst's picture
Re: Morphing Letters?

I've been thinking about that (the different points thing). You'd need to resample the curves so each letter had the same number of points, I guess. Dunno how you'd deal with internal points though (ie ones that defined the inside of a D, for example)....

Maybe your nodebox script does that, Frederik (can't check right now, unfortunately).

a|x

sbn..'s picture
Re: Morphing Letters?

Me neither. The Nodebox beta domain doesn't want to speak to me, but from Google's cache I can see that it already has some provisions for running as a python module or from a console. Not sure if that's version one or two though.

So, long story short, it looks like it should be possible for a determined hacker to bridge to it from QC, either remote controlling or building it in to a patch. Don't know how performance would be, but would be cool.

Scratchpole's picture
Re: Morphing Letters?

In the mean time you could do it with 3D models. Start with a font (Wings3D is free and plays with TrueType fonts), build model: copy model: change shapes into style of second font being careful to keep the same number of vertex and then use the k3d object blend. tadaa.

Still, would be great to see some Nodebox vector love shared with QC.

fdb's picture
Re: Morphing Letters?

The NodeBox script actually resamples the letters. You have to make sure the number of contours match up, though. Anyway, it's all detailed in the blog post. I don't see why it won't work.

Here's the link again, including screenshots and movies of the process:

http://beta.nodebox.net/morphing-between-fonts

sbn..'s picture
Re: Morphing Letters?

Or you could have the nodebox script do it, then export the resampled letter at each endpoint (that is, font1 & font2 with same number / order of verts). Export a 3D format, or have Blender convert to obj (There's a handy "keep vert order" switch in there).

Then, use k3d like you describe.

rinboku's picture
Re: Morphing Letters?

Hello! Please refer.

Morphing Letters Test from RINBOKU on Vimeo.

cybero's picture
Re: Morphing Letters?

Cool looking clip, rinboku, BTW is it just me or does anyone else get some grief with vimeo in Safari HTML 5 or Flash Player regardless, played just fine in Firefox but stuttered to black empty space in Safari ?

Scratchpole's picture
Re: Morphing Letters?

Strange that vid shows here as private but it's not is it? Are you going to share your genius Rinboku?

Having problems with the HD version of my latest Vimeo upload on my G5 in Firefox and Safari but plays fine on MBP. (Not that strange really the original only gets 12-15 fps in QT!)

leegrosbauer's picture
Re: Morphing Letters?

The video seems to be available for viewing in it's placement in the Vimeo Quartz Composer Group pages, but not available for viewing (marked as private) at it's primary placement at Rinboku's account.

Regardless, for me it won't play at all in HTML5 on Safari 4.0.5. Flash works, however. Very attractive. Nice work!

rinboku's picture
Re: Morphing Letters?

Sorry! I changed setting.

sbn..'s picture
Re: Morphing Letters?

Looks great! I especially like the easing. Gives it a more physical feel.

usefuldesign.au's picture
Re: Morphing Letters?

I couldn't resist getting behind in my work to have a go at this today. Something I've kinda wanted to try for a while anyhow. I did the morphing with the Blend tool in Illustrator. The U->U from one font to another worked instantly — despite the non-same anchor point counts. So did the whole words: Useful & Design.

The U->D in same font required me doing some intermediate steps until I had two paths to make the donut shape that is the letter D. Gave it same number of anchors for good measure. So it took a bit longer. From there it blended perfectly to 'D'.

I didn't bother making structures of the frames like I thought I would. I just change the cropping dimensions with interpolation at render time and it's super fast even on my dualG5. I import the AI file into QC (with PDF data included). It's basically a grid of the morphs step by step. A macro works out the dimensions of the pieces and feeds the numbers to morphing macro.





Morphology from wideEyedPupil on Vimeo.