Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Cutive+Mono&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
    <script language="javascript" type="text/javascript" src="./sketch.js" defer></script>
</head>

<body class="wrapper">

    <div class="grid-container">
        <div class="patient-info">
            David Omar Flores Chávez
        </div>
        <div class="date text-right">
            <span id="date-value" ></span>
        </div>
        <div id="sketch-holder" class="sketch-holder"></div>
        <div class="bpm">
            Heart rate: <span id="heart-rate-value">60</span> bpm
        </div>
        <div class="temperature text-right">
            Temperature: <span id="temperature-value">98.6</span> °F
        </div>
        <div class="pressure">
            Blood Pressure: <span id="pressure-value">132/88</span> mmHg
        </div>
        <div class="hb-levels text-right">
            Hemoglobin: <span id="hemoglobin-value">14.1</span> g/dl
        </div>
        <div class="minute-ventilation">
            Minute ventilation: <span id="minute-ventilation-value"> 6.14 </span> L/min
        </div>
        <div class="other">

        </div>
    </div>

</body>

</html>
            
          
!
            
              body{
 background-color: #151515;
 font-family: 'Cutive Mono', monospace;
 font-size: 15px;
 color: white;
	text-shadow: 0 0 4px #14B51B;
	&:after{ /* the video interlace effect I loved and didn't mind to delete */
		background:linear-gradient(0deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.2) 80%);
		background-size: 5px 3px;
		display: block;
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}
.wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100vh;
        align-items: center;
        justify-items: center;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 300px 300px;
        grid-template-rows: 1fr 150px 1fr 1fr 1fr;
        grid-row-gap: 10px;
        grid-template-areas: "patient-info date""sketch-holder sketch-holder""bpm minute-ventilation""temperature hb-levels""pressure other";
    }

    .patient-info {
        grid-area: patient-info;
    }

    .text-right {
        text-align: right;
    }

    .date {
        grid-area: date;
    }

    .sketch-holder {
        grid-area: sketch-holder;
    }

    .bpm {
        grid-area: bpm;
    }
            
          
!
            
              // Keep track of the times draw() has been called
let draw_i = 0;

/**
 * A Heart object will beat, and generate voltage values according to the time
 * the beat started
 *
 * "Duration" values are really pixels. 1 pixel represents 1/60 of a second.
 */
class Heart {
  /**
   * Creates an instance of Heart
   * @param {number} adDuration Duration in pixels of the atria depolarization
   * @param {number} vdDuration Duration in pixels of the ventricle depolarization
   * @param {number} vrDuration Duration in pixels of the ventricle repolarization
   *
   * @property {number} this.beatDuration Duration in pixels of the whole beat
   * @property {number} this.nextBeat Time between last beat, and next beat
   * @property {number} this.nextBeatIn Time remaining for next beat
   * @property {number[]} this.bpm Time between two particular beats
   * @property {number} this.voltage Current voltage value. No units used.
   */
  constructor(adDuration, vdDuration, vrDuration) {
    this.adDuration = adDuration;
    this.vdDuration = vdDuration;
    this.vrDuration = vrDuration;

    this.beatDuration = adDuration + vdDuration + vrDuration;

    this.nextBeat = 60;
    this.nextBeatIn = 60;
    this.bpm = [];
    this.voltage = 0;
  }

  /**
   * Assign the heart a new voltage value, and report that value to the ECG
   * the heart is connected to.
   * @param {number} voltage
   */
  setVoltage(voltage) {
    this.voltage = voltage;
    ecg.addValue({ y: this.voltage });
  }

  /**
   * Generates the voltage values corresponding to the atria depolarization process.
   * This is the process that generates the first part of the curve of every beat.
   *
   * @param {number} time Time in pixels since the atria depolarization process started
   */
  atriaDepolarization(time) {
    // This process is not close to what reality does, but here it is generated using a
    // sin function where only the positive values remain, making a bump followed by a
    // flat section
    let y = randomGaussian(5, 1) * sin(time * (360 / this.adDuration));

    // To compensate for the y-axis inverted direction, return -y when y is over 0
    y = y > 0 ? -y : 0.2 * (1 - y);

    // Update the voltage to whatever value was calculated
    this.setVoltage(y + noise(time));
  }

