<p>
<label for="c1">c1:</label>
<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"
min="0" max="100" value="60"
oninput="c1 = this.value*0.01; board.update();"
/><br/>
<label for="f1">f1:</label>
<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"
min="1" max="100" value="7"
oninput="f1 = this.value; board.update();"
/><br/>
<label for="c2">c2:</label>
<input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;"
min="0" max="100" value="0"
oninput="c2 = this.value*0.01;
board.updateQuality = board.BOARD_QUALITY_HIGH;
board.update();"
/><br/>
<label for="f2">f2:</label>
<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"
min="1" max="100" value="17"
oninput="f2 = this.value; board.update();"
/>
</p>
// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-2.5, 2.5, 2.5, -2.5],
keepaspectratio: true
});
var c1 = 0.6;
var c2 = 0.0;
var f1 = 7;
var f2 = 17;
var c = board.create('curve', [
(t) => Math.cos(t) + c1 * Math.cos(f1 * t) + c2 * Math.cos(f2 * t),
(t) => Math.sin(t) + c1 * Math.sin(f1 * t) + c2 * Math.sin(f2 * t),
0, 2.02 * Math.PI
], {
strokeWidth: 2
});