createGraphic bigger than canvas

aprenent

Hello,

Although I'm a bit new in P5, I've been trying different ways of scaling a graphic on canvas as I did with image and it seems it does not work.

I mean, my idea is to create a graphic bigger than canvas, but I want it to be seen entirely on it.

When I do so, the graphic can not be seen entirely.

For example, and following (more or less) the example as it can be found on reference, I want to create a graphic 1000x1000 pixels, but I want to it to be shown on a canvas 100x100, so I did this:

var pg;

function setup() {
  createCanvas(100, 100);
  pg = createGraphics(1000, 1000);
}

function draw() {
  background(200);
  pg.background(100);
  pg.stroke(255);
  pg.strokeWeight(1);
  pg.line(10,900,100,900); // for example, I draw a line

  image(pg, 0, 0, 50, 50); // For example, I want to see it on position 0,0 but in 50 width and 50 heigth size. 
  //If "pg" it's not an image but a graphic it seems like it's not entirely shown, so the line that i draw won't be seen
}

So as I can see, the graphic it looks like it's been cut.

I've also done some test with pixelDensity(), but it seems it does not work either.

Is there any way to create a graphic bigger than the canvas but to show it scaled on the canvas? After I'll need it to be on its entirely size.

Thank you very much!

kfrajer

Please format your code. Edit your post (gear on top right side of any of your posts), select your code and hit ctrl+o. Leave an empty line above and below your block of code.

****EDIT: Also check these prev discussions: https://forum.processing.org/two/search?Search=panning

Kf

aprenent

Hello,

So sorry for the code without format. I just edited it.

As you suggested, I read the prev discussions, but I did not find what I was looking for.

Maybe I should do it in another way?

I mean, I want to create a graphic and I want it to be shown in the canvas (the canvas will be adapted to the screen' size.

Thank you

GoToLoop

pg.line(10, 890, 100, 890);

aprenent

Sorry, but I can't see any difference.

I can't see the line drawn (so it means i can't see the entire graphic) if the canvas is smaller than the graphic.

blindfish

image() takes additional optional parameters that should achieve what you want (assuming I've properly understood the question):

image(img,x,y,width,height,sx,sy,[sWidth],[sHeight])

..So try: image(pg, 0, 0, 50, 50, 0, 0, 1000, 1000)

Just read the docs for an explanation ;)

aprenent

Sorry, I was out and did not see your answer!

It seems it does not work as I expected it to do...

Thank you anyway!

kfrajer

For your first question, and as blindfish commented: https://p5js.org/reference/#/p5/createGraphics

Is there any way to create a graphic bigger than the canvas but to show it scaled on the canvas?

Check this:

var pg;

function setup() {
  createCanvas(200,200);
  pg = createGraphics(width*2,height*10);  //pg larger than canvas !!!
  pg.background(100,20,50);
  pg.stroke(0);
  pg.strokeWeight(10);
  pg.line(10,pg.height*0.8,pg.width,pg.height*0.6); // for example, I draw a line based on pg's dimensions
}

function draw() {
  background(100);
  image(pg, 0, 0, width/2, height);   //Constrain pg into half of current canvas area
}

Kf

aprenent

yes! you are right! thank you so much!

Rammschnev

I don't see what the solution did differently than the original code? Besides move some of the functions from draw() to setup()?

aprenent

actually, if the graphic is really big it does not work... i mean, if we create a graphic 5000x5000 and the canvas is 500 x 500, we can't see the entire image...