JSXGraph
JSXGraph share

Share

Superformula
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/superformula" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Superformula" 
    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';

    var board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-10, 10, 12, -10], keepaspectratio: true });
    board.suspendUpdate();
    var a = board.create('slider', [[-7, 8], [7, 8], [0, 1, 4]], { name: 'a' });
    var b = board.create('slider', [[-7, 7], [7, 7], [0, 1, 4]], { name: 'b' });
    var m = board.create('slider', [[-7, 6], [7, 6], [0, 4, 40]], { name: 'm' });
    var n1 = board.create('slider', [[-7, 5], [7, 5], [0, 4, 20]], { name: 'n_1' });
    var n2 = board.create('slider', [[-7, 4], [7, 4], [0, 4, 20]], { name: 'n_2' });
    var n3 = board.create('slider', [[-7, 3], [7, 3], [0, 4, 20]], { name: 'n_3' });
    var len = board.create('slider', [[1, 2], [7, 2], [0, 2, 20]], { name: 'len' });
    var c = board.create('curve', [
            function(phi) {
            return JXG.Math.pow(
                JXG.Math.pow(Math.abs(Math.cos(m.Value() * phi * 0.25 / a.Value())), n2.Value()) +
                JXG.Math.pow(Math.abs(Math.sin(m.Value() * phi * 0.25 / b.Value())), n3.Value()),
                -1 / n1.Value());
        },
            [0, 0], 0,
        function() { return len.Value() * Math.PI; }], { curveType: 'polar', strokewidth: 1, fillColor: '#765412',
        fillOpacity: 0.3 });
    board.unsuspendUpdate();
 </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!

var board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-10, 10, 12, -10], keepaspectratio: true });
board.suspendUpdate();
var a = board.create('slider', [[-7, 8], [7, 8], [0, 1, 4]], { name: 'a' });
var b = board.create('slider', [[-7, 7], [7, 7], [0, 1, 4]], { name: 'b' });
var m = board.create('slider', [[-7, 6], [7, 6], [0, 4, 40]], { name: 'm' });
var n1 = board.create('slider', [[-7, 5], [7, 5], [0, 4, 20]], { name: 'n_1' });
var n2 = board.create('slider', [[-7, 4], [7, 4], [0, 4, 20]], { name: 'n_2' });
var n3 = board.create('slider', [[-7, 3], [7, 3], [0, 4, 20]], { name: 'n_3' });
var len = board.create('slider', [[1, 2], [7, 2], [0, 2, 20]], { name: 'len' });
var c = board.create('curve', [
        function(phi) {
        return JXG.Math.pow(
            JXG.Math.pow(Math.abs(Math.cos(m.Value() * phi * 0.25 / a.Value())), n2.Value()) +
            JXG.Math.pow(Math.abs(Math.sin(m.Value() * phi * 0.25 / b.Value())), n3.Value()),
            -1 / n1.Value());
    },
        [0, 0], 0,
    function() { return len.Value() * Math.PI; }], { curveType: 'polar', strokewidth: 1, fillColor: '#765412',
    fillOpacity: 0.3 });
board.unsuspendUpdate();
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Superformula" 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.
   */
   
   var board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-10, 10, 12, -10], keepaspectratio: true });
   board.suspendUpdate();
   var a = board.create('slider', [[-7, 8], [7, 8], [0, 1, 4]], { name: 'a' });
   var b = board.create('slider', [[-7, 7], [7, 7], [0, 1, 4]], { name: 'b' });
   var m = board.create('slider', [[-7, 6], [7, 6], [0, 4, 40]], { name: 'm' });
   var n1 = board.create('slider', [[-7, 5], [7, 5], [0, 4, 20]], { name: 'n_1' });
   var n2 = board.create('slider', [[-7, 4], [7, 4], [0, 4, 20]], { name: 'n_2' });
   var n3 = board.create('slider', [[-7, 3], [7, 3], [0, 4, 20]], { name: 'n_3' });
   var len = board.create('slider', [[1, 2], [7, 2], [0, 2, 20]], { name: 'len' });
   var c = board.create('curve', [
           function(phi) {
           return JXG.Math.pow(
               JXG.Math.pow(Math.abs(Math.cos(m.Value() * phi * 0.25 / a.Value())), n2.Value()) +
               JXG.Math.pow(Math.abs(Math.sin(m.Value() * phi * 0.25 / b.Value())), n3.Value()),
               -1 / n1.Value());
       },
           [0, 0], 0,
       function() { return len.Value() * Math.PI; }], { curveType: 'polar', strokewidth: 1, fillColor: '#765412',
       fillOpacity: 0.3 });
   board.unsuspendUpdate();
</jsxgraph>
The superformula is a generalization of the superellipse and was first proposed by Johan Gielis. Gielis suggested that the formula can be used to describe many complex shapes and curves that are found in nature. Others point out that the same can be said about many formulas with a sufficient number of parameters. In polar coordinates, with r the radius and φ the angle, the superformula is: $$ r\left(\phi\right) = \left[ \left| \frac{\cos\left(\frac{m\phi}{4}\right)}{a} \right| ^{n_{2}} + \left| \frac{\sin\left(\frac{m\phi}{4}\right)}{b} \right| ^{n_{3}} \right] ^{-\frac{1}{n_{1}}} $$
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, { axis: true, boundingbox: [-10, 10, 12, -10], keepaspectratio: true });
board.suspendUpdate();
var a = board.create('slider', [[-7, 8], [7, 8], [0, 1, 4]], { name: 'a' });
var b = board.create('slider', [[-7, 7], [7, 7], [0, 1, 4]], { name: 'b' });
var m = board.create('slider', [[-7, 6], [7, 6], [0, 4, 40]], { name: 'm' });
var n1 = board.create('slider', [[-7, 5], [7, 5], [0, 4, 20]], { name: 'n_1' });
var n2 = board.create('slider', [[-7, 4], [7, 4], [0, 4, 20]], { name: 'n_2' });
var n3 = board.create('slider', [[-7, 3], [7, 3], [0, 4, 20]], { name: 'n_3' });
var len = board.create('slider', [[1, 2], [7, 2], [0, 2, 20]], { name: 'len' });
var c = board.create('curve', [
        function(phi) {
        return JXG.Math.pow(
            JXG.Math.pow(Math.abs(Math.cos(m.Value() * phi * 0.25 / a.Value())), n2.Value()) +
            JXG.Math.pow(Math.abs(Math.sin(m.Value() * phi * 0.25 / b.Value())), n3.Value()),
            -1 / n1.Value());
    },
        [0, 0], 0,
    function() { return len.Value() * Math.PI; }], { curveType: 'polar', strokewidth: 1, fillColor: '#765412',
    fillOpacity: 0.3 });
board.unsuspendUpdate();

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.