Si quiere decir fundido cruzado entre imágenes (por ejemplo, desaparecer en una imagen mientras que la otra se desvanece), puede usar map() en la posiciónscrollX , por ejemplo, para controlar la transparencia de una imagen y calcular la transparencia de la otra imagen como el valor inverso.

Puede calcular el inverso restando de su valor máximo.

Puede usar tint() para controlar la transparencia en p5.js

Desglosemos esto:

1. map scrollY desde su rango (0, windowHeight) a un valor que puede usar para la transparencia, digamos (0, 255) : let fadeIn = map(scrollX, 0, windowWidth, 0, 255) (basado en la relación de aspecto de su boceto, asumo que se desplaza en el eje X, pero puede aplicar la misma lógica con scrollY )
2. calcule el inverso (valor de desvanecimiento): let fadeOut = 255 - fadeIn
3. Use tint() para realizar un fundido cruzado: puede ver un ejemplo de fundido simple aquí .

Aquí hay un ejemplo básico de fundido cruzado basado en su código:

 var f var w var feng; var wei; function preload(){ feng = loadImage("https://images.pexels.com/photos/20790/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=848"); wei = loadImage("https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=848"); } function setup() { imageMode(CENTER); createCanvas(848, 480); f = 255 w = 0 } function draw() { // compute fadeIn(f) by mapping scrollX f = map(scrollX, 0, windowWidth, 0, 255); // compute fadeOut(w) as inverse w = 255 - f; background(0); // use fade in / out values to tint tint(255, f); image(feng, 240, 240); tint(255, w); image(wei, 668, 240) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

Recuerde usar preload() para cargar activos (imágenes/sonidos/fuentes/etc.) en p5.js