CODEWITHSUNDEEP
javascriptplotly
PintoDoido
PintoDoido

Reputation: 1051

Plotly.js - Heatmap animation very flickery

I am trying to animate a heatmap using Plotly.js.

So far I have got:

var rho = [];
for (var n = 0; n < 100; n++) {
  rho[n] = [];
  for (var l = 0; l < 100; l++) {
    rho[n][l] = n * l;
  }
}

var dummy = 1;

var data = [{
  z: rho,
  type: 'heatmap'
}];

function compute() {
  dummy++;
  for (n = 0; n < 100; n++) {
    for (l = 0; l < 100; l++) {
      data[0].z[n][l] = Math.sin(0.3 * (n * l - 0.05) + dummy);
    }
  }
}

Plotly.newPlot('graph', data);

function update() {
  compute();
  rho = data[0].z;
  Plotly.animate('graph', {
    data: [{
      z: rho,
      type: 'heatmap'
    }]
  }, {
    transition: {
      duration: 100
    },
    frame: {
      duration: 100,
      redraw: true
    }
  })
  requestAnimationFrame(update);
}

requestAnimationFrame(update);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph" style="position: relative; width: 600px; height: 500px;"></div>

However, this code does not produce a smooth animation due to flickering.

If I set the duration of the transition or the animation to 0 (as it is shown here ), it does not even display the heatmap plot.

Why is this happening?

How can I fix the flickering and obtain a smooth animation (with double buffering or something similar)?

Upvotes: 0

Views: 768

Answers (1)

lobZter
lobZter

Reputation: 51

Use Plotly.redraw or Plotly.restyle to prevent clearing the frame.

var rho = [];
for (var n = 0; n < 100; n++) {
  rho[n] = [];
  for (var l = 0; l < 100; l++) {
    rho[n][l] = n * l;
  }
}

var dummy = 1;

var data = [{
  z: rho,
  type: 'heatmap'
}];

function compute() {
  dummy++;
  for (n = 0; n < 100; n++) {
    for (l = 0; l < 100; l++) {
      data[0].z[n][l] = Math.sin(0.3 * (n * l - 0.05) + dummy);
    }
  }
}

Plotly.newPlot('graph', data);

function update() {
    compute();
    rho = data[0].z;
    let myDiv = document.getElementById("graph");

    myDiv.data.z = rho
    Plotly.redraw(myDiv);

    // Plotly.restyle(myDiv, 'z', [rho]);
}

setInterval(function () {
    update()
}, 200.0);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph" style="position: relative; width: 600px; height: 500px;"></div>

Upvotes: 2

Related Questions