3D orienting particles using velocity and position vectors in p5js

Asymetr

I'm currently writting a 3D implementation of the boids algorithm in P5.js but I'm having trouble orienting my boids according to their direction (velocity). Rotations are limited to RotateX(), RotateY() and RotateZ(). The simplest solution that I feel should work goes along these lines :

push();

translate(this.pos); 
rotateZ(createVector(this.vel.x, this.vel.y).heading());
rotateY(createVector(this.vel.x, this.vel.z).heading());

beginShape();
// Draw Boid Vertices..
endShape();

pop();

But it doesn't.

I've written a much smaller version of the program which contains only the orientation for randomly generated particles that go in a single direction. It is available here directly on the p5js website : https://editor.p5js.org/itsKaspar/sketches/JvypSPGGh There is a default orbit control so you can zoom and drag the mouse to check the orientation of the particles.

Thanks so much, I've been stuck on this for half a day now

Mudkip Hacker

From your demo, the z component is flipped, and you can test this from only trying one of the rotations at a time. Second, chaining rotations in 3D this way will usually not do what you want, as rotating will change the "up" or "right" vector of the coordinate system attached to a certain object. For example, rotating about the up (-y for p5) vector, or the yaw angle, will rotate the right vector. The second rotation then needs to be about the rotated right vector (now pitch), so you can't just use rotateX/Y/Z as they are still in world space instead of object space. Note that I'm completely ignoring roll in this solution, but if you look at the boids from the front and top angles, it should be aligned with the velocities

var right = p5.Vector(this.vel.x, 0, this.vel.z);
rotate(atan(this.vel.y/ this.vel.x), right);
rotateY(atan2(-this.vel.z, this.vel.x));

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

2D projectile - Velocity and Position Vectors

How to fill text with particles using p5js

Converting Velocity and Position Vectors to Longitude and Latitude?

good 3D explosion & particles effect using OpenGL (JOGL)?

How to smooth out the trails of the particles in a p5js simulation

Improving halftone / particles performance in P5js

Using particles.js with React

Get direction between two 3d vectors using Three.js?

Properly orienting a 3D mesh to point in the direction it's heading

How to generate a 3D grid of vectors ? (each position in the 3D grid is a vector)

race condition using OpenMP atomic capture operation for 3D histogram of particles and making an index

Define vectors and find angles using Python in 3D space?

Displaying 3D normal vectors of vertices using python

Using P5js with reactjs

how to convert 3D obj file to particles in three.js

Select objects in 3D space using mouse position (THREE.js R99)

Applying particles package in R to ocean velocity

Fix position for tranlate() while rotate() only in p5js?

How to return the camera position in p5js?

How to change the fill of p5js 3d Geometries

Using a matrix to position objects in 3D space

How to Generate a Grid of Points Using Vectors in p5.js

Find arc() edge while using p5js

How to upload image in p5js using React?

How to use HTML5 <canvas> using particles

How to set React-Particles-Js to background using React?

Adding sprite in PIXI Particles Container using Vue.js

Web Audio with Three.js position 3D sounds

p5js mousePressed on a 2D grid