make curtain like animation in drawing of lines - Javascript Canvas

Javascript examples for Canvas:Animation

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

Description

make curtain like animation in drawing of lines

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/processing.js/1.4.1/processing.min.js"></script> 
   </head> 
   <body> 
      <script type="text/processing">
          class Point {//  www  . j a va  2  s .c om
         float x, y;
         Point(float _x, float _y) { x=_x; y=_y; }}

      ArrayList<Point> points;

      float interval;
      int steps = 50;
      void setup() {
         size(500, 500);
         points = new ArrayList<Point>();
         for (int i=0; i<steps; i++) {
            points.add(new Point(width/2, height/2));
         }
         interval = width/(float)steps;
         frameRate(60);
      }
      void draw() {
         background(255);
         stroke(0);
         Point p;
         for (int i=0; i<steps; i++) {
            p = points.get(i);
            line(interval/2 + i*interval, 0, p.x, p.y);
            line(interval/2 + i*interval, height, p.x, p.y);
         }
         points.remove(0);
         points.add(new Point(mouseX, mouseY));
      }

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

Related Tutorials