Drawning animation in paper.js from array of points

Question

I have been sitting on it for quite long as i can not figure out how to draw animation of the line from array of points using paper.js.

I checked this answer Using PaperJs to Animate the Drawing of a Line but it does not solve my problem.

Here is what i got: https://jsfiddle.net/7c24mn3e/31/

var arr =["{ x: 62.43993, y: 293.64093 }","{ x: 66.91065, y: 284.70636 }","{ x: 70.39826, y: 275.35595 }","{ x: 72.84928, y: 265.67157 }","{ x: 74.52471, y: 255.81883 }","{ x: 75.86372, y: 245.90888 }","{ x: 77.20274, y: 235.99894 }","{ x: 78.38594, y: 226.07042 }","{ x: 79.39874, y: 216.12185 }","{ x: 81.39225, y: 206.37537 }","{ x: 84.28514, y: 196.80348 }","{ x: 86.81829, y: 187.13349 }","{ x: 89.96158, y: 177.68514 }","{ x: 92.96133, y: 168.20555 }","{ x: 95.95388, y: 158.72282 }","{ x: 99.81414, y: 149.49923 }","{ x: 102.8285, y: 139.99296 }","{ x: 105.4176, y: 130.33823 }","{ x: 107.39859, y: 120.57821 }","{ x: 108.44634, y: 110.63337 }","{ x: 108.97722, y: 100.65855 }","{ x: 113.50928, y: 97.83496 }","{ x: 120.24712, y: 104.48329 }","{ x: 124.71953, y: 113.42742 }","{ x: 130.0169, y: 121.85284 }","{ x: 135.78703, y: 130.00878 }","{ x: 140.58835, y: 138.75251 }","{ x: 144.71612, y: 147.86062 }","{ x: 149.15716, y: 156.81082 }","{ x: 154.19128, y: 165.44744 }","{ x: 159.2548, y: 174.0678 }","{ x: 163.32844, y: 183.15864 }","{ x: 168.48135, y: 191.43907 }","{ x: 174.42657, y: 199.36493 }","{ x: 179.09888, y: 208.2037 }","{ x: 185.92232, y: 210.67165 }","{ x: 192.61875, y: 204.13931 }","{ x: 196.76921, y: 195.04172 }","{ x: 200.67024, y: 185.83588 }","{ x: 205.09588, y: 176.90216 }","{ x: 209.72291, y: 168.05458 }","{ x: 213.39701, y: 158.76709 }","{ x: 216.89754, y: 149.40474 }","{ x: 220.68334, y: 140.14906 }","{ x: 225.26779, y: 131.30748 }","{ x: 228.95672, y: 122.19423 }","{ x: 231.95667, y: 112.71326 }","{ x: 236.38223, y: 103.75812 }","{ x: 240.28192, y: 94.60748 }","{ x: 244.11729, y: 85.42181 }","{ x: 249.63967, y: 84.88493 }","{ x: 254.70161, y: 93.3824 }","{ x: 258.21387, y: 102.74039 }","{ x: 261.41089, y: 112.21551 }","{ x: 264.70201, y: 121.65749 }","{ x: 268.01122, y: 131.0934 }","{ x: 271.06668, y: 140.61392 }","{ x: 274.63707, y: 149.9279 }","{ x: 278.36722, y: 159.19036 }","{ x: 281.41967, y: 168.71131 }","{ x: 284.6955, y: 178.15008 }","{ x: 288.14533, y: 187.53311 }","{ x: 291.75794, y: 196.84847 }","{ x: 295.98177, y: 205.90929 }","{ x: 300.11589, y: 215.00824 }","{ x: 304.7154, y: 223.84421 }","{ x: 309.69244, y: 232.50535 }","{ x: 313.42294, y: 241.73852 }","{ x: 316.70397, y: 251.17562 }","{ x: 320.72993, y: 260.32146 }","{ x: 323.45102, y: 269.78906 }","{ x: 325.98034, y: 279.34499 }","{ x: 328.96555, y: 288.83057 }"];

var path = new Path();

path.strokeColor = 'black';
function onFrame(event) {

   if (event.count < arr.length) {

       path.add(new Point(arr[event.count]));
   }

}

