JSXGraph
JSXGraph share

Share

Bezier curves by scaffolding
Show plain example
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/bezier-curves-by-scaffolding" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Bezier curves by scaffolding" 
    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 4.0 International License.
    https://creativecommons.org/licenses/by/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: [-4, 4, 4, -4],
        keepaspectratio: true,
        axis: true,
        renderer: 'canvas'
    });
    
    var col,
        p = [],
        l = [],
        m = [];
    
    col = 'red';
    p.push(board.create('point', [2, -1], {
        color: col
    })); // data point
    col = 'blue';
    p.push(board.create('point', [0.75, 2.5], {
        color: col
    })); // control point
    p.push(board.create('point', [-1.5, 2.4], {
        color: col
    })); // control point
    
    col = 'red';
    p.push(board.create('point', [-3, -2], {
        color: col
    })); // data point
    
    l.push(board.create('segment', [p[0], p[1]], {
        strokeOpacity: 0.5
    }));
    l.push(board.create('segment', [p[1], p[2]], {
        strokeOpacity: 0.5
    }));
    l.push(board.create('segment', [p[2], p[3]], {
        strokeOpacity: 0.5
    }));
    
    col = 'black';
    m.push(board.create('midpoint', [l[0]], {
        size: 1,
        color: col,
        name: ''
    }));
    m.push(board.create('midpoint', [l[1]], {
        size: 1,
        color: col,
        name: ''
    }));
    m.push(board.create('midpoint', [l[2]], {
        size: 1,
        color: col,
        name: ''
    }));
    
    l.push(board.create('segment', [m[0], m[1]], {
        strokeOpacity: 0.5
    }));
    l.push(board.create('segment', [m[1], m[2]], {
        strokeOpacity: 0.5
    }));
    
    m.push(board.create('midpoint', [l[3]], {
        size: 1,
        color: col,
        name: ''
    }));
    m.push(board.create('midpoint', [l[4]], {
        size: 1,
        color: col,
        name: ''
    }));
    
    l.push(board.create('segment', [m[3], m[4]], {
        strokeOpacity: 0.5
    }));
    m.push(board.create('midpoint', [l[5]], {
        size: 1,
        color: col,
        name: ''
    }));
    
    var c = board.create('curve', JXG.Math.Numerics.bezier(p), {
        strokecolor: 'blue',
        strokeOpacity: 0.6,
        strokeWidth: 5
    });
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/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: [-4, 4, 4, -4],
    keepaspectratio: true,
    axis: true,
    renderer: 'canvas'
});

var col,
    p = [],
    l = [],
    m = [];

col = 'red';
p.push(board.create('point', [2, -1], {
    color: col
})); // data point
col = 'blue';
p.push(board.create('point', [0.75, 2.5], {
    color: col
})); // control point
p.push(board.create('point', [-1.5, 2.4], {
    color: col
})); // control point

col = 'red';
p.push(board.create('point', [-3, -2], {
    color: col
})); // data point

l.push(board.create('segment', [p[0], p[1]], {
    strokeOpacity: 0.5
}));
l.push(board.create('segment', [p[1], p[2]], {
    strokeOpacity: 0.5
}));
l.push(board.create('segment', [p[2], p[3]], {
    strokeOpacity: 0.5
}));

col = 'black';
m.push(board.create('midpoint', [l[0]], {
    size: 1,
    color: col,
    name: ''
}));
m.push(board.create('midpoint', [l[1]], {
    size: 1,
    color: col,
    name: ''
}));
m.push(board.create('midpoint', [l[2]], {
    size: 1,
    color: col,
    name: ''
}));

l.push(board.create('segment', [m[0], m[1]], {
    strokeOpacity: 0.5
}));
l.push(board.create('segment', [m[1], m[2]], {
    strokeOpacity: 0.5
}));

m.push(board.create('midpoint', [l[3]], {
    size: 1,
    color: col,
    name: ''
}));
m.push(board.create('midpoint', [l[4]], {
    size: 1,
    color: col,
    name: ''
}));

l.push(board.create('segment', [m[3], m[4]], {
    strokeOpacity: 0.5
}));
m.push(board.create('midpoint', [l[5]], {
    size: 1,
    color: col,
    name: ''
}));

