Axis 0 is useless in polar viewports.

[Soares]

Axis 0 is useless in polar viewports.

My goal is to display a numberline-like horizontal axis and then add in a polar grid around it. Something similar can trivially be done with a vertical axis, but it can not easily be done with a horizontal axis. (Using a vertical axis and setting the rotation to tau/4 ends up placing the labels in weird spots.)

Consider:

  mathbox                                                                                                                                                                     
    .viewport({
      type: 'polar',
      range: [[-τ/2, τ/2], [-2, 2]],
      scale: [1.4, 1.4, 1.4],
    })
    .camera({
      orbit: 4,
      phi: τ/4,
      theta: 0,
    })
    .axis({
      axis: 0,
      lineWidth: 2,
      size: .1,
      labels: true,
      distance: 20,
      ticks: 5,
    })
    .grid({
      n: [128, 2],
      ticks: [16, 2],
      tickUnit: [τ/8, 1],
      zIndex: -10,
    });

If you change the axis to 1, you get something like what I want. If you change the axis to 0, you get a gibberish axis.

[unconed]

The reason it works this way is so that axis 0 can transition smoothly from cartesian to polar and back. This can't really change. What I can do is add an override flag to allow polar axes to punch through zero and mirror into the negative side.

The tau/4 rotation sounds like a bug. You can use mathPosition: [tau/4, 0, 0] instead for now.

But the problem you're experiencing is really a symptom of a bigger one. Initially, I assumed that if you wanted to make a polar diagram, you would do everything in polar. Then, properties like worldPosition would allow you to add cartesian sprinkles on top for presentation purposes

But as I discovered in my complex numbers slideshow, you often just want to combine both.

This is possible by creating two mathbox stages in the same three.js scene and controlling both in sync, but is obviously not very handy. The proper solution is to turn the mathbox stage into a proper DOM tree, so you can have e.g. a polar viewport and a cartesian viewport side-by-side, and control them with one animator / director.

[clebio]

@unconed

This is possible by creating two mathbox stages in the same three.js scene and controlling both in sync, but is obviously not very handy. The proper solution is to turn the mathbox stage into a proper DOM tree, so you can have e.g. a polar viewport and a cartesian viewport side-by-side, and control them with one animator / director.

I was looking through the open issues before submitting a comment to this effect. I'd like to be able to have two views of a function (or set, etc.), displayed in different coordinate systems. Say, two columns with a div in each on one page.

I'm not familiar with Three.js (yet). Would you be willing to create a bare-bones example of this using Three.js? What is the level of effort for the proper solution (mathbox stage as proper DOM tree)?

This and a few other lesser questions I have aren't really issues. I'd be happy to help with documentation, if you want. Could be on the repo's wiki, or what-not.