viewof num_steps = Inputs.range([100, 30000], { label: "Number of Steps" })
ca = {
const context = DOM.context2d(width, height);
let p = new Particle();
p.queryCurrentAngleViaCurrentColRowIndex(flowfield);
return p.colRowIndex;
}
class Particle {
constructor(params) {
this.acceleration = p5Instance.createVector(0, 0);
this.velocity = P5.Vector.random2D();
this.position = p5Instance.createVector(
Math.random() * width,
Math.random() * height
); // initial position
this.colRowIndex = [0, 0];
}
queryCurrentAngleViaCurrentColRowIndex(flowfield) {
this.colRowIndex =
flowfield[roundAbs(this.position.x / size)][
roundAbs(this.position.y / size)
];
}
drivenByForce(context) {
let angle = this.colRowIndex[0];
// add the force to
this.acceleration.add(
p5Instance.createVector(
step_length * Math.cos(angle),
step_length * Math.sin(angle)
)
);
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.velocity.limit(2);
// so that at each frame, the original acceleration gets to added with newly queried acceleration
this.acceleration.setMag(0);
context.fillStyle = `hsla(50%, 50%, 50%, 1)`;
context.fillRect(this.position.x, this.position.y, 2, 2);
}
goBackToField() {
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;
}
}
}
canvas = {
const context = DOM.context2d(width, height);
let i = 0;
while (i < 10) {
i++;
console.log(1);
for (let num = 0; num < num_particle; num++) {
let particle = new Particle();
context.save();
particle.queryCurrentAngleViaCurrentColRowIndex(flowfield);
particle.drivenByForce(context);
particle.goBackToField();
context.restore();
}
yield context.canvas;
}
}
num_particle = 100
size = 30 // the size of each grid
columns = Math.floor(width / size) + 1
rows = Math.floor(height / size) +1
height = 400
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.
