StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Since you are running the for-loop on every frame, you're re-creating the same line segments over and over, all at once. Instead, you need to add one segment per frame:</p> <pre><code>// Create a Paper.js Path to draw a line into it: var path = new Path(); // Give the stroke a color path.strokeColor = 'black'; var start = new Point(100, 100); // Move to start and draw a line from there // path.moveTo(start); // Note the plus operator on Point objects. // PaperScript does that for us, and much more! function onFrame(event) { // Your animation code goes in here if (event.count < 101) { path.add(start); start += new Point(1, 1); } } </code></pre> <p>The if statement serves as a limit for the line's length.</p> <p>Also note that the path.moveTo(start) command does not mean anything if your path does not yet have any segments.</p> <p>If you don't want to add points every frame, but only change the length of a line, simply change the position of one of the segments. First create add two segments to your path, then change the position of the second segment's point per frame event:</p> <pre><code>// Create a Paper.js Path to draw a line into it: var path = new Path(); // Give the stroke a color path.strokeColor = 'black'; path.add(new Point(100, 100)); path.add(new Point(100, 100)); // Move to start and draw a line from there // path.moveTo(start); // Note the plus operator on Point objects. // PaperScript does that for us, and much more! function onFrame(event) { // Your animation code goes in here if (event.count < 101) { path.segments[1].point += new Point(1, 1); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload