Adobe Illustrator blend tool in processing

Coton

Hi,

I'm trying to replicate the effect of the blend tool you can use in Adobe Illustrator in a processing script.

Is there a simple way to do this?

For those who are not familiar with the blend tool, it allows to create "steps" between 2 shapes that kinda shows the transformation from one to another:

Thanks.

Coton

Anyone?

amnon

There is no "simple way to do this". It depends very much on the shapes, the curves and for example the number of points. One important aspect is interpolation. There is a lineair interpolation method in processing, lerp(), but as said this is only one aspect of such a sketch.

When you search, you can use the terms "shape tween".

You might wanna check out this library: http://www.leebyron.com/else/shapetween/

Coton

Ok thanks for the answer amnon. Considering I don't have the same amount of points between the beginning and the end shape, and they are not moving in a linear way, this is gonna be too complicated to do I think.

koogs

but there's no reason you can't have 10 points at 36 degree intervals around your final circle.

that said, how are you defining the circle? with only 4 points? i think that assumes too much - the thing doing the drawing will need to know to draw a circle. better, perhaps, to define a 100-sided shape (say) as the target and a star with 100 points around its perimeter as its start (actually not easy). then just lerp between each pair (for both x and y).

Coton

Actually the ellipse/star was just an example, the real thing I'm trying to achieve would look more like this: the shape at the center has to be like that but the external curve can be different. Do you think I could set a number of points for the internal shape, and just lerp between them and their equivalent in the external shape?

Also, do you think there is a way I can increase the strokeWeight a little bit with every step?

koogs

yes and yes.

just have stroke weight as a float variable ('weight'?), call strokeWeight(weight); and increase it a bit every time.

Coton

Ok thank you very much koogs, I managed to get what I wanted. I actually used the lerp again:

int weight1 = 0;
int weight2 = 10;

float weight = lerp(weight1, weight2, i/steps);
  strokeWeight(weight);

The only issue I have with that solution is that when my "weight1" is = 0 it's the equivalent of strokeWeight=0 that processing renders the exact sam way as strokeWeight=1 Any idea to solve this?

GoToLoop

Perhaps start by 1 already? float weight = lerp(1.0, 10.0, i/steps); :-??

Coton

This would work but I actually want my first shape to be invisible. But I can't use strokeWeight as it won't work with the lerp.

GoToLoop

Perhaps something like this?:

if (weight < 1)  noStroke();
else             stroke(outlineColor);

Coton

Yes!

I was trying to figure out something like this but I'm a little slow sometimes... Thank you very much GoToLoop!