var c = board.create('curve', JXG.Math.Numerics.bezier(p), {
    strokecolor: 'blue',
    strokeOpacity: 0.6,
    strokeWidth: 5
});
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Bezier curves by scaffolding" 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 4.0 International License.
   https://creativecommons.org/licenses/by/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: [-4, 4, 4, -4],
       keepaspectratio: true,
       axis: true,
       renderer: 'canvas'
   });
   
   var col,
       p = [],
       l = [],
       m = [];
   
   col = 'red';
   p.push(board.create('point', [2, -1], {
       color: col
   })); // data point
   col = 'blue';
   p.push(board.create('point', [0.75, 2.5], {
       color: col
   })); // control point
   p.push(board.create('point', [-1.5, 2.4], {
       color: col
   })); // control point
   
   col = 'red';
   p.push(board.create('point', [-3, -2], {
       color: col
   })); // data point
   
   l.push(board.create('segment', [p[0], p[1]], {
       strokeOpacity: 0.5
   }));
   l.push(board.create('segment', [p[1], p[2]], {
       strokeOpacity: 0.5
   }));
   l.push(board.create('segment', [p[2], p[3]], {
       strokeOpacity: 0.5
   }));
   
   col = 'black';
   m.push(board.create('midpoint', [l[0]], {
       size: 1,
       color: col,
       name: ''
   }));
   m.push(board.create('midpoint', [l[1]], {
       size: 1,
       color: col,
       name: ''
   }));
   m.push(board.create('midpoint', [l[2]], {
       size: 1,
       color: col,
       name: ''
   }));
   
   l.push(board.create('segment', [m[0], m[1]], {
       strokeOpacity: 0.5
   }));
   l.push(board.create('segment', [m[1], m[2]], {
       strokeOpacity: 0.5
   }));
   
   m.push(board.create('midpoint', [l[3]], {
       size: 1,
       color: col,
       name: ''
   }));
   m.push(board.create('midpoint', [l[4]], {
       size: 1,
       color: col,
       name: ''
   }));
   
   l.push(board.create('segment', [m[3], m[4]], {
       strokeOpacity: 0.5
   }));
   m.push(board.create('midpoint', [l[5]], {
       size: 1,
       color: col,
       name: ''
   }));
   
   var c = board.create('curve', JXG.Math.Numerics.bezier(p), {
       strokecolor: 'blue',
       strokeOpacity: 0.6,
       strokeWidth: 5
   });
</jsxgraph>

Bezier curves by scaffolding

Curves
Splines
Technical
The red points are connected by a cubic Bezier curve. The blue points are the control points. Here, the Bezier curve together with its scaffolds is shown. The black points are always the midpoints of their line segment. For test purposes, the canvas renderer is used (instead of SVG).
Have also a look at the examples 
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-4, 4, 4, -4],
    keepaspectratio: true,
    axis: true,
    renderer: 'canvas'
});

var col,
    p = [],
    l = [],
    m = [];

col = 'red';
p.push(board.create('point', [2, -1], {
    color: col
})); // data point
col = 'blue';
p.push(board.create('point', [0.75, 2.5], {
    color: col
})); // control point
p.push(board.create('point', [-1.5, 2.4], {
    color: col
})); // control point

col = 'red';
p.push(board.create('point', [-3, -2], {
    color: col
})); // data point

l.push(board.create('segment', [p[0], p[1]], {
    strokeOpacity: 0.5
}));
l.push(board.create('segment', [p[1], p[2]], {
    strokeOpacity: 0.5
}));
l.push(board.create('segment', [p[2], p[3]], {
    strokeOpacity: 0.5
}));

col = 'black';
m.push(board.create('midpoint', [l[0]], {
    size: 1,
    color: col,
    name: ''
}));
m.push(board.create('midpoint', [l[1]], {
    size: 1,
    color: col,
    name: ''
}));
m.push(board.create('midpoint', [l[2]], {
    size: 1,
    color: col,
    name: ''
}));

l.push(board.create('segment', [m[0], m[1]], {
    strokeOpacity: 0.5
}));
l.push(board.create('segment', [m[1], m[2]], {
    strokeOpacity: 0.5
}));

m.push(board.create('midpoint', [l[3]], {
    size: 1,
    color: col,
    name: ''
}));
m.push(board.create('midpoint', [l[4]], {
    size: 1,
    color: col,
    name: ''
}));

l.push(board.create('segment', [m[3], m[4]], {
    strokeOpacity: 0.5
}));
m.push(board.create('midpoint', [l[5]], {
    size: 1,
    color: col,
    name: ''
}));

var c = board.create('curve', JXG.Math.Numerics.bezier(p), {
    strokecolor: 'blue',
    strokeOpacity: 0.6,
    strokeWidth: 5
});

license

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