  /**
   * Generates the voltage values corresponding to the ventricle depolarization process.
   * This is the process that generates the spiky part of the curve of every beat.
   *
   * @param {number} time Time in pixels since the ventricle depolarization process started
   */
  ventricleDepolarization(time) {
    let y;
    // In the first third, the curve has a spike going down
    if (time <= this.vdDuration / 3)
      y = (randomGaussian(8, 2) * (this.vdDuration - time)) / 6;
    // In the second third, the curve has a big spike going up
    else if (time < (2 * this.vdDuration) / 3) {
      // Start producing a sound, going from 0 to 0.5 volume in 0.01 seconds
      osc.amp(0.5, 0.01);
      y = (randomGaussian(70, 2) * abs(1.5 - (this.vdDuration - time))) / 3;
      y = -y;
    }

    // In the last third, the curve has another spike (bigger than the first one) going down
    else {
      y = (randomGaussian(20, 2) * (this.vdDuration - time)) / 3;
      // Stop the sound, going from 0.5 to 0 volume in 0.01 secs
      osc.amp(0, 0.01);
    }

    // Update the voltage to whatever value was calculated
    this.setVoltage(y);
  }

  /**
   * Generates the voltage values corresponding to the ventricle repolarization process.
   * This is the process that generates the last part of the curve of every beat.
   *
   * @param {number} time Time in pixels since the ventricle repolarization process started
   */
  ventricleRepolarization(time) {
    // This process is not close to what reality does, but here it is generated using a
    // sin function where only the positive values remain, but displaced half a turn to
    // make a flat section followed by a bump
    let y = randomGaussian(8, 2) * sin(180 + time * (360 / this.vrDuration));

    // To compensate for the y-axis inverted direction, return -y when y is over 0
    y = y < 0 ? 0.2 * (1 - y) : -y;

    // Update the voltage to whatever value was calculated
    this.setVoltage(y + noise(time));
  }

  updateBPM() {
    // bpm = 3600 / pixel-distance
    this.bpm.push(3600 / this.nextBeat);

    // To make rapid frequency changes meaningful, get the average bpm using only the
    // last 5 values of time, not all of them. So dispose the oldest one when the list
    // length is over 5.
    if (this.bpm.length > 5) this.bpm.splice(0, 1);
    ecg.drawBPM(round(this.bpm.reduce((p, c) => p + c, 0) / this.bpm.length));
  }
  /**
   * Decrease this.nextBeatIn to simulate the pass of time.
   * If necessary, create a new this.nextBeat value
   */
  updateTimeToNextBeat() {
    // This indicates that the next beat will begin in the next iteration
    if (this.nextBeatIn-- === 0) {
      // Then calculate a new "remaining time" for the next beat.
      // Use the x coordinates of the mouse position to modify the heart frequency
      this.nextBeat = abs(ceil(randomGaussian((900 - mouseX) / 10, 3)));

      // It the pixel time between beat and beat is less than 18, force it to be
      // 18. This value makes to a bpm of 200.
      if (this.nextBeat < 18) this.nextBeat = 18;

      // Get new bpm values using the last this.nextBeat
      this.updateBPM();

      // Reset the remaining time to the new calculated time
      this.nextBeatIn = this.nextBeat;
    }
  }

  /**
   * Get voltage values for every second of the beat, even at rest (no-beating time
   * after the ventricle repolarization finished, and before the next atria depolarization)
   * @param {*} time Time in pixels after the atria depolarization started
   */
  beat(time) {
    // Update the time left for the start of the next beat
    this.updateTimeToNextBeat();

    // If according to time, beat is in the atria depolarization process, call that function
    if (time <= this.adDuration) {
      this.atriaDepolarization(time);
      return;
    }

    // If according to time, beat is in the ventricle depolarization process, call that function
    // Update the time so the value sent is relative to the start of the ventricle
    // depolarization process
    time -= this.adDuration;
    if (time <= this.vdDuration) {
      this.ventricleDepolarization(time);
      return;
    }

    // If according to time, beat is in the ventricle repolarization process, call that function
    // Update the time so the value sent is relative to the start of the ventricle
    // repolarization process
    time -= this.vdDuration;
    if (time <= this.vrDuration) {
      this.ventricleRepolarization(time);
      return;
    }

    // If function reached this point, it's not in any of the beat processes, and it's resting.
    // Add a noisy voltage value
    this.setVoltage(0 + noise(draw_i * 0.5) * 5);
  }
}

// Initialize a heart
let heart = new Heart(12, 8, 12);

/**
 *  ECG will receive, process, and draw the health information
 */
class ECG {
  /**
   * @param {Object} graphZero  Coordinates of the {0, 0} value of the graph
   * @param {Object[]} values   Array of {x, y} objects. x plots time, y plots voltage
   * @param {number} maxValuesHistory   Maximum number of values before wiping oldest one
   */
  constructor(graphZero, values, maxValuesHistory) {
    this.graphZero = graphZero;
    this.values = values;
    this.maxValuesHistory = maxValuesHistory;
    this.maximumX = maxValuesHistory;
  }

