Why does this undo logic not work in p5.js?

Question

My logic is simple, create a state array and a stateIndex, when the user interacts with the drawing, save the current state as an entry in the array and increment the stateIndex.

When the user presses "undo" (for this sketch press any key), decrement the stateIndex and draw to the page whatever value is in state for that index.

I've implemented it in this sketch https://editor.p5js.org/mr_anonymous/sketches/s0C1M7x1w but as you can see instead of storing the last state of the drawing it seems to only store the blank state.

Anyone know what's going wrong?

let previousState;

let stateIndex = 0;
let state = [];

function setup() {
  createCanvas(400, 400);
  background(255);
  // save state at beginning for blank canvas
  saveState();
}

function draw() {
  if (mouseIsPressed) {
    fill(0, 0, 0);
    circle(mouseX, mouseY, 20);
  }
}

function keyPressed(e) {
  undoToPreviousState();
}

function undoToPreviousState() {
  if (!state || !state.length || stateIndex === 0) {
    return;
  }

  stateIndex --;
  
  background(255);
  set(state[stateIndex], 0, 0);
}

function mousePressed() {

  saveState();
}

function saveState() {
  stateIndex ++;

  loadPixels();
  state.push({...get()})
}

Answer 1

You're using the set() function incorrectly. While get() can be used to get a p5.Image object, there is no overload of set() that takes one (a bit idiosyncratic, I know). Instead you'll want to use the image() function:

let previousState;

let stateIndex = 0;
let state = [];

function setup() {
  createCanvas(400, 400);
  background(200);
  // save state at beginning for blank canvas
  saveState();
}

function draw() {
  if (mouseIsPressed) {
    fill(0, 0, 0);
    circle(mouseX, mouseY, 20);
  }
}

function keyPressed(e) {
  undoToPreviousState();
}

function undoToPreviousState() {
  if (!state || !state.length || stateIndex === 0) {
    return;
  }

  stateIndex--;
  
  background(200);
  image(state[stateIndex], 0, 0);
}

function mousePressed() {
  saveState();
}

function saveState() {
  stateIndex++;

  loadPixels();
  state.push(get())
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>