Android Question Wave Background

[Abdou1283]

Hi, How can I draw a background similar to this?

 

[emexes]

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.

 

[TILogistic]

? with animation

 

[TILogistic]

Sorry, I forgot to post the routine, this is where she draws.

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.

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.

 

[alwaysalearner]

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

 

[TILogistic]

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.

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

 

[alwaysalearner]

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.

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

Thank you. Works perfectly