In place reverse viz

// Inplace reverse

const LINE_COUNT = 1000;
const LINE_WIDTH = (1 / LINE_COUNT) * 1;

const LEN_FRAMES = 5;
const GET_FRAMES = 1;
const SET_FRAMES = 1;

const RQUEUE_SIZE = 1;

const seedrandom = (function() {
var seed = 0x2F6E2B0; 
return function() {
  // Robert Jenkins’ 32 bit integer hash function
  seed = ((seed + 0x7ED55D16) + (seed << 12))  & 0xFFFFFFFF;
  seed = ((seed ^ 0xC761C23C) ^ (seed >>> 19)) & 0xFFFFFFFF;
  seed = ((seed + 0x165667B1) + (seed << 5))   & 0xFFFFFFFF;
  seed = ((seed + 0xD3A2646C) ^ (seed << 9))   & 0xFFFFFFFF;
  seed = ((seed + 0xFD7046C5) + (seed << 3))   & 0xFFFFFFFF;
  seed = ((seed ^ 0xB55A4F09) ^ (seed >>> 16)) & 0xFFFFFFFF;
  return (seed & 0xFFFFFFF) / 0x10000000;
};
}());

let fractionalWaitAmount = 0;
async function waitFrames(n) {
let amountToWait = n;

let amountToWaitFraction = amountToWait - Math.floor(amountToWait);
amountToWait = Math.floor(amountToWait);
fractionalWaitAmount += amountToWaitFraction;

let fractionalAdded = Math.floor(fractionalWaitAmount);
fractionalWaitAmount -= fractionalAdded;
amountToWait += fractionalAdded;

if (amountToWait < 1) return;
await on(frameNum + amountToWait);
}

let bg = sprite(rect(1, 1, "black")); // background
let lineSprites = null;

function updateFromDrawState(state, arr) {
if (state.type === "len") {
  bg.shape.colour = "#4d4d4d";
} else {
  bg.shape.colour = "black";
}
const FUPPER = 700;
const FLOWER = 100;
if (state.type === "get") {
  paud.playNote(((state.idx / LINE_COUNT) * (FUPPER - FLOWER)) + FLOWER, 0.001);
  rqueue.push([state.idx, "#e63217"]);
} else if (state.type === "set") {
  paud.playNote(((state.idx / LINE_COUNT) * (FUPPER - FLOWER)) + FLOWER, 0.001);
  rqueue.push([state.idx, "#00d111"]);
}
rqueue = rqueue.slice(-RQUEUE_SIZE);
lineSprites.forEach((line, idx) => {
  line.shape.colour = "white";
  line.y = 1 - (arr[idx] / 1000000);
});
rqueue.forEach(([idx, colour]) => {
  lineSprites[idx].shape.colour = colour;
});
}
class WrappedArray {
constructor(arr) {
  this._arr = arr;
  // don't update if we haven't initalized lineSprites yet
  if (lineSprites !== null) {
    updateFromDrawState({
      type: "none",
    }, this._arr);
  }
}
innerArr() {
  return this._arr;
}
drawState() {
  return this._drawState;
}
async len() {
  updateFromDrawState({
    type: "len",
  }, this._arr);
  await waitFrames(LEN_FRAMES);
  return this._arr.length;
}
async get(idx) {
  updateFromDrawState({
    type: "get",
    idx,
  }, this._arr);
  await waitFrames(GET_FRAMES);
  return this._arr[idx];
}
async set(idx, val) {
  this._arr[idx] = val;
  updateFromDrawState({
    type: "set",
    idx,
  }, this._arr);
  await waitFrames(SET_FRAMES);
}
async swap(idx1, idx2) {
  const val1 = await this.get(idx1);
  const val2 = await this.get(idx2);
  await this.set(idx1, val2);
  await this.set(idx2, val1);
  console.log("swap", idx1, idx2, val1, val2);
}
}

let lines;
let rqueue = [];
function resetLines() {
rqueue = [];
lines = new WrappedArray((new Array(LINE_COUNT)).fill().map((_val, idx) => Math.floor(1000000 * (idx + 1) / (LINE_COUNT + 1))));
if (lineSprites !== null) {
  lineSprites.forEach((line, idx) => {
    line.shape.colour = "white";
  });
}
}
resetLines();
lineSprites = lines.innerArr().map((val, idx) => {
return sprite(
  rect(LINE_WIDTH, 1, "white"),
  (1 / LINE_COUNT) * idx,
  1 - val,
);
});

async function xorSwap() {
var i = null;
var r = null;
var length = lines.innerArr().length;
for (i = 0; i < length / 2; i += 1)
{
  r = length - 1 - i;
  var left = await lines.get(i);
  var right = await lines.get(r);
  left ^= right;
  right ^= left;
  left ^= right;
  await lines.set(i, left);
  await lines.set(r, right);
}
return lines;
}

async function play() {
let curFrame = 0;
resetLines();
await waitFrames(5);
console.log(await xorSwap());
}
play();