StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<ul> <li><p>Instead of adding segments to a path, I find it easier create a path out of two segments and move the last segment per frame. If you create a new <code>Point</code> from the difference of your end and start <code>Points</code>, you can easily calculate the position per frame based on your time-duration.</p></li> <li><p>As for an arc, it's easier to create a new one every frame. The <code>Path.Arc(from, through, to)</code> format works well here. Just rotate clones of your start <code>point</code> about your center <code>point</code> by <code>percent_completed / 2 * numberOfDegrees</code> and <code>percent_completed * numberOfDegrees</code> to get the <code>through</code> and <code>to</code> values per frame. If you want to create a full circle, make sure <code>numberOfDegrees</code> is slightly greater than 360. Otherwise <code>Arc()</code> may not find a proper solution.</p></li> <li><p>Your time-based percentage method works fine, but you need to account for when <code>percent_completed</code> ends too far before 1.</p></li> <li><p>If you want to do easing, modify <code>percent_completed</code> by an appropriate function. Search around for 'sigmoid easing'. For example:</p> <p><code>percent_completed = Math.pow(percent_completed, .5);</code></p> <p>This can be as intricate as you want to make it.</p></li> <li><p>Rather than check a boolean every frame, attach an <code>onFrame</code> handler on setup, and remove the handler when complete. See <a href="https://stackoverflow.com/questions/19788760/event-handlers-in-paper-js/19797161">this question</a> for more details.</p></li> <li><p>If you're using <code>paperscript</code> notation, you don't need to add the <code>paper</code> prefix to constructors.</p></li> <li><p>I'm not sure why you're including jQuery functions inside your paperscript either.</p></li> </ul> <p><a href="http://jsfiddle.net/3JS29/4/" rel="nofollow noreferrer">Here's a jsFiddle demonstration.</a></p>

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