function flattenNestedArray(nestedArray, width, height, depth) {
const flatArray = new Uint8Array(width * height * depth);
let index = 0;
for (let z = 0; z < depth; ++z) {
for (let y = 0; y < height; ++y) {
for (let x = 0; x < width; ++x) {
flatArray[index++] = nestedArray[z][y][x];
}
}
}
return flatArray;
}
{
const width = 4;
const height = 4;
const depth = 4;
const nestedArray = createNestedArray(width, height, depth); // This function should generate your 3D nested array
const textureData = flattenNestedArray(nestedArray, width, height, depth);
return textureData
}
// renderer.domElement
// Continuously updates
a = {
let ticks = 0;
let indexes;
let indexedVector;
let y;
while (true) {
ticks++;
for (let i = 0; i < particleCount; i++) {
if (particles.geometry.attributes.position.array[i * 3] > size0 * columns)
particles.geometry.attributes.position.array[i * 3] =
random(0, 1) * size0 * columns;
if (
particles.geometry.attributes.position.array[i * 3 + 1] >
size0 * rows
)
particles.geometry.attributes.position.array[i * 3 + 1] =
random(0, 1) * size0 * rows;
if (
particles.geometry.attributes.position.array[i * 3 + 2] >
size0 * depths
)
particles.geometry.attributes.position.array[i * 3 + 2] =
random(0, 1) * size0 * depths;
if (particles.geometry.attributes.position.array[i * 3] < 0)
particles.geometry.attributes.position.array[i * 3] =
random(0, 1) * size0 * columns;
if (particles.geometry.attributes.position.array[i * 3 + 1] < 0)
particles.geometry.attributes.position.array[i * 3 + 1] =
random(0, 1) * size0 * rows;
if (particles.geometry.attributes.position.array[i * 3 + 2] < 0)
particles.geometry.attributes.position.array[i * 3 + 2] =
random(0, 1) * size0 * depths;
indexedVector =
flowfield[
Math.floor(
particles.geometry.attributes.position.array[i * 3] / size0
)
][
Math.floor(
particles.geometry.attributes.position.array[i * 3 + 1] / size0
)
][
Math.floor(
particles.geometry.attributes.position.array[i * 3 + 2] / size0
)
].addScalar(0.0000000000000000000000001);
particles.geometry.attributes.acceleration.array[i * 3] +=
indexedVector.x;
particles.geometry.attributes.acceleration.array[i * 3 + 1] +=
indexedVector.y;
particles.geometry.attributes.acceleration.array[i * 3 + 2] +=
indexedVector.z;
particles.geometry.attributes.velocity.array[i * 3] +=
particles.geometry.attributes.acceleration.array[i * 3];
particles.geometry.attributes.velocity.array[i * 3 + 1] +=
particles.geometry.attributes.acceleration.array[i * 3 + 1];
particles.geometry.attributes.velocity.array[i * 3 + 2] +=
particles.geometry.attributes.acceleration.array[i * 3 + 2];
particles.geometry.attributes.position.array[i * 3] +=
particles.geometry.attributes.velocity.array[i * 3];
particles.geometry.attributes.position.array[i * 3 + 1] +=
particles.geometry.attributes.velocity.array[i * 3 + 1];
particles.geometry.attributes.position.array[i * 3 + 2] +=
particles.geometry.attributes.velocity.array[i * 3 + 2];
particles.geometry.attributes.acceleration.array[i * 3] += 0;
particles.geometry.attributes.acceleration.array[i * 3 + 1] += 0;
particles.geometry.attributes.acceleration.array[i * 3 + 2] += 0;
}
// cube.rotation.z += 0.01;
// for (let i = 0; i < 3000; i++) {
// particles.geometry.attributes.position.array[i] += 0.001;
// }
particles.geometry.attributes.position.needsUpdate = true;
renderer.render(scene, camera);
yield Promises.tick(1000, 1);
}
}
size = 30
{
particles.geometry.attributes.position.needsUpdate = true;
particles.geometry.attributes.acceleration.needsUpdate = true;
particles.geometry.attributes.velocity.needsUpdate = true;
}
vertexShader = `
// attribute vec3 position;
attribute vec3 acceleration;
attribute vec3 velocity;
varying vec3 vColor;
float size0 = 0.05;
void main() {
vec3 normalizedToIndex = position / size0;
// vec3 updatedVelocity = velocity + acceleration;
// vec3 updatedPosition = position + updatedVelocity;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = 20.0;
vColor = vec3(0.8705882352941177,0.8784313725490196,0.9019607843137255);
}
`
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
// scene.add(cube);
scene.add(particles);
scene.scale.set(0.5, 0.5, 0.5)
return scene;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
