I have a challenge at hand where I am looking to create a 2D flow field in three.js based on a working example I found in p5.js. The original source code for reference is as follows:
var inc = 0.1; //Increment of noise
var yoff = 0;
var scl = var; //Scale of noise field
var cols = rows = 10;
for(var y = 0; y < rows; y++)
{
var xoff = 0;
for(var x = 0; x < cols; x++)
{
var index = x + y * cols;
var angle = noise(xoff, yoff) * TWO_PI; //Create angle with Perlin noise
var v = p5.Vector.fromAngle( angle ); //Create new vector from angle
v.setMag( 0.1 ); //set magnitude of vector
flowfield[index] = v;
xoff += inc;
stroke(0, 50);
strokeWeight(1);
push();
translate(x * scl, y * scl);
rotate(v.heading());
line(0, 0, scl, 0);
pop();
}
yoff += inc;
}
My goal now is to replicate the functionality of p5.Vector.fromAngle() function in three.js.
From what I gather, I need to create a vector and then perform rotation around the z-axis using .applyQuaternion(quaternion). However, my struggle lies in rotating the vector around the center without changing its heading.
var vector = new THREE.Vector3( 100, 100, 0 );
var angle = Math.random() * Math.PI * 2;
var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.PI / 2 );
vector.applyQuaternion( quaternion );