search

DylanSp / decision-maker-experiments

MIT License
0 stars 0 forks source link

Add colored background to simulation results #7

Open DylanSp opened 9 months ago

DylanSp commented 9 months ago

White for 0% probability, red for 100% probability.

Experimental Codepen demonstrating background color. This uses HSL background colors, varying the L value between 50% and 100% for fully red and fully white, respectively. Don't bother trying to use the mix-blend-mode for greater contrast, I couldn't get it to work.

DylanSp commented 9 months ago 
// percentage is a decimal between 0 and 1
function percentageToHSL(percentage) {
  const hValue = "0";
  const sValue = "100%";

  const percentagePoints = 100 * percentage;

  // fully white: L=100%
  // fully red: L=50%

  // units: percentage points
  const lDeduction = 0.5 * percentagePoints;

  // units: percentage points
  const rawLValue = 100 - lDeduction;

  const lValue = rawLValue.toFixed(0)

  const hslStr = `hsl(${hValue}, ${sValue}, ${lValue}%)`
  // console.log(hslStr)
  return hslStr;
}