Projector: 2D sprite element zoom

[francoisluus]

The Projector can now enlarge/shrink the actual sprite images/placeholders during zooming, which is useful for closer inspection of samples when zooming, or for reducing sprite occlusion when zooming far out.

Demo here: http://tensorserve.com:6011

git clone -b projector-2d-spritezoom https://github.com/francoisluus/tensorboard-supervise.git
cd tensorboard-supervise
git checkout 9a71c652944672826671a6ff32c6d022e0d9cd01
bazel run tensorboard -- --logdir /home/emnist-2000 --host 0.0.0.0 --port 6011

Supersedes #672: Projector improvements: Pause/resume T-SNE, and 2D sprite element zoom

Sprite shrink and enlarge sizes

Smallest sprite size, and reset zoom size:

Medium enlarge size, and maximum sprite size:

Zoom pivot and offset

The 2D zoom is set according to the projectionMatrix and an offset value, since the default/reset zoom seems to be less than 1 so an offset is needed to ensure 2D sprite sizes are about the same as they were before.

const float zoomOffset = 0.3;  // offset zoom pivot
float zoom = projectionMatrix[0][0] + zoomOffset;  // zoom pivot

A zoom less than the zoom pivot should produce stronger shrinkage gradient to reduce occlusion when zooming out, and a zoom greater than the pivot should have a weaker enlarging gradient when zooming in to also reduce occlusion, this assumes that the level of sprite occlusion at the zoom pivot is already agreeable.

The arc tangent function displays the desired gradients around the origin as pivot, and one can define an arbitrary sizing speed by using a specific width of the function:

Less than zoom pivot

Lets use the negative domain of the arc tangent to promote faster sizing when zooming out to reduce occlusion, here m is the minimum scaling factor, s the sizing speed, and z the zoom:


Set the minimum scaling factor to 10% and the speed at 2.0, then we calculate the scale accordingly:

const float minScale = 0.1;  // minimum scaling factor
const float outSpeed = 2.0;  // shrink speed when zooming out
const float outNorm = (1. - minScale) / atan(outSpeed);
float scale = zoom < 1. ? 1. + outNorm * atan(outSpeed * (zoom - 1.)) :
                     1. + 2. / PI * (maxScale - 1.) * atan(inSpeed * (zoom - 1.));

When the sizing speed is increased the function responds with an increased gradient around the pivot:

Greater than zoom pivot

Now for a zoom greater than the pivot lets use the positive domain of the arc tangent to promote slower sizing when zooming in to reduce occlusion, here m is the maximum scaling factor, s the sizing speed, and z the zoom:


A maximum size scaling factor of 15x and a slow sizing speed of 0.02 is chosen as it produces an agreeable sizing dynamic:

const float maxScale = 15.0;  // maximum scaling factor
const float inSpeed = 0.02;  // enlarge speed when zooming in
float scale = zoom < 1. ? 1. + outNorm * atan(outSpeed * (zoom - 1.)) :
                     1. + 2. / PI * (maxScale - 1.) * atan(inSpeed * (zoom - 1.));

The sizing speed can also be adjusted here to change the sizing gradient:

[dsmilkov]

Wow, again this is great work.Out of curiosity, is tensorserve.com your private domain, or a service?

[francoisluus]

Thank you for merging this contribution.

tensorserve.com is a private domain, using it temporarily to host pull request demos, running it on Google Cloud Compute in a semi-automated way at the moment.