My current project involves using p5.js to render a 3D cube on a webpage, and I need to continuously update color information from JSON files. These JSON files are updated every second as a python script runs in the background.
The issue I'm facing is that my webpage keeps refreshing and flickering, disrupting the smooth rendering of visual features from the JSON data. How can I modify my code to ensure that the colors are smoothly rendered without any interruptions? Any advice or suggestions would be greatly appreciated.
Below is the p5.js code I am currently working with:
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();
})))
}