A VB.NET Fluid Effect Image box

Sample Image - fluid_effect.jpg

Introduction

Add a splash to your splash screen - literally!

Finally a VB.NET implementation of the classic ripple / water / splash / fluid effect! This is a port and a enhancement of Christian Tratz's C# implementation.

Background

Even VB.NET users should be able to have awesome effects. There are many fluid effect routines out there, most in C. This is a VB.NET port of the C# implementation. I've also opened up a few more properties so you can have greater control over the effect programatically. You can make some really neat looks by fiddling with the parameters - make your image appear to be rubber, or under an oil surface, or use regular old water physics. Just check out the sample app and the documentation in the code itself.

See http://www.x-caiver.com/Software for additional versions.

Using the code

In just a few steps you will be set up:

Add fluidEffect.vb to your project
On your form, add a Panel object. Position/size/name appropriately. Don't add a graphic to it yet.
Save your form, then switch to the Code View and close the Designer View.
Search for the Panel name, make sure 'Search hidden text' option is selected. There are two instances you are looking for. Both are within the "Windows Form Designer generated code" region. The 2 examples below assume you named your panel myFluidPanel.
- Watch out, VS.NET likes to change the two lines to be <yournamespace>.fluidEffect.fluidEffectControl and then the Designer gets confused, and won't display it at all until you go back to the Code and fix it.

'This was the original line. Comment it out and add the line below
'Friend WithEvents myFluidPanel As System.Windows.Forms.Panel
Friend WithEvents myFluidPanel As fluidEffect.fluidEffectControl

'This was the original line. Comment it out and add the line below
'Me.myFluidPanel = New System.Windows.Forms.Panel()
Me.myFluidPanel = New fluidEffect.fluidEffectControl()

