File: parametricsurface3d.html

package info (click to toggle)
jsxgraph 1.11.1%2Bdfsg1-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 24,984 kB
  • sloc: javascript: 81,688; xml: 5,869; java: 1,072; php: 281; makefile: 189; python: 174; cpp: 76; sh: 12
file content (49 lines) | stat: -rw-r--r-- 1,562 bytes parent folder | download | duplicates (2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
    <title>Parametric surface</title>
    <link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
    <script type="text/javascript" src="../distrib/jsxgraphcore.js"></script>
</head>
<body>

<div id="jxgbox" class="jxgbox" style="width:800px; height:800px; float:left"></div>

<script type="text/javascript">
    let board = JXG.JSXGraph.initBoard('jxgbox',
        {boundingbox: [-8, 8, 8,-8], axis: false, showcopyright: false, shownavigation: false});
    let view = board.create('view3d',
        [[-6, -4], [8, 8],
        [[0, 2], [0, 2], [0, 2]]],
        {bank: {slider: {visible: true}}}
    );

    // Twist slider
    let twist = board.create(
        'slider',
        [
            [-6, 7], [2, 7],
            [-1, 0.8, 1]
        ], {
            name: 'twist'
        }
    );

    // Parametric surface, based on a modified Hammer projection
    let rModHammer = (u, v) => Math.sin(u)*Math.cos(v) / Math.sqrt(1 + 3*Math.cos(u)*Math.cos(v));
    let zModHammer = (u, v) => Math.sin(v) / Math.sqrt(1 + 3*Math.cos(u)*Math.cos(v));
    let twistFn = (u) => twist.Value() * Math.PI/2 * Math.tanh(2*u);
    let surface = view.create('parametricsurface3d', [
        (u, v) => 1 + Math.cos(twistFn(v)) * rModHammer(u, v),
        (u, v) => 1 + Math.sin(twistFn(v)) * rModHammer(u, v),
        (u, v) => 1 + zModHammer(u, v),
        [-Math.PI/3, Math.PI/3],
        [-Math.PI/2, Math.PI/2]
    ], {
        strokeColor: '#b080f0',
        stepsU: 40,
        stepsV: 60
    });
</script>
</body>
</html>