P5.js: The Reflect function to calculate the newly reflected position of a particle

[shubymao]

Nature of issue?

• [x] New feature request
• [ ] Found a bug
• [ ] Existing feature enhancement

Most appropriate sub-area of p5.js?

• [x] Math
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

New feature details:

I think it might be beneficial to have a reflect function inside vector to simulate the reflection off the wall when the newly updated location is out of bounds. An example is demonstrated below

//Normally we would do this.
particle.position.add(this.velocity);
particle.position.set(
  particle.position.x<0? abs(particle.position.x): particle.position.x>width?2*width-particle.position.x: particle.position.x,
  particle.position.y<0? abs(particle.position.y): particle.position.y>height?2*height-particle.position.x: particle.position.y
);

If we implement a new internal function that do this, it will be easier to manipulate multiple particles. The new function can be used like this.

particle.add(this.velocity).reflect(width,height);

The function would look something like this.

p5.Vector.prototype.reflect = function reflect(w, h) {
 if (h === undefined) {
    this.x = this.x < 0 ? 0 - this.x : this.x > w ? 2 * w - this.x : this.x;
    this.y = this.y < 0 ? 0 - this.y : this.y > w ? 2 * w - this.y : this.y;
  } else {
    this.x = this.x < 0 ? 0 - this.x : this.x > w ? 2 * w - this.x : this.x;
    this.y = this.y < 0 ? 0 - this.y : this.y > h ? 2 * h - this.y : this.y;
  }
};

It might also throw an exception when the user did not include any parameter. Hope I can get some feedback on the things to add. Thanks.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[aferriss]

This function sounds interesting but I'm worried that people would get confused with other implementations of reflect functions. For instance in GLSL there is a built in function called reflect() but it's purpose is different than this one.

Maybe there's a better name? p5.play has a function called bounce that does something similar to your function as well.

Also, I think you would need to extend this function into 3 dimensions since most (all?) of the other p5.Vector functions work in both 2d and 3d.

[shubymao]

@aferriss Thank you for your feedback. As for the name, what do you think of 'rebound'. Has this been used before? Here is the updated version based on your feedback.

p5.Vector.prototype.rebound = function rebound(w, h , d) {
 if(w===undefined && h === undefined && d===undefined){
 //no input case. Throw an exception? Suggestion welcomed
} else if (h === undefined && d===undefined) {
//cube case/square case
    this.x = this.x < 0 ? 0 - this.x : this.x > w ? 2 * w - this.x : this.x;
    this.y = this.y < 0 ? 0 - this.y : this.y > w ? 2 * w - this.y : this.y;
    this.z = this.z < 0 ? 0 - this.z : this.z > w ? 2 * w - this.z : this.z;
} else if (d===undefined) {
    //2D case
    this.x = this.x < 0 ? 0 - this.x : this.x > w ? 2 * w - this.x : this.x;
    this.y = this.y < 0 ? 0 - this.y : this.y > h ? 2 * h - this.y : this.y;
} else {
    //3D case
    this.x = this.x < 0 ? 0 - this.x : this.x > w ? 2 * w - this.x : this.x;
    this.y = this.y < 0 ? 0 - this.y : this.y > h ? 2 * h - this.y : this.y;
    this.z = this.z < 0 ? 0 - this.z : this.z > d ? 2 * d - this.z : this.z;
  }
};

[stalgiag]

Hi @shubymao thanks for the interest in contributing! This is definitely a compelling idea. I personally don't think that this feature should be added to the core library if p5.play, which is one of the most popular supplemental libraries, already has the feature. It seems like a nice way to get more concise code but it would only apply to users that are a little past beginner stage. I say this because in education contexts that I have encountered where people are learning about boundary bouncing animations, they typically aren't at the level that they are using vectors or chaining together functions. It is much more common for users at this point to be doing things like:

let speed = 1;
let x;
function draw() {
  x += speed;
  if(x > width || x < 0) {
    speed = speed * -1;
  }
}

So then this feature is primarily a bonus for slightly more advanced users who would theoretically not have trouble writing something like this themselves or adding the p5.play library to their project. Does that make sense?

Just my personal opinion though, thanks for starting the conversation :-)

[shubymao]

@stalgiag Thank you for your suggestion. I do understand that most user are fully capable to write similar function themselves. For me, I just feel that this could be a good quality of life addition. Also, I checked the bounce method and feel that it is a bit different from my function. However, I do respect your opinion and if another contributor feels the same way and think that this is redundant, I will close this issue.

[stalgiag]

Hi @shubymao you are right that the bounce method in play is quite a bit different. I think it is a good idea to leave the issue open for a while to see what the general interest is.

[lmccart]

I think this function is beyond the scope of the p5.js api as @stalgiag mentions, and already included in some form in p5.play, but it could also be a great starting point for an addon library of other similar helper functions. see the docs here for how to create an addon: https://github.com/processing/p5.js/blob/master/developer_docs/creating_libraries.md