HTML5 - Dripping Paint Image Transition
With the use of HTML5 and a little JavaScript it's possible to create an image transition effect whereby "paint" drips from the top of an image to reveal another image. Below is a sample image taken mid-frame to demonstrate the effect. A fully animated sample can be found here that was tested on Chrome v26, IE v10, and Firefox v20.
To achieve this effect we can make use of the bezierCurveTo function available in the HTML5 canvas object. We can view the leading edge of the paint effect as a collection of connected Bezier curves as shown in figure 2. The leading point of every "drip" can be implemented as the end point of a particular curve and the start of the next (shown in red). Note that defining the control points (shown in purple), that give each curve its unique shape, is easy since they share the same "y" value as their related "drip" point and the "x" value can be fixed for every point. The only real decisions are how many drips we want and how far do we want the control points to be.
Assuming the "drip" points move from top to bottom then all we have left to do is to define a region for the top half of the image and fill it with the new image. This can be done by combining the beginPath, moveTo, lineTo, and closePath methods with the previously mentioned bezierCurveTo function to draw a figure encompassing the area shown in blue in figure 3. This is done for every frame with the drip points moving progressively down at different rates. We also use the fill method on every frame draw but before starting the animation we need to define a pattern based on the next image to be rendered and assign it to the fillStyle property of the canvas being used. The createPattern method allows us to do this but we should keep in mind that if there are more images to reveal then we need to create a new pattern before starting the animation for the next image.
As mentioned previously a sample of this technique has been implemented here. Just view the page's source code. Note, however, that this code is unoptimised to make it easier to understand.
To achieve this effect we can make use of the bezierCurveTo function available in the HTML5 canvas object. We can view the leading edge of the paint effect as a collection of connected Bezier curves as shown in figure 2. The leading point of every "drip" can be implemented as the end point of a particular curve and the start of the next (shown in red). Note that defining the control points (shown in purple), that give each curve its unique shape, is easy since they share the same "y" value as their related "drip" point and the "x" value can be fixed for every point. The only real decisions are how many drips we want and how far do we want the control points to be.
Assuming the "drip" points move from top to bottom then all we have left to do is to define a region for the top half of the image and fill it with the new image. This can be done by combining the beginPath, moveTo, lineTo, and closePath methods with the previously mentioned bezierCurveTo function to draw a figure encompassing the area shown in blue in figure 3. This is done for every frame with the drip points moving progressively down at different rates. We also use the fill method on every frame draw but before starting the animation we need to define a pattern based on the next image to be rendered and assign it to the fillStyle property of the canvas being used. The createPattern method allows us to do this but we should keep in mind that if there are more images to reveal then we need to create a new pattern before starting the animation for the next image.
As mentioned previously a sample of this technique has been implemented here. Just view the page's source code. Note, however, that this code is unoptimised to make it easier to understand.
