Resizing p5.Graphics

p5.js Coding Questions
1

Hi all ,

I have a use case in which I draw few small dots ( graphics.ellipse(…) ) on p5.graphics ( for efficiency purpose ) . now on resizing the window I want to resize the graphics along with it’s content ( those small dots ) .

I tried to use resize funs on graphics but it doesn’t seems to b working .
Has any one ever faced such issue or any one can guide on what can be done to achieve this

thanks in advance

2

p5js.org/reference/#/p5.Element/size

1 Like
3

Hi GotoLoop

I tried this but still no luck .

function setup() {
createCanvas(maxWindowWidth, maxWindowHeight);
graphics = createGraphics(width, height);

}

function windowResized() {

// canvas is getting resized as expected
resizeCanvas(windowWidth, windowHeight);

// tried but no luck
graphics.size(windowWidth,windowHeight);

}

4

Shouldn’t you use width & height instead as you did for:
graphics = createGraphics(width, height);

graphics.size(width, height);

5

Tried that too , but still there is no effect on the graphics size .

6

Why don’t you post your whole code, including draw()?
Better yet, host it on: OpenProcessing.org/sketch/create

1 Like
7

not sure if you need anyhow:


function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // disable that for test
  print(" windowinfo width: " + width + " height: " + height + " windowWidth " + windowWidth + " windowHeight " + windowHeight);
}

ok, sorry you have already.

1 Like
8

It’s really confusing , I am getting two different type of results .

I tried online https://www.openprocessing.org/sketch/663800 and it worked as expected , content was getting resized with the browser resize .

and I copied the same code to my local setup (with same version as on online editor ) and got completely different result .
1. there is no resize effect .
2. on resizing i am getting one extra blue dot with white background.

refer the snapshot of these two behaviors

scale_test
scale_test.png1850×976 17.9 KB

am i missing anything ?

9

Found the issue finally ,

width and height variables contains the dimension of the canvas being created and they only update once you resize the canvas .

whereas windowWidth and windowHeight gets updated as soon as the size of the browser is changed .

therefore use windowWidth and windowHeight …

thanks GoToLoop for suggesting the size() method .

10

in p5.js

  image(pg,0,0,width,height);

works also
https://editor.p5js.org/kll/sketches/SkZFY5Qg4