How to move points in space with specific coordinates

[py.vande...@gmail.com]

Hi all,

I am now trying to animate some points in space based on coordinates that would change at different epochs. 

More precisely for a point A I would like its position to move from coordinates a1 defined by (x1,y1,z1) to a2 to a3 with an animation of the point going from one coordinate to another. 

Let's consider the following data for 3 points (each row correspond to a point) and 3 coordinate states (corresponding to [a1,a2,a3])

var points = [

    [[0,0,0],[.2,.1,0],[.3,.3,0]],

    [[-.3,-.3,-.1],[-.2,-.1,0],[-.1,.2,.2]],

    [[.1,.2,-.8],[.05,.1,-.3],[.05,.05,.4]]

    ];

Using the code below, I can make the points jumping from one coordinate to the other but there is no smooth transition from a coordinate to the next. 

I tried to use grow between each two pairs of coordinates but can only do between two coordinates. 

Am I missing something? Would you see any clever way to approach this problem?

Any help is welcomed!

Thanks in Advance, 

Pierre-Yves.

<script>

  // DATA

  var points = [

    [[0,0,0],[.2,.1,0],[.3,.3,0]],

    [[-.3,-.3,-.1],[-.2,-.1,0],[-.1,.2,.2]],

    [[.1,.2,-.8],[.05,.1,-.3],[.05,.05,.4]]

    ];

  

    mathbox = mathBox({

      plugins: ['core', 'controls', 'cursor'],

      controls: {

        klass: THREE.OrbitControls

      },

      camera: {near: .01,far: 1000}

    });

    three = mathbox.three;

    three.camera.position.set(-.5, .3, 2);

    three.camera.lookAt(new THREE.Vector3())

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

    

    

    setInterval(function () {

      present.set('index', (present.get('index') + 1) % (present.get('length') + 1));

    }, 1000);

    view = mathbox

    .cartesian({

      range: [[-2, 2], [-1, 1], [-1, 1]],

      scale: [2, 1, 1],

    });

    

        

    var present = view.present({index: 1})

    

    view.axis({zBias: -10,end: true,width: 10,});

view.axis({axis: 2,zBias: -10,end: true,width: 10,});

view.grid({divideX: 30,width: 10,opacity: 0.5,zBias: -10,axes: [1, 3],});

present

      .slide({steps: 3})

      .interval({

       width:3,

     channels: 3,

     expr: function (emit, x, i, time) {

       var index = present.get('index')-1

       emit(points[i][index][0],points[i][index][1],points[i][index][2]);

     },

   })

      .point({

        color: 0xff4444,

size: 40,

zIndex: 2

      })
</script>

[Alexander Mordvintsev]

One way is to use a combination of "lerp" and "slice" primitives, where "lerp" interpolates over the temporal dimension, and slice takes the interpolated sample for the current animation frame. The interpolation is not wasting memory because the whole pipeline is evaluated lazily in a GLSL shader.

Another way is to use "shader+resample" pair to explicitly code the transition you need as a shader code snippet.

четверг, 17 августа 2017 г., 10:07:03 UTC+2 пользователь py.vande...@gmail.com написал: