How to sort an array of vectors (P5js)

laurage

Hello,

I'm trying to sort an array of vectors v(x,y) based on their index x. I have seen implementations of this in processing (https://forum.processing.org/two/discussion/12141/how-to-sort-an-array-with-index-from-another-array) or javascript (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). But I'm using P5 and I'm not quite sure how to do this with it. (I know it's the processing forum, but p5 website sent me here).

Is there a way I can do it directly with P5? Or can I integrate pure javascript language in P5 (at the moment I don't seem to be able to use the syntax shown in the javascript reference)?

Cheers, L.

GoToLoop

http://p5ide.HerokuApp.com/editor#?sketch=5751b1d4591f900300aaf9de
https://GitHub.com/therewasaguy/p5js-webIDE/issues/120

<script src=http://p5js.org/js/p5.min.js></script>

<script>

/**
 * Sort Vectors (v1.1)
 * GoToLoop (2016-May-30)
 *
 * https://forum.Processing.org/two/discussion/16876/
 * how-to-sort-an-array-of-vectors-p5js#Item_1
 *
 * http://p5ide.HerokuApp.com/editor
 * #?sketch=5751b1d4591f900300aaf9de
 */

const VECS = 5,
      RANGE = 10,
      vecs = Array(VECS);

function setup() {
  // Workaround for http://p5ide.HerokuApp.com/editor:
  window.p5 || (window.p5 = _renderer._pInst.constructor);

  for (let i = 0; i < VECS; vecs[i++] = getIntRandomVec(RANGE));

  for (let i in vecs)  print(`${i} -> ${vecs[i]}`);
  print('\n');

  vecs.sort(compareVectors);
  for (let i in vecs)  print(`${i} -> ${vecs[i]}`);

  remove();
}

function compareVectors(a, b) {
  return a.x - b.x || a.y - b.y || a.z - b.z;
}

function getIntRandomVec(range) {
  const vec = p5.Vector.random3D().mult(range);
  return vec.set(round(vec.x), round(vec.y), round(vec.z));
}
</script>

---

0 -> p5.Vector Object : [10, 0, 0]
1 -> p5.Vector Object : [7, -6, -4]
2 -> p5.Vector Object : [7, -6, 2]
3 -> p5.Vector Object : [10, 0, -3]
4 -> p5.Vector Object : [5, -2, -9]


0 -> p5.Vector Object : [5, -2, -9]
1 -> p5.Vector Object : [7, -6, -4]
2 -> p5.Vector Object : [7, -6, 2]
3 -> p5.Vector Object : [10, 0, -3]
4 -> p5.Vector Object : [10, 0, 0]

blindfish

@laurage: the key to GoToLoop's answer is that the Array.sort method - which you already linked to - accepts a compare function which allows you to customise the sorting based on the target object. So the code that's most relevant is the function being passed to Array.sort:

function compareVectors(a, b) {
  return a.x - b.x || a.y - b.y || a.z - b.z;
}

Where a and b are the two values being compared from the array; and the return value is the comparison you want to sort on. By adding the OR conditions if a.x === b.x it will move on to the next axis...

Remember that underneath p5js is JavaScript so all the examples on MDN should work even with p5js built in objects...