Android Question Wave Background

emexes

Expert
Licensed User
Longtime User
Except for the top wave which curls back on itself to the right, the rest of them are drawable with sine waves modulated linearly and filled with gradients.

But it might be simpler to just use a bitmap, resized to the required size ie fit/fill screen, and that way you can have any background you like without having to work out the math behind it.

The nice thing about your abstract wave background is that you also don't have to worry about getting the aspect ratio correct, and it doesn't matter if the screen and the background image don't match... near enough is good enough.
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
Sorry, I forgot to post the routine, this is where she draws.



B4X:
cvs.Initialize(pnl)

DrawWave(80dip, 40dip, 900dip, xui.Color_ARGB(160, 254, 202, 127), 1.3)
DrawWave(100dip, 60dip, 900dip, xui.Color_ARGB(190, 255, 179, 57), 1.8)
DrawWave(120dip, 80dip, 900dip, xui.Color_ARGB(220, 2, 49, 129), 1.7)

cvs.Invalidate


CurrentPhase: displaces the wave horizontally.

B4X:
Sub DrawWave(BaseHeight As Float, Amplitude As Float, Longitude As Float, Color As Int, CurrentPhase As Float)
    Dim Width As Float = cvs.TargetView.Width
    Dim Height As Float = cvs.TargetView.Height
    Dim Steps As Float = 5

    Dim Path As B4XPath
    Path.Initialize(0, Height)
    Path.LineTo(0, Height - BaseHeight)

    For x = 0 To Width Step Steps
        Dim y As Float = Height - BaseHeight - Sin((2 * cPI * x / Longitude) + CurrentPhase) * Amplitude
        Path.LineTo(x, y)
    Next

    Path.LineTo(Width, Height)
    Path.LineTo(0, Height)

    cvs.DrawPath(Path, Color, True, 0)
End Sub

Note: To make it more realistic, you can use wave gradients.
 
Upvote 0
I tried animating it but it remains static. can someone check the attachment please and let me know why it doesn't work?
 

Attachments

  • animatedWave.zip
    10.4 KB · Views: 28
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
I tried animating it but it remains static. can someone check the attachment please and let me know why it doesn't work?

You need to adjust the waveforms (amplitude, wavelength) and the wave offset (1.3, 1.8, 1.9); experiment with these values.
If you wish, you can add more waves.
And if you want a more realistic look, create smooth gradients for the waves.
BaseHeight: is the height from which the waves appear.

B4X:
Private Sub tmr_Tick
    cvs.ClearRect(cvs.TargetRect)
    phase = phase + 0.5 'speed
    DrawWave(80dip, 40dip, 900dip, xui.Color_ARGB(160, 254, 202, 127), phase * 1.3)
    DrawWave(100dip, 60dip, 900dip, xui.Color_ARGB(190, 255, 179, 57),  phase * 1.8)
    DrawWave(120dip, 80dip, 900dip, xui.Color_ARGB(220, 2, 49, 129),  phase * 1.7)
    cvs.Invalidate
    
End Sub
 
Upvote 0
Thank you. Works perfectly
 
Upvote 0

Similar Threads

Cookies are required to use this site. You must accept them to continue using the site. Learn more…