Feature: show pointer indicator and swap indicators about algorithm-visualizer HOT 13 OPEN

const tracer = new Array2DTracer('array');
const array = new Array(4).fill(0).map(() => new Array(4).fill(0));
tracer.set(array, (i, j) => array[i][j]);
Tracer.delay();

let i = 0;
let j = 3;
const varI = new Variable('i', () => i);
const varJ = new Variable('j', () => j);
tracer.watch(varI, varJ);

for (let t = 0; t < 3; t++) {
  array[++i][--j] = t;
  Tracer.delay();
}

tracer.unwatch(varI, varJ);
varI.destroy();
varJ.destroy();
Tracer.delay();

const { Array2DTracer } = require("algorithm-visualizer")

const heights = [0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1];

// visualize the elevation

const rows = Math.max(...heights);
const cols = heights.length;

const elevation = Array.from({ length: rows }, () =>
  Array.from({ length: cols }, () => " ")
);

const elevationTracer = new Array2DTracer("Elevation").set(elevation);

// initialize the elevations using patching, i.e. mark them as red and give them blank values
let temp = heights.slice();
let r = rows - 1;
while (r >= 0) {
  for (let i = 0; i < cols; i++) {
    const val = temp[i] === 0 ? 0 : 1;
    if (val > 0) {
      elevationTracer.patch(r, i, " ");
    }
  }
  temp = temp.map(n => (n === 0 ? 0 : n - 1));
  r -= 1;
}

function TrappingRainWater() {
  let left = 0;
  let leftMax = 0;
  let right = heights.length - 1;
  let rightMax = 0;
  let result = 0;

  while (left <= right) {
    if (leftMax < rightMax) {

      leftMax = Math.max(leftMax, heights[left]);
      result += leftMax - heights[left];

      if (leftMax - heights[left] > 0) {
        for (let i = 0; i < leftMax - heights[left]; i++) {
          // mark the solution in blue via selection
          elevationTracer.select(rows - 1 - heights[left] - i, left);
        }
      }

      left++;
    } else {

      rightMax = Math.max(rightMax, heights[right]);

      result += rightMax - heights[right];

      if (rightMax - heights[right] > 0) {
        for (let i = 0; i < rightMax - heights[right]; i++) {
          // mark the solution in blue via selection
          elevationTracer.select(rows - 1 - heights[right] - i, right);
        }
      }

      right--;
    }
  }

  return result;
}

TrappingRainWater();

tracer.select(0)
tracer.patch(0, sameValueThatWasAlreadyHere)

const { Array1DTracer, Array2DTracer, LogTracer } = require('algorithm-visualizer');

const heights = [0,1,0,2,1,0,1,3,2,1,2,1];

// visualize the elevation

const rows = Math.max(...heights);
const cols = heights.length;

const elevation = Array.from({ length: rows }, () =>
  Array.from({ length: cols }, () => ' ')
);

const elevationTracer = new Array2DTracer('Elevation').set(elevation);

let temp = heights.slice();
let r = rows - 1;
while (r >= 0) {
  for (let i = 0; i < cols; i++) {
    const val = temp[i] === 0 ? 0 : 1;
    if (val > 0) {
      elevationTracer.patch(r, i, ' ')
    }
  }
  temp = temp.map(n => n === 0 ? 0 : n - 1);
  r -= 1;
}


// create tracers for each variable. Instead We could do something on the UI level for this and mark the vars as "watched"
const leftTracer = new Array1DTracer('left');
const leftMaxTracer = new Array1DTracer('leftMax');
const rightTracer = new Array1DTracer('right');
const rightMaxTracer = new Array1DTracer('rightMax');
const resultTracer = new Array1DTracer('result');

const logTracer = new LogTracer();


function TrappingRainWater() {
  let left = 0;
  let leftMax = 0;
  let right = heights.length - 1;
  let rightMax = 0;
  let result = 0;

  logTracer.print('initializing data').delay();

  leftTracer.set([left]);
  leftMaxTracer.set([leftMax]);
  rightTracer.set([right]);
  rightMaxTracer.set([rightMax]);
  resultTracer.set([result]);

  logTracer.print('Comparing left < right').delay();
  leftTracer.select(0).delay();
  rightTracer.select(0).delay();

  while (left <= right) {
    leftTracer.deselect(0);
    rightTracer.deselect(0);

    logTracer.print('Comparing leftMax < rightMax').delay();
    leftMaxTracer.select(0).delay();
    rightMaxTracer.select(0).delay();
    leftMaxTracer.deselect(0);
    rightMaxTracer.deselect(0);

    if (leftMax < rightMax) {

      logTracer.print('Updating leftMax = max(leftMax, heights[left])').delay();
      leftMaxTracer.select(0).delay();

      leftMax = Math.max(leftMax, heights[left]);

      leftMaxTracer.patch(0, leftMax).delay();

      logTracer.print('Incrementing result by leftMax - heights[left]').delay();
      leftMaxTracer.select(0).delay();

      result += leftMax - heights[left];

      resultTracer.patch(0, result).delay();

      if ((leftMax - heights[left]) > 0) {
        for (let i = 0; i < leftMax - heights[left]; i++) {
          elevationTracer.select(rows - 1 - heights[left] - i, left);
        }
      }

      logTracer.print('Incrementing left').delay();
      leftTracer.patch(0, left + 1).delay();

      left ++;
    } else {
      logTracer.print('Updating rightMax = max(rightMax, heights[right])').delay();
      rightMaxTracer.select(0).delay();

      rightMax = Math.max(rightMax, heights[right]);

      rightMaxTracer.patch(0, rightMax).delay();

      logTracer.print('Incrementing result by rightMax - heights[left]').delay();
      rightMaxTracer.select(0).delay();

      result += rightMax - heights[right];

      resultTracer.patch(0, result).delay();

      if ((rightMax - heights[right]) > 0) {
        for (let i = 0; i < rightMax - heights[right]; i++) {
          elevationTracer.select(rows - 1 - heights[right] - i, right);
        }
      }

      logTracer.print('Decrementing right').delay();
      rightTracer.patch(0, right - 1).delay();

      right --;
    }

    logTracer.print('Comparing left < right').delay();
    leftTracer.select(0).delay();
    rightTracer.select(0).delay();
  }

  return result;
}

TrappingRainWater();