Paper.js animate path move on click - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

Paper.js animate path move on click

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.21/paper-full.min.js"></script> 
      <style id="compiled-css" type="text/css">

* {// ww w  .j  a  va  2s.  c  o m
   margin:0;
   padding:0;
}
html {
   background-image:linear-gradient(#ffeaa7,#f3d573);
   overflow:hidden;
}


      </style> 
   </head> 
   <body> 
      <canvas resize="true" id="paper"></canvas> 
      <script type="text/javascript">
paper.install(window);
$(function() {
   if(!('getContext' in document.createElement('canvas'))){
      console.log('Sorry, it looks like your browser does not support canvas!');
      return false;
   }
   paper.setup($('canvas')[0]);
   var points = 10;
   var length = 15;
   var tool = new Tool();
   var myPath = createWorm('#ec8282');
   function createWorm(color) {
      var path = new paper.Path({
         strokeColor: color,
         strokeWidth: 20,
         strokeCap: 'round'
      });
      var start = new paper.Point(Math.random()*100,Math.random()*100);
      for(var i = 0; i < points; i++) {
         path.add(new paper.Point(i * length + start.x, 0 + start.y));
      }
      return path;
   }
    var x;
    var y;
   function moveSeg(event) {
        event.count = 1;
      if(event.count <= 100) {
      myPath.firstSegment.point._x += (x - myPath.firstSegment.point._x)/10;
        myPath.firstSegment.point._y += (y - myPath.firstSegment.point._y)/10;
            for (var i = 0; i < points - 1; i++) {
                var segment = myPath.segments[i];
                var nextSegment = segment.next;
                var vector = new paper.Point(segment.point.x - nextSegment.point.x,segment.point.y - nextSegment.point.y);
                vector.length = length;
                nextSegment.point = new paper.Point(segment.point.x - vector.x,segment.point.y - vector.y);
            }
            myPath.smooth();
        }
    }
   paper.tool.onMouseDown = function(event) {
        x = event.event.offsetX;
        y = event.event.offsetY;
        paper.view.attach('frame', moveSeg);
   }
});

      </script>  
   </body>
</html>

Related Tutorials