Community · Accepted Answer · 2017-05-23 12:34:30Z

Okay, i solved it by adding an object instead of passing a string. This is how it looks.

var arr =["{ x: 62.43993, y: 293.64093 }","{ x: 66.91065, y: 284.70636 }","{ x: 70.39826, y: 275.35595 }","{ x: 72.84928, y: 265.67157 }","{ x: 74.52471, y: 255.81883 }","{ x: 75.86372, y: 245.90888 }","{ x: 77.20274, y: 235.99894 }","{ x: 78.38594, y: 226.07042 }","{ x: 79.39874, y: 216.12185 }","{ x: 81.39225, y: 206.37537 }","{ x: 84.28514, y: 196.80348 }","{ x: 86.81829, y: 187.13349 }","{ x: 89.96158, y: 177.68514 }","{ x: 92.96133, y: 168.20555 }","{ x: 95.95388, y: 158.72282 }","{ x: 99.81414, y: 149.49923 }","{ x: 102.8285, y: 139.99296 }","{ x: 105.4176, y: 130.33823 }","{ x: 107.39859, y: 120.57821 }","{ x: 108.44634, y: 110.63337 }","{ x: 108.97722, y: 100.65855 }","{ x: 113.50928, y: 97.83496 }","{ x: 120.24712, y: 104.48329 }","{ x: 124.71953, y: 113.42742 }","{ x: 130.0169, y: 121.85284 }","{ x: 135.78703, y: 130.00878 }","{ x: 140.58835, y: 138.75251 }","{ x: 144.71612, y: 147.86062 }","{ x: 149.15716, y: 156.81082 }","{ x: 154.19128, y: 165.44744 }","{ x: 159.2548, y: 174.0678 }","{ x: 163.32844, y: 183.15864 }","{ x: 168.48135, y: 191.43907 }","{ x: 174.42657, y: 199.36493 }","{ x: 179.09888, y: 208.2037 }","{ x: 185.92232, y: 210.67165 }","{ x: 192.61875, y: 204.13931 }","{ x: 196.76921, y: 195.04172 }","{ x: 200.67024, y: 185.83588 }","{ x: 205.09588, y: 176.90216 }","{ x: 209.72291, y: 168.05458 }","{ x: 213.39701, y: 158.76709 }","{ x: 216.89754, y: 149.40474 }","{ x: 220.68334, y: 140.14906 }","{ x: 225.26779, y: 131.30748 }","{ x: 228.95672, y: 122.19423 }","{ x: 231.95667, y: 112.71326 }","{ x: 236.38223, y: 103.75812 }","{ x: 240.28192, y: 94.60748 }","{ x: 244.11729, y: 85.42181 }","{ x: 249.63967, y: 84.88493 }","{ x: 254.70161, y: 93.3824 }","{ x: 258.21387, y: 102.74039 }","{ x: 261.41089, y: 112.21551 }","{ x: 264.70201, y: 121.65749 }","{ x: 268.01122, y: 131.0934 }","{ x: 271.06668, y: 140.61392 }","{ x: 274.63707, y: 149.9279 }","{ x: 278.36722, y: 159.19036 }","{ x: 281.41967, y: 168.71131 }","{ x: 284.6955, y: 178.15008 }","{ x: 288.14533, y: 187.53311 }","{ x: 291.75794, y: 196.84847 }","{ x: 295.98177, y: 205.90929 }","{ x: 300.11589, y: 215.00824 }","{ x: 304.7154, y: 223.84421 }","{ x: 309.69244, y: 232.50535 }","{ x: 313.42294, y: 241.73852 }","{ x: 316.70397, y: 251.17562 }","{ x: 320.72993, y: 260.32146 }","{ x: 323.45102, y: 269.78906 }","{ x: 325.98034, y: 279.34499 }","{ x: 328.96555, y: 288.83057 }"];

var path = new Path();

path.strokeColor = 'black';
function onFrame(event) {

if (event.count < arr.length) {
        path.add(new Point(JSON.parse(arr[event.count].replace('x', '"x"').replace('y', '"y"'))));
   }

}

Answer to this question helped a lot.

Collectives™ on Stack Overflow

Drawning animation in paper.js from array of points

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related