SHARE
TWEET

myp breathing

a guest Apr 22nd, 2019 71 in 331 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <body>
  3.  
  4. <canvas id="canv"></canvas>
  5. <p id="status"></p>
  6. <script>
  7.   var barFill = "#87ff45";
  8.   var barBackground = "#87cefa";
  9.  
  10.   var w = 50;
  11.   var h = 200;
  12.   var margin = 0;
  13.  
  14.   var canv = document.getElementById("canv");
  15.   var ctx = canv.getContext("2d");
  16.   canv.width = w+margin*2;
  17.   canv.height = h+margin*2;
  18.  
  19.   function drawBar(p) {
  20.     ctx.fillStyle = barBackground;
  21.     ctx.fillRect(margin, margin, w, h);
  22.  
  23.     ctx.fillStyle = barFill;
  24.     ctx.fillRect(margin, margin+h-h*p, w, h*p);
  25.   }
  26.  
  27.  
  28.   var breathNum = 4.3;
  29.   var holdNum = 0.7;
  30.   var exhaleNum = 4.3;
  31.   var hold2Num = 0.7;
  32.  
  33.   var fps = 20;
  34.   var progress = 0;
  35.  
  36.   function animate() {
  37.     progress += 1/fps;
  38.     if (progress <= breathNum) { //breathe
  39.      drawBar(progress/breathNum);
  40.      document.getElementById("status").innerHTML = "Breathe in";
  41.    } else if (progress <= breathNum+holdNum) { //hold
  42.  
  43.    } else if (progress <= breathNum+holdNum+exhaleNum) { //exhale
  44.      drawBar(1-(progress-breathNum-holdNum)/exhaleNum);
  45.      document.getElementById("status").innerHTML = "Breathe out";
  46.    } else if (progress <= breathNum+holdNum+exhaleNum+hold2Num) { //hold again
  47.  
  48.    } else {
  49.      progress = 0;
  50.    }
  51.  }
  52.  
  53.  setInterval(animate, 50);
  54. </script>
  55.  
  56. </body>
  57. </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
 
Top