renderer.domElement
{
let a = [1,2,3,4]
return a[5]
}
// Continuously updates
{
while (true) {
for (let i = 0; i < particleCount; i++) {
let 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
)
];
accelerationVector[i * 3] = indexedVector.x;
accelerationVector[i * 3 + 1] = indexedVector.y;
accelerationVector[i * 3 + 2] = indexedVector.z;
}
//////////////////////////////////////////////////////
//////Code below changes the positions, but as position grows, it can go out of bound//
//////////////////////////////////////////////////////
// for (let i = 0; i < particleCount; i++) {
// if (this.position.x > width) {
// this.position.x = 0;
// } else if (this.position.x < -size) {
// this.position.x = width - 1;
// }
// if (this.position.y > height) {
// // this.position.y = 0;
// } else if (this.position.y < -size) {
// this.position.y = height - 1;
// }
// particles.geometry.attributes.velocity.array[i * 3] +=
// accelerationVector[i * 3];
// particles.geometry.attributes.velocity.array[i * 3 + 1] +=
// accelerationVector[i * 3 + 1];
// particles.geometry.attributes.velocity.array[i * 3 + 2] +=
// accelerationVector[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];
// }
cube.rotation.z += 0.01;
renderer.render(scene, camera);
yield particles.geometry.attributes.position.array[0];
}
}
size = 30
{
particles.geometry.attributes.position.needsUpdate = true;
particles.geometry.attributes.acceleration.needsUpdate = true;
particles.geometry.attributes.velocity.needsUpdate = true;
}
particles = {
const particleGeometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) {
positions[i * 3] = random(0, 1) * size0 * columns; // x coordinate
positions[i * 3 + 1] = random(0, 1) * size0 * rows; // y coordinate
positions[i * 3 + 2] = random(0, 1) * size0 * depths; // z coordinate
}
const velocityVector = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) {
// position can be negative
velocityVector[i * 3] = random(-1, 1);
velocityVector[i * 3 + 1] = random(-1, 1);
velocityVector[i * 3 + 2] = random(-1, 1);
}
particleGeometry.setAttribute(
"position",
new THREE.BufferAttribute(positions, 3)
);
particleGeometry.setAttribute(
"acceleration",
new THREE.BufferAttribute(accelerationVector, 3)
);
particleGeometry.setAttribute(
"velocity",
new THREE.BufferAttribute(velocityVector, 3)
);
const particleMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.05
});
const shaderMaterial = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
transparent: true,
depthTest: false,
depthWrite: false,
blending: THREE.AdditiveBlending
});
const particleSystem = new THREE.Points(particleGeometry, shaderMaterial);
// return [accelerationVector, positions];
return particleSystem;
}
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 = 10.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);
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.
