Bitmap division and animation with simple API

I’m continuing my efforts to create an easy-to-use effect library. For now I’m concentrating on 2D matrix effects — the previous one was halfTone. This one is a devision of an image (or any displayObjects for that matter) into smaller segments.

here’s what it looks like (click to watch animation):

here is the code involved with using the effect:

It is based on my previous work that I posted here.

Halftone effect with simple API

I started working on an effect library with an easy-to-use API which will be easily attached to any tweening engine. I’m still working hard on the API and on how the whole thing is architectured, so I’m not going to include source code this time, but to give you a glimpse of how this is going to look, here’s an example of the Halftone effect which is going to be part of the Matrix2D package (it will include stuff like pixelate and explode effects).

the following effect is achieved simply by typing the following:

but the fun part is animating the effect with a simple API. I’m using the new TweenLite v11, but any tween engine or really any other way (like controlling the swipe with the position of the mouse). here’s how I’m creating the different swipes in the example below:

Special thanks to Joe Ferrari for helping me through the diagonal array math (still working on the BottomLeft to TopRight swipe)

Dynamic Grid Positioning

I had a couple of people ask me in the past couple of weeks about dynamic positioning of elements on a page, which change their position when other elements change size. Kind of like the ADIDAS WEBSITE effect.

The thing that is hard to get I think is a natural dynamic movement, and will be very apparent if you are doing this in an event-driven way. So I decided to do a quick example of how this would look like using a 2D matrix and using an EnterFrame event to detect the position of each element in the grid.

you can check out the result below:

basically, the way I set it up is to devide the grid into rows — each row has a Sprite that holds all of the elements in that row. On each frame, each one of the boxes checks the X and WIDTH of the box before it and changes it’s X position accordingly, and each Sprite Holder checks the Y and HEIGHT position of the row before it and calculates it’s position accordingly.

next I’ll try to use some collision detection and get a better real-world feel to it.

as always – here’s the SOURCE

HalfTone effect using PixelBender

After playing around a bit with the Sprite approach to crate halfTone, I realized I don’t have enough computing power to go fullscreen with it, so I turned to PixelBender. it’s a bit different working in PB, and a bit confusing, but with a little fiddling around I created a halftone filter (I couldn’t find any to download — the one on the PB Exchange doesn’t have the PBK file, so there’s no way to know the paramaters that you can control…). I ended up making these paramaters to work with:

brightness (the color f the dots from black [0.0] to white [1.0])
multiplier (offsets the size of the dots)
offset (distance between dots)
radius (ummm, the radius of the dots)

I realized that in order to smoothly fade it it is better to draw the bitmap with the PB effect onto another bitmap, effectively flattening the effect (for a halfTone there really isn’t any advantage of playing with the parameters in real time), and then disposing of the original BMP and the filter, freeing up much needed power.

here is a sample of what it looks like:

you can download the source here.

and here is the source of the PBK.

HalfTone effect in AS3 using Sprites

I had to do some halftone experiments for a project, and so I looked around for some code. There were a few examples out there but I didn’t find anything that I really liked so I decided to create one on my own.

The basic principle I went with was to create dots, and according to the brightness level of the pixel I was sampling, I would scale the dot down (full brightness = scale:0, no brightness = scale:1).

Here’s what I came up with. you can download the source here.

I used BetweenAS3 for the transitions.

-i

ExplodeBitmap transition effect

This is a simple class I created for some transition effect. It’s really simple, but the effect is cool.

I’m basically taking any displayObject and creating a grid of bitmap copies of it. then animating them with BetweenAS3 tween engine (if you haven’t heard of it, it’s worth checking out — really fast and clean engine from LibSpark). I’m planning on decoupling the animation from the grid creation, so you could create different animations with the segments (or tie them in with a particle system), so that might be coming soon.

To use it, all you need to do call it like this:

new ExplodeBitmap(sprHolder, explodingSpr, widthSegments, heightSegments, smoothing);

here’s what it looks like (with randomized segment width and height):

source