Javascript 如何在使用p5.js加载json时避免刷新和闪烁

我正在尝试使用p5.js在网页上呈现一个3d立方体，并且需要加载一个不断更新的JSON文件来获得颜色特征。JSON文件将在我运行python脚本时每秒更新一次

问题是，我的结果网页不断刷新，有时会闪烁，这不是我想要的。我如何调整我的代码，以便JSON中的视觉特性可以在没有任何中断的情况下顺利呈现？任何帮助都将不胜感激

下面是我的p5.js代码：

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 = () => 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 <= 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 => forRange(y => forRange(z => {
        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();
    })))

}

var-color\u数据
变量URL=”http://127.0.0.1:5500/data.json";
设fr=500
函数设置（）{
createCanvas（窗口宽度、窗口高度、WEBGL）；
设置间隔（加载数据，100）
帧率；
easycam=createEasyCam（）；
document.oncontextmenu=（）=>false；
easycam.setDistance（800,0）；
}
函数gotData（数据）{
颜色数据=数据
}
函数loadData（）{
loadJSON（URL、gotData）
}
函数windowResized（）{
调整画布大小（窗口宽度、窗口高度）
}
函数绘图（）{
函数颜色部分（x_值、y_值、z_值）{
设arr=颜色_数据[5-y_值][5-z_值][x_值]
返回arr.split（'，'）
}
范围函数（fn）{
常数立方空间=100
for（设i=-250；i forRange（y=>forRange（z=>{
设pos=createVector（x，y，z）；
noStroke（）
推（）；
翻译（卷*位置x，卷*位置y，卷*位置z）；
设索引_x=coordToIndex（x）
设指数y=coordToIndex（y）
设索引_z=coordToIndex（z）
if（颜色数据）{
设tem_arr=colorPart（索引x，索引y，索引z）
填充（parseInt（tem_arr[0]）、parseInt（tem_arr[1]）、parseInt（tem_arr[2]）；
}
球体（18）
pop（）；
})))
}

下面是我在评论中的意思的一个例子

我将大部分计算移出了绘图，在设置中，我们加载带有位置和初始颜色的

spheres

数组，然后

setInterval（changeColor，500）

更改颜色，在这种情况下只是随机的，但您可以像现在这样处理来自json的数据

    colors = ["red", "blue", "green", "cyan", "white", "black", "yellow"]

    function setup() {
        spheres = []
        forRange(x => forRange(y => forRange(z => {
            color = "red"
            spheres.push({ x, y, z, color })
        })))

        createCanvas(windowWidth, windowHeight, WEBGL);
        frameRate(500);
        document.oncontextmenu = () => false;
        setInterval(changeColor, 500)
    }

    function changeColor() {
        spheres.forEach(obj => {
            obj.color = colors[int(random(colors.length))]
        })
    }

    function forRange(fn) {
        const cubeSpacing = 120
        for (let i = -250; i <= 250; i += cubeSpacing) {
            fn(i);
        }
    }

    function draw() {
        background(155);
        translate(0, 0, -500);
        rotateY(millis() / 2000);
        rotateX(millis() / 8000);

        spheres.forEach(obj => {
            noStroke()
            push();
            translate(obj.x, obj.y, obj.z);
            fill(obj.color)
            sphere(18)
            pop();
        })
    }

colors=[“红”、“蓝”、“绿”、“青”、“白”、“黑”、“黄”]
函数设置（）{
球体=[]
forRange（x=>forRange（y=>forRange（z=>{
color=“红色”
spheres.push（{x，y，z，color}）
})))
createCanvas（窗口宽度、窗口高度、WEBGL）；
帧率（500）；
document.oncontextmenu=（）=>false；
设置间隔（更改颜色，500）
}
函数changeColor（）{
球体。forEach（obj=>{
obj.color=colors[int（随机（colors.length））]
})
}
范围函数（fn）{
常数立方空间=120
for（设i=-250；i{
noStroke（）
推（）；
平移（对象x、对象y、对象z）；
填充（对象颜色）
球体（18）
pop（）；
})
}

以下是实际行动：

---

没有刷新和闪烁（至少没有在谷歌浏览器中，我只是在那里测试过）

不太熟悉

p5

，但我注意到您在每帧使用

parseInt

，听起来好像您每秒只刷新JSON。因此可能希望缓存

parseInt

值以减少开销。如果没有功能完整的示例，将很难解决此问题……在该代码上，我看不到任何可能的问题导致页面刷新…但一般来说，你应该避免在绘图时进行计算，所有这些都可以在需要时在不太频繁的地方进行吗？帧速率为500似乎很奇怪。为什么帧速率这么高？我最初的想法是将帧速率设置得更高以避免闪烁，当然这不起作用。详细答案请回答！我知道很遗憾，这些问题仍然存在，而且以某种方式变得更糟。这一次，在抓取完成之前，视觉功能甚至不会显示：（@URlemontree，如我在评论中所说，如果没有一个功能完整的示例，将无法做很多事情