JMP ha integrato il supporto per percorsi simili a SVG che supportano le linee Bezier cubiche. A volte è necessario ottenere i punti sul percorso tra i punti dati. Questa demo mostra anche come utilizzare MouseTrap per interagire con un grafico.
// suppose you have a path with a closed-loop piece-wise cubic bezier
// and you want to get interpolated points from the path. Here's JSL...
path = [-7.22402559919283 10.6379612603778 1, // 1: move here
-7.26190136104688 13.4130874416846 0, // 0: slope leaving previous
-6.17119582605485 16.0776798987031 0, // 0: slope entering next
-4.00985906249844 17.407174886248 3, // 3: bezier
-1.84852229894202 18.7366698737928 0,
0.453266763468091 18.1024095275565 0,
2.83933945186436 17.2389336141132 3, // 3: bezier
5.22541214026063 16.3754577006699 0,
10.8233628318786 14.5173640316489 0,
11.2749197361991 10.5574301683737 3, // 3: bezier
11.7264766405196 6.59749630509847 0,
5.87042854142745 -4.16109998756125 0,
0 -3.5625 3, // 3: bezier
-5.87042854142745 -2.96390001243875 0,
-7.18614983733877 7.86283507907095 0,
-7.22402559919283 10.6379612603778 -3]; // -3: bezier, close. The is same as row 1 for a loop.
New Window( "Bézier",
gb = Graph Box( suppressaxes, <<BACKGROUNDCOLOR> 1, i - 1, N Rows( path ) - 1 ), 1 :: 2]; // 1st control point is next to last
// p1 is a data point, as is p4. p2 and p3 are control points.
p1 = path[i + 0, 1 :: 2];
Marker( Color State( "blue" ), {p1[1], p1[2]} ); // blue: original data
p2 = path[i + 1, 1 :: 2];
Marker( Color State( "yellow" ), {p2[1], p2[2]} ); // yellow: control
p3 = path[i + 2, 1 :: 2];
Marker( Color State( "yellow" ), {p3[1], p3[2]} ); // yellow: control
Pen Color( "yellow" );
Line Style( "dotted" );
Line( {p0[1], p0[2]}, {p1[1], p1[2]}, {p2[1], p2[2]} );
p4 = path[i + 3, 1 :: 2];
// from https://javascript.info/bezier-curve ********* nice demo! **********
P = (1 − t) ^ 3 * P1 + 3 * (1 − t) ^ 2 * t * P2 + 3 * (1 − t) * t ^ 2 * P3 + t ^ 3 * P4;
Marker( Color State( "red" ), {p[1], p[2]} ); // red: generated
)
);
Text Color( "white" );
Text( {-14, -7}, "There are 15 red points generated between blue points." );
Text( {-14, -8}, "The yellow control points create the smooth shape." );
Text( {-14, -9}, "Drag the yellow and blue points to get a different shape." );
Mousetrap( // simple-minded point dragging; doing this better means picking the closest, not first match;
For( i = 1, i <= N Rows( path ), i += 1, // you'll see it jump to a nearby point earlier in the path.
If( Sqrt( (x - path[i, 1]) ^ 2 + (y - path[i, 2]) ^ 2 ) < 1, //x,y are the magic mouse trap variables
path[i, 1] = x;
path[i, 2] = y;
If( i == 1, // handle repeated data point
i = N Rows( path );
path[i, 1] = x;
path[i, 2] = y;
);
Break(); // took the first match, might not be the best match
)
)
);
)
);</BACKGROUNDCOLOR>
5 original blue data points, 10 yellow control points, 15 red generated points between data points.5 original blue data points, 10 yellow control points, 15 red generated points between data points.5 original blue data points, 10 yellow control points, 15 red generated points between data points.5 original blue data points, 10 yellow control points, 15 red generated points between data points.5 punti dati blu originali, 10 punti di controllo gialli, 15 punti rossi generati tra i punti dati.
È interattivo solo se lo esegui. Vedere il sito Web menzionato nella JSL per una spiegazione visiva di Bezier.
