Simple Breath Gauge

docs/assets/js/UI/ui.js

@@ -1,5 +1,3 @@
-//Colors
-
 // UI for title screen
 function drawTitleScreenUI() {
 }
@@ -10,7 +8,12 @@ function drawLevelTransitionUI() {
 
 // UI for playing
 function drawPlayingUI() {
+
+    //Heart Rate Monitor
     heartBeatUI(cw/4*3-8,ch/8*7-8,cw/4,ch/8);
+
+    //Respiration Monitor
+    respiratoryUI(cw/8*5,ch/8*7-8, cw/16, ch/8);
 }
 
 //UI for pause screen
@@ -21,11 +24,26 @@ function drawPausedUI() {
 function drawEndUI() {
 }
 
-// Construct a rectangular UI
+
-function rectUI() {};
+/***
+ *
+ * RESPIRATORY UI
+ *
+ */
+
+function respiratoryUI(x, y, width, height){
+    cartesianRect(x,y,width,height, "black");
+    cartesianRect(x,y+(height-breath/constants.lifeFuncs.breath.fullBreath*height), width, breath/constants.lifeFuncs.breath.fullBreath*height, "teal");
+}
+
+/***
+ *
+ * HEART RATE MONITOR UI
+ *
+ */
 
 //Heart rate monitor history 
-let heartBeatHistory = []
+let heartBeatHistory = [];
     heartBeatHistory.length = constants.ui.heartRate.history_length;
     heartBeatHistory.fill(0);
 
@@ -33,7 +51,7 @@ let heartBeatHistory = []
 let shiftAccum = 0;
 
 //Beat progression
-let beatTimeElapsed = 0;
+let beatTimeElapsed = Infinity;
 
 // Draw heartbeat UI
 function heartBeatUI(x, y, width, height){
@@ -64,7 +82,7 @@ function heartBeatUI(x, y, width, height){
     for (let index = 0; index < heartBeatHistory.length; index++) {
         const qrsValueAtPosition = heartBeatHistory[index];
         const qrsValueAtNextPosition = heartBeatHistory[index+1];
-        line(x+(index*width/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtPosition*width/heartBeatHistory.length), x+((index+1)*width/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtNextPosition*width/heartBeatHistory.length), "red");
+        line(x+(index*width/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtPosition*width/heartBeatHistory.length), x+((index+1)*width/heartBeatHistory.length), y+(2*height/3)+(qrsValueAtNextPosition*width/heartBeatHistory.length),Math.min(3,Math.max(3/beatTimeElapsed,1)), "red");
     }
 }
 

docs/assets/js/constants.js

@@ -34,6 +34,11 @@ var constants = {
                 complex_width: 18
         }
     },
+    lifeFuncs:{
+      breath:{
+          fullBreath: 200
+      }
+    },
     legs:{
         size:{
             maximumMovement: 30

docs/assets/js/game.js

@@ -341,6 +341,11 @@ function rect(x,y,w,h,color) {
     curCtx.fillRect(x-(w/2)+camera.x+difx,y-(h/2)+camera.y+dify,w,h);
 }
 
+function cartesianRect(x,y,w,h,color) {
+    curCtx.fillStyle = color;
+    curCtx.fillRect(x+camera.x+difx,y+camera.y+dify,w,h);
+}
+
 function circle(x,y,r,color) {
     curCtx.beginPath();
     curCtx.arc(x+camera.x+difx, y+camera.y+dify, r, 0, 2 * Math.PI, false);
@@ -348,9 +353,10 @@ function circle(x,y,r,color) {
     curCtx.fill();
 }
 
-function line(x1, y1, x2, y2, color) {
+function line(x1, y1, x2, y2, weight, color) {
     curCtx.beginPath();
     curCtx.strokeStyle = color;
+    curCtx.lineWidth = weight;
     curCtx.moveTo(x1 + camera.x + difx, y1 + camera.y + dify);
     curCtx.lineTo(x2  + camera.x + difx , y2 + camera.y + dify);
     curCtx.stroke();

docs/assets/js/player/lifeFunctions.js

@@ -17,14 +17,13 @@ function updateLife() {
     if(keyPress[k.x]) {
         heartbeat();
     }
-
 };
 
 function breathe() {
 
     breath += 5;
-    if(breath >= 200) {
+    if(breath >= constants.lifeFuncs.breath.fullBreath) {
-        breath = 200;
+        breath = constants.lifeFuncs.breath.fullBreath;
         fullBreathTimer++;
         if(fullBreathTimer >= 60) {
             //cough and lose breath or something
@@ -37,5 +36,4 @@ function breathe() {
 
 function heartbeat() {
     heartBeat = true;
-
 };