Paper.js wave effect - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

Paper.js wave effect

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Paper.js </title> 
      <style>

body {// w w w  . ja va 2  s . c o  m
   margin: 0;
}
canvas {
   width: 100%;
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
}


      </style> 
   </head> 
   <body translate="no"> 
      <canvas id="myCanvas" resize></canvas> 
      <script type="text/paperscript" canvas="myCanvas">
  var width, height, center;
  var points = 12;
  var smooth = true;
  var path = new Path();
  var mousePos = view.center / 2;
  var pathHeight = mousePos.y;
  var topLeft = view.center - [80, 80];
  var bottomRight = view.center + [80, 80];
  path.fillColor = {
    gradient: {
            stops: ['#532e8e', '#662e8f']
        },
        origin: topLeft,
        destination: bottomRight
  }
  initializePath();
  function initializePath() {
  center = view.center;
  width = view.size.width;
  height = view.size.height / 4;
  path.segments = [];
  path.add(view.bounds.bottomLeft);
  path.add(view.bounds.topLeft);
  for (var i = 1; i < points; i++) {
    var point = new Point(width / points * i, center.y);
    path.add(point);
  }
  path.add(view.bounds.topRight);
  path.add(view.bounds.bottomRight);
  path.fullySelected = true;
console.log(path.segments);
  }
  function onFrame(event) {
  pathHeight += (center.y - mousePos.y - pathHeight)/2;
  for (var i = 1; i < points+2; i++) {
    var sinSeed = event.count + (i + i % 10) * 100 /2;
    var sinHeight = Math.sin(sinSeed / 200) * pathHeight /2;
    var yPos = Math.sin(sinSeed / 100) * sinHeight + height / 1;
    path.segments[i].point.y = yPos;
  }
  if (smooth)
    path.smooth({ type: 'continuous' });
  }
  // Reposition the path whenever the window is resized:
  function onResize(event) {
  initializePath();
  }
  
      </script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.4/paper-core.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.4/paper-full.min.js"></script>  
   </body>
</html>

Related Tutorials