Slower Faster

2D Image Flood Fill Effect

Let's dive into the details of how the flood fill effect is achieved in this code:

1. The core of the flood fill effect is in the animate function. This function is called repeatedly using requestAnimationFrame, creating a smooth animation.

2. The key part of the effect is how the image is drawn onto the canvas:

   context.drawImage(
     image,
     0,
     row,
     image.width,
     1,
     0,
     0,
     image.width * ratio,
     row * ratio + 4
   );
   

   Let's break down the parameters of this drawImage call:

   • image: The source image being drawn.
   • 0, row: The x and y coordinates in the source image where to start copying.
   • image.width, 1: The width and height of the slice being copied from the source image. Note that the height is always 1 pixel.
   • 0, 0: The x and y coordinates on the canvas where to start drawing.
   • image.width * ratio: The width to draw the image slice on the canvas, scaled to fit.
   • row * ratio + 4: The height to draw on the canvas. This is key to the fill effect.

3. The flood fill effect is created by progressively revealing more of the image from bottom to top:

   • The row variable starts at image.height (the bottom of the image).
   • In each frame, row is decreased by the speed value: row = row - speed;
   • This means each frame draws a slightly larger portion of the image, creating the illusion of the image being "filled" from bottom to top.

4. The + 4 in row * ratio + 4 creates a slight overlap between frames. This ensures there are no gaps in the fill effect, even at higher speeds.

5. The speed of the fill can be adjusted by the user via the slider, which changes the speed variable. A higher speed value means larger chunks of the image are revealed in each frame, making the fill effect faster.

6. The effect continues until row becomes 0 or negative, at which point the entire image has been revealed.

7. Once an image is fully revealed, the code moves to the next image in the array and starts the process again.

This approach creates a smooth, continuous fill effect that works for any image size, maintaining aspect ratio and fitting within the canvas bounds. The effect is visually interesting because it gradually reveals the image content, creating a sense of anticipation for the viewer.