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

  • Learn How A Global Entertainment Company Saw a 448% ROI Every business today uses software to manage systems, deliver products, and empower employees to do their jobs. But software inevitably breaks, and when it does, businesses lose money -- in the form of dissatisfied customers, missed SLAs or lost productivity. PagerDuty, an operations performance platform, solves this problem by helping operations engineers and developers more effectively manage and resolve incidents across a company's global operations. …

  • Live Event Date: December 18, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT The Internet of Things (IoT) incorporates physical devices into business processes using predictive analytics. While it relies heavily on existing Internet technologies, it differs by including physical devices, specialized protocols, physical analytics, and a unique partner network. To capture the real business value of IoT, the industry must move beyond customized projects to general patterns and platforms. Check out this upcoming webcast …

Most Popular Programming Stories

More for Developers

RSS Feeds