Espero que esta sea una pregunta muy directa, pero no he podido llegar al fondo. Estoy usando un envoltorio react-P5 para crear mi lienzo P5 en react ( https://github.com/slin12/react-p5-wrapper ) y quiero aplicar un filtro a una imagen, lo que normalmente haría en P5 como image.filter(GRAY) , sin embargo, no puedo hacer que funcione cuando P5 es una instancia en React.
Mi función de boceto se parece a
function sketch(p5) { let hair; p5.setup = () => { p5.createCanvas(600, 600); hair = p5.loadImage(~/localpath/hairURL); } p5.draw = () => { p5.image(hair, 0, 0); }; } Hubiera pensado que podría hacer algo tan fácil como p5.image(hair,0,0).filter(p5.GRAY); en mi función de dibujo, pero eso no funciona. Me da Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
Podría usar p5.filter(p5.GRAY); como una línea separada en draw(), que funciona, sin embargo, eso aplica el filtro sobre todo el lienzo, mientras que solo quiero aplicarlo sobre una de las imágenes. Tendré varias imágenes y quiero aplicar diferentes filtros a cada una.
p5.image(hair,0 ,0).p5.filter(p5.GRAY) tampoco funciona (pensé que lo intentaría aunque no tuviera mucho sentido)
¡Cualquier ayuda es apreciada! Gracias
Creo que confundiste la función p5.image() , que dibuja una imagen y devuelve undefined, y la clase p5.Image , que es una imagen y devuelve un objeto con métodos como p5.Image.filter() . p5.Image.filter también es un setter de modo de mutación que devuelve indefinido, por lo que no es algo que desee encadenar en ninguna parte.
Además, el prefijo p5 en el modo de instancia solo se aplica a las funciones p5 globales, no a los métodos llamados en objetos locales como vectores e imágenes que no forman parte del espacio de nombres de la API p5 global.
Aquí está el uso correcto:
new p5(p => { let img1; let img2; p.preload = () => { img1 = p.loadImage("http://placekitten.com/200/200"); img2 = p.loadImage("http://placekitten.com/200/202"); }; p.setup = () => { p.createCanvas(700, 410); p.background(0); img1.filter(p.GRAY); p.image(img1, 0, 0); // should be unfiltered p.image(img2, 200, 0); p.noLoop(); }; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>No creo que lo que está tratando de hacer sea posible con su enfoque actual.
En la documentación de p5.filter(...) establece la función "Aplica un filtro al lienzo" y no hay indicación de que pueda restringirse a una imagen o área del lienzo.
FYI, p5.image(...) no devuelve nada , por lo que llamar a cualquier función en el resultado como p5.image(...).filter(...) siempre obtendrá el error indefinido que está recibiendo.
En realidad, la clase p5.Image tiene su propia función de filter . Así que si llamas
hair = loadImage(...) //then hair.filter(...) Y luego llama a image(hair, 0, 0) , eso debería funcionar.