  /**
   * Add a new voltage value to the values array. If it exceeds the maximum number of
   * values allowed to store, remove the oldest one before.
   * @param {Object} value {x, y} object. x represents time, y represents voltage
   */
  addValue(value) {
    // If no x (time) value is received, assume it is the sucessor of the last value
    // in the values array. If the new x exceeds the maximum allowed, make x = 0
    if (this.values.length >= this.maxValuesHistory) this.values.splice(0, 1);
    if (value.x === undefined) {
      value.x = (this.values[this.values.length - 1].x + 1) % this.maximumX;
    }
    this.values.push(value);
  }

  /**
   * Draw lines joining every voltage value throughout time in the screen
   */
  plotValues() {
    push();

    for (let i = 1; i < this.values.length; i++) {
      // If the previous value has a X coordinate higher than the current one,
      // don't draw it, to avoid lines crossing from end to start of the ECG plot area.
      if (this.values[i - 1].x > this.values[i].x) continue;

      // Older values are drawn with a lower alpha
      let alpha = i / this.values.length;

      // Set the color of the drawing
      stroke(121, 239, 150, alpha);
      fill(121, 239, 150, alpha);

      // Line from previous value to current value
      line(
        this.graphZero.x + this.values[i - 1].x,
        this.graphZero.y + this.values[i - 1].y,
        this.graphZero.x + this.values[i].x,
        this.graphZero.y + this.values[i].y
      );

      // For the last 5 values, draw a circle with a radius going in function to
      // its index. This to make the leading line thicker
      if (i + 5 > this.values.length) {
        circle(
          this.graphZero.x + this.values[i].x,
          this.graphZero.y + this.values[i].y,
          this.values.length / i
        );
      }
    }
    pop();
  }

  //// The following methods update the values represented as html elements

  updateInfo() {
    this.updateDate();
    if(draw_i % 50 === 0){
    this.updateBloodPressure();
    this.updateVentilation();
    this.updateTemperature();
    this.updateHemoglobin();
    }
  }

  updateHemoglobin(){
    document.getElementById("hemoglobin-value").innerHTML = randomGaussian(14, .1).toFixed(1)

  }
  updateTemperature(){
    document.getElementById("temperature-value").innerHTML = randomGaussian(98.6, .1).toFixed(1)

  }
  updateVentilation(){
    document.getElementById("minute-ventilation-value").innerHTML = randomGaussian(6, .5).toFixed(2)
  }

  updateBloodPressure(){
    document.getElementById("pressure-value").innerHTML = 
    "" + round(randomGaussian(130, 1)) + "/" + round(randomGaussian(90, 1));
  }

  updateDate() {
    let date = new Date();
    date =
      "" +
      date.getFullYear() +
      "-" +
      date.getMonth() +
      "-" +
      date.getDate() +
      " " +
      date.getHours() +
      ":" +
      date.getMinutes() +
      ":" +
      date.getSeconds();
    document.getElementById("date-value").innerHTML = date;
  }

  /**
   * Update the html content of the span containing the bpm info
   * @param {number} bpm
   */
  drawBPM(bpm) {
    document.getElementById("heart-rate-value").innerHTML = bpm;
  }
}

// Initialize the ecg
let ecg = new ECG({ x: 0, y: 110 }, [{ x: 0, y: 0 }], 600);

/**
 * Set the general configuration for the p5js canvas
 */
function setup() {
  // Create a 600x150 canvas and place it inside the div with id "sketch-holder"
  let myCanvas = createCanvas(600, 150);
  myCanvas.parent("sketch-holder");

  // Set the color mode to allow calling RGBA without converting to string
  colorMode(RGB, 255, 255, 255, 1);

  // Work with degrees instead of Radians (sin function used inside Heart Class)
  angleMode(DEGREES);

  // Set the frequency the ecg will emit every heartbeat.
  osc = new p5.Oscillator();
  osc.setType("sine");
  osc.freq(445);
  osc.amp(0);
  osc.start();
}

/**
 *  Draw a rectangle of size (canvas.width - 1, canvas.height - 1)  with dark background
 * and a brilliant green border.
 *
 * The -1 is to allow the border to be seen in the final page.
 */
function drawECGScreenBackground() {
  push();
  fill("#201D1D");
  stroke(121, 239, 150, 1);
  rect(0, 0, 599, 149);
  pop();
}

/**
 * Function to be called until the page is closed
 * Part of p5js
 */
function draw() {
  // Keep track of the number of times draw has been called
  draw_i++;

  // Hide previous ECG line by drawing a background
  drawECGScreenBackground();

  // Get the new voltage values for the ECG from the heart
  heart.beat(heart.nextBeat - heart.nextBeatIn);

  // Draw the line of voltage values over time in the ECG screen
  ecg.plotValues();

  // Update the information values of the ECG
  ecg.updateInfo();
}

// p5.sound variables
let osc;

function touchStarted() {
  // To prevent sound bugs by browsers asking for permission
  getAudioContext().resume();
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console