feat: [typescript] fullscreen mode and color interpolation

README.md

@@ -46,15 +46,15 @@ yarn run watch
 Modify settings by going to **Application** (found in the top right via `>>`) > **Local Storage**. Use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>to open and close these Developer Tools to [access and modify these settings](https://developer.chrome.com/docs/devtools/storage/localstorage/#edit), and <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>Cmd</kbd> + <kbd>R</kbd> to refresh the app to use your newly selected settings. If no settings appear on the first run of the application, you can manually add them), following the format of the `storedValues` variable in [`/src/renderer.ts`](https://github.com/peterklingelhofer/exhale/blob/main/src/renderer.ts). To add them manually, go to the **Console** and copy paste the following code into the console and press <kbd>Enter</kbd> or <kbd>Return</kbd> to populate your `localStorage` (these are the defaults as of the time of writing):
 ```ts
 localStorage = {
-  colorExhale = "rgb(0, 221, 255)",
-  colorInhale = "rgb(168, 50, 150)",
+  colorExhale = "rgb(0, 0, 255)",
+  colorInhale = "rgb(255, 0, 0)",
   colorStyle = "linear", // can be "linear" or "constant"
-  circleOrRectangle = "rectangle", // can be "circle" or "rectangle"
-  durationExhale = 10,
+  shape = "fullscreen", // can be "circle" or "rectangle"
   durationInhale = 5,
-  durationPostExhale = 0,
-  durationPostInhale = 0,
-  opacity = 0.1,
+  durationIn2Out = 0,
+  durationExhale = 10,
+  durationOut2In = 0,
+  opacity = 0.25,
 }
 ```
 

typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exhale",
-  "version": "1.0.8",
+  "version": "1.2.3",
   "description": "A customizable visual indicator to remind you to breathe and facilitate breathwork practice",
   "scripts": {
     "build": "tsc",

typescript/src/renderer.ts

@@ -12,6 +12,7 @@ enum ColorStyle {
 }
 enum Shape {
   CIRCLE = "circle",
+  FULLSCREEN = "fullscreen",
   RECTANGLE = "rectangle",
 }
 const FRAMES_PER_SECOND = 60;
@@ -21,20 +22,21 @@ const canvas = document.createElement("canvas");
 document.body.appendChild(canvas);
 const ctx = canvas.getContext("2d");
 
+console.warn('Adjust these parameters to your liking (e.g. localStorage.opacity = "0.3"):', localStorage);
 const {
-  colorExhale = "rgb(0, 221, 255)",
-  colorInhale = "rgb(168, 50, 150)",
+  colorExhale = "rgb(0, 0, 255)",
+  colorInhale = "rgb(255, 0, 0)",
   colorStyle = ColorStyle.LINEAR,
-  circleOrRectangle = Shape.RECTANGLE,
-  durationInhale = 2,
-  durationIn2Out = 2.5,
-  durationExhale = 2.5,
-  durationOut2In = 2,
-  opacity = 0.1,
+  shape = Shape.FULLSCREEN,
+  durationInhale = 5,
+  durationIn2Out = 0,
+  durationExhale = 10,
+  durationOut2In = 0,
+  opacity = 0.25,
 } = localStorage;
 
 Object.assign(localStorage, {
-  circleOrRectangle,
+  shape,
   colorExhale,
   colorInhale,
   colorStyle,
@@ -111,8 +113,8 @@ for (let i = 0; i < timeO2I.length; i++) {
 }
 const totalFrames = indices.length;
 
-let totalFrameInd;
-let transitionValue;
+let totalFrameInd: number;
+let transitionValue: number;
 
 function draw(): void {
   ctx.fillStyle = BACKDROP_COLOR;
@@ -131,7 +133,16 @@ function draw(): void {
   // radius is a function of transitionValue
   radius = transitionValue * halfCanvasHeight;
 
-  if (circleOrRectangle === Shape.CIRCLE) {
+  if (shape === Shape.FULLSCREEN) {
+    const inhaleColorComponents = colorInhale.match(/\d+/g).map(Number);
+    const exhaleColorComponents = colorExhale.match(/\d+/g).map(Number);
+    const interpolatedColor = inhaleColorComponents.map((comp: number, index: string | number) => {
+      return comp + (exhaleColorComponents[index] - comp) * transitionValue;
+    });
+
+    ctx.fillStyle = `rgb(${interpolatedColor[0]}, ${interpolatedColor[1]}, ${interpolatedColor[2]})`;
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+  } else if (shape === Shape.CIRCLE) {
     const centerX = canvasWidth / 2;
     const centerY = canvasHeight / 2;
     const startAngle = 0;
@@ -157,7 +168,7 @@ function draw(): void {
     ctx.beginPath();
     ctx.arc(centerX, centerY, radius, startAngle, endAngle, isCounterClockwise);
     ctx.fill();
-  } else {
+  } else { // Shape.RECTANGLE
     const twiceRadius = radius * 2;
 
     if (colorStyle === ColorStyle.LINEAR) {