API tools faq
paste
Advertisement
Guest User

ball road

a guest
Nov 5th, 2012
290
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     <style>
  5.       body {
  6.         margin: 0px;
  7.         padding: 0px;
  8.       }
  9.       canvas {
  10.         border: 1px solid #9C9898;
  11.       }
  12.     </style>
  13.     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
  14.     <script>
  15.       /*
  16.        * Vector math functions
  17.        */
  18.       function dot(a, b) {
  19.         return ((a.x * b.x) + (a.y * b.y));
  20.       }
  21.       function magnitude(a) {
  22.         return Math.sqrt((a.x * a.x) + (a.y * a.y));
  23.       }
  24.       function normalize(a) {
  25.         var mag = magnitude(a);
  26.  
  27.         if(mag == 0) {
  28.           return {
  29.             x: 0,
  30.             y: 0
  31.           };
  32.         }
  33.         else {
  34.           return {
  35.             x: a.x / mag,
  36.             y: a.y / mag
  37.           };
  38.         }
  39.       }
  40.       function add(a, b) {
  41.         return {
  42.           x: a.x + b.x,
  43.           y: a.y + b.y
  44.         };
  45.       }
  46.       function angleBetween(a, b) {
  47.         return Math.acos(dot(a, b) / (magnitude(a) * magnitude(b)));
  48.       }
  49.       function rotate(a, angle) {
  50.         var ca = Math.cos(angle);
  51.         var sa = Math.sin(angle);
  52.         var rx = a.x * ca - a.y * sa;
  53.         var ry = a.x * sa + a.y * ca;
  54.         return {
  55.           x: rx * -1,
  56.           y: ry * -1
  57.         };
  58.       }
  59.       function invert(a) {
  60.         return {
  61.           x: a.x * -1,
  62.           y: a.y * -1
  63.         };
  64.       }
  65.       /*
  66.        * this cross product function has been simplified by
  67.        * setting x and y to zero because vectors a and b
  68.        * lie in the canvas plane
  69.        */
  70.       function cross(a, b) {
  71.         return {
  72.           x: 0,
  73.           y: 0,
  74.           z: (a.x * b.y) - (b.x * a.y)
  75.         };
  76.       }
  77.       function getNormal(curve, ball, frame) {
  78.         var curveLayer = curve.getLayer();
  79.         var context = curveLayer.getContext();
  80.         var testRadius = 20;
  81.         // pixels
  82.         var totalX = 0;
  83.         var totalY = 0;
  84.         var x = ball.getX();
  85.         var y = ball.getY();
  86.         /*
  87.          * check various points around the center point
  88.          * to determine the normal vector
  89.          */
  90.         for(var n = 0; n < 20; n++) {
  91.          var angle = n * 2 * Math.PI / 20;
  92.          var offsetX = testRadius * Math.cos(angle);
  93.          var offsetY = testRadius * Math.sin(angle);
  94.          var testX = x + offsetX;
  95.          var testY = y + offsetY;
  96.          if(!context.isPointInPath(testX, testY)) {
  97.            totalX += offsetX;
  98.            totalY += offsetY;
  99.          }
  100.        }
  101.  
  102.        var normal;
  103.  
  104.        if(totalX === 0 && totalY === 0) {
  105.          normal = {
  106.            x: 0,
  107.            y: -1
  108.          };
  109.        }
  110.        else {
  111.          normal = {
  112.            x: totalX,
  113.            y: totalY
  114.          };
  115.        }
  116.  
  117.        return normalize(normal);
  118.      }
  119.      function handleCurveCollision(ball, curve) {
  120.        var curveLayer = curve.getLayer();
  121.        var curveContext = curveLayer.getContext();
  122.        var x = ball.getX();
  123.        var y = ball.getY();
  124.        var radius = ball.getRadius();
  125.  
  126.        var curveDamper = 0.01;
  127.        // 5% energy loss
  128.        //if(curveContext.isPointInPath(x, y)) {
  129.        if(curveContext.isPointInPath(x, y)) {
  130.  
  131.          console.log('is');
  132.          console.log(curve);
  133.          var normal = getNormal(curve, ball);
  134.          if(normal !== null) {
  135.  
  136.            console.log('normal');
  137.            console.log(normal.x + ' ' + normal.y);
  138.            var angleToNormal = angleBetween(normal, invert(ball.velocity));
  139.            var crossProduct = cross(normal, ball.velocity);
  140.            var polarity = crossProduct.z > 0 ? 1 : -1;
  141.             var collisonAngle = polarity * angleToNormal * 2;
  142.             var collisionVector = rotate(ball.velocity, collisonAngle);
  143.  
  144.             ball.velocity.x = collisionVector.x;
  145.             ball.velocity.y = collisionVector.y;
  146.             //ball.velocity.y = -0.5;
  147.             ball.velocity.x *= (1 - curveDamper);
  148.             ball.velocity.y *= (1 - curveDamper);
  149.  
  150.             //bubble ball up to the surface of the curve
  151.            
  152.             /*
  153.             while(curveContext.isPointInPath(x, y)) {
  154.               x += normal.x;
  155.  
  156.               if(ball.velocity.y > 0.1) {
  157.                 y += normal.y;
  158.               }
  159.               else {
  160.                 // nudge ball even less to prevent
  161.                 // bouncing at rest
  162.                 y += normal.y / 10;
  163.               }
  164.             }
  165.             */
  166.             while(curveContext.isPointInPath(x, y)) {
  167.               x += normal.x / 100;
  168.  
  169.               if(ball.velocity.y > 0.1) {
  170.                 y += normal.y / 100;
  171.               }
  172.               else {
  173.                 // nudge ball even less to prevent
  174.                 // bouncing at rest
  175.                 y += normal.y / 100;
  176.               }
  177.             }
  178.  
  179.            
  180.             //console.log(curveContext);
  181.             /*
  182.             while(!curveContext.isPointInPath(x, y)) {
  183.  
  184.               console.log('te');
  185.  
  186.                x += normal.x;
  187.  
  188.               if(ball.velocity.y > 0.1) {
  189.                 y += normal.y;
  190.               }
  191.               else {
  192.                 // nudge ball even less to prevent
  193.                 // bouncing at rest
  194.                 y += normal.y / 10;
  195.               }
  196.             }*/
  197.  
  198.             ball.setPosition(x, y);
  199.           }
  200.         }
  201.       }
  202.       function updateBall(ball, curve, frame) {
  203.         var timeDiff = frame.timeDiff;
  204.         var ballLayer = ball.getLayer();
  205.         var stage = ball.getStage();
  206.         var height = stage.getHeight();
  207.         var width = stage.getWidth();
  208.         var x = ball.getX();
  209.         var y = ball.getY();
  210.         var radius = ball.getRadius().x;
  211.  
  212.         // physics variables
  213.         var gravity = 0.8;
  214.         // px / second^2
  215.         var speedIncrementFromGravityEachFrame = gravity * timeDiff / 1000;
  216.         var collisionDamper = 0.2;
  217.         // 20% energy loss
  218.         var floorFriction = 1;
  219.         // px / second^2
  220.         var floorFrictionSpeedReduction = floorFriction * timeDiff / 1000;
  221.  
  222.         // if ball is being dragged and dropped
  223.         if(ball.isDragging()) {
  224.           var mousePos = stage.getMousePosition();
  225.  
  226.           if(mousePos !== null) {
  227.             var mouseX = mousePos.x;
  228.             var mouseY = mousePos.y;
  229.  
  230.             var c = 0.06 * timeDiff;
  231.             ball.velocity = {
  232.               x: c * (mouseX - ball.lastMouseX),
  233.               y: c * (mouseY - ball.lastMouseY)
  234.             };
  235.  
  236.             ball.lastMouseX = mouseX;
  237.             ball.lastMouseY = mouseY;
  238.           }
  239.         }
  240.         else {
  241.           // gravity
  242.           ball.velocity.y += speedIncrementFromGravityEachFrame;
  243.           x += ball.velocity.x;
  244.           y += ball.velocity.y;
  245.  
  246.           // ceiling condition
  247.           if(y < radius) {
  248.            y = radius;
  249.            ball.velocity.y *= -1;
  250.            ball.velocity.y *= (1 - collisionDamper);
  251.          }
  252.  
  253.          // floor condition
  254.          if(y > (height - radius)) {
  255.             y = height - radius;
  256.             ball.velocity.y *= -1;
  257.             ball.velocity.y *= (1 - collisionDamper);
  258.           }
  259.  
  260.           // floor friction
  261.           if(y == height - radius) {
  262.             if(ball.velocity.x > 0.1) {
  263.               ball.velocity.y -= floorFrictionSpeedReduction;
  264.             }
  265.             else if(ball.velocity.x < -0.1) {
  266.              ball.velocity.x += floorFrictionSpeedReduction;
  267.            }
  268.            else {
  269.              ball.velocity.x = 0;
  270.            }
  271.          }
  272.  
  273.          // right wall condition
  274.          if(x > (width - radius)) {
  275.             x = width - radius;
  276.             ball.velocity.x *= -1;
  277.             ball.velocity.x *= (1 - collisionDamper);
  278.           }
  279.  
  280.           // left wall condition
  281.           if(x < radius) {
  282.            x = radius;
  283.            ball.velocity.x *= -1;
  284.            ball.velocity.x *= (1 - collisionDamper);
  285.          }
  286.  
  287.          ball.setPosition(x, y);
  288.  
  289.          /*
  290.           * if the ball comes into contact with the
  291.           * curve, then bounce it in the direction of the
  292.           * curve's surface normal
  293.           */
  294.          handleCurveCollision(ball, curve);
  295.        }
  296.      }
  298.      window.onload = function() {
  299.        var stage = new Kinetic.Stage({
  300.          container: "container",
  301.          width: 578,
  302.          height: 400
  303.        });
  305.        var curveLayer = new Kinetic.Layer();
  306.        var ballLayer = new Kinetic.Layer();
  307.        var radius = 10;
  308.        var anim;
  310.        
  311.        var curve = new Kinetic.Line({  //578*400 (x * y)
  312.          points: [153, 200, 340, 250, //down
  313.                  340, 270,   //short to bottom
  314.                  153, 290,  //back to left
  315.                  153, 320,  //short to bottom
  316.                  390, 290,     //to the right long
  317.                  390, 220,        //up short
  318.                  153, 140,  //long to the left
  319.                  153, 200   //short to bottom
  322.                  ],
  323.          stroke: "red",
  324.          strokeWidth: 5,
  325.          lineCap: "round",
  326.          lineJoin: "round"
  327.        });
  328.        
  329.        /*
  330.         var curve = new Kinetic.Shape({
  331.          drawFunc: function(context) {
  332.            var height = stage.getHeight();
  333.            var width = stage.getWidth();
  335.            context.beginPath();
  338.            ctx = context;
  339.             ctx.moveTo(153,200);
  340.            ctx.lineTo(340,250);
  341.            ctx.lineTo(340, 270);
  342.            /*ctx.lineTo(153, 290);
  343.            ctx.lineTo(153, 320);
  344.           // ctx.fill();
  346.            //context.lineTo(40, height);
  347.            
  348.            context.closePath();
  349.            this.fill(context);
  350.            
  351.          },
  352.          fill: "#8dbdff"
  353.        });
  354.  */
  355.        curveLayer.add(curve);
  357.        /*
  358.        var curve = new Kinetic.Circle({
  359.          x: stage.getWidth() / 2,
  360.          y: stage.getHeight() / 2,
  361.          radius: 70,
  362.          fill: 'grey',
  363.          stroke: 'black',
  364.          strokeWidth: 4,
  365.          opacity: 0.5
  366.        });
  368.        curveLayer.add(curve);
  369.  */
  370.        // create ball
  371.        var ball = new Kinetic.Circle({
  372.          x: 200,
  373.          y: 20,
  374.          radius: radius,
  375.          //fill: "blue",
  376.          fill: {
  377.            start: {
  378.              x: -50,
  379.              y: -50
  380.            },
  381.            end: {
  382.              x: 50,
  383.              y: 50
  384.            },
  385.            colorStops: [0, 'red', 1, 'yellow']
  386.          },
  387.          draggable: true,
  388.          opacity: 0.8,
  389.          stroke: "black",
  390.          strokeWidth: 3
  391.        });
  393.        // custom property
  394.        ball.velocity = {
  395.          x: 0,
  396.          y: 0
  397.        };
  399.        ball.on("dragstart", function() {
  400.          ball.velocity = {
  401.            x: 0,
  402.            y: 0
  403.          };
  404.          anim.start();
  405.        });
  406.        
  407.        ball.on("mousedown", function() {
  408.          anim.stop();
  409.        });
  411.        ball.on("mouseover", function() {
  412.          document.body.style.cursor = "pointer";
  413.        });
  415.        ball.on("mouseout", function() {
  416.          document.body.style.cursor = "default";
  417.        });
  419.        ballLayer.add(ball);
  420.        stage.add(curveLayer);
  421.        stage.add(ballLayer);
  422.        anim = new Kinetic.Animation({
  423.          func: function(frame) {
  424.            updateBall(ball, curve, frame)
  425.          },
  426.          node: ballLayer
  427.        });
  429.        anim.start();
  430.      };
  432.    </script>
  433.   </head>
  434.   <body onmousedown="return false;">
  435.     <div id="container"></div>
  436.   </body>
  437. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!