implementation of p5.Vector slerp function

[inaridarkfox4231]

Implements vector slerp function.
Performs spherical linear interpolation with the vector of arguments and returns a new vector. It does not change the original vector.
The lerp is designed to be changed, but unlike the lerp, I felt that it was common to use the same vector, so I decided to do so.

Resolves #6220

Example:
3D slerp test

2023-06-19.00-46-39.mp4

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[inaridarkfox4231]

I'm checking to see if it returns a new vector, but I don't understand why I'm getting an error...

[inaridarkfox4231]

I saw a similar unit test with cross(), but this calculation takes the cross product with (0,0,0), so the result is (0,0,0). So, I thought that the check was done not by object equality, but by component equality.

    var res;
    setup(function() {
      v.x = 1;
      v.y = 1;
      v.z = 1;
    });
    test('should return a new product', function() {
      expect(v.cross(new p5.Vector())).to.not.eql(v);
    });

In fact, even if they are the same object, they are different vectors if they have different components. In my test, I check with a vector of the same component, so it seems that even if it is created with copy(), it will be regarded as the same vector. I don't know why...
For the time being, I will put this unit test on hold.

[inaridarkfox4231]

Since cross() returns the result with this.copy(), it will be different from the original object, so I thought this test was checking it, but I may be misunderstanding.

[inaridarkfox4231]

I thought about various things, but I still think that the specification that changes the original vector is better, so I would like to rewrite it that way.

[inaridarkfox4231]

With this specification, for example, if you want to change v, just write v.slerp(w, amt), and if you don't want to change it, just write p5.Vector.slerp(v, w, amt), so it can more accommodate flexibly.

[inaridarkfox4231]

benchmark test:
12th Gen Intel(R) Core(TM) i7-1260P 2.10 GHz
Windows 11 Home
Average fps for 60 frames with 100000 runs per frame was roughly 59.
It was roughly 58fps at 120000 times.

[davepagurek]

Great work on this! My only comments are about making the documentation a tad clearer.

[davepagurek]

It might be a little clearer here if we do const v = createVector(mouseX-50, mouseY-50).setMag(50) without the extra trig?

[inaridarkfox4231]

It's true that shorter is better, so I'll fix it!

[davepagurek]

For this example, I wonder if we can make what's happening a bit clearer:

• Since the spheres end in a configuration that looks identical to the start, it might accidentally look like the vectors keep moving, maybe coloring them differently and/or making them oscillate back and forth instead of jumping back to the start would make it easier to see what's happening?
• Although it's less lines of code, subtracting the previous point from the next might add a bit of confusion. Maybe we could push/pop even though it's longer? or use something like line() where we can use coordiantes without translate()?

As a quick test, do you think something like this is clearer? https://editor.p5js.org/davepagurek/sketches/NBexafWPU

function draw(){
  background(255);

  const t = map(sin(frameCount/30), -1, 1, 0, 1);
  // v1, v2, v3 is not changed by slerp function.
  // because this function is static version.
  const v4 = p5.Vector.slerp(v1, v2, t);
  const v5 = p5.Vector.slerp(v2, v3, t);
  const v6 = p5.Vector.slerp(v3, v1, t);
  strokeWeight(10)
  strokeCap(SQUARE)
  stroke('red')
  line(0, 0, 0, v4.x, v4.y, v4.z);
  stroke('green')
  line(0, 0, 0, v5.x, v5.y, v5.z);
  stroke('blue')
  line(0, 0, 0, v6.x, v6.y, v6.z);
}

[inaridarkfox4231]

I thought that example might be a little confusing for me too. It's true that "cylinders" or "lines" are easier to understand, so I'm going to rewrite them. I would like to adopt the "lines" because it is easier for the code to understand.

[inaridarkfox4231]

How about this...?
slerp sample for 3D

function setup(){
  createCanvas(100, 100, WEBGL);
}

function draw(){
  background(255);
  
  const vx = createVector(30, 0, 0);
  const vy = createVector(0, 30, 0);
  const vz = createVector(0, 0, 30);

  const t = map(sin(frameCount * TAU / 120), -1, 1, 0, 1);
  // v1, v2, v3 is not changed by slerp function.
  // because this function is static version.
  const vSlerpXY = p5.Vector.slerp(vx, vy, t);
  const vSlerpYZ = p5.Vector.slerp(vy, vz, t);
  const vSlerpZX = p5.Vector.slerp(vz, vx, t);
  strokeWeight(6);
  strokeCap(SQUARE);
  stroke("red");
  line(0, 0, 0, vSlerpXY.x, vSlerpXY.y, vSlerpXY.z);
  stroke("green");
  line(0, 0, 0, vSlerpYZ.x, vSlerpYZ.y, vSlerpYZ.z);
  stroke("blue");
  line(0, 0, 0, vSlerpZX.x, vSlerpZX.y, vSlerpZX.z);
}

Renamed variables to make it clearer which direction the axis is pointing.

[davepagurek]

looks great!

[davepagurek]

By only mentioning 2D vectors in the description, I worry people might incorrectly assume it's only for 2D. Maybe we can say "This works in both 3D and 2D" before this sentence?

[inaridarkfox4231]

Spherical linear interpolation is usually used in 3D, so I didn't mention it, but I would like to describe it if necessary (I wanted to emphasize that the result is 2D even if each 2D vectors are pointered directions oppositely).

[inaridarkfox4231]

Thank you for your review! I will try to respond.

[davepagurek]

Thanks for making these changes!

[inaridarkfox4231]

Thanks for review and merge! ('ω') I'm looking forward to seeing people using this function...