Need a help
40 views
Skip to first unread message
Cyrille Piatecki
Apr 28, 2022, 5:53:11 AM4/28/22
to JSXGraph
My question is the following : I want to illustrate the notion of convexity. So I predraw a segment A-B (A and B being movable). As soon as the segment cross a white zone its corresponding part should change of color. Is ther a way to obtain this effect ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>[jsxgraphs]</title>
<link rel="stylesheet" type="text/css" href="./jsxgraph.css" />
<script type="text/javascript" src="./jsxgraphcore.js"></script>
<style>
.serif {
font-family: "Computer Modern", Times, serif;
}
.sansserif {
font-famliy: "Computer Modern Sans", Times, sans-serif;
}
.monospace {
font-family: "Lucida Console", Courier, monospace;
}
body {
background-color: #11ffee00;
color: #074978;
}
.shaded {
padding: 8px; border: 1px solid #CCC; box-shadow:8px 8px 12px #888; border-radius:6px;
}
div.Wrapper *{
color:"red";
}
#myDIV {
color:"red";
background-color: Transparent;;
}
.circle
{
width:25px;height:25px;
border: solid 1px #DCDCDC;
background-color: #DCDCDC;
box-shadow: 10px 10px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 2px 2px 1px rgba(1,1,1,0.6);
-webkit-box-shadow: 10px 10px 5px rgba(1,1,0,0.6);
-o-box-shadow: 5px 5px 5px rgba(1,0,0,0.6);
border-radius:70px;
}
.rot57{
transform: rotate(57deg);
}
.rot40{
transform: rotate(40deg);
}
.rot20{
transform: rotate(20deg);
}
.rot0{
transform: rotate(0deg);
}
.rot90{
transform: rotate(90deg);
}
.rot15{
transform: rotate(15deg);
}
</style>
<script>
window.MathJax = {
tex: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
packages: ['base', 'ams']
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process'
}
};
</script>
<script type="text/javascript" id="MathJax-script"
</script>
</head>
<body class="serif">
<center>
<div id="box" class="jxgbox" style="width:700px; height:700px;"></div>
<script type="text/javascript">
rougevenitien='#AE181E';
peche='#ffdfbf';
cadet='#5F9EA0';
olivedrab='#6B8E23';
monjaune='#f9f9fb'
JXG.Options.text.useMathJax = true;
/* Il y a d'autres options de board à explorer */
/* voir aussi https://www.intmath.com/cg3/jsxgraph-axes-ticks-grids.php */
var board = JXG.JSXGraph.initBoard('box', {
boundingbox: [-15, 30, 15, 0], //[xnordouest,ynordouest,xsudest,ysudest]
axis:false,
grid:false,
zoom: { //tenir la touche shift en utilisant la roue de la souris
factorX:1.25, //factor de zoom horizontal
factorY:1.25, //facteur de zoom vertical
wheel:true,
needshift:true, //nécessité de Shift pour que la roue de la souris puisse zoomer
eps: 0.1
},
defaultAxes: {
x : {
name: '$x_1$',
withLabel: true,
label: {
position: 'rt',
offset: [-10, -15]
}
},
y : {
withLabel:true,
name: '$x_2$',
label: {
position: 'rt',
offset: [-20, -10]
}
}
},
showNavigation:true,
showZoom:true,
showFullscreen: true,
fullscreen: {
symbol: 'fs'
},
showCopyright:false
});
board.renderer.container.style.backgroundColor='white'; //valeur par défaut si 'none'
JXG.Options.axis.ticks.insertTicks = false;
JXG.Options.axis.ticks.ticksDistance = 500;
/* Graph 1*/
var p1=board.create('point',[-10, 23],{name:'',fixed:true});
var p2=board.create('point',[0, 25],{name:'',fixed:true});
var p3=board.create('point',[10, 15],{name:'',fixed:true});
var p4=board.create('point',[12, 5],{name:'',fixed:true});
var p5=board.create('point',[0, 10],{name:'',fixed:true});
var p6=board.create('point',[-12, 5],{name:'',fixed:true});
var p7=board.create('point',[-10, 17.5],{name:'',fixed:true});
var p8=board.create('point',[-10, 23],{name:'',fixed:true});
var chain1 = board.create('polygon', [p1,p2,p3,p4,p5,p6,p7,p8], {
borders: {strokeWidth: 3,highlight:false},
fillColor:'#E4ABDD',
layer:0,
highlight:false
});
var circ1=board.create('circle',[[-5,18],2],
{
fillcolor:'white',
fixed:true
});
var p9=board.create('point',[0, 23],{name:'',fixed:true});
var p10=board.create('point',[9, 10],{name:'',fixed:true});
var p11=board.create('point',[2.5, 16],{name:'',fixed:true});
var p12=board.create('point',[0, 23],{name:'',fixed:true});
var chain2 = board.create('polygon', [p9,p10,p11], {
name:"",
opacity:1,
fillColor:"#ffffff",
strokeColor:"#ffffff",
strokeWidth:5,
Highlight:false,
layer:5,// valeur par défaut
});
var p13 = board.create('point', [-8, 10], //[x, y]
{
name: '$A$',
label:{autoPosition: true, offset:[12, 15]},
strokeColor:"#9B59B6",//couleur du pourtour
fillColor:"#9B59B6", //couleur intérieure
visible:true,// le point est visible ou non
fixed:false, // le point peut bouger ou non
size:5, // en pixels
showInfobox: false, // n'affiche pas les coordonnées quand la souris passe dessus
Highlight:false // ne change pas de status quand la souris passe dessus
});
var p14 = board.create('point', [-4, 12], //[x, y]
{
name: '$B$',
label:{autoPosition: true, offset:[12, 15]},
strokeColor:"#9B59B6",//couleur du pourtour
fillColor:"#9B59B6", //couleur intérieure
visible:true,// le point est visible ou non
fixed:false, // le point peut bouger ou non
size:5, // en pixels
showInfobox: false, // n'affiche pas les coordonnées quand la souris passe dessus
Highlight:false // ne change pas de status quand la souris passe dessus
});
var l1 = board.create('segment', [p13, p14], // ou [[a,b],[c,d]] ou ['A','B'] si les points on un nom
{
name: '$\\cos(x)$',
label:{autoPosition: true, offset:[10, 20]},
strokeColor:"#006400",
strokeopacity:.7,
visible:true,// le point est visible ou non
fixed:true, // la lignet peut bouger ou non
strokeWidth:5, // en pixels
showInfobox: false, // n'affiche pas les coordonnées quand la souris passe dessus
Highlight:true, // ne change pas de status quand la souris passe dessus
highlightStrokeWidth: 5,
layer:7,//valeur par défaut
});
</script>
<br/>
<img src='./start1.png' width="50" height="50" title="reactualise" onclick="startAnimation1();" width="100px" height="100px" data-toggle="tooltip" title='$x_i$' style="text-decoration:none;cursor:pointer;" >
<img src='./reset.png' width="50" height="50" title="reactualise" onclick="document.location.reload();" width="100px" height="100px" data-toggle="tooltip" title='$x_i$' style="text-decoration:none;cursor:pointer;" >
</center>
</body>
</html>
Murray
May 2, 2022, 9:17:20 PM5/2/22
to JSXGraph
Cyrille
I'm not sure from your request if you mean you want the white areas to change colour when the segment is over them, or whether you want (part of) the segment to change colour. So I worked on both.
There could well be a better way, but this is one way you could go about it. It's only working on the circle for now - the triangle became ugly fairly quickly.
I've made use of the intersection construct. Essentially, it works like this:
- If the segment is completely over the circle, the circle changes colour as does the portion of the segment over the circle. It is achieved by creating a new segment joining the 'intersection' and the 'otherintersection' points.
- If point B is within the circle the red portion of the segment starts at the 'intersection' point and finishes at B
It currently doesn't work properly if B is outside the circle, on the same side as the (currently fixed and hidden) A. In such a case, the 'intersection' is active and I couldn't see a way to easily disable it.
It almost works if A is visible and draggable, but strange things happened with the points array, and I noticed behaviour was different depending on whether A or B was dragged first. So I disabled A for this demo.
Here's my attempt
If your request means you only want colour change when the point is on the circle, then this is possible using the "isOn" property.
Hope it helps.
Regards
Murray
Murray
May 2, 2022, 10:02:34 PM5/2/22
to JSXGraph
Cyrille
Here's the "change colour of the circle or triangle only" version.
Hopefully this suits your needs - it's a lot more straightforward than the "change colour of portion of segment" situation.
Regards
Murray
Cyrille Piatecki
May 4, 2022, 3:13:25 AM5/4/22
to JSXGraph
Thank you Murray, it's nice and I could use it. I was expecting that if B is displaced outside de polygon every part of the segment A-B would be in red.
Murray
May 4, 2022, 7:44:34 PM5/4/22
to JSXGraph
Hello again, Cyrille
I'm still not quite clear what you want to happen, but I think this is close to what you are asking.
The segment is red (and the corresponding background is green) whenever A or B is in "any white space", that is, (1) outside the polygon, (2) over the circle or (3) over the triangle.
Regards
Murray
Reply all
Reply to author
Forward
0 new messages