The following code throws an error in the line with reduce:
let vectors
function setup() {
createCanvas(400,400);
vectors = [];
vectors.push(createVector(100,100));
vectors.push(createVector(100,0));
vectors.push(createVector(0,100));
let s = vectors.reduce(p5.Vector.add, createVector(0,0));//error!
console.log(s.x,s.y);
}
function draw() {
vectors.forEach(v => line(0,0,v.x,v.y));
}
The error seems to occur in the p5.js code for the vector add method. The error message begins:
p5.js says: There's an error as "set" could not be called as a function (on line 91666 in p5.js [https://cdn.jsdelivr.net/npm/p5@vv1.4.0/lib/p5.js:91666:22]).
What seems most baffling about this error is that the code works without error if the offending line is replaced by:
let s = vectors.reduce((u,v) => p5.Vector.add(u,v), createVector(0,0));
This is sufficient for my intended application, but I would like to understand the error rather than just find a kludgy way to sidestep it. My question is thus -- why does the attempt to use reduce directly with p5.Vector.add fail but wrapping it in an anonymous function succeed?
It looks like p5.Vector.Add can take in a third optional argument:
p5.Vector.add(v1, v2, [target])
In that example it defines target as such:
p5.Vector: the vector to receive the result (Optional)
In your original version you are passing arguments from the reduce function into p5.Vector.Add. However, the third argument for reduce is currentIndex, an integer.