CODEWITHSUNDEEP
javascriptprocessingp5.js
user4609276
user4609276

Reputation:

p5: resize canvas, with a fixed starting width/height?

I'm playing around with using p5 and tensorflow. I created a "face-filter", that tracks the nose and ears with tensorflow, and append images to those locations. For instance if my face-filter is "clown', the nose will have a red nose, and the ears will have clown ears.

Everything works, but now I'm trying trying to make the canvas responsive.

My canvas dimensions are createCanvas(1200, 768), and it's centered in css.

How can I make the canvas responsive based on browser width? I'm just not sure how to setup the code in the windowResized function.

function windowResized(){
  resizeCanvas(width?, height?);
}

Appreciate any input I could get.

Upvotes: 3

Views: 1501

Answers (1)

Rabbid76
Rabbid76

Reputation: 210946

p5.js provides the system variables windowWidth and windowHeight, width and height. While width and height store the current size of the canvas, windowWidth and windowHeight stores the width of the inner window.
Use windowWidth and windowHeight in windowResized() to resize the canvas:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

The variables can also be used, when the canvas is created:

function setup() {
  createCanvas(windowWidth, windowHeight);
}

Upvotes: 1

Related Questions