Question about single moving point

[Michael Nielsen]

I'm using MathBox to develop a demonstration of how the principle of conservation of energy can help us reason about a system.  

As part of the demo, I have a point ("the ball") moving on the x axis.  Based on the MathBox examples, at the moment I am using the following to show the ball's starting behaviour:

view.interval({
  width: 1,
  items: 1,
  channels: 3,
  expr: function (emit, x, i, t) {emit(Math.sin(t), 0, 0);}})
    .point({
  color: 0x5555FF,
  size: 10,
    });

While this works, it seems like overkill to be using an interval containing just a single element.

Is there an easier or more natural way to accomplish this?

(Note that later on I'll want to change the ball's behaviour to something other than Math.sin(t).) 

Thanks,

Michael

-- 

http://michaelnielsen.org

[Steven Wittens]

There's no simpler way to do this, no. We could add a .one() primitive to address this case, but it wouldn't simplify use that much, it would basically just let you drop the "width" prop. Internally this would avoid some machinery, but I doubt it would be a noticeable difference in performance, most of the cost is set up.

[Michael Nielsen]

Thanks.  At some level, this is quite encouraging. 

Michael

— 

Michael Nielsen

http://michaelnielsen.org

On May 3, 2016, at 14:11, Steven Wittens <steven....@gmail.com> wrote:

There's no simpler way to do this, no. We could add a .one() primitive to address this case, but it wouldn't simplify use that much, it would basically just let you drop the "width" prop. Internally this would avoid some machinery, but I doubt it would be a noticeable difference in performance, most of the cost is set up.

--
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/ae1adfaf-a048-47fc-9bd5-b04f9753828e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Nelson Brown]

Firstly, thank you very, very much for writing this library.  It's really cool.

As a small follow up to Michael's message:

(Note that later on I'll want to change the ball's behaviour to something other than Math.sin(t).) 

The method that I accomplished something similar (changing the expression from one step to another) in an animation was through the mathbox API.  Is that the recommended approach?  Or is there a way to set a data's expr property in the script called in the step primitive?

So let's say in Michael's example, I wanted to change the expression to Math.cos and make the point twice as big and back again.  Would this be the proper usage?

// define some functions with the proper signature
functionWithSin = function (emit, x, i, t) {emit(Math.sin(t), 0, 0);};
functionWithCos = function (emit, x, i, t) {emit(Math.cos(t), 0, 0);};

// create a presentation from a mathbox view.
view = view.present({index: 1}).slide({steps: 2});

// create the data
view.interval({
    id: 'myPoint',
    width: 1,
    items: 1,
    channels: 3,
    expr: functionWithSin
  })
  // alternatively, call .step here to change expression of '#myPoint'?  Didn't work for me.
  .point({

    color: 0x5555FF,
    size: 10,
  })

  // animate the "drawable" thing with properties that can be "smoothly" transitioned
  .step({
   script: [{size:10}, {size: 20}]
  });

var currentSlide = 1;
var maxSlides = 2;

function TriggerAnimation() {
  // Call this function from deck.js or a button, etc?
  currentSlide++;
  if(currentSlide > maxSlides) currentSlide = 1;

  var myPoint = mathbox.select("#myPoint");
  var present = mathbox.select("present");

  switch(currentSlide) {
    case 1:
      myPoint.set("expr", functionWithSin);
      // Other non-interpolated "dynamic" behavior
      break;
    case 2:
      myPoint.set("expr", functionWithCos);
      break;
  }

  present.set("index", currentSlide);

}

Thanks again very much for sharing this library.

-Nelson

[Steven Wittens]

Re: animating to an expr. This is a known API confusion I'm considering fixing incompatibly in the next release.

   script: [{size:10}, {size: 20}]

This is actually a shorthand. The full/real usage is:

   script: [{props: {size:10}}, {props: {size: 20}}]

If you want to animate from one expr prop to another, you use:

   script: [{props: {expr: function (emit, ...) { emit(...); }}}, {props: {expr: function (emit, ...) { emit(...); }}}]

If however you want to animate to a dynamically evaluated property, i.e. do the equivalent of a .bind() in a keyframe, you'd use:

   script: [{expr: {size: function (t) { return 10 + Math.sin(t); }}}, {props: {size: 20}}]

You see the confusion... "expr" is both the name of a function-valued prop, and the way you identify dynamically evaluated keyframe values. It was a mistake to use "expr" for this usage, and I think it should've been called "bind". That way, the shorthand notation wouldn't conflict, and people wouldn't mysteriously find it not working.

Changing this would break existing scripts though, so it's not ideal. But I think it's preferable to having this confusion remain.

[Nelson Brown]

Yeah, the labeling is a little confusing.  It may also be broken for the HTML primitive (see latest post "HTML expr and step" 5/4/2016).

I was going to post minimal non-working example there.  Thank you again.

-Nelson

[Kevin Zeidler]

On Friday, June 2, 2017 at 11:57:21 AM UTC-7, Kevin Zeidler wrote:

I'm curious about the significance of named arguments provided to expr — or are they parameters?  I'm curious because to pull a reference to an element's index value, sometimes it's sufficient to simply supply an "i" parameter like 

.text({
    font: 'Helvetica',
    style: 'bold',
    width: vocab.length,
    height: 1,
    expr: function (emit, i) {
        emit(
            vocab[i]
        );
    }
})

which I'd like to understand better. There are a lot of parameters (i, j, delta, time, t, x, y, to name a few) that are regularly passed as varargs to that applicative expr function even though they're not explicitly defined in the userspace. Where do they come from – are they scoped to the parent? Do all collections have an implicit index variable, or just certain types? Is there a specific API that describes these "implicit" properties of mathbox objects?

[Blake La Pierre]

There is some documentation for expr at: https://github.com/unconed/mathbox/blob/adc4792c9ebda000c133937b22372e9a97bf64ad/docs/glossary.md  (first point under Data)

I looked at some of the source files and it looks like each primitive defines the parameters that are passed.