Draggable Snap - Getting endValue between 0 - 360

[Joe Hakooz]

This is just a math question that I'm struggling to answer...

 

I'm using the Draggable with type: 'rotation'. And I want it to "snap" to degrees I'm providing via an array. 

The example snap code looks like this:

var rotationSnap = 90;
snap:function(endValue) { 
    return Math.round(endValue / rotationSnap) * rotationSnap;
}

Since my "rotationSnap" variable could be any number between 0-360, how can I calculate the return value to always be between 0 and 360?,Specifically when the endValue is negative or higher than 360.

 

Example Issue:

Let's say my array contains the values 0, 90, 180, and 270. The problem is that a negative endValue always returns 0 from my array. And an endValue higher than 360 always returns 270 from my array. 

 

Extra Info: I have a function that compares endValue to my array and returns the closest number. 

 

Thanks for any info and please let me know if I need to clarify.

[jamiejefferson]

So you want it to snap to 90 degree increments, and also constrained to 0 <= x < 360 ? There's plenty of ways to calculate that, here's one way (could be optimised, but its only going to loop once or twice anyway, so I'll skip it for now; please forgive me):

var rotationSnap = 90;
var snap = function(endValue) {
  endValue = Math.round(endValue / rotationSnap) * rotationSnap;
  while (endValue >= 360) endValue -= 360;
  while (endValue < 0) endValue += 360;
  return endValue;
};

[Joe Hakooz]

Thank you for the fast response!

My situation is a little different and I realize now I could ask it a much simpler way, and should probably do so in a math forum...

 

I guess what I'm asking is...

For a "rotation" draggable, the "snap" function passes the variable "endValue" which can be any number negative or positive.

How do I take "endValue" and convert it to a number between 0 and 360?

 

Thanks again for your help!

 

PS... I believe your solution would only work if the negative or positive endValue was between -360 and 720. endValue could be outside of those bounds. And I'm pretty sure there is some strange built-in math function that is designed for this very situation. I really should have payed more attention in math class!

[jamiejefferson]

Umm, what I posted does exactly that... it treated 360 as 0, but you can fix that by deleting one character.

// convert endValue to an increment of rotationSnap in the range
// 0 <= x < 360
var snap = function(endValue) {

  // snap endValue to an increment of rotationSnap i.e. a multiple of 90
  endValue = Math.round(endValue / rotationSnap) * rotationSnap;
  // at this point endValue could still be greater than 360 or
  // less than 0

  // if endValue is >= 360, reduce it until it's within 0 <= x < 360
  // to use the range 0 <= x <= 360, remove the equal sign from
  // this while comparison
  while (endValue >= 360) endValue -= 360;

  // if endValue is < 0, increase it until it's within 0 <= x < 360
  while (endValue < 0) endValue += 360;

  // return the adjusted endValue.
  // min value will be 0, and max value will be 359.999999999....
  return endValue;

};

Edit: looks like you added a PS in there. It will definitely work for ANY value, since it uses while loops, not just a single if e.g. the line

while (endValue >= 360) endValue -= 360;

won't stop reducing endValue until it is less than 360. I guarantee it

[GreenSock]

You could also just use the modulus operator which is faster than doing a loop:

var rotationSnap = 90;
var snap = function(endValue) {
  endValue = (Math.round(endValue / rotationSnap) * rotationSnap) % 360;
  return (endValue < 0) ? endValue + 360 : endValue;
};

[jamiejefferson]

Of course it is. I knew I was forgetting something that smart people know...

[Joe Hakooz]

Thanks Jamie. You are smarter than me... I totally missed the fact that the loop would catch any value. 

 

And thank you Jack for dropping the magic modulus operator on me!