Scale objects in relation to browser window

TypeCoding

Hey guys,

I am working in P5.js to create an interactive website where, when the mouse is moved along the x-axis, a box responsively scales with it. This works on my screen as I have created it to fit my browser on fullscreen. However, depending on different screen sizes, the boxes don't scale correctly. When the browser window is small, I want the box to retain the same scale relative to the window. I am thinking I need to work in percentages instead of pixels but I'm wondering is there a better way to go about this?

Thanks for any help, and I can attach the code if need be (I don't have access to it right at this moment).

Thanks!

KevinWorkman

I am thinking I need to work in percentages instead of pixels

That's exactly right. Use the width and height variables and use percentages for all your positions and sizes.

For example, width * .5, height * .5 would give you the center of the screen.

TypeCoding

Hi Kevin Workman,

Thanks for your response. I've played around with the variables and percentages but it's not working out how I want it too.

Basically I want the boxes to scale the exact same way on every single screen size, relative to the screen size itself. Is this as easy as I"m imagining it to be?

Attaching the original Processing code (not P5) so you can have a look. I'm using video files. The variables and numbers seem a bit crazy for the scaling but that's just me experimenting — one goes small when one goes big, etc.

import processing.video.*;

Movie movie1;
Movie movie2;

void setup() {
  noCursor();
  //size(1000, 500, P3D);
  fullScreen(P3D);
  background(18, 24, 33);
  smooth();
  //frameRate(25);


  // Load and play the video in a loop
  movie1 = new Movie(this, "fire_after.mov");
  movie2 = new Movie(this, "fire_before.mov");
  movie1.loop();
  movie2.loop();

}

void movieEvent(Movie m) {
  m.read();
}

void draw() {
  background(18, 24, 33);


 //this video is on the right
 imageMode(CENTER);
 image(movie1, width/3*2, height/2, 930+mouseX*-.47, 930+mouseX*-.47);



  //this video is on the left
  imageMode(CENTER);
  image(movie2, width/3, height/2, 100+mouseX/2, 100+mouseX/2);

}

KevinWorkman

I'm not totally sure what you're asking because I don't know what this code does. I can't run it because I don't have any movie files. It would be easier if you posted an example that just used colored rectangles.

But anyway, the only thing that pops out to me is that you still have numbers like 930 and 100 in there. If you want your sizes to be based on the width and height of the window, you'll need those numbers to be relative to width and height as well.

TypeCoding

Hey Kevin,

Yeah sorry about that, here's the code below with just boxes. On my screen it looks perfect, that's why I have such weird numbers because it was just trial and error to get it to work on just my screen size:

I have played around with width and height but it isn't working how I am expecting it too. Do you think there's some code I need to include that factors in the shortest/furthest distance the edge of the box is to the edge of the window, etc., and makes sure that is a constant no matter the window size? I hope this is making sense.

  void setup() {
  noCursor();
  //size(1000, 500, P3D);
  fullScreen(P3D);
  background(18, 24, 33);
  smooth();

}

 void draw() {
 background(18, 24, 33);

 rectMode(CENTER);
 rect(width/3, height/2, 100+mouseX/2, 100+mouseX/2);

 rectMode(CENTER);
 rect(width/3*2, height/2, 930+mouseX*-.47, 930+mouseX*-.47);

}

KevinWorkman

What is it doing that's different from what you expected?

kfrajer

float minw,maxw;

void setup() {

  fullScreen(P3D);
  background(18, 24, 33);
  rectMode(CENTER);

  minw=width*0.1;  //min(widt,height)*0.1;
  maxw=width*0.5;  //min(widt,height)*0.5;
}

void draw() {
  background(18, 24, 33);

  float w1=map(mouseX,0,width,minw,maxw);
  float w2=map(mouseX,0,width,maxw,minw);


  rect(width/3, height/2, w1,w1);
  rect(width/3*2, height/2, w2, w2);
}

Kf

TypeCoding

KevinWorkman — whenever I used width and height in place of numbers I couldn't wrap my head around how extreme it was scaling the boxes.

kfrajer — this is exactly what I was looking for! I never knew about map(), thank you so much.

TypeCoding

Hey kfrajer, I'm actually putting this code into P5.js, and errors come up on the lines with float — I replaced it with var but I'm not sure what I'm doing wrong? Any insight would be fantastic.

Thanks.

kfrajer

What does the error say?

Watch for integer divisions as it might do something that you don't want: rounding your operations. Instead perform casting or make it clear you are working with floats:

rect(width/3.0, height/2.0, w1,w1);

Notice the float nature of 3 and 2 above compared to my prev example.

Kf

Chrisir

remember to avoid using image with 5 parameters; better stick with 3 if you can. For images use resize() instead.

When you know the video beforehand, change its size to your need and store it (eg files vid640, vid1024...). Have multiple versions for typical screen sizes. I know when you want to be totally flexible towards screen sizes, that's not possible. But it slows things down.

Remark

instead of this

rect(width/3*2, height/2, 930+mouseX*-.47, 930+mouseX*-.47);

I'd define floats width1000th=width/1000.0; and height1000th=height/1000.0; in setup() and then just say

600*width1000th, 500*height1000th, .......

TypeCoding

Kfrajer, in p5 where I have

float w1=map(mouseX,0,width,minw,maxw);
float w2=map(mouseX,0,width,maxw,minw);

It is giving the error: "missing ';' before statement" — even though there is no semicolon missing from the previous line or anything.

Maybe I'm wrong but I thought that when using p5 you use var instead of float?

EDIT: Nevermind guys, there was another part of the code that was wrong and I was overlooking it. Sorry! Thanks again for all your help.