Блог

Я играю с использованием p5 и tensorflow. Я создал «фильтр лица», который отслеживает нос и уши с помощью tensorflow и добавляет изображения в эти местоположения. Например, если мой фильтр для лица «клоун», у носа будет красный нос, а у ушей будут уши клоуна.

Все работает, но теперь я пытаюсь сделать холст отзывчивым.

Мои размеры холста createCanvas(1200, 768) , и они расположены по центру в css.

Как я могу сделать холст отзывчивым на основе ширины браузера? Я просто не уверен, как настроить код в windowResized функции.

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

Ценю любой вклад, который я мог бы получить.

p5.js предоставляет системные переменные windowWidth и windowHeight , width и height . В то время как width и height сохраняют текущий размер холста, windowWidth и windowHeight сохраняют ширину внутреннего окна.
Используйте windowWidth и windowHeight в windowResized() для изменения размера холста:

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

Переменные также могут использоваться при создании холста:

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