Is there a tutorial for rendering paths?

[Squeedilyspooch]

Adobe's documentation explains very little about this process. What is the easiest way to use a JS script to draw consective connected anchor points up to an arbitrary number?

[c.pfaffenbichler]

Please explain what you actually want to do. 

Creating Paths is possible in Photoshop via JavaScript both with DOM- and AM-code, how far have you gotten so far? 

[Squeedilyspooch]

My goal is to draw consecutive connect anchor points,

<more detail>
at exact locations, but not forming an overall closed shape, likely using a for or while loop. 

The documentation's provided example on this for V and cone is like 100 lines long and after copying and pasting it, I found it doesn't work. After adding extra spacing and indenting, it still didn't work, and of the few working examples somewhere online, they are exceptionally complicated for what should be a few lines of code at most. Even scripting just one path segment in photoshop is exceptionally more complicated than anything I have ever seen for that process in any other language and thus it is not deconstructed enough to explain how each individual step contributes to the process. I can render more complicated animations than that with half the JS code in other software.

Ideally it would be as simple as `add.point(<type>,<location>,<handle location 1>,<handle location 2>, connected=true)', but instead it takes 50 lines of code, maybe more.

[c.pfaffenbichler]

I find your explanation less than perfectly and your reproachful tone peculiar. 

No one is trying to make you use Photoshop if other applications offer superior performance. 

What are you trying to do really?  

Create Paths or Shape Layers, edit existing ones, …? 

What has all this to do with animation? 

What »V and cone« excamples are you talking about? 

I usually use a function to create Paths, quite possibly it could be shortened somewhat yet and made more efficient. 

var thePath = createPath2018([[[[123.946875,67.756875],[153.647014898625,67.756875],[94.246735101375,67.756875],true],[[177.72375,121.53375],[177.72375,151.233889898625],[177.72375,91.833610101375],true],
    [[123.946875,175.310625],[94.246735101375,175.310625],[153.647014898625,175.310625],true],[[70.17,121.53375],[70.17,91.833610101375],[70.17,151.233889898625],true],false,1097098272]], "aaa");
////// create a path from collectPathInfoFromDesc2012-array //////
function createPath2018(theArray, thePathsName) {
    var originalRulerUnits = app.preferences.rulerUnits;
    app.preferences.rulerUnits = Units.PIXELS;
    // thanks to xbytor;
    cTID = function(s) { return app.charIDToTypeID(s); };
    sTID = function(s) { return app.stringIDToTypeID(s); };
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Path'), cTID('WrPt'));
        desc1.putReference(sTID('null'), ref1);
        var list1 = new ActionList();
    for (var m = 0; m < theArray.length; m++) {
        var thisSubPath = theArray[m];
        var desc2 = new ActionDescriptor();
        desc2.putEnumerated(sTID('shapeOperation'), sTID('shapeOperation'), thisSubPath[thisSubPath.length - 1]);
        var list2 = new ActionList();
        var desc3 = new ActionDescriptor();
        desc3.putBoolean(cTID('Clsp'), thisSubPath[thisSubPath.length - 2]);
        var list3 = new ActionList();
    for (var n = 0; n < thisSubPath.length - 2; n++) {
        var thisPoint = thisSubPath[n];
        var desc4 = new ActionDescriptor();
        var desc5 = new ActionDescriptor();
        desc5.putUnitDouble(cTID('Hrzn'), cTID('#Rlt'), thisPoint[0][0]);
        desc5.putUnitDouble(cTID('Vrtc'), cTID('#Rlt'), thisPoint[0][1]);
        desc4.putObject(cTID('Anch'), cTID('Pnt '), desc5);
        var desc6 = new ActionDescriptor();
        desc6.putUnitDouble(cTID('Hrzn'), cTID('#Rlt'), thisPoint[1][0]);
        desc6.putUnitDouble(cTID('Vrtc'), cTID('#Rlt'), thisPoint[1][1]);
        desc4.putObject(cTID('Fwd '), cTID('Pnt '), desc6);
        var desc7 = new ActionDescriptor();
        desc7.putUnitDouble(cTID('Hrzn'), cTID('#Rlt'), thisPoint[2][0]);
        desc7.putUnitDouble(cTID('Vrtc'), cTID('#Rlt'), thisPoint[2][1]);
        desc4.putObject(cTID('Bwd '), cTID('Pnt '), desc7);
        desc4.putBoolean(cTID('Smoo'), thisPoint[3]);
        list3.putObject(cTID('Pthp'), desc4);
        };
        desc3.putList(cTID('Pts '), list3);
        list2.putObject(cTID('Sbpl'), desc3);
        desc2.putList(cTID('SbpL'), list2);
        list1.putObject(cTID('PaCm'), desc2);
        };
        desc1.putList(cTID('T   '), list1);
        executeAction(cTID('setd'), desc1, DialogModes.NO);
    // name work path;
    var desc30 = new ActionDescriptor();
    var ref6 = new ActionReference();
    var idPath = charIDToTypeID( "Path" );
    ref6.putClass( idPath );
    desc30.putReference( charIDToTypeID( "null" ), ref6 );
    var ref7 = new ActionReference();
    ref7.putProperty( idPath, charIDToTypeID( "WrPt" ) );
    desc30.putReference( charIDToTypeID( "From" ), ref7 );
    desc30.putString( charIDToTypeID( "Nm  " ), thePathsName );
    executeAction( charIDToTypeID( "Mk  " ), desc30, DialogModes.NO );
    /// get index;
    var ref = new ActionReference();
    ref.putProperty(stringIDToTypeID("property"), stringIDToTypeID("itemIndex"));
    ref.putEnumerated( charIDToTypeID("Path"), charIDToTypeID("Ordn"), charIDToTypeID("Trgt") );
    var pathDesc = executeActionGet(ref);
    var myPathItem = activeDocument.pathItems[pathDesc.getInteger(stringIDToTypeID("itemIndex")) - 1];
    app.preferences.rulerUnits = originalRulerUnits;
    return myPathItem
    };

[Squeedilyspooch]

You're coming across as extremely rude. As I said, all I'm trying to do at this point is draw a basic segment using JS, I don't care where the points are as long as the locations can be controlled, I'm just trying to get it to work at all. I had mentioned explicitly that the construction in the number of lines seemingly needed to do this is the problem in the communication of the documentation, but you have apparently ignored this out of some kind of spite as well.

[c.pfaffenbichler]

I have not ignored your complaint but euphemistically (and possibly too vaguelly) referred to it as »peculiar«. 

Anyway, you can wrap the code in a function that just takes an array of point-coordinates if that seems preferrable to you. 

»draw a basic segment using JS«

To me you still seem to be unclear; are you trying to create a Shape Layer, a Path, … or add points to an existing Path, …? 

»You're coming across as extremely rude.«

Feel free to report my post/s if you think they violate the Forum guidelines. 

[Squeedilyspooch]

>>Anyway, you can wrap the code in a function that just takes an array of point-coordinates if that seems preferrable to you.<<
Copying and pasting a random snipping of code, even if it worked successfully, does not explain how to interpret the documentation to draw paths for two segments in order to understand how to extend it to arbitrary numbers of segments.

>>To me you still seem to be unclear; are you trying to create a Shape Layer, a Path, … or add points to an existing Path, …? <<

Learning how to add consecutive connected anchor points is the goal. Not appending a path, I'm not sure what I said to indicate that, just generating the points to form a path and that's it. As you know, these points can form either a closed shape or a connected path or even a series of isolated points, but to start, it is preferrable to focus on only a single segment though ultimately it is irrelevent which example one uses as one can utilize an arbitrary number of points with any of these cases.

[c.pfaffenbichler]

Try the DOM-code below, it creates two paths. 

Maybe it can help illustrate how you can add PathPoints to a SubPathItem, in this case by adding Arrays of Arrays of coordinates. 

var thePath = createPath ([[[[0,0]], [[100,100]],false,ShapeOperation.SHAPEADD]], "aaa");
var thePath = createPath ([[[[50,50]], [[200,100]], [[300,400]],false,ShapeOperation.SHAPEADD]], "bbb");
////// function to create path from array with one array per point that holds anchor, leftdirection, etc, 2010 //////
function createPath (theArray, thePathsName) {
    var originalRulerUnits = app.preferences.rulerUnits;
    app.preferences.rulerUnits = Units.POINTS;
    lineSubPathArray = new Array ();
    if (theArray[theArray.length - 1].constructor != Array) {var numberOfSubPathItems = theArray.length - 1}
    else {var numberOfSubPathItems = theArray.length};
    for (var b = 0; b < numberOfSubPathItems; b++) {
        var lineArray = new Array ();
        for (c = 0; c < (theArray[b].length - 2); c++) {
            lineArray[c] = new PathPointInfo;
            if (!theArray[b][c][3]) {lineArray[c].kind = PointKind.CORNERPOINT}
            else {lineArray[c].kind = theArray[b][c][3]};
            lineArray[c].anchor = theArray[b][c][0];
            if (!theArray[b][c][1]) {lineArray[c].leftDirection = theArray[b][c][0]}
            else {lineArray[c].leftDirection = theArray[b][c][1]};
            if (!theArray[b][c][2]) {lineArray[c].rightDirection = theArray[b][c][0]}
            else {lineArray[c].rightDirection = theArray[b][c][2]};	
            };
        lineSubPathArray[b] = new SubPathInfo();
        lineSubPathArray[b].closed = theArray[b][theArray[b].length - 2];
        lineSubPathArray[b].operation = theArray[b][theArray[b].length - 1];
        lineSubPathArray[b].entireSubPath = lineArray;
        };
    var myPathItem = app.activeDocument.pathItems.add(thePathsName, lineSubPathArray);
    app.preferences.rulerUnits = originalRulerUnits;
    return myPathItem
    };

[c.pfaffenbichler]

Maybe you should just post the code you have so far and that doesn’t work yet so we can try trouble-shooting that. 

Where exactly did you get it from? 

[Jef Bracke]

There's something happening with OP's first post... He wrote a lot more than is posted here... (screenshot attached)
What I received in my mail vs. OP's first post here is different. Right?

OP could confirm? The one I found (in the mail, not visible on the forum afaik) is this one from SO:

How to create a path that matches page bounds with Photoshop javascript?

It leads to ±50 lines of code that give a basic framework to make vector SHAPEs, there is an issue with this code in that it doesn't take into account dpi. So any document not set to 72dpi will render the paths in an unexpected way.

[Squeedilyspooch]

Yeah I wrote that and then I thought posting a link and delving too deep into the  methods of coding right away might be distracting from the issue of learning how to work with basic examples because it code in the link has a similar problem in being convoluted. The code in the link in of itself is not realated to the issue of a lack of educational resources on scripting generated anchor (or other path) points, just a possibly working example someone else could play around with to confirm that it is possible, since the code I used in the official documentation didn't work. Although I don't find it weird considering the system already allows one to make edits.

[Squeedilyspooch]

>>Maybe you should just post the code you have so far and that doesn’t work yet so we can try trouble-shooting that. <<
There is no code to post except maybe what is in the documentation because the problem itself arises in the failure of the documentation to communicate this process clearly in order to even construct any code to begin with.

>>Where exactly did you get it from<<

As far as what I know, the overall tool I am trying to use starts on page 140 of Adobe's official documentation on using JavaScript in Photoshop:

Adobe Photoshop CC JavaScript Reference

[Jef Bracke]

Then to answer your question, the PathItem sample script is the simplest way to add paths in Photoshop.

- Improvements can be made by wrapping some of the re-used functionality in "classes" but this will depend entirely on your personal needs.

- You could wrap the first 9 lines in a setPreferences function, you could make a wrapper class for PathPoint that has a constructor that lets you set all it's properties in one line. that will replace about 25 lines of the sample script with 10 lines to make the class.

- Notice that the icecream curve script sample is a bit more complex because it shows you how to treat the points as bezier curves rather than simple dots connected by straight lines.

Have you tried running the sample script to see what is does?

[Squeedilyspooch]

It makes like a 3/4 circle, but as I said, the issue is in the communication of the code, it's not a simple matter of just throwig 100 lines at someone. Untimately copying and pasting that does nothing to show how to adapt anything in the documentation to other circumstances. Bezier curves would be nicer I anticipate, but I didn't see it in the documentation.

[Jef Bracke]

In the ice cream curve sample... The lines circled in green together form a bezier control point as part of a curve. You can build cars with Bézier curve. 🙂

For the code inside the green circle above, imagine you modify the (100, 50) to 175, 50) what do you think will happen? The fastest answer to that question is simply changing that number and relaunching the script is it not? If/when you've done that, you could also explore the 2 kinds of point. What if you change PointKind.CORNERPOINT to PointKind.SMOOTHPOINT... What happens then? Play around... Have fun.

Out of interest, how would you normally approach learning new functionality?

[Squeedilyspooch]

"setPreferences" isn't in the documentation that I saw, so I can't say what you meant by that.

As for the green circle, the problem is you need the variable defined above it for it to have any context, but the variable itself only has any context becuause it's specifically in reference to the preceeding code as some component of the path which is then used to connect to a later component of the path. In order to learn from code, you need to be be able to see where to break it down which is why Python works well, but here, you can't break it into individual components to "play around" because all the components are codependent on each other. I keep trying to tell you that just copying and pasting these convoluted scripts doesn't provide an understanding of anything but for some reason you just won't listen.

Where I would prefer to start is just a basic segment. In almost all functions, you start with the most basic examples first and build from there. In fact, because of the convolution, it likely wouldn't be prudent to start with a segment, rather just "a point".

What does it take to script just one single non-handle path point in Photoshop? Then if that works, we move on to two points, three points, then connect them, then smooth a single point, then smooth the rest of the points with handles in a gradual process, that's the way the documentation should have been structured.

[Squeedilyspooch]

Someone deleted my post for no reason so now I have to post again.

This particular script does not help in this endeavor. I keep trying to tell you that copying and pasting convoluted script doesn't help, but for some reason you refuse to listen.

All the components of this code are codependent on each other, you can't break it down into an arbitrary section to "play around" with because then that component can't be successfully compiled and the rest of the script falls apart. Because of the poorly structured documentation, it is also not clear where to demark truncasions in the code to begin with.

As I said and as you condescendingly neglected, what I would prefer in learning functionality is starting with a basic example. This is how nearly all new functionality of any kind in any context is learned by anyone anywhere in the world over the course of all human civilization, so I would appreciate if you didn't act condescending. 

Because of the unexpected convolution of the components, where I would prefer to start at this point is just a single path point, without bezier handles. That's it. What does it take to script just a single path point? If that can be successfully established, then there is a basis to move into generating multiple points, then connecting them, then smoothing them. That is how the documentation should have been structured.

[c.pfaffenbichler]

Your attitude and conduct seem unfortunate to me. 

Here is a piece of code that will create a path with only one point, maybe that can help clarify the structure of SubPathItems and PathPoints. 

var lineSubPathArray = new Array ();
var lineArray = new Array ();
lineArray[0] = new PathPointInfo;
lineArray[0].kind = PointKind.CORNERPOINT;
lineArray[0].anchor = [100,100];
lineArray[0].leftDirection = [100,100];
lineArray[0].rightDirection = [100,100];
lineSubPathArray[0] = new SubPathInfo();
lineSubPathArray[0].closed = true;
lineSubPathArray[0].operation = ShapeOperation.SHAPEADD;
lineSubPathArray[0].entireSubPath = lineArray;
var myPathItem = app.activeDocument.pathItems.add("123456", lineSubPathArray);

[Jef Bracke]

Apologies if you feel condescended to, that was not the intent.

Anywhoozle, lastly: this is the code for 1 single vector point, no extra's no fancy stuff. As simple as I could get it. Removing a line will cause it to break. Tried & tested...

var pointArray = new Array();
pointArray[0] = new PathPointInfo;
pointArray[0].kind = PointKind.CORNERPOINT;
pointArray[0].anchor = Array(100, 100);
pointArray[0].leftDirection = pointArray[0].anchor;
pointArray[0].rightDirection = pointArray[0].anchor;

var pointSubPathArray = new Array();
pointSubPathArray[0] = new SubPathInfo();
pointSubPathArray[0].operation = ShapeOperation.SHAPEXOR;
pointSubPathArray[0].closed = false;
pointSubPathArray[0].entireSubPath = pointArray;

//create the path item
var myPathItem = app.activeDocument.pathItems.add("A Point", pointSubPathArray);

I do sincerely hope this last bit of code helps you get started. Also, I'm done; I don't need more abuse from you. Micdrop.

[Squeedilyspooch]

It's incredibly insulting not just to myself but to many people that what you call "abuse" is your own choice to harass someone on some internet thread after continuously ignoring what was requested after it was repeatedly explained, it's exceptionally unprofessional and exactly what I predicted when the support agent asked if I could post here. I continuously made the effort to work with you, but even in the instance of trying to provide the most basic example, you couldn't help yourself from being insulting.

[c.pfaffenbichler]

If you are complaining about the documentation you linked to: 

It’s called »photoshop-javascript-ref-2020.pdf«, not »an easy introduction to photoshop scripting for beginners« so a complaint would seem less than justified. 

And if you don’t follow the text and

»would prefer in learning functionality is starting with a basic example«

you have been provided with such basic example code. 

[r-bin]

Photoshop does not allow adding a point to the path.
You can only add the entire path.
This can be seen in the Actions panel. You cannot add points. You can only add the whole path in one go.

If you need to add a new point to an existing path, you will have to recreate all its points by adding or removing the necessary ones.

You can also experiment with ToolRecording.
An example of a penTool click can be found here.

Photoshop Script to continue work path

Pen (x, y) function.

[Squeedilyspooch]

Needing to add the whole path would explain more of the number of lines it takes and puts a limitation on automated options. Thank you for pointing that out, I have recorded actions before but I had never come across the tool recording option, I'll give it a try.

The ToolRecording options can be exported in JavaScript as effectively as any other recorded action correct? Because I noticed that the recording also matched the order in which each stroke was created and that each stroke was created continuously over time. In the general case, there could be a setting that needs to be adjusted but which causes each stroke to take 10 years to render (extreme example but you see what could go wrong), so it is important to know how the time/frame encoding changes as opposed to a regular action.

[r-bin]

What is the problem?
Draw all the path at once.

Is this a long code?

var p0 = new Array();

push_point(p0, "CORNERPOINT", [10,20]);  
push_point(p0, "CORNERPOINT", [100,110]);  
push_point(p0, "SMOOTHPOINT", [200,270], [100,100], [120,120]);  
push_point(p0, "CORNERPOINT", [10,200]);  

// and so on;

var pth = new Array();

// this example uses only one subpath, namely [0] 

pth[0] = new SubPathInfo(); 
pth[0].operation = ShapeOperation.SHAPEADD;
pth[0].closed = true;
pth[0].entireSubPath = p0;

activeDocument.pathItems.add("Path 1234", pth);

/////////////////////////////////////////////////////////////////////
function push_point(points, kind, anchor, left, right)  
    {
    try {
        var p = new PathPointInfo;

        p.kind = PointKind[kind];  
        p.anchor = anchor;
        p.leftDirection  = left?left:anchor;
        p.rightDirection = right?right:anchor;

        points.push(p);
        }
    catch (e) { alert(e); throw(e); }
    }

[Squeedilyspooch]

Sorry for the inconvenience of having to be notified of reposts, someone is abusing the report spam system troll me, which is further evidence of what I pointed out before and which I notified a moderator of.

It's long when there's absolutely no simpler place to start from. When you make a for loop, you can start with just a single loop that prints integers. Easy to understand that and build from it. Here, this is more like starting from several recursions nested in several loops.

For instance, I tried just scripting

var p0 = new Array();

push_point(p0, "CORNERPOINT", [10,20]);  
push_point(p0, "CORNERPOINT", [100,110]);  
push_point(p0, "SMOOTHPOINT", [200,270], [100,100], [120,120]);  
push_point(p0, "CORNERPOINT", [10,200]);

and it couldn't compile, so there's no real way for me to tell what's going on in this segment. 

It looks like what it should do is draw 4 points at 4 different pixel locations, but when I try rendering it, it doesn't, so I can't tell what it's actually contributing to the code.

So then I tried scripting

var p0 = new Array();

push_point(p0, "CORNERPOINT", [10,20]);  
push_point(p0, "CORNERPOINT", [100,110]);  
push_point(p0, "SMOOTHPOINT", [200,270], [100,100], [120,120]);  
push_point(p0, "CORNERPOINT", [10,200]);  

// and so on;

var pth = new Array();

// this example uses only one subpath, namely [0] 

pth[0] = new SubPathInfo(); 
pth[0].operation = ShapeOperation.SHAPEADD;
pth[0].closed = true;
pth[0].entireSubPath = p0;

activeDocument.pathItems.add("Path 1234", pth);

and it still didn't compile, so again, I can't even see what this more general section of code contributes.

Then all of a sudden you start using the push function which is different than the preceeding examples, so I would guess that photoshop is interpreting the positions of the points as some kind of array and somehow you're changing the index of those points or adding to it. But, because there's lots of other information, it might not be even that simple just the coordinates, the array could contain both coordinates and strings that define conditions like "closed" or "left/right" for which push might have been specially hard-coded to account for.