added README

Author: weepy

README.markdown

@@ -0,0 +1,91 @@
+jQuery.path
+========
+
+Provides animation along bezier and circular arcs. 
+
+The animation engine in jQuery is focussed on single dimensional animation - hence it's difficult to animate two variables along a path.
+
+This simple plugin provides a method of multidimensional animation, and in particular provides a method for animating along bezier curves and arcs.
+
+Bezier
+---
+
+Example: animate along a bezier path
+
+<pre>
+var bezier_params = {
+    start: { 
+      x: 185, 
+      y: 185, 
+      angle: 10
+    },	
+    end: { 
+      x:540,
+      y:110, 
+      angle: -10, 
+      length: 0.25
+    }
+  }
+  
+$("my_elem").animate({path : new $.path.bezier(bezier_params)})
+</pre>
+
+Bezier curves are made form a start point, an end point each with a control point
+
+* start is starting point
+* end is the final point
+* x,y indicate the coordinates at that point. Required
+* angle is the angle of the control point from the line joining the start and end. Optional, default is 0
+* length is the distance from the point to it's control point as a ratio of the distance from start to end. Optional, default is 1/3
+
+Arc
+---
+
+Exampe: animate along an arc
+
+<pre>
+  
+var arc_params = {
+    center: [285,185],	
+		radius: 100,	
+		start: 30,
+		end: 200,
+		dir: -1
+  }
+  
+$("my_elem").animate({path : new $.path.arc(arc_params)})
+</pre>
+
+* center is the coords of the centre of an imaginary circle that contains the start and end point
+* radius is the radius of this circle
+* start is the angle of the start point. 0 is "North", measured clockwise
+* end is the angle of the start point. 0 is "North", measured clockwise
+* dir is the direction to move in. Only required if not obvious from start and end (e.g. if start is 100, end is 30, but you want to animate clockwise)
+
+Other Paths
+----
+
+It is trivial to create other paths, or even animate other parameters. E.g:
+
+<code>
+  
+var SineWave = function() {
+  this.css = function(p) {
+    var s = Math.sin(p*20)
+    var x = 500 - p * 300 
+    var y = s * 50 + 150
+    var o = ((s+2)/4+0.1)
+    return {top: y + "px", left: x + "px", opacity: o}
+  } 
+};
+  
+$("my_elem").animate({path : new SineWave})
+</code>
+
+Links
+----
+
+* Demo at http://weepy.github.com/jquery.path
+* Source at http://github.com/weepy/jquery.path
+* Issue Tracker at http://github.com/weepy/jquery.path/issues
+

test/test.html

@@ -1,5 +1,3 @@
-
-
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
 <script src='../jquery.path.js'></script>
 <link type="text/css" rel="stylesheet" media="screen" href="http://weepy.github.com/style.css"/>
@@ -9,7 +7,7 @@
 <style>
 #arc { position: relative; width: 600px; height: 300px; }
 #bezier { position: relative; width: 600px; height: 300px; }
-
+#sine { position: relative; width: 600px; height: 300px; }
 .pixel { position: absolute; width: 150px; height: 150px; background: red; -moz-border-radius: 75px; -webkit-border-radius: 75px; opacity: 0.5; filter: alpha(opacity=50); top: -15px; left: 185px;}
 .dot {width: 1px; position: absolute; height: 1px; background: #aaa; }
 a {  cursor: pointer;}
@@ -19,10 +17,21 @@
 
 <script>
 
+var SineWave = function() {
+  this.css = function(p) {
+    var s = Math.sin(p*20)
+    var x = 500 - p * 300 
+    var y = s * 50 + 150
+    var o = ((s+2)/4+0.1)
+    return {top: y + "px", left: x + "px", opacity: o}
+  } 
+};
+
+
 $().ready(function() {
 
 
-  var Paths = {"arc":[], "bezier":[]}
+  var Paths = {"arc":[], "bezier":[], "sine": []}
 
   var path_fns = {
     arc: function(i) {
@@ -40,36 +49,42 @@
         start: { x:185, y:185, angle: i*20 * x},	
       	end: {x:540,y:110, angle: i*10, length: i / 4.0}
       })
+    },
+    sine : function() {
+      return new SineWave
     }
   }
 
   for(var type in Paths) {
 
     for(var i=0; i<10; i++ ) {
-
+      if(type == "sine" && i != 9)
+        continue
+        
       var path = path_fns[type](i)
       Paths[type].push(path)
 
       var css = {
         "backgroundColor": (i%2) ? "red" : "yellow", 
-        width: 20*i, 
-        height: 20*i, 
-        "-moz-border-radius": 10*i, 
-        "-webkit-border-radius": 10*i, 
-        marginLeft: -10*i, // offset the div, so center is at origin
-        marginTop: -10*i 
+        width: 20*(1+i), 
+        height: 20*(1+i), 
+        "-moz-border-radius": 10*(1+i), 
+        "-webkit-border-radius": 10*(1+i), 
+        marginLeft: -10*(1+i), // offset the div, so center is at origin
+        marginTop: -10*(1+i) 
       }
 
       var $$ = $("<span class=pixel></span>").css(css)
 
       // initialize to start
       $$.css(path.css(1))
-      $("#" + type).append($$)     
+      $("#" + type).append($$)
     }
 
   }
 
 
+  
   $(".start").click(function() {
     var i =0;
     var type = $(this).closest("div").attr("id")
@@ -81,19 +96,19 @@
   })
 
 
-    $(".plot").click(function() {
-
-      var $$ = $("<div>")
-      var type = $(this).closest("div").attr("id")
-      
-      for(var t=0; t<1;t+= 0.01) {    
-        for(var i in Paths[type]) {
-          var d = $("<span class=dot></span>").css(Paths[type][i].css(t))
-          $$.append(d)
-        }
+  $(".plot").click(function() {
+
+    var $$ = $("<div>")
+    var type = $(this).closest("div").attr("id")
+    
+    for(var t=0; t<1;t+= 0.01) {    
+      for(var i in Paths[type]) {
+        var d = $("<span class=dot></span>").css(Paths[type][i].css(t))
+        $$.append(d)
       }
-      $("#" + type ).append($$) 
-    })
+    }
+    $("#" + type ).append($$) 
+  })
 
 
 })
@@ -117,6 +132,15 @@ <h2>ten beziers</h2>
       <p><a class=plot >Plot</a>  </p>
     </div>
 
+    
+    <h2>custom path: sine wave</h2>
+    <div id=sine>
+      <p><a class=start  >Start</a> </p>
+      <p><a class=plot >Plot</a>  </p>
+    </div>
+    
+    
+    
      <h2>links</h2>
      <ul>
      <li><a href='http://github.com/weepy/jquery.path/raw/master/jquery.path.js'>Javascript file</a></li>