Soy un usuario muy temprano de la codificación de Italia. Se me ocurrió una idea para promocionar el logotipo de una empresa en su sitio web y casi alcancé la meta, así que comparto este problema.
La idea es obtener una especie de efecto de máscara de recorte cuando el mouse/cursor se mueve sobre la imagen que he creado hasta ahora, un código que hace el trabajo con una elipse fija.
Cuando configuro los parámetros de posición de la elipse como mouseX y mouseY, el efecto no funciona si no es solo un pequeño problema técnico al principio. ¿Cómo puedo hacer que funcione según lo previsto?
Aquí puedes encontrar el enlace de lo que tengo ahora: https://editor.p5js.org/francesco.ficini.designer/full/FLBuhggW-
Aquí el código:
let img; let imgbg2; let maskImage; function preload() { img = loadImage("NeroP.jpg"); imgbg2 = loadImage("RossoP.jpg"); } function setup() { createCanvas(400, 225); img.mask(img); } function draw() { background(imgbg2, 0, 0); //Immages image(imgbg2, 0, 0); image(img,0,0); // Ellipse Mask maskImage = createGraphics(400, 225); maskImage.ellipse(200, 100, 50, 50); imgbg2.mask(maskImage); image(imgbg2, 0, 0); }Lo que pasa con la función p5.Image.mask es que modifica la imagen que se está enmascarando. Lo que significa que cualquier píxel que la máscara elimine desaparecerá para siempre. Entonces, si desea cambiar dinámicamente la máscara, deberá hacer una copia del original y volver a aplicar la máscara modificada cada vez que cambie.
Además, querrá evitar crear imágenes y objetos gráficos en su función draw() porque esto puede resultar en una asignación de memoria excesiva. En su lugar, cree un conjunto único de gráficos/imágenes y reutilícelos.
let img; let imgbg2; let maskImage; let maskResult; function preload() { img = loadImage("https://www.paulwheeler.us/files/NeroP.jpeg"); imgbg2 = loadImage("https://www.paulwheeler.us/files/RossoP.jpeg"); } function setup() { createCanvas(400, 225); // Create graphics and image buffers in setup maskImage = createGraphics(imgbg2.width, imgbg2.height); maskResult = createImage(imgbg2.width, imgbg2.height); } function mouseMoved() { if (maskResult) { maskImage.clear(); // Ellipse maskImage.ellipse(mouseX, mouseY, 50, 50); // Copy the original imgbg2 to the maskResult image maskResult.copy( imgbg2, 0, 0, imgbg2.width, imgbg2.height, 0, 0, imgbg2.width, imgbg2.height ); // apply the mask to maskResult maskResult.mask(maskImage); } } function draw() { //Immagini image(img, 0, 0); // draw the masked version of the image image(maskResult, 0, 0); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>