Page 1 of 1

Blend Morphs in Processing

Posted: Sun Jan 08, 2012 4:00 pm
by Steverino
I've been fooling around with the programming language Processing, and made a little sketch that borrows the Blend Morph concept from Anime Studio. See it here:

http://www.openprocessing.org/visuals/?visualID=49033

EDIT:
I made three more: The Orb, Clown Puppet, and Talking Robot:

http://www.openprocessing.org/portal/?userID=15665

Posted: Sun Jan 08, 2012 8:36 pm
by JaMike
Cool!

Almost makes me want to take up programming!

Posted: Mon Jan 09, 2012 12:48 am
by Steverino
Thanks! It's easier in ASP, though.

Posted: Mon Jan 09, 2012 3:25 am
by patricia3d
Its great.
Please give a tutorial how have you done it.

Posted: Mon Jan 09, 2012 7:55 pm
by Steverino
The tool I used to locate the points is just a step above graph paper. If I can make it easier to use, I will make a tutorial.

Meanwhile, the source code is there to learn from. The tricky part is in the map() command within curveVertex(). Each curveVertex() function represents one point on a closed curve. Let's say it's the left corner of the character's left eye.

curveVertex(130,93) would locate that point 130 pixels over and 93 pixels down. But the point would not move. Just looking at the left/right number, 130, we want the corner of her eye to be 120 pixels over when she's looking left, and 140 pixels over when she's looking right.

In the following line:

curveVertex(map(x,0,width,120,140), map(y,0,height,82,104));

Let's isolate the first map() function:

map(x,0,width,120,140)

This sets the current x (left/right) location of this particular vertex within a range of 120 and 140 pixels. It breaks down like so:

x -- current x location of the bug, in pixels
0 -- the low value of the bug's range
width -- the high value of the bug's range, in this case 400 pixels
120 -- the low value in this vertex's left/right travel range
140 -- the high value in this vertex's left/right travel range

map() uses the bug's location within the bug's range to set the vertex to a proportional location within the vertex's range.

The second map() function sets the value for the vertex's y (up/down) location.

So basically each point in each shape slides around within its own range depending on where the bug is, and that makes the facial features slide around too.

Posted: Mon Jan 09, 2012 11:25 pm
by JaMike
You're right, it's easier in ASP! :D

Thanks for the effort at explaining, but I now know for sure that I don't want to be a programmer! :)

Posted: Thu Jan 12, 2012 7:05 am
by Steverino
@JaMike - No-o-o-o-oooooooooo! Programming is fun!

Okay, ignore the gibberish in my previous post. I've made a tool/tutorial combination that turns Blend Morph programming into a matter of tracing and pasting! Get it here:

http://www.stevetiffany.com/zips/BlendMorphTutorial.zip

Requires Processing, which is free here:
http://www.processing.org