Synchronise two figures

30 views

Skip to first unread message

phkw...@gmail.com

unread,

Sep 14, 2018, 4:46:14 AM9/14/18

to MathBox

Hi,

I would like to show two synchronised animated plots with Mathbox side by side. See the following minimal example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MathBox - Empty</title>
  <script src="mathbox-bundle.js"></script>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
  <script>
    var mathbox = mathBox({
      plugins: ['core', 'controls', 'cursor', 'mathbox'],
      controls: {
        // Orbit controls, i.e. Euler angles, with gimbal lock
        klass: THREE.OrbitControls,

        // Trackball controls, i.e. Free quaternion rotation
        //klass: THREE.TrackballControls,
      },
    });
    if (mathbox.fallback) throw "WebGL not supported"

    var three = mathbox.three;
    three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);



    // Do stuff with mathbox,
    // for example: (see docs/intro.md)

    var camera = mathbox.camera({
        proxy: true,
        position: [0, 0, 3],
        });

I would like to show next to this figure another plot which shows the length of the green segment in a plot of "slope of green line versus length of green segment".

The math for this is obviously trivial but my question is, how do I add that other figure which is synchronised? I can make another html file which animates the length and then put those two side by side in another html doc, but then the two animations are slightly lagged (and I would like to let the user see the same information (i.e. the length of the line) in both plots at the same time.

phkw...@gmail.com

unread,

Sep 17, 2018, 1:42:21 PM9/17/18

to MathBox

I just realized that somehow 90% of my code were not pasted (but I failed to re-read the code). So here is the original code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MathBox - Empty</title>

  <script src="../mathbox-bundle.js"></script>

  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
  <script>
    var mathbox = mathBox({
      plugins: ['core', 'controls', 'cursor', 'mathbox'],
      controls: {
        // Orbit controls, i.e. Euler angles, with gimbal lock
        klass: THREE.OrbitControls,

        // Trackball controls, i.e. Free quaternion rotation
        //klass: THREE.TrackballControls,
      },
    });
    if (mathbox.fallback) throw "WebGL not supported"

    var three = mathbox.three;
    three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);



    // Do stuff with mathbox,
    // for example: (see docs/intro.md)
    
    var camera = mathbox.camera({
        proxy: true,
        position: [0, 0, 3],
        });

    var view = mathbox.cartesian({
        range: [[-0.5, 1.5], [-1, 1]],
        scale: [2.0, 1.5],
        });
    
    
    view
        .axis({
            axis: 1,
            width: 3,
        })
        .axis({
            axis: 2,
            width: 3,
        })
        .grid({
            width: 1,  
            divideX: 11,
            divideY: 16,        
        });
    

    
    var data =
      view
      .interval({
        expr: function (emit, x, i, t) {
          emit(x, -(x-1)*(x-1));
        },
        width: 64,
        channels: 2,
      });
    var curve2 =
        view.line({
            width: 5,
            color: '#205899',
        });
    
    var data3 = 
        view.interval({
            expr: function(emit, x, i, t) {
                var xx = 0.25+0.25*Math.sin(10*t);
                var fnc = function(x){return -(x-1)*(x-1);}
                emit(0, 0);
                emit(xx, fnc(xx));
            },
            width: 1,
            channels: 2,
            items: 2,

        })
        .vector({
    
        width: 5,
        
        color: '#50A000',
      });
    

    
  </script>
</body>
</html>

I managed to solve the problem by exchanging the generic time t in the animation by global time, i.e. instead of

                var xx = 0.25+0.25*Math.sin(10*t);
I wrote 

                var xx = 0.25+0.25*Math.sin(10*new Date().getTime()/1000);

Reply all

Reply to author

Forward

0 new messages