marksan
February 3, 2019, 11:49am
#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
marksan
February 3, 2019, 1:01pm
#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);
}
Shouldn’t you use width & height instead as you did for:
graphics = createGraphics(width, height);
graphics.size(width, height);
marksan
February 3, 2019, 1:10pm
#5
Tried that too , but still there is no effect on the graphics size .
Why don’t you post your whole code, including draw() ?
Better yet, host it on: OpenProcessing.org/sketch/create
1 Like
kll
February 3, 2019, 1:23pm
#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
marksan
February 3, 2019, 1:51pm
#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
am i missing anything ?
marksan
February 3, 2019, 2:33pm
#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 .
kll
February 3, 2019, 2:41pm
#10
in p5.js
image(pg,0,0,width,height);
works also
https://editor.p5js.org/kll/sketches/SkZFY5Qg4