Optimising loadImage, fitting image ratio

p5.js Coding Questions
1

Hi guys, new here!

I am making this app where I load 2 images and 2 sliders, and each slider controls the level that the image blend with each other. Basically: image DAYLIGHT is a picture of a room only with light from the window, and picture NIGHTLIGHT is picture of the room taken at night, only with 1 lamp on. When I move the DL slider it becomes more dark (’‘the night’’), and when I move NL slider the lamp ‘‘turns on’’ (the image blends in gradually).

It seems to work OK, however it is super slow. Does anybody have an idea how to make it faster/performing better?

Second question - I want make images fit the screen with a saved ratio - Does anyone have an idea how to make it fit different sizes (depending if you open it on laptop or phone), while maintaining same ratio??

Looking forward to hearing from you!

let DAYLIGHT;
let NIGHTLIGHT;

function preload() {
  DAYLIGHT = loadImage('DL1.JPG');
  NIGHTLIGHT = loadImage('NL1.JPG');
}
function setup() {
  createCanvas(776, 500);
  DLslider = createSlider(0, 255, 100);
  DLslider.position(10, 400);
  DLslider.style('width', '200px');
  NLslider = createSlider(0, 255, 100);
  NLslider.position(10, 430);
  NLslider.style('width', '200px');

}

function draw() {
  background(0);
      blendMode(SCREEN);
const DLvalue = DLslider.value();
const NLvalue = NLslider.value();
  tint(255, 255-DLvalue);
  image(DAYLIGHT,0,0,776, 500);
  tint(255, NLvalue);
  image(NIGHTLIGHT,0,0,776, 500);
  blendMode(BLEND);

}
1 Like
2

Speed

image() with 5 parameters is much slower than with 3 parameters. It’s doing a resize every single time…

So stick with 3 parameters and use resize() command in setup() instead. Only once. Should speed things up.

Different displays question

With resize() you can also do a aspect ratio neutral resize by leaving one parameter 0, see reference.

So for your display question, use displayWidth and displayHeight and then do a resize() with one parameter 0.

(It’s tricky when the image is portrait or landscape (or the screen is) - then you have to use „if“ and act accordingly :wink: )

Chrisir

3 Likes
3

Amazing - it sped up the app dramatically - thanks man!!!

2 Likes