Save again. Now you can open up the form in Designer View
Select your panel (now a fluidEffect), and scroll to the "Misc" section of its property sheet, and set the ImageBitmap entry to your bitmap. (the fluidEffect only works with bitmaps for now. it will display a jpg (or any format a Panel can show) in the Designer but won't work when you try to run it)
Configure any of the other settings that you want, Save, and you're done!

Settings you can change:

ImageBitmap - this is the image displayed. Bitmaps only for now
dropHeight - larger values make the initial drops higher
dropRadius - larger values make the radius of the initial ripple larger
Dampener - larger values let the ripples last longer. 4 is normal. 2 & 1 make the fluid very thick so the ripples die fast. A value of 0 has basically no ripples
TheScale - Value of 0 is a ripple bitmap the same size as the image, value 1 is half the size, etc. Larger values are useful if you have a big image to make the processing take less time. Also if you scale the image on your form you should try values 1 and up to get the drops to be correctly located in relation to the mouse
StopRipples - This value should be set to False for normal use. Setting it to True will freeze the ripples. Clicking on the image again will start a new ripple, and un-freeze all the existing ripples.

Gotchas:

Only works with bitmaps for now, but you can assign a jpg/icn/etc to the panel from the Designer View
Gets bogged down quickly with larger images. A 500x400 image of mine could only get ~ 2 fps with the settings I had selected
There are error cases that aren't trapped yet. Launch the demo app, and click a lot, quickly, and you will crash the app. (I was able to get 30 drops going at once clicking slowly, but if I clicked quickly I could crash the app after 5 drops)
When 2 & 3 are addressed I will reactivate the drag event handler. This lets you "draw" on the water, like running your finger over the water.

Points of Interest

VB.NET is not the mathematical, memory swapping powerhouse that C# is. This code bogs down quickly under load. One of my apps has a 500 x 400 pixel splash screen, with transparent sections. I wasn't able to get good frame rates out of it. Smaller images work great though. I selected an interesting spot in one of my splash screens that is only 100x100, and it can ripple in realtime.

History

2/18/2003 - Completed VB.NET port & added some configurable properties.
2/20/2003 - Made demo app for CodeProject, woo hoo
2/21/2003 - VS.NET 2003's VB.NET has native bitshift operators. I'll post a version that reverts to using inline bitshifting, instead of the bitshift function that is used in the VS.NET 2003 version posted here, on my website.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

X-caiver

Web Developer

United States

Member

Born and raised in good old sunny Florida, USA. Now living in not-quite-as-good, not-quite-as-old, no-where-near-as-sunny Washington State, USA.

http://www.x-caiver.com

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Adding to the effect

David Goben

11:17 26 Mar '11

First, I addressed the Overlfow problem in fluideffect.vb by simply replacing the following line:

            alpha = CByte(200 - xOffset)

with this:
            If xOffset < -55 Then xOffset = 55
            alpha = CByte(200 - xOffset)

Second, for a really nifty enhancement to it, add the following event code to the control:

            'add a dragging ripple effect when the select mouse button is down
            Private Sub fluidEffectControl_MouseMove(ByVal sender As Object, _
                                                                        ByVal e As System.Windows.Forms.MouseEventArgs) _
                                                                        Handles Me.MouseMove
                  'ignore if left mouse button not down
                  If e.Button <> Windows.Forms.MouseButtons.Left Then Exit Sub
                  'do ripple effect from current position
                  Dim realX As Integer = CInt((e.X / CDbl(Me.ClientRectangle.Width)) * _waveWidth)
                  Dim realY As Integer = CInt((e.Y / CDbl(Me.ClientRectangle.Height)) * _waveHeight)
                  _stopRipples = False
                  PutDrop(realX, realY, _dropHeight)
            End Sub

David Goben

The surest way to spot a faith of the blind is to hear them call themselves the one true faith.

Very Nice

eg_Anubhava

0:09 21 Sep '10

Really Very Nice If you can think then I Can.
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Resolved : Fix overflow exception

Pascal Ganaye

4:26 19 May '09

I could find two places where it breaks :
1 - In fluidEffect.vb, just after 'generate alpha
replace the if then by:

                     Dim newAlpha As Integer = 200 - xOffset
                     alpha = If(newAlpha < 0, 0, If(newAlpha > 255, 255, CByte(newAlpha)))
 
                     'set colors

Then I had another error which I shamelessly hide by adding a try catch block

               Try
                  _waves(x, y, newBuffer) = CShort((BSRight(_waves(x - 1, y - 1, _activeBuffer) + _
                                           _waves(x, y - 1, _activeBuffer) + _
                                           _waves(x + 1, y - 1, _activeBuffer) + _
                                           _waves(x - 1, y, _activeBuffer) + _
                                           _waves(x + 1, y, _activeBuffer) + _
                                           _waves(x - 1, y + 1, _activeBuffer) + _
                                           _waves(x, y + 1, _activeBuffer) + _
                                           _waves(x + 1, y + 1, _activeBuffer), 2)) - _waves(x, y, newBuffer))
 
               Catch ex As Exception
                  _waves(x, y, newBuffer) = 0
               End Try

Re: Resolved : Fix overflow exception

Member 4756869

20:07 27 Aug '11

nice it work perfect manoj joshi
Sign In·View Thread·Permalink

Shame, such a cool effect... I am missing something here, I had it working once...

blkbagger

17:10 20 Feb '09

"An error occurred creating the form. See Exception.InnerException for details. The error is: Object reference not set to an instance of an object." I know it's because the fluideffects control cannot find the bmp file... Pardon my ignorance... Anyone have the quick answer, help a rookie out, also can this control be attached to a custom control which inherits from a panel???
Sign In·View Thread·Permalink	1.50/5 (2 votes)

Anyone....Anyone.... Bueller???

blkbagger

6:27 20 Feb '09

Could someone please post the correct code to substitute my bitmap image into this control... OUTSIDE THE DEMO APP... Using just the code within fluidEffect.vb file... PLEASE... Ken
Sign In·View Thread·Permalink

Tell me this, please someone tell me...

blkbagger

13:19 19 Feb '09

I have a nifty control that I built from code snippets online, it is basically a custom user control inheriting from a panel control... I have a lot of control over that panel and was wondering how to incorporate it into this fluid effect control, basically I want to provide the "panel" that this control uses which is normally placed on the form seperately from within the control itself, brining along all the flexibility of my panel with the addition of the "fluid effects" Please tell me that this can be done... I have had some dificulty using this code outside the demo app (I can't seem to incorporate it into my project)

Any help would be appreciated... Ken

hyperlink

Naujas

20:24 4 Feb '04

How to make hyperlink to change color opn mouse move?
Sign In·View Thread·Permalink

re : overflow problem

adevendeuvre

14:48 10 Oct '03

this program is really nice, i made the first modification as say in the thread. and i change the short by a int64 is it a good idea ? thanks a lot
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Re: re : overflow problem

Domenic

6:57 15 Jul '04

I tried both suggestions in the threads below with little luck. I am trying to alter the demo project to simulate rain (many drops at a time) with the following code. After 4 seconds or so theres the overflow exception. I've added the delta change and converted all shorts to longs. Anyone else have any luck with this?

Dim lUntil As Long = Environment.TickCount + 10000
Dim r As New Random
While Environment.TickCount < lUntil
Panel1.PutDrop(r.Next(0, Panel1.Width), r.Next(0, Panel1.Height), bar_dropHeight.Value)
Application.DoEvents()
System.Threading.Thread.Sleep(10)
End While

very impressive

DaaG

6:51 17 Apr '03

thanks for the source
Sign In·View Thread·Permalink

OverflowException

re-flex

21:13 12 Mar '03

5 mouse clicks at the same point and :

See the end of this message for details on invoking
just-in-time (JIT) debugging instead of this dialog box.

************** Exception Text **************
System.OverflowException: Arithmetic operation resulted in an overflow.
at fluidEffectDemo.fluidEffect.fluidEffectControl.fluidEffectControl_Paint(Object sender, PaintEventArgs e)
at System.Windows.Forms.Control.OnPaint(PaintEventArgs e)
at System.Windows.Forms.Control.PaintWithErrorHandling(PaintEventArgs e, Int16 layer, Boolean disposeEventArgs)
at System.Windows.Forms.Control.WmPaint(Message& m)
at System.Windows.Forms.Control.WndProc(Message& m)
at System.Windows.Forms.ScrollableControl.WndProc(Message& m)
at System.Windows.Forms.ControlNativeWindow.OnMessage(Message& m)
at System.Windows.Forms.ControlNativeWindow.WndProc(Message& m)
at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)

Re: OverflowException

X-caiver

6:58 13 Mar '03

Yep, that is listed as "Gotcha #3" in the article. We are extremely busy here at work, so I haven't had time to take a look at it. Don Pattee http://www.x-caiver.com
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Re: OverflowException

Hegemon

6:01 4 Aug '03

Hello

GREAT CODE !!!!!

It is very interesting (for those of us who only work with VB an are sad to see those great samples/demos of C#).

I have debug the code and I found that in sub : "fluidEffectControl_Paint"
there is a variable :

Dim alpha As Byte

(so it can only handle betwenn 0 and 255)

but in debug mode i found:
'generate alpha
alpha = CByte(200 - xOffset)

And the value of xOffSet was -56.... So it "overflows".

I hope it helps!
Thanks again for post your code !

Hegemon
Spain.

Re: OverflowException

Hegemon

6:19 4 Aug '03

Hello. To test I introduce these lines before se apha assigement: If (xOffset < -55) Then xOffset = -55 End If and WORKS perfectly! No more exceptions ! Regards Hegemon
Sign In·View Thread·Permalink

Re: OverflowException

Anonymous

23:25 7 Aug '03

Hello again.
There is still one more exception but it happens after a long long number of clicks

It is in the next code:

'_waves(x, y, newBuffer) = CShort((BSRight(_waves(x - 1, y - 1, _activeBuffer) + _
' _waves(x, y - 1, _activeBuffer) + _
' _waves(x + 1, y - 1, _activeBuffer) + _
' _waves(x - 1, y, _activeBuffer) + _
' _waves(x + 1, y, _activeBuffer) + _
' _waves(x - 1, y + 1, _activeBuffer) + _
' _waves(x, y + 1, _activeBuffer) + _
' _waves(x + 1, y + 1, _activeBuffer), 2)) - _waves(x, y, newBuffer))

Sometimes the addition is greater than 32767 or lower than -32767 and gives a overflow because it is a "short".

Regards.

Hegemon

Re: OverflowException

Dunstad

16:18 14 Apr '09

Im using the project on visual studio 2008, i simply placed the generate alpha line of code in a try/catch like this: 'generate alpha Try alpha = CByte(200 - xOffset) Catch ex As Exception alpha = 0 End Try That seems to fix the overflow problem for me. I also changed all of the integer types to long, which might also have helped.
Sign In·View Thread·Permalink

Cool

RabidKangaroo

4:19 7 Mar '03

Very nice indeed. I haven't looked at any of the code yet, but I'm anxious to. One thing happened though when I was executing it. If I clicked a bunch of times to create lots of ripples, I got the following exception:

System.OverflowException: Arithmetic operation resulted in an overflow.

   at fluidEffectDemo.fluidEffect.fluidEffectControl.fluidEffectControl_Paint(Object sender, PaintEventArgs e)

(eek added by me)

It's probably something simple-ish to fix, but I though I'd bring it up so you at least know about it (if you didn't already).

Great work!

RabidK

Very Nice indead!!!

Poolbeer

4:09 7 Mar '03

Looks good! atlast something that looks good for the VB developers. There is a small bug though. If you click as hell on the image an "Arimetric overflow" exception occures, but hey it still looks good! Greets, Poolbeer Speak Out! Use the Source, Luke! *(Dr. GUI .NET #5)*
Sign In·View Thread·Permalink

Re: Very Nice indead!!!

X-caiver

11:50 7 Mar '03

Yep, haven't had time to figure that out. It is listed as "Gotcha #3" for now. Don Pattee http://www.x-caiver.com
Sign In·View Thread·Permalink	5.00/5 (1 vote)