Permalink
Browse files

Working demo page plus documentation and license info

  • Loading branch information...
1 parent 2f6fc4b commit b8db63b6fdd11d873ef059f141265823cef4d151 @MmmCurry committed Jul 28, 2010
Showing with 171 additions and 2 deletions.
  1. +21 −0 LICENSE
  2. +79 −0 demo/demo.html
  3. +62 −0 demo/demo.js
  4. +9 −2 jquery.crSpline.js
View
21 LICENSE
@@ -0,0 +1,21 @@
+Copyright (c) 2010 M. Ian Graham, http://github.com/MmmCurry/jquery.crSpline
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
View
79 demo/demo.html
@@ -0,0 +1,79 @@
+<html>
+<head>
+<title>jQuery.crSpline</title>
+<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
+<script type="text/javascript" src="jquery.crSpline.js"></script>
+<script type="text/javascript" src="demo.js"></script>
+<style>
+.waypoint {
+ position: absolute;
+ z-index: 4;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ background-color: #7f9f7f;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+
+.path-dot {
+ position: absolute;
+ z-index: 1;
+ width: 4px;
+ height: 4px;
+ background-color: #dca3a3;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+
+#mover {
+ position: absolute;
+ z-index: 5;
+ width: 20px;
+ height: 20px;
+ background-color: #4f4faf;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+
+#snippet {
+ float: left;
+ z-index: 0;
+ color: #dcdccc;
+ font-family: "Lucida Console", "Monaco", "Arial", "Verdana"
+}
+
+#snippet pre {
+ font-family: "Lucida Console", "Monaco", "Arial", "Verdana"
+}
+
+#snippet a {
+ /*color: #4f4faf;*/
+ color: #5fbf5f;
+ text-decoration: none;
+}
+
+#snippet a:hover {
+ text-decoration: underline;
+ color: #4fff4f;
+}
+
+* {
+ border: 0;
+}
+</style>
+</head>
+<body bgcolor="#333333">
+<div id="snippet">
+<pre>
+// jQuery.crSpline
+// - <a href="http://github.com/MmmCurry/jquery.crSpline/raw/master/jquery.crSpline.js">Download</a> - <a href="http://github.com/MmmCurry/jquery.crSpline">View Source</a> - <a href="">Plugin Page</a>
+
+$("#mover").animate({
+ crSpline: $.crSpline.buildSequence([x0, y0], [x1, y1], ... [x9, y9]),
+ duration: 20000
+});
+</pre>
+</div>
+</body>
+</html>
View
62 demo/demo.js
@@ -0,0 +1,62 @@
+DEMO = {};
+
+DEMO.run = function() {
+
+ var minX = 200;
+ var minY = 200;
+ var maxX = $(document).width() - 100;
+ var maxY = $(document).height() - 100;
+
+ var numPoints = 10;
+ var dotsPerSeg = 50;
+ var i;
+
+ var points = [];
+
+ for (i=0; i<numPoints; i++) {
+ points.push([Math.floor(Math.random()*(maxX-minX))+minX, Math.floor(Math.random()*(maxY-minY))+minY]);
+ }
+
+ var spline = $.crSpline.buildSequence.apply(null, points);
+
+ $("#mover").remove();
+ $(".waypoint").remove();
+ $(".path-dot").remove();
+
+ for (i=0; i<numPoints; i++) {
+ $('<div class="waypoint">' + i + '</div>')
+ .appendTo($(document.body))
+ .css({
+ left: points[i][0],
+ top: points[i][1],
+ });
+
+ for (var j=0; j<dotsPerSeg; j++) {
+ var t = (i + j/dotsPerSeg) / points.length;
+ var pos = spline.getPos(t);
+ $('<div class="path-dot"></div>')
+ .appendTo($(document.body))
+ .css({
+ left: pos.left,
+ top: pos.top,
+ });
+ }
+ }
+
+ $('<div id="mover"></div>')
+ .appendTo($(document.body))
+ .css({
+ left: points[0][0],
+ top: points[0][1],
+ })
+ .animate({ crSpline: spline }, 20000, function () {
+ window.setTimeout(function() {
+ DEMO.run();
+ }, 5000);
+ });
+
+};
+
+$(document).ready(function() {
+ DEMO.run();
+});
View
11 jquery.crSpline.js
@@ -1,6 +1,13 @@
/**
- * jQuery support for animation along Catmull-Rom splines
+ * jQuery.crSpline v0.0.1
+ * http://github.com/MmmCurry/jquery.crSpline
+ *
+ * Supports animation along Catmull-Rom splines based on a series of waypoints.
+ * Usage: See demo.js, demo.html
+ *
+ * Copyright 2010, M. Ian Graham
* MIT License
+ *
*/
(function($){
@@ -26,7 +33,7 @@
};
- // Return a CSS animation object based on a sequence of points
+ // Return an animation object based on a sequence of points
// Arguments must be [x,y] pairs
$.crSpline.buildSequence = function() {
var res = {};

0 comments on commit b8db63b

Please sign in to comment.