SHARE
TWEET

Don't click

a guest Jul 19th, 2019 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //Bro I told u, don't click
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8"/>
  6.         <title>Balle rebondissante</title>
  7.     </head>
  8.     <body style="margin: 0px; overflow: hidden">
  9.        
  10.         <canvas id="canvas"></canvas>
  11.        
  12.         <script>
  13. var canvas  = document.getElementById("canvas"),
  14.     context = canvas.getContext("2d"),
  15.     width   = window.innerWidth,
  16.     height  = window.innerHeight,
  17.     ratio   = window.devicePixelRatio;
  18. canvas.width  = width  * ratio;
  19. canvas.height = height * ratio;
  20. canvas.style.width  = width  + "px";
  21. canvas.style.height = height + "px";
  22. context.scale(ratio, ratio);
  23. var gravity = 1,
  24.     radius = 20,
  25.     dt = 1,
  26.     mass = 1,
  27.     inertia = 100,
  28.     restit = 0.95,
  29.     grip = 1.8,
  30.     fric = 0.3;
  31. var x = 50,
  32.     y = 50,
  33.     o = 0,
  34.     vx = 12,
  35.     vy = 0,
  36.     vo = 0;
  37. animate();
  38. function animate() {
  39.     draw();
  40.     update();
  41.     requestAnimationFrame(animate);
  42. }
  43. function draw() {
  44.     context.clearRect(0, 0, width, height);
  45.    
  46.     context.beginPath();
  47.     context.moveTo(x, y);
  48.     context.arc(x, y, radius, o, o + 2*Math.PI);
  49.     context.stroke();
  50. }
  51. function update() {
  52.     applyForce(0, mass * gravity, 0, 0);
  53.     x += vx * dt;
  54.     y += vy * dt;
  55.     o += vo * dt;
  56.    
  57.    
  58.     if (x < radius) {
  59.         x = radius;
  60.         generateContactForce(1, 0);
  61.     }
  62.    
  63.     if (x > width - radius) {
  64.         x = width - radius;
  65.         generateContactForce(-1, 0);
  66.     }
  67.    
  68.     if (y < radius) {
  69.         y = radius;
  70.         generateContactForce(0, 1);
  71.     }
  72.    
  73.     if (y > height - radius) {
  74.         y = height - radius;
  75.         generateContactForce(0, -1);
  76.     }
  77. }
  78. function applyForce(fx, fy, cx, cy) {
  79.     var torque = -fx * cy + fy * cx,
  80.        
  81.         ax = fx / mass,
  82.         ay = fy / mass,
  83.         ao = torque / inertia;
  84.    
  85.     vx += ax * dt;
  86.     vy += ay * dt;
  87.     vo += ao * dt;
  88. }
  89. function generateContactForce(nx, ny) {
  90.     var tx, ty, vNormal, vTangent, vContact, fNormal, fTangent, fTangentMax, fx, fy;
  91.    
  92.     tx = -ny;
  93.     ty =  nx;
  94.    
  95.     vNormal  = vx * nx + vy * ny;
  96.     vTangent = vx * tx + vy * ty;
  97.     vContact = vTangent - vo * radius;
  98.    
  99.     fNormal  = -(1 + restit) * vNormal * mass / dt;
  100.     fTangent = - grip * vContact / (1/mass + radius*radius/inertia) / dt;
  101.     fTangentMax = fric * fNormal;
  102.    
  103.     if (fTangent > fTangentMax) {
  104.         fTangent = fTangentMax;
  105.     }
  106.     if (fTangent < -fTangentMax) {
  107.         fTangent = -fTangentMax;
  108.     }
  109.    
  110.     fx = fNormal * nx + fTangent * tx;
  111.     fy = fNormal * ny + fTangent * ty;
  112.    
  113.     applyForce(fx, fy, -nx * radius, -ny * radius);
  114. }
  115.         </script>
  116.        
  117.     </body>
  118. </html>
RAW Paste Data
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!
 
Top