The Minimum Drawing Library (MDL) provides a set of powerful visual effects for image transitions. One of the simplest and most effective effects is the Wipe effect. This document explains how the wipe effect works, its implementation, and how to use it in your LiveCode applications.
The wipe effect creates a transition where a new image gradually replaces an old image by "wiping" across the screen in a specific direction. It's similar to a window blind or curtain being pulled across to reveal what's behind it.
MDL supports several wipe directions:
wipeUp
wipeDown
wipeLeft
wipeRight
wipeOpen
wipeClose
Here's a simple animation demonstrating the wipeRight
effect:
The wipe effect is implemented in the veWipe
function in MDL. Here's a breakdown of how it works:
tOldBuffer
containing the current imagetNewBuffer
containing the image to transition toLet's look at how the wipeRight
effect is implemented:
if (pEffect is "wipeRight") then -- wipeRight
put (tWidth div 40) into tStep
put (4 * tStep) into tByte
repeat with X = 0 to (tWidth - tStep) step tStep
put (the ticks) into tT
put (X * 4) into tOfsX
repeat with Y = 0 to (tHeight - 1)
put (tOfsX + tOneLineByte * Y + 1) into tStartByte
put (byte tStartByte to (tStartByte + tByte) of tNewBuffer) \
into byte tStartByte to (tStartByte + tByte) of tOldBuffer
end repeat --//Y
set the imageData of image pImageName to tOldBuffer
wait tWait - (the ticks - tT)
end repeat --// X
end if --// wipeRight
tByte
represents the memory size for each step (4 bytes per pixel * number of pixels in step)Understanding how pixel data is organized in the buffer is crucial to comprehending the wipe effect:
ARGB structure of a single pixel (4 bytes)
Memory layout of pixels in the buffer
To use the wipe effect in your LiveCode application:
-- Create an image object
create image "myImage"
set the rect of image "myImage" to 0,0,400,300
-- Initialize the drawing buffer
MdMakeBuffer "myImage"
-- Draw your content
MdEraseScreen -- Clear with background color
MdSetPenColor "255,255,0,0" -- Red
MdDrawRect "50,50,350,250", true
-- Apply the wipe effect when updating
MdUpdate "myImage", "wipeRight", "normal"
Parameter | Description | Options |
---|---|---|
pImageName | Name of the image object to update | Any valid image name |
pEffect | The visual effect to apply | wipeUp, wipeDown, wipeLeft, wipeRight, wipeOpen, wipeClose |
pSpeed | The speed of the transition | "slow", "normal", "fast", or empty for default |
For better performance when using wipe effects:
Advanced tip: The actual implementation in MDL calculates the appropriate step size based on the image dimensions. For a 400×300 pixel image, each step processes approximately 10 pixels (width/40), making the animation run in about 40 steps regardless of image size.
The wipe effect demonstrates several key programming techniques:
The wipe effect in MDL provides a simple yet powerful way to create professional transitions between images. By understanding how it works internally, you can better utilize it in your LiveCode applications and potentially create your own custom visual effects.