adobe illustrator - How to create a vector curve programmatically?

I want to create a vector curve that is symmetric in the top and the bottom. For example, in this baseball icon (How to draw a baseball in Pixelmator?), if I try to write the vector as suggested by the accepted answer, I end up in writing the vector curve by hand - which means the curve can never be symmetrical between the top and the bottom.

So I want to create the vector curve programmatically, such as specifying the starting and ending point of the vector and then specifying the middle point of the vector and also specifying the degree of the curve, in order to create a tidy curve. I don't like to create the curve by hand, since no matter what I did, it looked pretty awful.

So is it possible to create the tidy curve by specifying some numbers? I don't mind what apps I have to use among Affinity Designer, Pixelmator, Sketch 3, or Illustrator CC, as long as it can be done programmatically (the linked post is designed by Pixelmator, FYI).

Answer

This question contains two separate issues,

• how to do things programmatically and


• how do you model precise shapes.

For all intents and purposes these are unrelated. Seems to me that the only reason you ask the first question is because you are not aware of how to precisely position items within the GUI, but I may be wrong. I will be demonstrating Adobe Illustrator because that's what i have at hand.

Precise Position with GUI Tools

The first way to precisely position things is to use a grid, and grid snap. This is a GUI equivalent concept to using only x digits of precision while typing values. When you reduce where you can position points its more likely that you can replicate positioning elsewhere. Symmetrical handle positioning lead to symmetrical results.

Image 1: Snapping to grid makes positioning predictable.

Another way would be to draw exactly half of your shape and use the mirror tool to produce the symmetrical half. Yet another way to do this is to use a small curve as a protractor and then snap to its points. So you see there are many options to do this without bothering to go to the script layer.

Programmatic Positioning Using Adobe ExtendScript

Adobe provides a platform agnostic javaScript implementation called ExtendScript. A script to mimic what was done by hand would look as follows:

#target illustrator


var doc = app.activeDocument;
var pathItem = doc.pathItems.add();

pts = [[0,0], [5,0], [5,5], [0,5]]

// match units of drawn document
// convert points to 2 * mm
for(var i=0; i< pts.length; i++) {
    for(var j=0; j< pts[i].length; j++) {
        pts[i][j] *= 2 * 2.83464567;

    }
}

var point1 = pathItem.pathPoints.add();
point1.anchor = pts[0];
point1.leftDirection = point1.anchor;
point1.rightDirection = pts[1];

var point2 = pathItem.pathPoints.add();
point2.anchor = pts[3];

point2.leftDirection = pts[2];
point2.rightDirection = point2.anchor;

pathItem.stroke = true;
pathItem.fill = false;

Just paste this into extendscript toolkit to test, or put in a .jsx file

Programmatic Positioning Using Files (Postscript)

Sometimes you want to use a arbitrary program to generate vector drawings. The sane choices for output formats that can do this are:

• PS/EPS, (Encapsulated) PostScript


• PDF, Portable Document Format


• SVG, Scalable Vector Graphics


• DXF, Drawing eXhange Format


• EMF, Enhanced Metafile

Of these formats EPS and DXF are least convolved. SVG is also a good choice but a bit overly verbose, and still as cryptic as PDF drawing layers. PDF is also possible to generate but unless you have a drawing API it is extra work (Like QT or Cairo, but its by no means hard just a bit convoluted). I use EPS because i need to write EPS sometimes by hand so its familiar to me.

Drawing the above shape in a EPS file would look as follows:

%!PS-Adobe-3.0 EPSF-3.0
%%BoundingBox: 0 0 40 40

%%Title: Graph Drawing
%%Creator: Janne Ojala
%%CreationDate:  2013-03-23
%%EndComments

% optional stuff to get 
% same scale as my settings
    /mm {2.83464567 mul} def 
    2 mm dup scale % 1 unit = 2 mm 
    1 2 mm div setlinewidth  

    1 1 translate  % offset 
% end optional

newpath
0 0 moveto
5 0  5 5  0 5 curveto 
stroke

%%EOF

Where the first sections first line is obligatory as well as the last %%EOF. The meat of the drawing is done with moveto and curve to where the number pairs are the 4 control points. Just put this in a text file with a .eps extension and use normally.

Results

Comparing solutions you can see that the javaScript approach is a quite cumbersome compared to the alternatives.

Image 2: Comparasion between the hand drawn (in red), javaScript (in green) and EPS curve (black)

For more resources read:

---

TL;DR

Yes, you can programmatically make a curve. Precision however does not require this. This post contains 2 approaches for programmable acess, and one discussion on how to do the same thing in the GUI.