title: How to avoid refreshing and flickering while loading json with p5.js
body: <p>I'm trying to use p5.js to render a 3d cube on the webpage, and need to load one constantly updating JSON files to get the color features. The JSON files would be updated per second as I run a python script. </p>
  
  <p>The problem is, my result web page keeps refreshing and sometimes has flickers, which is not what I wanted. How can I adjust my code so that the visual features from JSON could be rendered smoothly without any interruption? Any help would be appreciated.</p>
  
  <p>Here's my p5.js code below:</p>
  
  <pre><code>var color_data
  var urls = "http://127.0.0.1:5500/data.json";
  let fr = 500
  
  function setup() {
      createCanvas(windowWidth, windowHeight, WEBGL);
      setInterval(loadData, 100)
      frameRate(fr);
      easycam = createEasyCam();
      document.oncontextmenu = () =&gt; false;
      easycam.setDistance(800, 0);
  }
  
  function gotData(data) {
      color_data = data
  }
  
  function loadData() {
      loadJSON(urls, gotData)
  }
  
  function windowResized() {
      resizeCanvas(windowWidth, windowHeight)
  }
  
  function draw() {
  
      function colorPart(x_value, y_value, z_value) {
          let arr = color_data[5 - y_value][5 - z_value][x_value]
          return arr.split(',')
      }
  
      function forRange(fn) {
          const cubeSpacing = 100
          for (let i = -250; i &lt;= 250; i += cubeSpacing) {
              fn(i);
          }
      }
  
      function coordToIndex(num) {
          return (num / 50 + 5) / 2
      }
  
      background(155);
  
      translate(0, 0, -500);
  
      rotateY(millis() / 2000);
  
      // let size = Math.random() % 10 *25
      // let volume = Math.random() % 1 + 1
      let volume = 1
  
      forRange(x =&gt; forRange(y =&gt; forRange(z =&gt; {
          let pos = createVector(x, y, z);
          noStroke()
          push();
          translate(volume * pos.x, volume * pos.y, volume * pos.z);
          let index_x = coordToIndex(x)
          let index_y = coordToIndex(y)
          let index_z = coordToIndex(z)
          if (color_data) {
              let tem_arr = colorPart(index_x, index_y, index_z)
              fill(parseInt(tem_arr[0]), parseInt(tem_arr[1]), parseInt(tem_arr[2]));
          }
          sphere(18)
          pop();
      })))
  
  }
  </code></pre>