clp/cvd-simulator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First commit.

Browse source 
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.
This commit is contained in:
Christian Lawson-Perfect 2025-04-04 08:21:57 +00:00
commit e4ea0b0b99
6 changed files with 183 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

48
index.html Normal file
View file

@ -0,0 +1,48 @@
<!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</figcaption>
</figure>
<figure id="deuteran">
<canvas></canvas>
<figcaption>Simulated deuteranomaly</figcaption>
</figure>
<figure id="tritan">
<canvas></canvas>
<figcaption>Simulated tritanomaly</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>