effects: demo visualising easing functions, tuning

diff --git a/demos/effect/easing.html b/demos/effect/easing.html
index 8fa0ed88f92ecbce8d036beb54f4a11a6a55e697..3e6673bb72ac4eed2574d09e1f107be14ef5eabe 100644 (file)
--- a/demos/effect/easing.html
+++ b/demos/effect/easing.html
@@ -10,8 +10,6 @@
                .graph {\r
                        float: left;\r
                        margin-left: 10px;\r
-                       width: 100px;\r
-                       height: 120px;\r
                }\r
        </style>\r
        <script type="text/javascript">\r
@@ -21,46 +19,52 @@
                        return;\r
                }\r
                var i = 0;\r
+               var width = 100,\r
+                       height = 100;\r
                $.each($.easing, function(name, impl) {\r
                        // skip linera/jswing and any non functioning implementation\r
                        if (!$.isFunction(impl) || /linear|jswing/.test(name))\r
                                return;\r
                        var graph = $("<div/>").addClass("graph").appendTo("#graphs");\r
-                       $("<div/>").text(++i + ". " + name).appendTo(graph);\r
+                       var text = $("<div/>").text(++i + ". " + name).appendTo(graph);\r
                        \r
-                       var canvas = $("<canvas/>").width(100).height(100).appendTo(graph)[0]\r
-                       canvas.width = 100;\r
-                       canvas.height = 135;\r
+                       var canvas = $("<canvas/>").appendTo(graph)[0]\r
+                       canvas.width = width;\r
+                       canvas.height = height;\r
+                       var drawHeight = height * 0.75;\r
+                       var cradius = 10;\r
                        var ctx = canvas.getContext("2d");\r
                        ctx.fillStyle = "black";\r
                        \r
                        ctx.beginPath();\r
-                       ctx.moveTo(10, 0);\r
-                       ctx.quadraticCurveTo(0, 0, 0, 10);\r
-                       ctx.lineTo(0, 125);\r
-                       ctx.quadraticCurveTo(0, 135, 10, 135);\r
-                       ctx.lineTo(90, 135);\r
-                       ctx.quadraticCurveTo(100, 135, 100, 125);\r
-                       ctx.lineTo(100, 0);\r
-                       ctx.lineTo(10, 0);\r
+                       ctx.moveTo(cradius, 0);\r
+                       ctx.quadraticCurveTo(0, 0, 0, cradius);\r
+                       ctx.lineTo(0, height - cradius);\r
+                       ctx.quadraticCurveTo(0, height, cradius, height);\r
+                       ctx.lineTo(width - cradius, height);\r
+                       ctx.quadraticCurveTo(width, height, width, height - cradius);\r
+                       ctx.lineTo(width, 0);\r
+                       ctx.lineTo(cradius, 0);\r
                        ctx.fill();\r
                        \r
                        ctx.strokeStyle = "#555";\r
                        ctx.beginPath();\r
-                       ctx.moveTo(0, 100.5);\r
-                       ctx.lineTo(100, 100.5);\r
+                       ctx.moveTo(0, drawHeight + .5);\r
+                       ctx.lineTo(width, drawHeight + .5);\r
                        ctx.stroke();\r
                        \r
                        ctx.strokeStyle = "white";\r
                        ctx.lineWidth = 2;\r
                        ctx.beginPath();\r
-                       $.each(new Array(100), function(position) {\r
-                               ctx.lineTo(position, 100 - position * impl(0, position, 0, 1, 100));\r
+                       $.each(new Array(width), function(position) {\r
+                               ctx.lineTo(position, drawHeight - position * impl(0, position, 0, 1, height) * 0.75);\r
                        });\r
                        ctx.stroke();\r
                        graph.click(function() {\r
                                $(canvas).animate({height: "hide"}, "slow", name).animate({"left": "0"}, 800).animate({height: "show"}, "slow", name);\r
                        });\r
+                       \r
+                       graph.width(width).height(height + text.height() + 10);\r
                        //return false;\r
                });\r
        });\r