// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-1, 3, 8, -1.5],
keepaspectratio: true,
axis: true
});
var N = board.create('slider', [
[0, 1.5],
[3, 1.5],
[1, 3, 40]
], {
name: 'n',
snapWidth: 1
});
// Circle on the right
var circ = board.create('circle', [
[6, 1], 1
], {
strokeWidth: 1,
strokecolor: 'black',
strokeWidth: 2,
fillColor: '#0055ff13'
});
// Tile the circle on the right into cake pieces
var c1 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 1
});
c1.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
px = circ.midpoint.X(),
py = circ.midpoint.Y(),
x = [px],
y = [py],
phi = Math.PI / n,
s = r * Math.sin(phi),
i, j,
d = 16,
dt = phi / d,
pt = Math.PI * 0.5 + phi;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
x.push(px + r * Math.cos(pt));
y.push(py + r * Math.sin(pt));
pt -= dt;
}
x.push(px);
y.push(py);
pt += dt;
}
this.dataX = x;
this.dataY = y;
}
// Reorder the tiles to approximate a rectangle (on the left)
var c2 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 2
});
c2.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
x = [0],
y = [0],
phi = Math.PI / n,
h = r * Math.cos(phi),
s = r * Math.sin(phi),
i, j,
px = 0,
py = 0,
sgn = 1,
d = 16,
dt = phi / d,
pt;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
pt = dt * j;
x.push(px + r * Math.sin(pt));
y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
}
px += s;
sgn *= (-1);
}
x.push((n - 1) * s);
y.push(h + (sgn - 1) * h * 0.5);
this.dataX = x;
this.dataY = y;
}
// Do one update to execute the updateDataArray methods
board.update();
This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note that you have to mention The Center of Mobile Learning with Digital Technology in the credits.
/*
This example is licensed under a
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/
Please note that 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: [-1, 3, 8, -1.5],
keepaspectratio: true,
axis: true
});
var N = board.create('slider', [
[0, 1.5],
[3, 1.5],
[1, 3, 40]
], {
name: 'n',
snapWidth: 1
});
// Circle on the right
var circ = board.create('circle', [
[6, 1], 1
], {
strokeWidth: 1,
strokecolor: 'black',
strokeWidth: 2,
fillColor: '#0055ff13'
});
// Tile the circle on the right into cake pieces
var c1 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 1
});
c1.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
px = circ.midpoint.X(),
py = circ.midpoint.Y(),
x = [px],
y = [py],
phi = Math.PI / n,
s = r * Math.sin(phi),
i, j,
d = 16,
dt = phi / d,
pt = Math.PI * 0.5 + phi;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
x.push(px + r * Math.cos(pt));
y.push(py + r * Math.sin(pt));
pt -= dt;
}
x.push(px);
y.push(py);
pt += dt;
}
this.dataX = x;
this.dataY = y;
}
// Reorder the tiles to approximate a rectangle (on the left)
var c2 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 2
});
c2.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
x = [0],
y = [0],
phi = Math.PI / n,
h = r * Math.cos(phi),
s = r * Math.sin(phi),
i, j,
px = 0,
py = 0,
sgn = 1,
d = 16,
dt = phi / d,
pt;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
pt = dt * j;
x.push(px + r * Math.sin(pt));
y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
}
px += s;
sgn *= (-1);
}
x.push((n - 1) * s);
y.push(h + (sgn - 1) * h * 0.5);
this.dataX = x;
this.dataY = y;
}
// Do one update to execute the updateDataArray methods
board.update();
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-0" class="jxgbox" style="aspect-ratio: 2 / 1; width: 100%;" data-ar="2 / 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 that 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: [-1, 3, 8, -1.5],
keepaspectratio: true,
axis: true
});
var N = board.create('slider', [
[0, 1.5],
[3, 1.5],
[1, 3, 40]
], {
name: 'n',
snapWidth: 1
});
// Circle on the right
var circ = board.create('circle', [
[6, 1], 1
], {
strokeWidth: 1,
strokecolor: 'black',
strokeWidth: 2,
fillColor: '#0055ff13'
});
// Tile the circle on the right into cake pieces
var c1 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 1
});
c1.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
px = circ.midpoint.X(),
py = circ.midpoint.Y(),
x = [px],
y = [py],
phi = Math.PI / n,
s = r * Math.sin(phi),
i, j,
d = 16,
dt = phi / d,
pt = Math.PI * 0.5 + phi;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
x.push(px + r * Math.cos(pt));
y.push(py + r * Math.sin(pt));
pt -= dt;
}
x.push(px);
y.push(py);
pt += dt;
}
this.dataX = x;
this.dataY = y;
}
// Reorder the tiles to approximate a rectangle (on the left)
var c2 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 2
});
c2.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
x = [0],
y = [0],
phi = Math.PI / n,
h = r * Math.cos(phi),
s = r * Math.sin(phi),
i, j,
px = 0,
py = 0,
sgn = 1,
d = 16,
dt = phi / d,
pt;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
pt = dt * j;
x.push(px + r * Math.sin(pt));
y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
}
px += s;
sgn *= (-1);
}
x.push((n - 1) * s);
y.push(h + (sgn - 1) * h * 0.5);
this.dataX = x;
this.dataY = y;
}
// Do one update to execute the updateDataArray methods
board.update();
</script>
<jsxgraph width="100%" aspect-ratio="2 / 1" title="Approximation of the circle area" description="This construction was copied from JSXGraph examples database: http://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
/*
This example is licensed under a
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/
Please note that you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-1, 3, 8, -1.5],
keepaspectratio: true,
axis: true
});
var N = board.create('slider', [
[0, 1.5],
[3, 1.5],
[1, 3, 40]
], {
name: 'n',
snapWidth: 1
});
// Circle on the right
var circ = board.create('circle', [
[6, 1], 1
], {
strokeWidth: 1,
strokecolor: 'black',
strokeWidth: 2,
fillColor: '#0055ff13'
});
// Tile the circle on the right into cake pieces
var c1 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 1
});
c1.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
px = circ.midpoint.X(),
py = circ.midpoint.Y(),
x = [px],
y = [py],
phi = Math.PI / n,
s = r * Math.sin(phi),
i, j,
d = 16,
dt = phi / d,
pt = Math.PI * 0.5 + phi;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
x.push(px + r * Math.cos(pt));
y.push(py + r * Math.sin(pt));
pt -= dt;
}
x.push(px);
y.push(py);
pt += dt;
}
this.dataX = x;
this.dataY = y;
}
// Reorder the tiles to approximate a rectangle (on the left)
var c2 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 2
});
c2.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
x = [0],
y = [0],
phi = Math.PI / n,
h = r * Math.cos(phi),
s = r * Math.sin(phi),
i, j,
px = 0,
py = 0,
sgn = 1,
d = 16,
dt = phi / d,
pt;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
pt = dt * j;
x.push(px + r * Math.sin(pt));
y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
}
px += s;
sgn *= (-1);
}
x.push((n - 1) * s);
y.push(h + (sgn - 1) * h * 0.5);
this.dataX = x;
this.dataY = y;
}
// Do one update to execute the updateDataArray methods
board.update();
</jsxgraph>
/*
This example is licensed under a
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/
Please note that 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: [-1, 3, 8, -1.5],
keepaspectratio: true,
axis: true
});
var N = board.create('slider', [
[0, 1.5],
[3, 1.5],
[1, 3, 40]
], {
name: 'n',
snapWidth: 1
});
// Circle on the right
var circ = board.create('circle', [
[6, 1], 1
], {
strokeWidth: 1,
strokecolor: 'black',
strokeWidth: 2,
fillColor: '#0055ff13'
});
// Tile the circle on the right into cake pieces
var c1 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 1
});
c1.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
px = circ.midpoint.X(),
py = circ.midpoint.Y(),
x = [px],
y = [py],
phi = Math.PI / n,
s = r * Math.sin(phi),
i, j,
d = 16,
dt = phi / d,
pt = Math.PI * 0.5 + phi;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
x.push(px + r * Math.cos(pt));
y.push(py + r * Math.sin(pt));
pt -= dt;
}
x.push(px);
y.push(py);
pt += dt;
}
this.dataX = x;
this.dataY = y;
}
// Reorder the tiles to approximate a rectangle (on the left)
var c2 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 2
});
c2.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
x = [0],
y = [0],
phi = Math.PI / n,
h = r * Math.cos(phi),
s = r * Math.sin(phi),
i, j,
px = 0,
py = 0,
sgn = 1,
d = 16,
dt = phi / d,
pt;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
pt = dt * j;
x.push(px + r * Math.sin(pt));
y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
}
px += s;
sgn *= (-1);
}
x.push((n - 1) * s);
y.push(h + (sgn - 1) * h * 0.5);
this.dataX = x;
this.dataY = y;
}
// Do one update to execute the updateDataArray methods
board.update();
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-0" class="jxgbox" style="aspect-ratio: 2 / 1; width: 100%;" data-ar="2 / 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 that 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: [-1, 3, 8, -1.5],
keepaspectratio: true,
axis: true
});
var N = board.create('slider', [
[0, 1.5],
[3, 1.5],
[1, 3, 40]
], {
name: 'n',
snapWidth: 1
});
// Circle on the right
var circ = board.create('circle', [
[6, 1], 1
], {
strokeWidth: 1,
strokecolor: 'black',
strokeWidth: 2,
fillColor: '#0055ff13'
});
// Tile the circle on the right into cake pieces
var c1 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 1
});
c1.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
px = circ.midpoint.X(),
py = circ.midpoint.Y(),
x = [px],
y = [py],
phi = Math.PI / n,
s = r * Math.sin(phi),
i, j,
d = 16,
dt = phi / d,
pt = Math.PI * 0.5 + phi;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
x.push(px + r * Math.cos(pt));
y.push(py + r * Math.sin(pt));
pt -= dt;
}
x.push(px);
y.push(py);
pt += dt;
}
this.dataX = x;
this.dataY = y;
}
// Reorder the tiles to approximate a rectangle (on the left)
var c2 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 2
});
c2.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
x = [0],
y = [0],
phi = Math.PI / n,
h = r * Math.cos(phi),
s = r * Math.sin(phi),
i, j,
px = 0,
py = 0,
sgn = 1,
d = 16,
dt = phi / d,
pt;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
pt = dt * j;
x.push(px + r * Math.sin(pt));
y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
}
px += s;
sgn *= (-1);
}
x.push((n - 1) * s);
y.push(h + (sgn - 1) * h * 0.5);
this.dataX = x;
this.dataY = y;
}
// Do one update to execute the updateDataArray methods
board.update();
</script>
<jsxgraph width="100%" aspect-ratio="2 / 1" title="Approximation of the circle area" description="This construction was copied from JSXGraph examples database: http://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="false">
/*
This example is licensed under a
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/
Please note that you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-1, 3, 8, -1.5],
keepaspectratio: true,
axis: true
});
var N = board.create('slider', [
[0, 1.5],
[3, 1.5],
[1, 3, 40]
], {
name: 'n',
snapWidth: 1
});
// Circle on the right
var circ = board.create('circle', [
[6, 1], 1
], {
strokeWidth: 1,
strokecolor: 'black',
strokeWidth: 2,
fillColor: '#0055ff13'
});
// Tile the circle on the right into cake pieces
var c1 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 1
});
c1.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
px = circ.midpoint.X(),
py = circ.midpoint.Y(),
x = [px],
y = [py],
phi = Math.PI / n,
s = r * Math.sin(phi),
i, j,
d = 16,
dt = phi / d,
pt = Math.PI * 0.5 + phi;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
x.push(px + r * Math.cos(pt));
y.push(py + r * Math.sin(pt));
pt -= dt;
}
x.push(px);
y.push(py);
pt += dt;
}
this.dataX = x;
this.dataY = y;
}
// Reorder the tiles to approximate a rectangle (on the left)
var c2 = board.create('curve', [
[0],
[0]
], {
strokecolor: 'red',
strokeWidth: 2
});
c2.updateDataArray = function() {
var r = 1,
n = Math.floor(N.Value()),
x = [0],
y = [0],
phi = Math.PI / n,
h = r * Math.cos(phi),
s = r * Math.sin(phi),
i, j,
px = 0,
py = 0,
sgn = 1,
d = 16,
dt = phi / d,
pt;
for (i = 0; i < n; i++) {
for (j = -d; j <= d; j++) {
pt = dt * j;
x.push(px + r * Math.sin(pt));
y.push(sgn * r * Math.cos(pt) - (sgn - 1) * h * 0.5);
}
px += s;
sgn *= (-1);
}
x.push((n - 1) * s);
y.push(h + (sgn - 1) * h * 0.5);
this.dataX = x;
this.dataY = y;
}
// Do one update to execute the updateDataArray methods
board.update();
</jsxgraph>