Heartrate monitor

.gitignore

@@ -2,4 +2,7 @@
 docs/_site/*
 docs/.sass-cache/*
 docs/.jekyll-cache/*
-docs/node_modules
+docs/node_modules
+
+# idea
+.idea

docs/assets/js/UI/ui.js

@@ -1,23 +1,33 @@
+//Colors
+
 // UI for title screen
-function drawTitleScreenUI() {};
+function drawTitleScreenUI() {
+}
 
 // UI for level transition
-function drawLevelTransitionUI() {};
+function drawLevelTransitionUI() {
+}
 
 // UI for playing
-function drawPlayingUI() {};
+function drawPlayingUI() {
+    heartBeatUI(cw/4*3-8,ch/8*7-8,cw/4,ch/8);
+}
 
 //UI for pause screen
-function drawPausedUI() {};
+function drawPausedUI() {
+}
 
 //UI for game end
-function drawEndUI() {};
+function drawEndUI() {
+}
 
 // Construct a rectangular UI
 function rectUI() {};
 
 //Heart rate monitor history 
-var heartBeatHistory = [].fill(0,0, constants.ui.heartRate.history_length);
+var heartBeatHistory = []
+    heartBeatHistory.length = constants.ui.heartRate.history_length;
+    heartBeatHistory.fill(0);
 
 //Shift accumulation
 var shiftAccum = 0;
@@ -31,6 +41,7 @@ function heartBeatUI(x, y, width, height){
     shiftAccum += constants.ui.heartRate.scroll_speed;
     if(shiftAccum>=1){
         shiftAccum%=1;
+        beatTimeElapsed += 0.04;
         heartBeatHistory.shift();
         pushNextBeatValue();
     }
@@ -39,19 +50,38 @@ function heartBeatUI(x, y, width, height){
         beatTimeElapsed = 0;
     }
 
+    rect(x+width/2,y+height/2,width,height,"black");
     for (let index = 0; index < heartBeatHistory.length; index++) {
         const qrsValueAtPosition = heartBeatHistory[index];
-        line(x+index, y+(2*height/3), x+index, y+(2*height/3)+qrsValueAtPosition);   
+        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");
     }
 }
 
 function pushNextBeatValue(){
-    var nextBeatValue;
+    var nextBeatValue = 0;
 
-    beatTimeElapsed %= constants.ui.heartRate.complex_width;
+    const squareSize = constants.ui.heartRate.square_size;
-    if(beatTimeElapsed<=constants.ui.heartRate.pr_width){
+    const complexTime = constants.ui.heartRate.complex_width*squareSize;
-        nextBeatValue = -0.25((x - 1.5)**2) + 0.5625;
+    const prTime = constants.ui.heartRate.pr_width*squareSize;
-    } else if (beatTimeElapsed >= constants.ui.heartRate.pr_width + 1 && beatTimeElapsed <= constants.ui.heartRate.pr_width + 1 + constants.ui.heartRate.qrs_width/4) {
+    const qrsTime = constants.ui.heartRate.qrs_width*squareSize;
+    const qtTime = constants.ui.heartRate.qt_width*squareSize;
+
+
+    if(beatTimeElapsed<=complexTime) {
+        if (beatTimeElapsed <= prTime) {
+            nextBeatValue = 0.5*(Math.pow((beatTimeElapsed/squareSize - (prTime/2/squareSize)), 2)) - 2;
+        } else if (beatTimeElapsed > prTime + squareSize && beatTimeElapsed <= prTime + squareSize + (qrsTime / 4)) {
+            nextBeatValue = -4 + beatTimeElapsed/squareSize;
+        } else if (beatTimeElapsed > prTime + squareSize + qrsTime / 4 && beatTimeElapsed <= prTime + squareSize + qrsTime / 2) {
+            nextBeatValue = -14 * (beatTimeElapsed/squareSize - 4.5) - 0.5;
+        } else if (beatTimeElapsed > prTime + squareSize + qrsTime / 2 && beatTimeElapsed <= prTime + squareSize + (3*qrsTime / 4)) {
+            nextBeatValue = 7 * (beatTimeElapsed/squareSize - 5) - 6.5;
+        } else if (beatTimeElapsed > prTime + squareSize + (3*qrsTime / 4) && beatTimeElapsed <= prTime + squareSize + qrsTime) {
+            nextBeatValue = 2 * (beatTimeElapsed/squareSize - 6);
+        } else if (beatTimeElapsed > prTime + squareSize*2 + qrsTime && beatTimeElapsed <= prTime + squareSize*2 + qrsTime + qtTime) {
+            nextBeatValue = 0.5 * Math.pow((beatTimeElapsed/squareSize - (prTime + squareSize*2 + qrsTime + qtTime/2)/squareSize),2) - 3;
+        }
     }
 
     heartBeatHistory.push(nextBeatValue);

docs/assets/js/constants.js

@@ -26,11 +26,12 @@ var constants = {
                 history_length: 100,
 
                 //300 squares/min
-                scroll_speed: 0.13333,
+                scroll_speed: 0.8,
-                pr_width: 0.16,
+                square_size: 0.08,
-                qrs_width: 0.1,
+                pr_width: 4,
-                qt_width: 0.39,
+                qrs_width: 2,
-                complex_width: 0.65
+                qt_width: 5,
+                complex_width: 18
         }
     },
     legs:{

docs/assets/js/game.js

@@ -350,9 +350,10 @@ function circle(x,y,r,color) {
 
 function line(x1, y1, x2, y2, color) {
     curCtx.beginPath();
-    curCtx.style = color;
+    curCtx.strokeStyle = color;
     curCtx.moveTo(x1 + camera.x + difx, y1 + camera.y + dify);
-    curCtx.lineTo(x2 + camera.x + difx, y2 + camera.y + dify);
+    curCtx.lineTo(x2  + camera.x + difx , y2 + camera.y + dify);
+    curCtx.stroke();
 }
 
 function shape(x,y,relitivePoints,color) {

docs/assets/js/player/lifeFunctions.js

@@ -8,13 +8,13 @@ var timeSinceLastBeat = 0;
 
 function updateLife() {
     
-    if(keyDown[k.Z]) {
+    if(keyDown[k.z]) {
         breathe();
     } else {
         breath--;
     }
 
-    if(keyPress[k.X]) {
+    if(keyPress[k.x]) {
         heartbeat();
     } else {
         timeSinceLastBeat++;
@@ -38,7 +38,6 @@ function breathe() {
 };
 
 function heartbeat() {
-
     timeSinceLastBeat = 0;
 
 };

docs/assets/js/playing/playing.js

@@ -3,4 +3,6 @@ function handlePlaying() {
     if(keyPress[k.BACKSLASH]) {
         globalState = globalStates.building;
     }
+
+    updateLife();
 }

docs/index.html

@@ -33,13 +33,13 @@
         <script src="assets/js/world/level.js"></script>
 
         <!-- <script src="assets/js/player/player.js"></script>
-        <script src="assets/js/player/leg.js"></script>
+        <script src="assets/js/player/leg.js"></script> -->
-        <script src="assets/js/player/lifeFunctions.js"></script> -->
+        <script src="assets/js/player/lifeFunctions.js"></script>
 
         <script src="assets/js/playing/playing.js"></script>
 
-        <!-- <script src="assets/js/titleScreen/titleScreen.js"></script>
+        <!-- <script src="assets/js/titleScreen/titleScreen.js"></script> -->
-        <script src="assets/js/UI/ui.js"></script> -->
+        <script src="assets/js/UI/ui.js"></script>
 
         <!-- Webpage -->
         <script src="assets/js/injection/cssinjector.js"></script>