bezierCurve() function help

General Discussion Other

georgerol..

in General Discussion • Other • 4 months ago

On p. 77 of Reas and Fry Processing a Programming Handbook for Artists and Designers, it is suggested to draw a shape in a structured drawing program such as Illustrator, then translate the coordinates of the vertices and control points into Processing code. I have tried to understand how to do this, but I can never get the figure I'm shooting for. Here is a diagram of my Illustrator vector shape with the vertices in green and the control points in red. Ignoring my "V1, C1, etc. labels, would someone who knows how to do this show me how to code for this shape in Processing?

Thanks is advance,

George

15" MacBook Pro, 2.4GHz Intel Core i5, OS X v.10.8.3 Mountain Lion,
QuickTime Player v.10.2, Processing v. 1.5.1 and v.2.0b8, Arduino Uno, Nano v.3.

Replies(2)

allonestr..

Re: bezierCurve() function help

4 months ago

You've asked this in programming questions, so we'd like to see some code.

I had a little play - made a blob in Illustrator and exported in as an SVG - did you get this far?

Then I googled "SVG format" and picked apart the output. I didn't go any further but am happy to do so if this is what you're trying to do.

kooogy

Re: bezierCurve() function help

4 months ago

you have 3 beziers there - v1 to v2, v2 to v3, v3 to v1.

taking the first you can use:

bezier(
400, 80, // v1
500, 600, // c2
657, 193, // unlabelled
600, 360 // v2
);

and similar for the other two

alternatively, doing them all together:

beginShape();
vertex(400, 80); // v1
bezierVertex(500, 600, 657, 193, 600, 360); // c2, c?, v2
bezierVertex(543, 527, 237, 650, 160, 520); // c3, c?, v3
bezierVertex(83, 390, 250, 110, 400, 80); // c4, c?, v1
endShape();

Top Reply