Learning Flowfield 1: Tutorial 101Learn Flowfield 2: practice run3D Flow Field 2Learn Flowfield 5: Do it myself
Learn Flowfield 3: Coding Train Flow Field
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];
this.color = ["#ffa822", "#134e6f", "#ff6150", "#1ac0c6", "#dee0e6"];
}
update() {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.velocity.limit(max_speed);
// so that at each frame, the original acceleration gets to added with newly queried acceleration
this.acceleration.setMag(0);
}
applyForce(force) {
this.acceleration.add(force);
}
follow() {
this.applyForce(
flowfield[roundAbs(this.position.x / size)][
roundAbs(this.position.y / size)
]
);
// console.log(
// flowfield[roundAbs(this.position.y / size)]
// );
}
show(context) {
context.fillStyle = this.color[randInt(0, 4)];
context.fillRect(this.position.x, this.position.y, 3, 3);
}
// 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;
// }
// }
randInt(0, 4)
import { randInt } from "@makio135/utilities"
num_particle = 100
size = 30 // the size of each grid
columns = Math.floor(width / size) + 1
rows = Math.floor(height / size) +1
height = 600
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.
