http://jsxgraph.org/wiki/index.php?title=Color_vision_deficiency&feed=atom&action=history
Color vision deficiency - Revision history
2024-03-29T13:53:57Z
Revision history for this page on the wiki
MediaWiki 1.40.1
http://jsxgraph.org/wiki/index.php?title=Color_vision_deficiency&diff=5334&oldid=prev
Michael at 18:11, 23 June 2011
2011-06-23T18:11:16Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 18:11, 23 June 2011</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l102">Line 102:</td>
<td colspan="2" class="diff-lineno">Line 102:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> })();</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> })();</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></jsxgraph></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">==Code==</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><source lang="javascript"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">// To enable color vision deficiency emulation just use</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">board.emulateColorblindness(deficieny);</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">// where deficieny is a string equal to either 'protanopia', 'deuteranopia' or 'tritanopia'. To disable it use</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">board.emulateColorblindness();</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">// without any parameters.</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></source></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==References==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==References==</div></td></tr>
</table>
Michael
http://jsxgraph.org/wiki/index.php?title=Color_vision_deficiency&diff=5333&oldid=prev
Michael: Created page with "JSXGraph can give a rough impression about how color blind people see your work. It is possible to emulate three types of color vision deficiency: '''Protanopia''', '''Deuteranop..."
2011-06-20T09:17:17Z
<p>Created page with "JSXGraph can give a rough impression about how color blind people see your work. It is possible to emulate three types of color vision deficiency: '''Protanopia''', '''Deuteranop..."</p>
<p><b>New page</b></p><div>JSXGraph can give a rough impression about how color blind people see your work. It is possible to emulate three types of color vision deficiency: '''Protanopia''', '''Deuteranopia''', and '''Tritanopia'''.<br />
<br />
Consider this geometric construction from the [[Euler line]] example.<br />
<br />
<html><br />
<button id="protanopia">Emulate Protanopia</button><br />
<button id="deuteranopia">Emulate Deuteranopia</button><br />
<button id="tritanopia">Emulate Tritanopia</button><br />
<button id="original">Show original</button><br />
</html><br />
<jsxgraph width="500" height="500" box="box"><br />
(function () {<br />
<br />
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true});<br />
<br />
var cerise = {<br />
strokeColor: '#901B77',<br />
fillColor: '#CA147A'<br />
},<br />
<br />
grass = {<br />
strokeColor: '#009256',<br />
fillColor: '#65B72E',<br />
visible: true,<br />
withLabel: true<br />
},<br />
<br />
perpendicular = {<br />
strokeColor: 'black',<br />
dash: 1,<br />
strokeWidth: 1,<br />
point: JXG.deepCopy(cerise, {<br />
visible: true,<br />
withLabel: true<br />
})<br />
},<br />
<br />
median = {<br />
strokeWidth: 1,<br />
strokeColor: '#333333',<br />
dash:2<br />
},<br />
<br />
A = board.create('point', [1, 0], cerise),<br />
B = board.create('point', [-1, 0], cerise),<br />
C = board.create('point', [0.2, 1.5], cerise),<br />
pol = board.create('polygon',[A,B,C], {<br />
fillColor: '#FFFF00',<br />
lines: {<br />
strokeWidth: 2,<br />
strokeColor: '#009256'<br />
}<br />
});<br />
<br />
var pABC, pBCA, pCAB, i1;<br />
perpendicular.point.name = 'H_c';<br />
pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);<br />
perpendicular.point.name = 'H_a';<br />
pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);<br />
perpendicular.point.name = 'H_b';<br />
pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);<br />
grass.name = 'H';<br />
i1 = board.create('intersection', [pABC, pCAB, 0], grass);<br />
<br />
var mAB, mBC, mCA;<br />
cerise.name = 'M_c';<br />
mAB = board.create('midpoint', [A, B], cerise);<br />
cerise.name = 'M_a';<br />
mBC = board.create('midpoint', [B, C], cerise);<br />
cerise.name = 'M_b';<br />
mCA = board.create('midpoint', [C, A], cerise);<br />
<br />
var ma, mb, mc, i2;<br />
ma = board.create('segment', [mBC, A], median);<br />
mb = board.create('segment', [mCA, B], median);<br />
mc = board.create('segment', [mAB, C], median);<br />
grass.name = 'S';<br />
i2 = board.create('intersection', [ma, mc, 0], grass);<br />
<br />
var c;<br />
grass.name = 'U';<br />
c = board.create('circumcircle',[A, B, C], {<br />
strokeColor: '#000000',<br />
dash: 3,<br />
strokeWidth: 1,<br />
point: grass<br />
});<br />
<br />
var euler;<br />
euler = board.create('line', [i1, i2], {<br />
strokeWidth: 2,<br />
strokeColor:'#901B77'<br />
});<br />
board.update();<br />
<br />
var deficiencies = ['protanopia', 'deuteranopia', 'tritanopia'],<br />
i;<br />
for (i = 0; i < deficiencies.length; i++) {<br />
JXG.addEvent(document.getElementById(deficiencies[i]), 'click', (function (_def) { return function () { board.emulateColorblindness(_def); }; })(deficiencies[i]), board);<br />
}<br />
JXG.addEvent(document.getElementById('original'), 'click', function () { board.emulateColorblindness(); }, board);<br />
})();<br />
</jsxgraph><br />
<br />
==References==<br />
<br />
http://www.squarecirclez.com/blog/math-and-color-blindness<br />
<br />
http://en.wikipedia.org/wiki/Color_blindness<br />
<br />
[[Category:Examples]]</div>
Michael