1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<html>
<head>
<title>JSXGraph example</title>
<link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
<script type="text/javascript" src="../distrib/jsxgraphcore.js"></script>
</head>
<body>
<h2>Example to demonstrate and test color blindness simulations.</h2>
<div style="width:800px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:450px; float:left"></div>
</div>
<div id="debug" style="display:block;"></div>
<script type="text/javascript">
/* <![CDATA[ */
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true});
brd.suspendUpdate();
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});
pol = brd.createElement('polygon',[A,B,C], {fillColor:'none'});//'#FFFF0050'});
for(i=0;i<=2;i++) {
pol.borders[i].setProperty('strokeColor:#009256');
}
pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});
pABC.setProperty('strokeColor:#901B77','fillColor:#CA147A');
pBCA.setProperty('strokeColor:#901B77','fillColor:#CA147A');
pCAB.setProperty('strokeColor:#901B77','fillColor:#CA147A');
i1 = brd.createElement('intersection',[pABC,pCAB,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});
pABC.setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pBCA.setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pCAB.setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});
i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});
c.midpoint.setProperty('visible:false');
c.setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});
euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});
brd.unsuspendUpdate();
function makeColorBlind(deficiency) {
var e, o;
brd.suspendUpdate();
for(e in brd.objects) {
o = brd.objects[e];
o.setProperty({strokeColor: JXG.rgb2cb(o.visProp.strokeColor, deficiency), fillColor: JXG.rgb2cb(o.visProp.fillColor, deficiency),
highlightStrokeColor: JXG.rgb2cb(o.visProp.highlightStrokeColor, deficiency), highlightFillColor: JXG.rgb2cb(o.visProp.highlightFillColor, deficiency)});
}
brd.unsuspendUpdate();
}
/* ]]> */
</script>
<form>
<input type="button" value="Simulate protanopia" onclick="brd.emulateColorblindness('protanopia');"/>
<input type="button" value="Simulate deuteranopia" onclick="brd.emulateColorblindness('deuteranopia');"/>
<input type="button" value="Simulate tritanopia" onclick="brd.emulateColorblindness('tritanopia');"/>
<input type="button" value="Stop Simulation" onclick="brd.emulateColorblindness('none');"/>
</form>
</body>
</html>
|
