// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-6, 6, 10, -8]
});
var S = board.create('slider', [
[-5, -6],
[5, -6],
[0, 0.95, 1]
], {
name: 'S'
});
var hue = board.create('slider', [
[-5, -7],
[5, -7],
[0, 8, 36]
], {
name: 'color'
});
var points = [],
attr = {name: ''};
points[0] = board.create('point', [5, 5], attr);
points[1] = board.create('point', [-5, 5], attr);
points[2] = board.create('point', [-5, -5], attr);
points[3] = board.create('point', [5, -5], attr);
var quadrangle = function(pt, n) {
var col, i, arr = [];
for (i = 0; i < 4; i++) {
arr[i] = board.create('point',
[(function(t) {
return function() {
var x = pt[t].X(),
x1 = pt[(t + 1) % 4].X();
return x + (x1 - x) * S.Value();
}
})(i),
(function(t) {
return function() {
var y = pt[t].Y(),
y1 = pt[(t + 1) % 4].Y();
return y + (y1 - y) * S.Value();
}
})(i)
], {
size: 1,
withLabel: false,
visible: false
});
}
// Dynamic fill color
col = () => JXG.hsv2rgb(hue.Value() * n, 0.7, 0.9);
board.create('polygon', pt, {fillColor: col});
// Recursion
if (n > 0) {
quadrangle(arr, --n);
}
}
// Start recursion
quadrangle(points, 30);
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: [-6, 6, 10, -8]
});
var S = board.create('slider', [
[-5, -6],
[5, -6],
[0, 0.95, 1]
], {
name: 'S'
});
var hue = board.create('slider', [
[-5, -7],
[5, -7],
[0, 8, 36]
], {
name: 'color'
});
var points = [],
attr = {name: ''};
points[0] = board.create('point', [5, 5], attr);
points[1] = board.create('point', [-5, 5], attr);
points[2] = board.create('point', [-5, -5], attr);
points[3] = board.create('point', [5, -5], attr);
var quadrangle = function(pt, n) {
var col, i, arr = [];
for (i = 0; i < 4; i++) {
arr[i] = board.create('point',
[(function(t) {
return function() {
var x = pt[t].X(),
x1 = pt[(t + 1) % 4].X();
return x + (x1 - x) * S.Value();
}
})(i),
(function(t) {
return function() {
var y = pt[t].Y(),
y1 = pt[(t + 1) % 4].Y();
return y + (y1 - y) * S.Value();
}
})(i)
], {
size: 1,
withLabel: false,
visible: false
});
}
// Dynamic fill color
col = () => JXG.hsv2rgb(hue.Value() * n, 0.7, 0.9);
board.create('polygon', pt, {fillColor: col});
// Recursion
if (n > 0) {
quadrangle(arr, --n);
}
}
// Start recursion
quadrangle(points, 30);
<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 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: [-6, 6, 10, -8]
});
var S = board.create('slider', [
[-5, -6],
[5, -6],
[0, 0.95, 1]
], {
name: 'S'
});
var hue = board.create('slider', [
[-5, -7],
[5, -7],
[0, 8, 36]
], {
name: 'color'
});
var points = [],
attr = {name: ''};
points[0] = board.create('point', [5, 5], attr);
points[1] = board.create('point', [-5, 5], attr);
points[2] = board.create('point', [-5, -5], attr);
points[3] = board.create('point', [5, -5], attr);
var quadrangle = function(pt, n) {
var col, i, arr = [];
for (i = 0; i < 4; i++) {
arr[i] = board.create('point',
[(function(t) {
return function() {
var x = pt[t].X(),
x1 = pt[(t + 1) % 4].X();
return x + (x1 - x) * S.Value();
}
})(i),
(function(t) {
return function() {
var y = pt[t].Y(),
y1 = pt[(t + 1) % 4].Y();
return y + (y1 - y) * S.Value();
}
})(i)
], {
size: 1,
withLabel: false,
visible: false
});
}
// Dynamic fill color
col = () => JXG.hsv2rgb(hue.Value() * n, 0.7, 0.9);
board.create('polygon', pt, {fillColor: col});
// Recursion
if (n > 0) {
quadrangle(arr, --n);
}
}
// Start recursion
quadrangle(points, 30);
</script>
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Infinity" 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: [-6, 6, 10, -8]
});
var S = board.create('slider', [
[-5, -6],
[5, -6],
[0, 0.95, 1]
], {
name: 'S'
});
var hue = board.create('slider', [
[-5, -7],
[5, -7],
[0, 8, 36]
], {
name: 'color'
});
var points = [],
attr = {name: ''};
points[0] = board.create('point', [5, 5], attr);
points[1] = board.create('point', [-5, 5], attr);
points[2] = board.create('point', [-5, -5], attr);
points[3] = board.create('point', [5, -5], attr);
var quadrangle = function(pt, n) {
var col, i, arr = [];
for (i = 0; i < 4; i++) {
arr[i] = board.create('point',
[(function(t) {
return function() {
var x = pt[t].X(),
x1 = pt[(t + 1) % 4].X();
return x + (x1 - x) * S.Value();
}
})(i),
(function(t) {
return function() {
var y = pt[t].Y(),
y1 = pt[(t + 1) % 4].Y();
return y + (y1 - y) * S.Value();
}
})(i)
], {
size: 1,
withLabel: false,
visible: false
});
}
// Dynamic fill color
col = () => JXG.hsv2rgb(hue.Value() * n, 0.7, 0.9);
board.create('polygon', pt, {fillColor: col});
// Recursion
if (n > 0) {
quadrangle(arr, --n);
}
}
// Start recursion
quadrangle(points, 30);
</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: [-6, 6, 10, -8]
});
var S = board.create('slider', [
[-5, -6],
[5, -6],
[0, 0.95, 1]
], {
name: 'S'
});
var hue = board.create('slider', [
[-5, -7],
[5, -7],
[0, 8, 36]
], {
name: 'color'
});
var points = [],
attr = {name: ''};
points[0] = board.create('point', [5, 5], attr);
points[1] = board.create('point', [-5, 5], attr);
points[2] = board.create('point', [-5, -5], attr);
points[3] = board.create('point', [5, -5], attr);
var quadrangle = function(pt, n) {
var col, i, arr = [];
for (i = 0; i < 4; i++) {
arr[i] = board.create('point',
[(function(t) {
return function() {
var x = pt[t].X(),
x1 = pt[(t + 1) % 4].X();
return x + (x1 - x) * S.Value();
}
})(i),
(function(t) {
return function() {
var y = pt[t].Y(),
y1 = pt[(t + 1) % 4].Y();
return y + (y1 - y) * S.Value();
}
})(i)
], {
size: 1,
withLabel: false,
visible: false
});
}
// Dynamic fill color
col = () => JXG.hsv2rgb(hue.Value() * n, 0.7, 0.9);
board.create('polygon', pt, {fillColor: col});
// Recursion
if (n > 0) {
quadrangle(arr, --n);
}
}
// Start recursion
quadrangle(points, 30);
<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 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: [-6, 6, 10, -8]
});
var S = board.create('slider', [
[-5, -6],
[5, -6],
[0, 0.95, 1]
], {
name: 'S'
});
var hue = board.create('slider', [
[-5, -7],
[5, -7],
[0, 8, 36]
], {
name: 'color'
});
var points = [],
attr = {name: ''};
points[0] = board.create('point', [5, 5], attr);
points[1] = board.create('point', [-5, 5], attr);
points[2] = board.create('point', [-5, -5], attr);
points[3] = board.create('point', [5, -5], attr);
var quadrangle = function(pt, n) {
var col, i, arr = [];
for (i = 0; i < 4; i++) {
arr[i] = board.create('point',
[(function(t) {
return function() {
var x = pt[t].X(),
x1 = pt[(t + 1) % 4].X();
return x + (x1 - x) * S.Value();
}
})(i),
(function(t) {
return function() {
var y = pt[t].Y(),
y1 = pt[(t + 1) % 4].Y();
return y + (y1 - y) * S.Value();
}
})(i)
], {
size: 1,
withLabel: false,
visible: false
});
}
// Dynamic fill color
col = () => JXG.hsv2rgb(hue.Value() * n, 0.7, 0.9);
board.create('polygon', pt, {fillColor: col});
// Recursion
if (n > 0) {
quadrangle(arr, --n);
}
}
// Start recursion
quadrangle(points, 30);
</script>
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Infinity" 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: [-6, 6, 10, -8]
});
var S = board.create('slider', [
[-5, -6],
[5, -6],
[0, 0.95, 1]
], {
name: 'S'
});
var hue = board.create('slider', [
[-5, -7],
[5, -7],
[0, 8, 36]
], {
name: 'color'
});
var points = [],
attr = {name: ''};
points[0] = board.create('point', [5, 5], attr);
points[1] = board.create('point', [-5, 5], attr);
points[2] = board.create('point', [-5, -5], attr);
points[3] = board.create('point', [5, -5], attr);
var quadrangle = function(pt, n) {
var col, i, arr = [];
for (i = 0; i < 4; i++) {
arr[i] = board.create('point',
[(function(t) {
return function() {
var x = pt[t].X(),
x1 = pt[(t + 1) % 4].X();
return x + (x1 - x) * S.Value();
}
})(i),
(function(t) {
return function() {
var y = pt[t].Y(),
y1 = pt[(t + 1) % 4].Y();
return y + (y1 - y) * S.Value();
}
})(i)
], {
size: 1,
withLabel: false,
visible: false
});
}
// Dynamic fill color
col = () => JXG.hsv2rgb(hue.Value() * n, 0.7, 0.9);
board.create('polygon', pt, {fillColor: col});
// Recursion
if (n > 0) {
quadrangle(arr, --n);
}
}
// Start recursion
quadrangle(points, 30);
</jsxgraph>