How do you get different sized images on to canvas without distorting?

1rulesupersedes

var fet = [];
var current_image = 0;
var but;

function preload() { 
  for (var i =0; i< 6; i++) { 
    fet[i] = loadImage('fet_pictures/' + i + '.jpg');
  }
}

function setup() { 
  createCanvas(400, 400);
  imageMode(CORNER);
  but = createButton("change");
  but.mousePressed(change_image);
}

function draw() { 
  background(0); 
  image(fet[current_image], 0, 0, width, height);
}

function change_image(){
    current_image = current_image + 1;
     if(current_image > 5){
         current_image =0;

     }
}

kfrajer

Would resizing the images in preload do the trick? https://p5js.org/reference/#/p5.Image/resize Notice that to avoid having distortions, you need to set either width or height to 0(zero) so to conserve the aspect ratio.

Kf

GoToLoop

https://p5js.org/reference/#/p5.Image/resize