P5js + React + Web Workers Demo App

Diagnosing Hypothermia Symptoms

Main goals of the project

This project demonstrates how to combine React (including the latest features such as hooks and context), p5.js and Web Workers:

  1. Build a single page application (SPA) using the React and p5js libraries.
  2. Use Web Workers to run tasks in background threads.

The basic idea is that the p5.js sketch is wrapped in a React component. The data that comes into the sketch is passed on to this component as props. Callbacks are used to return information back from the sketch to the application.


Check out the online version here: http://hypothermia.surge.sh/.
Source code is available here: https://github.com/atorov/react-p5js-hypothermia-demo.


:warning: This is a demo application. DO NOT use it in real situations to diagnose or treat hypothermia and frostbite!


Another examples, build on the same concept, can be found here, here, and here.

4 Likes