The Dancing Pixels, or the Pixels in Water

Environment: Visual C++

To start with, the program is a small-time animation in VC++. What does an image look like when it is dipped in a tub of water when the tub is subjected to a constant vibration? The more difficult part is to produce the ripple effect, as when a pebble is thrown in the tub. So, I will tell at least this much.

The difference I make is that I am going to explain how to produce this effect, not simply copy and paste code form somewhere. Much of the code that I saw over the Net regarding small-time animation carries no explanation at all.

Some Theory

Let p(x,y) be a pixel at the x,y coordinate in an image. Imagine the pixel p(x,y) moving randomly around its four m-neighbourhoods, namely p(x-m,y-m),p(x+m,y+m), p(x-m,y),p(x,y-m) randomly, where m is a natural number {1,2,3,4,5,6,...}. Think what will happen if all the pixels in the image move in such a manner; you get the effect.

The Practice

When someone clicks the Ok button, I do the following:

CDC me1;
CBitmap ma1;
BITMAP info1;

CDC me3;
CBitmap ma3;
BITMAP info3;

All the above all globals.

ma1.LoadBitmap(IDB_BITMAP1);
me1.CreateCompatibleDC(dc);
ma1.GetBitmap(&info1);
me1.SelectObject(ma1);

me3.CreateCompatibleDC(dc);
ma3.CreateCompatibleBitmap(dc,1000,1000);
me3.SelectObject(ma3);
me3.BitBlt(0,0,1000,1000,dc,0,0,SRCCOPY);

I have one more copy of the DC just in case you need it for more animation tricks; it is not required here, though.

me3.BitBlt(0,0,info1.bmWidth,info1.bmHeight,&me1,0,0,SRCCOPY);


HBITMAP hbm=NULL;

HDC DeskHdc=::GetDC(NULL);
HDC hdc=::CreateCompatibleDC(DeskHdc);

BitmapInfo.bmiHeader.biSize=sizeof(BITMAPINFOHEADER);
BitmapInfo.bmiHeader.biWidth=info1.bmWidth;
BitmapInfo.bmiHeader.biHeight=info1.bmHeight;
BitmapInfo.bmiHeader.biSizeImage=(((info1.bmWidth * 32 + 31)
                                    & ~31) >> 3) * info1.bmHeight;
BitmapInfo.bmiHeader.biCompression=BI_RGB ;
BitmapInfo.bmiHeader.biXPelsPerMeter=0;
BitmapInfo.bmiHeader.biYPelsPerMeter =0;
BitmapInfo.bmiHeader.biClrImportant = 0;
BitmapInfo.bmiHeader.biClrUsed  = 0;    // we are not using palette
BitmapInfo.bmiHeader.biPlanes   = 1;    // has to be 1
BitmapInfo.bmiHeader.biBitCount = 32;   // as we want true-color


hbm=::CreateDIBSection(GetDesktopWindow()->GetWindowDC()
                                         ->m_hDC,
      &BitmapInfo,DIB_RGB_COLORS,(void**)&imageData,NULL,0);
HBITMAP m_hbmOld;

if (hbm)
  {
  m_hbmOld = (HBITMAP)::SelectObject(hdc,hbm);
}

::BitBlt(hdc,0,0,info1.bmWidth,info1.bmHeight,me3.m_hDC,0,0,
         SRCCOPY);

The above is a standard piece of code that would be given in any good VC++ books.

It is done so that I get access to the image's bits that are now in the imageData member; the trick is to manipulate the bits directly and use SetDIBitsToDevice(--) to plot the image quickly and finally to repeat the process in a timer.

So, let us look at the OnTimer function: When we enter the timer for the first time, I want to copy the image bits array into another pointer, namely p, and a two-dimensional array, namely imgArr.

if(r= =0)
{
  memcpy(p,imageData,BitmapInfo.bmiHeader.biSizeImage);
  for(intj=0;j<=info1.bmHeight;j++)
  for(intk=0;k<=info1.bmWidth;k++)
  {
  imgArr[j][k]=p[j*info1.bmWidth+k]; // See note below for this
                                     // calculation
  }
  r= 1;
}

I want to stop this timer until I finish the following processing:

KillTimer(0);

Run through the whole image:

for(intk=0;k<=info1.bmHeight;k++)
for(intf=0;f<=info1.bmWidth;f++)
{
int R,G,B;
int Rx,Gx;

//Rx=rand()%(int)m+k;
//Gx=rand()%(int)m+f;

Then, I pick up a random 3-neighbouring pixel from the place (k,f):

Rx=rand()%(int)3+k;
Gx=rand()%(int)3+f;

Put the current pixel (the k,f guy) = the so-selected 3-neighbouring pixel:

p[k*info1.bmWidth+f]=imgArr[Rx][Gx];    // For more explanation
                                        // of this calculation,
                                        // see the note at the end
}

Now, all the pixels in the image have been replaced by their 3-neighbouring guys, that too randomly:

m-=.5;
if(m<1)
  m=20;
if(r>info1.bmWidth)
  r=0;
SetDIBitsToDevice(::GetDC(NULL),
    0,
    0,
    info1.bmWidth,
    info1.bmHeight,
    0,
    0,
    0,
    info1.bmHeight,
    p,
    //imageData,
    &BitmapInfo,
    DIB_RGB_COLORS);

Now, resume the timer for the next round of random replacement:

SetTimer(0,30,0);
Note: One item worth mentioning will be how the bits are stored in one single array. From p[0] to p[info1.bmWidth], we have a single row of the image, then from p[info1.bmWidth+1] to p[info1.bmWidth+ info1.bmWidth] is the second row of the image and so on until p[info1.bmWidth*info1.bmHeight].

Downloads

Download source - 462 Kb


Comments

  • thanks

    Posted by chinesoul on 04/18/2007 02:05pm

    As a beginner, this code helps me a lot.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Are you truly leading your team or simply managing them? Organizations need leaders and your team needs someone to follow. With some ongoing development, you could become that leader. Learn the top leadership qualities that inspire others to want to follow you and the direction of your company.

  • On-demand Event Event Date: March 19, 2015 The 2015 Enterprise Mobile Application Survey asked 250 mobility professionals what their biggest mobile challenges are, how many employees they are equipping with mobile apps, and their methods for driving value with mobility. Join Dan Woods, Editor and CTO of CITO Research, and Alan Murray, SVP of Products at Apperian, as they break down the results of this survey and discuss how enterprises are using mobile application management and private app stores to …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date