48 lines
No EOL
1.8 KiB
HTML
48 lines
No EOL
1.8 KiB
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> |