Animating across different surfaces

[Illu]

Hi All,
I am new to this amazing library. Thanks for such a great tool and a helpful group.

I am trying to display different surfaces and animating between them. I could go so far as to be able to animate between two surfaces (Thanks to earlier threads). Basically, I could display surf1 and animate it to surf2 using grow. But now I want a multi surface animation: display surf1, animate from surf1 to surf2, show surf2 for some time, animate from surf2 to surf3 etc. Here is my current working code:

      view.area({
        expr: function(emit, x, y, i, j) {
            var idx = 400*i + j; // because it is a static array of 400x400
            var x1 = pos1[3*idx];
            var y1 = pos1[(3*idx) + 1];
            var z1 = pos1[(3*idx) + 2];
            var x2 = pos2[3*idx];
            var y2 = pos2[(3*idx) + 1];
            var z2 = pos2[(3*idx) + 2];
            emit(x1,y1,z1);
            emit(x2,y2,z2)
        },
        axes:[1,3], width: 400, height:400, items: 2,channels:3, live:false})
    .grow({items: 'first'})
    .play({
        delay:1,
        pace:2,
        script: [
            {props: {scale: 0}},
            {props: {scale: 1}},
        ]
    })
        .slice({
        items: [1, 2]
      })
      .surface({shaded: true, lineX: true, lineY: true,  colors:'#55a', width:1})

Thanks in advance for the help.

[Steven Wittens]

This is much more complicated than it needs to be.

You can just animate different emitter expressions directly like this:

.play({

      script: [

        {props: {expr: function (emit, x, y, i, j, time) {

            emit(x, Math.sin(x + time) * Math.sin(y + time), y);

        }}},

        {props: {expr: function (emit, x, y, i, j, time) {

            emit(x, Math.cos(3*x + time) * Math.cos(3*y + time), y);

        }}},

        {props: {expr: function (emit, x, y, i, j, time) {

            emit(x, Math.cos(Math.cos(x*3) + x + time) * Math.cos(3*y + time), y);

        }}},

      ],

      delay: 1,

      pace: 2,

      loop: 3,

    });

Although in your case, because you have static input data, you shouldn't need `expr` at all, and can just use `data` directly on the area/matrix element. As long as you set the input dimensions and channel count correctly, it should automatically pick up stride on the array(s).

See:

http://acko.net/files/dump/tiles/play1.html

http://acko.net/files/dump/tiles/play2.html

--
You received this message because you are subscribed to the Google Groups "MathBox" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathbox+u...@googlegroups.com.
To post to this group, send email to mat...@googlegroups.com.
Visit this group at https://groups.google.com/group/mathbox.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathbox/b3e493a1-01e1-4e83-b5a5-9a4702b572d3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Illu]

Thanks a lot for the response.

I actually tried 

.play({

  script: [

    {props: {data: pos1}},

    {props: {data: pos2}},

  ]

});

It didn't work for me. I was not sure what was wrong, so wrote it explicitly in expr function.