If you’re a LiveCode developer, you’ve probably had this happen to you: while writing your code and exploring different ways to get the result you’re after, something goes wrong, but in a good way. You discover something you didn’t expect or know before and you think “Hey, that’s pretty cool.” This happened to me recently and I thought the result was worth sharing.
A few months back, I wrote an article about producing a simple blur effect using only LiveCode Script. I was using this effect in an app, and while the end result was working, I wanted to find a way to speed up the execution. The effect works by shrinking an image, setting the imageData of the image to the reduced data, and then returning the image to full size, producing a blurred result. It occurred to me that maybe things would go faster if I started off with a small image and enlarged that.
I remembered that LiveCode added the ability to capture a screenshot a specified size, so I changed the blur code to the following, which exports a snapshot to a locked image:
put height of this card * 0.01 into theHeight
export snapshot from this card at size theWidth,theHeight to image 2
Woah. Not only did this work, but it was fast. Really fast. I wondered if maybe I was imagining things, so I put the code into a slider, and amazingly, the display image updated dynamically while dragging the slider, nearly instantaneously. You can try it for yourself by executing the following in your LiveCode message box:
But while playing with the above effect, something happened. I forgot to set the resizeQuality of the second image to “best” (this is what blends the pixels together and creates a blur), and wound up getting a highly pixelized image. I thought this was pretty cool, and you can see the results by disabling the “Blur” checkbox in the demo stack.
So what can we use this for? To me, the result looked like a transition effect provided in many video editing packages, so of course the natural thing to try was a simple slideshow. I created a new stack, imported 5 images into a substack as source images, and placed the (what is now pixelizing) code in the card script. After adding a play/stop button and tweaking the script, it works!
You can get the pixel transition slideshow stack here, again via your LiveCode message box:
I imagine someone with better math skills than I could write a geometric or exponential curve to ease into the pixelizing effect, but the end result is still pretty good. And who knows — maybe this effect will wind up in a future project. Maybe you’ll find the effect useful for one of yours.