<!--idée est https://www.jeuxmaths.fr/exercice-de-math-image-cercle-trigonometrique.html -->
<h5>Trigo05_Placer l'image d'un nombre sur un cercle trigonométrique</h5>
<h5><span style="color: #ff0000;"><strong> </strong></span>Placer sur le cercle trigonométrique le point {Pts[0]} image de \(x\)</h5>
<p>
<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
</p>
<div id="jxgbox" class="jxgbox" style="width: 500px; height: 500px;"> </div>
<p>
<script type="text/javascript">// <![CDATA[
var brd = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-1.3, 1.3, 1.3, -1.3],
        axis: true,
        grid: false,
        showFullscreen: true,
        showNavigation:false,
        showCopyright:false,
        defaultAxes:  {
        x: {
        ticks: {                                        
               ticksDistance: 0.2,
               insertTicks: false
               }
            },                       
         y: {
             ticks: {                    
                    ticksDistance: 0.2,
                    insertTicks: false
                    }
             }
       }
    });
    circ = brd.create('circle',[[0,0], [1,0]],{fixed:true}); // définir le cercle de centre p0 et rayon R
    var ticks = brd.create('curve', [[0], [0]], 
             {strokeWidth: 1, 
              strokeColor: 'blue',
              strokeOpacity: 0.5});    

    var p0 = brd.create('point',[{X0},{Y0}],{name:'{P}',fixed:true});   

    var Lx = brd.create('segment', [[-5,0], [5,0]], {strokeColor:'red',strokeWidth:2,dash:2});
    var Ly = brd.create('segment', [[0,-5], [0,5]], {strokeColor:'red',strokeWidth:2,dash:2});

    ticks.updateDataArray = function() {
    var cx = circ.center.X(),
        cy = circ.center.Y(),
        r = circ.Radius(),
        i, 
        ticklen = 0.05,           // Length of ticks in user space coordinates
        steps = {stp},              // Number of ticks
        d = ticklen * 5,
        //strokeColor: 'red',
        alpha = 2 * Math.PI / steps;

    this.dataX = [];
    this.dataY = [];
    for (i = 0; i < steps; i++) {
        // Start of a tick
        this.dataX.push( cx + (r - d)* Math.cos(i * alpha) );
        this.dataY.push( cy + (r - d)* Math.sin(i * alpha) );
        // End of tick
        this.dataX.push( cx + (r + d) * Math.cos(i * alpha) );
        this.dataY.push( cy + (r + d) * Math.sin(i * alpha) );
        // Interrupt the curve
        this.dataX.push( NaN );
        this.dataY.push( NaN );
        //brd.create('segment', [[0,0], [this.dataX{i],this.dataY{i]]], {strokeColor:'green',strokeWidth:2,dash:2});

    }
};
brd.update();
// ]]></script>
</p>
<!--
var circ = brd.create('circle', [p, q]);

// Create an empty curve
var ticks = brd.create('curve', [[0], [0]], 
             {strokeWidth: 1, 
              strokeColor: 'blue',
              strokeOpacity: 0.5});

// Make ticks out of the curve 
ticks.updateDataArray = function() {
    var cx = circ.center.X(),
        cy = circ.center.Y(),
        r = circ.Radius(),
        i, 
        ticklen = 0.3,           // Length of ticks in user space coordinates
        steps = 20,              // Number of ticks
        d = ticklen * 0.5,
        alpha = 2 * Math.PI / steps;

    this.dataX = [];
    this.dataY = [];
    for (i = 0; i < steps; i++) {
        // Start of a tick
        this.dataX.push( cx + (r - d)* Math.cos(i * alpha) );
        this.dataY.push( cy + (r - d) * Math.sin(i * alpha) );
        // End of tick
        this.dataX.push( cx + (r + d) * Math.cos(i * alpha) );
        this.dataY.push( cy + (r + d) * Math.sin(i * alpha) );
        // Interrupt the curve
        this.dataX.push( NaN );
        this.dataY.push( NaN );
    }
};
brd.update();
-->