cvd-simulator/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CVD simulator</title>
    <script type="module" src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
    <h1>Colour vision deficiency simulator</h1>
    <p>This page aims to give you a rough idea of what people with different colour vision see.</p>
    </header>
    <main>
      <form>
        <p>
          <label>Pick an image, or drag and drop one: </label>
          <input type="file" name="file" id="file" accept="image/*">
        </p>
      </form>
      <div id="grid">
        <figure id="normal">
          <img src="colourful-monotiles.jpg">
          <figcaption>Unmodified</figcaption>
        </figure>
        <figure id="protan">
          <canvas></canvas>
          <figcaption>Simulated protanomaly (weak red)</figcaption>
        </figure>
        <figure id="deuteran">
          <canvas></canvas>
          <figcaption>Simulated deuteranomaly (weak green)</figcaption>
        </figure>
        <figure id="tritan">
          <canvas></canvas>
          <figcaption>Simulated tritanomaly (weak blue)</figcaption>
        </figure>
      </div>

      <p>This is based on the method described in <a href="https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html#Tutorial">A Physiologically-based Model for Simulation of Color Vision Deficiency</a>.</p>
      <p>To simulate a colour vision deficiency, the <math><mo>(</mo><mi>r</mi><mo>,</mo><mi>g</mi><mo>,</mo><mi>b</mi><mo>)</mo></math> vector for each pixel is multiplied by a matrix representing the eye's response in each kind of colour receptor.</p>
    </main>
    <footer>
      <p>made by <a href="https://somethingorotherwhatever.com">clp</a></h1>
    </footer>
  </body>
</html>
First commit. It filters the colours by doing matrix multiplication in JS on the pixel array. It could almost definitely be made faster using a WebGL shader. 2025-04-04 08:21:57 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
			`<meta name="viewport" content="width=device-width">`
			`<title>CVD simulator</title>`
			`<script type="module" src="script.js"></script>`
			`<link rel="stylesheet" href="style.css">`
			`</head>`
			`<body>`
			`<header>`
			`<h1>Colour vision deficiency simulator</h1>`
			`<p>This page aims to give you a rough idea of what people with different colour vision see.</p>`
			`</header>`
			`<main>`
			`<form>`
			`<p>`
			`<label>Pick an image, or drag and drop one: </label>`
			`<input type="file" name="file" id="file" accept="image/*">`
			`</p>`
			`</form>`
			`<div id="grid">`
			`<figure id="normal">`
			`<img src="colourful-monotiles.jpg">`
			`<figcaption>Unmodified</figcaption>`
			`</figure>`
			`<figure id="protan">`
			`<canvas></canvas>`
tiny change 2025-04-04 10:25:14 +00:00			`<figcaption>Simulated protanomaly (weak red)</figcaption>`
First commit. It filters the colours by doing matrix multiplication in JS on the pixel array. It could almost definitely be made faster using a WebGL shader. 2025-04-04 08:21:57 +00:00			`</figure>`
			`<figure id="deuteran">`
			`<canvas></canvas>`
tiny change 2025-04-04 10:25:14 +00:00			`<figcaption>Simulated deuteranomaly (weak green)</figcaption>`
First commit. It filters the colours by doing matrix multiplication in JS on the pixel array. It could almost definitely be made faster using a WebGL shader. 2025-04-04 08:21:57 +00:00			`</figure>`
			`<figure id="tritan">`
			`<canvas></canvas>`
tiny change 2025-04-04 10:25:14 +00:00			`<figcaption>Simulated tritanomaly (weak blue)</figcaption>`
First commit. It filters the colours by doing matrix multiplication in JS on the pixel array. It could almost definitely be made faster using a WebGL shader. 2025-04-04 08:21:57 +00:00			`</figure>`
			`</div>`

			`<p>This is based on the method described in <a href="https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html#Tutorial">A Physiologically-based Model for Simulation of Color Vision Deficiency</a>.</p>`
			`<p>To simulate a colour vision deficiency, the <math><mo>(</mo><mi>r</mi><mo>,</mo><mi>g</mi><mo>,</mo><mi>b</mi><mo>)</mo></math> vector for each pixel is multiplied by a matrix representing the eye's response in each kind of colour receptor.</p>`
			`</main>`
			`<footer>`
			`<p>made by <a href="https://somethingorotherwhatever.com">clp</a></h1>`
			`</footer>`
			`</body>`
			`</html>`