Is it possible to replicate the Trim Path function of Adobe After Effects within Processing?

Contactician

Here are a few examples I made to demonstrate. Essentially, I'd like the ability to change the overall length of a stroke without altering the path itself, or barring that break an otherwise closed shape. After Effects allows this but I'm having a hard time figuring out the best method (or any method) to pull it off within Processing--especially given the mechanical belt/track examples, where the rectangles auto-rotate to orient along the path. Does any one know of a method, library or way to accomplish something like this?

prince_polka

for a given "simple" shape like a hexagon you could probably make some efficent function to find out its length or a point at a given length/ fraction of the whole length
but for an arbitrary path you'd have to drive through the path with an abstract speedometer
for example if you want to find the 10% mark you have to know the 100% length of the path first
you might be onto something, I had a vague idea of something like this and made some progress but didn't finnish it, there are useful resources for this but they're quite mathy and not straight-forward to use

Contactician

@prince_polka

Well the idea is just to supplement my animation/illustration and give myself a similar toolbox in Processing to what I already have in Adobe After Effects. I can get measurements of path length within Adobe Illustrator, or most precisely, export it as a dxf and dimension it within CAD software like SolidWorks. So I have access to all the math in terms of path length and coordinates for every vertex or dimensions for any specific radius, I just don't know how to actually go about animating something similar to the examples I've given within Processing itself. So far all I can accomplish is to send a 2D primitive along my path, but I'm unable to control the length of the stroke of that path.

If all else fails I can export pre-animated assets from After Effects using BodyMovin' as JSON files, but I'm trying to find a way to achieve the same Trim function/animation within Processing itself. Regardless, thanks for the answer! I'd also appreciate any links/resources you'd have, most of my vocabulary is still animation/illustration based and I have a hard time finding correct programming terminology of what I'm trying to do (my searches are typically bogged down with trim() for string inquiries or the like).

prince_polka

I have not used After Effects and didn't know it had this functionality.
I'll look into it and try to understand what you wan't and what could be helpful.
There is an example that comes with processing in file -> examples -> curves -> arclengthparametrization
It may or may not be relevant to you,

jeremydouglass

As far as I know nothing like After Effects "trim" exists in Processing, at least not natively. PShapes are not paths, and have no internally known length for a trim function to act on. Instead they are collections of segments -- lines, or curves which are collections of points and control points.

Calculating a location (%25, %50) along a list of segments is the hard part. Once you can do that, you can trim a segment list into a new list of whole and partial segments based on the beginning or end cut-points.

Here is an example of a simple function that takes a list of points (representing a line segment path) and returns a new list of points based (representing a partial path) on the progress amt 0-1.0.

PVector[] trimPath(float amt, PVector... vecs) {
  if (vecs.length==1 || amt>=1) { return vecs; }
  float unit = 1.0/(vecs.length-1);
  PVector midpoint = PVector.lerp(vecs[floor(amt / unit)], vecs[ceil(amt / unit)], amt%unit/unit);
  vecs = (PVector[])subset(vecs, 0, ceil(amt / unit));
  vecs = (PVector[])append(vecs, midpoint);
  return vecs;
}

It works something like lerp(), but for a list of objects, returning a subset list of complete line segments and appending a point interpolated with lerp() along the last final line segment. Once trimmed the list can then be re-rendered to lines or to a PShape each frame, producing a smooth animation.

Here is a demo with smoothly animating a path in both ways:

// TrimPath
// forum.processing.org/two/discussion/22579/is-it-possible-to-replicate-the-trim-path-function-of-adobe-after-effects-within-processing

PVector[] path;
PShape s;

void setup() {
  path = new PVector[7];
  // a hexagon
  path[0] = new PVector( - 5, -8.66);
  path[1] = new PVector(   5, -8.66);
  path[2] = new PVector(  10,  0);
  path[3] = new PVector(   5,  8.66);
  path[4] = new PVector( - 5,  8.66);
  path[5] = new PVector( -10,  0);
  path[6] = new PVector( -05, -8.66);
}

void draw(){
  background(192);
  scale(2);
  // progress timer 0.0->1.0
  float amt = (millis()%4000)/4000.0;
  // trim path based on timer
  PVector[] trimmed = trimPath(amt,path);
  // draw path as lines
  pathLines(trimmed, 10, 10);
  // or render path as PShape
  s = pathShape(trimmed);
  shape(s, width/3, height/3);
}

PVector[] trimPath(float amt, PVector... vecs) {
  if (vecs.length==1 || amt>=1) { return vecs; }
  float unit = 1.0/(vecs.length-1);
  PVector midpoint = PVector.lerp(vecs[floor(amt / unit)], vecs[ceil(amt / unit)], amt%unit/unit);
  vecs = (PVector[])subset(vecs, 0, ceil(amt / unit));
  vecs = (PVector[])append(vecs, midpoint);
  return vecs;
}

void pathLines(PVector[] vecs, float x, float y){
  pushMatrix();
  translate(x,y);
  for(int i=1;i<vecs.length;i++){
    line(vecs[i-1].x,vecs[i-1].y,vecs[i].x,vecs[i].y);
  }
  popMatrix();
}

PShape pathShape(PVector[] vecs){
  PShape s = createShape();
  s.beginShape();
  for(int i=0;i<vecs.length;i++){
    s.vertex(vecs[i].x, vecs[i].y);
  }
  s.endShape();
  return s;
}

Note that this is just a demo, it:

1. treats each line segment as if equal length for animation purposes.
2. only trims from the end, 0-100%, it does not trim from the beginning.
3. doesn't support anything but straight lines -- no curves of any type, or coordinated contours.

The first two shortcomings are easy to fix now that you have seen the principle. The third is a big project.

jeremydouglass

You might also be interested in:

• animating lines between points: https://forum.processing.org/two/discussion/comment/96281/#Comment_96281
• discussion of animated calligraphy strokes https://forum.processing.org/two/discussion/comment/87574/#Comment_87574
• discussion of PVector.lerp() https://forum.processing.org/two/discussion/21445/given-two-points-vectors-plot-a-3rd-so-all-three-can-be-bisected-by-a-straight-line