Flipping an image in p5.js using scale

Question

I'm creating a program where it has animations walking in place to the left or to the right depending on whether I press the left or right arrow. The program works fine when I press the right arrow since the images were initially facing to the right, but when I try to flip the images using scale to have it walk in the opposite direction they disappear completely.

var Guy;
var Green;
var Robot;
let imgnum = 0;
let time = 0;


function preload() {
  Guy = loadImage("SpelunkyGuy.png")
  Green = loadImage("Green.png")
  Robot = loadImage("Robot.png")
  GuyStand = Guy.get(0,0,80,80)
}
function setup() {
  createCanvas(400, 400);
  x = int(random(0,5));
  y = int(random(0,5));
  x2 = int(random(0,5));
  y2 = int(random(0,5));
  x3 = int(random(0,5));
  y3 = int(random(0,5));
}

function draw() {
  background(220);
  if(keyCode === RIGHT_ARROW){
    image(Guy,x*80,y*80,80,80,imgnum*80,0,80,80);
    image(Green,x2*80,y2*80,80,80,imgnum*80,0,80,80);
    image(Robot,x3*80,y3*80,80,80,imgnum*80,0,80,80);
    if (time > 10){
      imgnum += 1;
      if(imgnum >= 9){
        imgnum = 0;
      }
      time = 0;
    }
    time++;
  }
  
  if(keyCode === LEFT_ARROW){
    scale(-1.0,1.0);
    image(Guy,x*80,y*80,80,80,imgnum*80,0,80,80);
    image(Green,x2*80,y2*80,80,80,imgnum*80,0,80,80);
    image(Robot,x3*80,y3*80,80,80,imgnum*80,0,80,80);
    if (time > 10){
      imgnum += 1;
      if(imgnum >= 9){
        imgnum = 0;
      }
      time = 0;
    }
    time++;
  }
  

}

Answer 1

You are having this problem because the scale() function, when used without an object qualifier, applies to the entire canvas and all the subsequent drawing operations.

This means that after you apply scale(-1,1), you are not just reversing the Width of your image, but also the position where it is drawn. So you are now drawing it at -1 * (x*80), or way to the left off screen, which is why you don't see it.

What you want to do here is instead of drawing the image AT some point (x,y), you apply a translate(x,y) operation and then apply a scale(-1,1) and draw your image at (0,0).

PS: Translate() works like scale() in that it will affect all subsequent operations on the canvas. So if you want to draw and scale elements differently you want to put a push() step before the transformations, and a pop() step after you draw the object. So something like this:

push();
translate(x*80,y*80);
scale(-1,1);
image(Guy,0,0,80,80,imgnum*80,0,80,80);
pop();

Answer 2

I'm not seeing a negative scale documented in the p5.js scale reference page .

An alternative solution would be to have right and left facing images, then switch out the image depending on direction faced.

Example:

let lefty, righty;

function preload(){
  lefty = loadImage('left-facing.jpg');
  right = loadImage('right-facing.jpg')
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  if(keyCode === LEFT_ARROW){
    image(lefty,0,0,width,height)
  }
  if(keyCode === RIGHT_ARROW){
    image(righty,0,0,width,height)
  }
}