JSXGraph
JSXGraph share

Share

Convex hull of points
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.org/share/iframe/convex-hull-of-points" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Convex hull of points" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

        const board = JXG.JSXGraph.initBoard(BOARDID, {
            boundingbox: [-5, 5, 5, -5],
            axis: true
        });
    
        var i, hull,
            attr = { withLabel: false },
            p = [];
    
        // The list of "points" can contain points, coordinates, JXG.Coords objects
        for (i = 0; i < 40; i++) {
            p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], attr));
        }
    
        // Convex hull curve
        var c = board.create('curve', [[], []], { fillColor: 'yellow', fillOpacity: 0.3 });
        c.updateDataArray = function() {
            var i,
                hull = JXG.Math.Geometry.convexHull(p, true);
    
            this.dataX = [];
            this.dataY = [];
            for (i = 0; i < hull.length; i++) {
                this.dataX.push(hull[i][1]);
                this.dataY.push(hull[i][2]);
            }
            // Close the curve
            this.dataX.push(hull[0][1]);
            this.dataY.push(hull[0][2]);
        };
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: true
    });

    var i, hull,
        attr = { withLabel: false },
        p = [];

    // The list of "points" can contain points, coordinates, JXG.Coords objects
    for (i = 0; i < 40; i++) {
        p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], attr));
    }

    // Convex hull curve
    var c = board.create('curve', [[], []], { fillColor: 'yellow', fillOpacity: 0.3 });
    c.updateDataArray = function() {
        var i,
            hull = JXG.Math.Geometry.convexHull(p, true);

        this.dataX = [];
        this.dataY = [];
        for (i = 0; i < hull.length; i++) {
            this.dataX.push(hull[i][1]);
            this.dataY.push(hull[i][2]);
        }
        // Close the curve
        this.dataX.push(hull[0][1]);
        this.dataY.push(hull[0][2]);
    };
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Convex hull of points" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
       const board = JXG.JSXGraph.initBoard(BOARDID, {
           boundingbox: [-5, 5, 5, -5],
           axis: true
       });
   
       var i, hull,
           attr = { withLabel: false },
           p = [];
   
       // The list of "points" can contain points, coordinates, JXG.Coords objects
       for (i = 0; i < 40; i++) {
           p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], attr));
       }
   
       // Convex hull curve
       var c = board.create('curve', [[], []], { fillColor: 'yellow', fillOpacity: 0.3 });
       c.updateDataArray = function() {
           var i,
               hull = JXG.Math.Geometry.convexHull(p, true);
   
           this.dataX = [];
           this.dataY = [];
           for (i = 0; i < hull.length; i++) {
               this.dataX.push(hull[i][1]);
               this.dataY.push(hull[i][2]);
           }
           // Close the curve
           this.dataX.push(hull[0][1]);
           this.dataY.push(hull[0][2]);
       };
</jsxgraph>

Convex hull of points

Geometry
Determine the convex hull of a set of points. It is visualized by a JSXGraph curve element.
// Define the id of your board in BOARDID

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: true
    });

    var i, hull,
        attr = { withLabel: false },
        p = [];

    // The list of "points" can contain points, coordinates, JXG.Coords objects
    for (i = 0; i < 40; i++) {
        p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], attr));
    }

    // Convex hull curve
    var c = board.create('curve', [[], []], { fillColor: 'yellow', fillOpacity: 0.3 });
    c.updateDataArray = function() {
        var i,
            hull = JXG.Math.Geometry.convexHull(p, true);

        this.dataX = [];
        this.dataY = [];
        for (i = 0; i < hull.length; i++) {
            this.dataX.push(hull[i][1]);
            this.dataY.push(hull[i][2]);
        }
        // Close the curve
        this.dataX.push(hull[0][1]);
        this.dataY.push(hull[0][2]);
    };

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.