// 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
p5Instance.noise(
1 / noise_step_magnitude,
2 / noise_step_magnitude,
3 / noise_step_magnitude,
0
)
field_data = {
const fieldData = new Float32Array(fieldSize * fieldSize * fieldSize * 3);
for (let z = 0; z < fieldSize; z++) {
for (let y = 0; y < fieldSize; y++) {
for (let x = 0; x < fieldSize; x++) {
const index = (z * fieldSize * fieldSize + y * fieldSize + x) * 3;
const vector = getFlowFieldVector(x, y, z, time);
fieldData[index] = (vector.x + 1) * 0.5;
fieldData[index + 1] = (vector.y + 1) * 0.5;
fieldData[index + 2] = (vector.z + 1) * 0.5;
}
}
}
return fieldData;
}
{
const textureSize = fieldSize;
const flowFieldTexture = new THREE.Data3DTexture(
field_data,
textureSize,
textureSize,
textureSize
);
flowFieldTexture.format = THREE.RGBFormat;
flowFieldTexture.type = THREE.FloatType;
flowFieldTexture.wrapS =
flowFieldTexture.wrapT =
flowFieldTexture.wrapR =
THREE.ClampToEdgeWrapping;
flowFieldTexture.minFilter = flowFieldTexture.magFilter = THREE.LinearFilter;
return flowFieldTexture;
}
{
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.
