Endless Scrolling Bathroom

It often seems that I'm drawn to questions on Stack Overflow that have to do with manipulating pixels directly. This week, I fielded a question from someone who wasn't happy with the solution he was using where he was using the graphics object and filling it with the bitmap he was trying to scroll.

I gave him syntax to do it with copyPixels, but what I gave him didn't completely solve his problem, since copyPixels doesn't automatically create multiple copies of the bitmap to fill in the area left empty when you move the graphic. I came up with some code that worked, but it wasn't optimal, and I didn't give a good explanation of why it worked.

So I thought I'd share a better solution with everyone, along with an explanation of what's happening.

Anatomy of an Endlessly Scrolling Background

Let's take the example of a background scrolling from right to left. To create a scrolling background, you need to break the image into two segments—one on the left and one on the right. The pixels on the left side of the image need to slide in from the right hand side, replacing the pixels that are sliding off. In fact, they are the very same pixels that slid off.

This means that the rectangle we're using for the source of these pixels (again, on the left side of the image), is continually growing as it is joined by more and more pixels. By the same token, the pixels on the right hand side, which are the ones that are still left after the pixels moved around to slide in from the right, occupy a rectangle that is constantly shrinking.

To complete the effect, we transpose the two rectangles so that the shrinking right-hand rectangle is on the left side and the growing rectangle from the left side of the image is on the right. Check out this demo, where the red and blue rectangles show where the source pixels are coming from and the lower animation shows the finished effect.

Download the source code.

About the Bathroom Still Life

Sometimes I walk into the bathroom and I see something like this, so I'll go get my phone and snap a picture. It's almost as if my toiletries have lives of their own. By capturing these moments, I can share that secret life in some way. I think of this one as "Toothbrush 'From here to Eternity.'"

RIAdventure Inspiration

So we're just back from the RIAdventure cruise/conference, and I have to say it was just what the doctor ordered for me. The speakers and attendees were all top notch, and I felt like a little sponge, soaking up ideas from them.

One set of ideas I'd just started reading about before going to the conference was blitting. In my roles as eLearning or Application developer, this wasn't something that I'd been exposed to much. And it seemed like a lot to get my head around until I saw Sam Rivello's Las Viditas presentation. He made this stuff look so easy, I thought maybe it wasn't so hard after all.

Couple that with the fact that I was inspired by Greg Burch's presentation to try an iPhone teaching app for children that needs to have performant animation (when the iPhone api is available), and suddenly this looked like something I needed to learn.

But since the main animation I was concerned with was rotating an object about a central point, the whole idea of repeatedly copying the pixels from different parts of an image seemed to be silly to me. So I came up with the idea of using a Flash Display object and rotating it once, programmatically, taking a snapshot at each rotation increment. Then each snapshot could be used in sequence.

Here's my first prototype of that concept:

Download the source code.

I'll probably write in detail about this code on InsideRIA in the near future, but the code is commented pretty thoroughly.