JSXGraph
JSXGraph share

Share

p-norm
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/p-norm" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: p-norm" 
    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: [-5, 5, 5, -5], keepaspectratio: true });
    
    var pNorm = board.create('slider', [[-3, 4], [3, 4], [0, 2, 10]], {
        name: 'p',
        snapWidth: 0.1,
        snapValues: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        snapValueDistance: 0.1
    });
    var m = board.create('point', [0, 0], { name: 'M' });
    
    var graph = board.create('curve', [
       (t) => {
            var p = pNorm.Value();
            return 2.0 / Math.pow(Math.pow(Math.abs(Math.cos(t)), p) + Math.pow(Math.abs(Math.sin(t)), p), 1.0 / p);
       },
       [() => m.X(), () => m.Y()], // center
       0, Math.PI * 2
    ], {
        curveType: 'polar',
        strokeColor: 'red',
        strokeWidth: 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!

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

var pNorm = board.create('slider', [[-3, 4], [3, 4], [0, 2, 10]], {
    name: 'p',
    snapWidth: 0.1,
    snapValues: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    snapValueDistance: 0.1
});
var m = board.create('point', [0, 0], { name: 'M' });

var graph = board.create('curve', [
   (t) => {
        var p = pNorm.Value();
        return 2.0 / Math.pow(Math.pow(Math.abs(Math.cos(t)), p) + Math.pow(Math.abs(Math.sin(t)), p), 1.0 / p);
   },
   [() => m.X(), () => m.Y()], // center
   0, Math.PI * 2
], {
    curveType: 'polar',
    strokeColor: 'red',
    strokeWidth: 2
});
<jsxgraph width="100%" aspect-ratio="1 / 1" title="p-norm" 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: [-5, 5, 5, -5], keepaspectratio: true });
   
   var pNorm = board.create('slider', [[-3, 4], [3, 4], [0, 2, 10]], {
       name: 'p',
       snapWidth: 0.1,
       snapValues: [1, 2, 3, 4, 5, 6, 7, 8, 9],
       snapValueDistance: 0.1
   });
   var m = board.create('point', [0, 0], { name: 'M' });
   
   var graph = board.create('curve', [
      (t) => {
           var p = pNorm.Value();
           return 2.0 / Math.pow(Math.pow(Math.abs(Math.cos(t)), p) + Math.pow(Math.abs(Math.sin(t)), p), 1.0 / p);
      },
      [() => m.X(), () => m.Y()], // center
      0, Math.PI * 2
   ], {
       curveType: 'polar',
       strokeColor: 'red',
       strokeWidth: 2
   });
</jsxgraph>
Display the unit circle around the point $M$ with regard to the $p$-norm $$ \|x\|_p = \biggl(\sum_{i=1}^n |x_i|^p\biggr)^{1/p} $$ where $p$ can be set with the slider. The unit circle around $M$ in $p$-norm is the set of points $(x, y)$ such that $$\|(x,y) - M\|_p = 1.$$
// Define the id of your board in BOARDID

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

var pNorm = board.create('slider', [[-3, 4], [3, 4], [0, 2, 10]], {
    name: 'p',
    snapWidth: 0.1,
    snapValues: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    snapValueDistance: 0.1
});
var m = board.create('point', [0, 0], { name: 'M' });

var graph = board.create('curve', [
   (t) => {
        var p = pNorm.Value();
        return 2.0 / Math.pow(Math.pow(Math.abs(Math.cos(t)), p) + Math.pow(Math.abs(Math.sin(t)), p), 1.0 / p);
   },
   [() => m.X(), () => m.Y()], // center
   0, Math.PI * 2
], {
    curveType: 'polar',
    strokeColor: 'red',
    strokeWidth: 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.