Nahtlose Echtzeit-Wasseranimation

Übersicht

BlitzBasic

Codearchiv

	x-pressive Betreff: Nahtlose Echtzeit-Wasseranimation	Do, Jun 01, 2006 7:53 Antworten mit Zitat
Vor kurzem kam eine Frage, wie man "Bildverzerrungen" (z.B. das Kräuseln von Wasser usw.) in Echtzeit erzeugen kann. Da man das zu kräuselnde Bild ja z.B. auch als Textur (quasi wie ein Fake-Shader) oder gekachelt in einem 2D-Spiel verwenden möchte, ist es wichtig, das es "nahtlos" verzerrt wird. Was also rechts rausgeht, kommt links wieder rein usw. Man braucht also nur ein Bild im Speicher manipulieren und kann das dann ohne weiteren Speedverlust beliebig oft aneinanderreihen. Dieser Code ist nur ein Ansatz, um zu zeigen, das so etwas in Echtzeit möglich ist. Wer möchte, kann diesen Effekt also gerne noch weiter perfektionieren und hier vorstellen. Der Code ist momentan auf ein Bild in der Grösse 256x256 optimiert, kann aber leicht geändert werden. Testbild (speichern): Code: [AUSKLAPPEN] [EINKLAPPEN] Graphics 1024,768,0,2 : SetBuffer BackBuffer() Global Img_Original% = LoadImage ("wasser.jpg") Global size% = ImageWidth (Img_Original) Global Img_Temp% = CreateImage(size3,size3) Global Img_Water% = CreateImage(size,size) Global showTiled% = False Global frequence# Dim frequenciesX#(256) ; <-- ADJUST TO IMAGE HEIGHT Dim frequenciesY#(256) ; <-- ADJUST TO IMAGE HEIGHT Dim speedsX# (256) ; <-- ADJUST TO IMAGE HEIGHT Dim speedsY# (256) ; <-- ADJUST TO IMAGE HEIGHT For i = 0 To size-1 frequenciesX(i) = Rand(0,10) frequenciesY(i) = Rand(0,10) speedsX (i) = Rnd (3,8) speedsY (i) = Rnd (3,8) Next ; --------------------------------------------------------- ; MAIN LOOP ; --------------------------------------------------------- While Not KeyHit(1) CLS RippleImage If KeyHit(57) Then showTiled = Not showTiled If showTiled = False DrawImage Img_Water,50,50 If showTiled = True TileImage Img_Water,size,size Text 10,10,"HIT SPACE TO TOGGLE BETWEEN SINGLE VIEW / TILED VIEW" Flip 1 Wend ; --------------------------------------------------------- ; FUNCTION: DEFORM IMAGE SEAMLESSLY ; --------------------------------------------------------- Function RippleImage() Local x%, y%, r# Local stp# = (360.0/size) * 2 Local y1% = size/2-1 Local y2% = size/2 Local amplitudeX% = 4 ; <- X DISTORTION STENGTH Local amplitudeY% = 2 ; <- Y DISTORTION STENGTH SetBuffer ImageBuffer(Img_Temp) : TileBlock Img_Original,size,size r = 0.0 : frequence = frequence + 1 For x = 0 To size-1 frequenciesY(x) = frequenciesY(x) + speedsY(x) y = Sin( frequenciesY(x) ) * amplitudeY y = y + Cos(r + frequence) * 10 ; <-- Y WOBBLE STRENGTH CopyRect x,size+y,1,size, x,0, ImageBuffer(Img_Temp),ImageBuffer(Img_Water) Next TileBlock Img_Water,size,size r = 0.0 For y = 0 To size-1 frequenciesX(y) = frequenciesX(y) + speedsX(y) x = Cos( frequenciesX(y) ) * amplitudeX x = x + Sin(r + frequence) * 10 ; <-- X WOBBLE STRENGTH CopyRect size+x,y,size,1, 0,y, ImageBuffer(Img_Temp),ImageBuffer(Img_Water) r = r + stp Next SetBuffer BackBuffer() End Function
• BLITZ SHOWCASE: PARTICLE CANDY • PARTICLE CANDY FOR iPHONE • SPRITE CANDY • DON'T GET ANGRY! 2-3 • CLICK CLACK XL

x-pressive

Betreff: Nahtlose Echtzeit-Wasseranimation

Do, Jun 01, 2006 7:53
Antworten mit Zitat

Vor kurzem kam eine Frage, wie man "Bildverzerrungen" (z.B. das Kräuseln von Wasser usw.) in Echtzeit erzeugen kann.

Da man das zu kräuselnde Bild ja z.B. auch als Textur (quasi wie ein Fake-Shader) oder gekachelt in einem 2D-Spiel verwenden möchte, ist es wichtig, das es "nahtlos" verzerrt wird. Was also rechts rausgeht, kommt links wieder rein usw. Man braucht also nur ein Bild im Speicher manipulieren und kann das dann ohne weiteren Speedverlust beliebig oft aneinanderreihen.

Dieser Code ist nur ein Ansatz, um zu zeigen, das so etwas in Echtzeit möglich ist. Wer möchte, kann diesen Effekt also gerne noch weiter perfektionieren und hier vorstellen.

Der Code ist momentan auf ein Bild in der Grösse 256x256 optimiert, kann aber leicht geändert werden.

Testbild (speichern):
user posted image

Code: [AUSKLAPPEN]

Graphics 1024,768,0,2 : SetBuffer BackBuffer()

Global Img_Original% = LoadImage ("wasser.jpg")
Global size%    = ImageWidth (Img_Original)
Global Img_Temp% = CreateImage(size*3,size*3)
Global Img_Water% = CreateImage(size,size)
Global showTiled% = False
Global frequence#

Dim frequenciesX#(256) ; <-- ADJUST TO IMAGE HEIGHT
Dim frequenciesY#(256) ; <-- ADJUST TO IMAGE HEIGHT
Dim speedsX# (256) ; <-- ADJUST TO IMAGE HEIGHT
Dim speedsY# (256) ; <-- ADJUST TO IMAGE HEIGHT

For i = 0 To size-1
frequenciesX(i) = Rand(0,10)
frequenciesY(i) = Rand(0,10)
speedsX (i) = Rnd (3,8)
speedsY (i) = Rnd (3,8)
Next

; ---------------------------------------------------------
; MAIN LOOP
; ---------------------------------------------------------
While Not KeyHit(1)
CLS
RippleImage

If KeyHit(57) Then showTiled = Not showTiled
If showTiled = False DrawImage Img_Water,50,50
If showTiled = True TileImage Img_Water,size,size

Text 10,10,"HIT SPACE TO TOGGLE BETWEEN SINGLE VIEW / TILED VIEW"

Flip 1
Wend

; ---------------------------------------------------------
; FUNCTION: DEFORM IMAGE SEAMLESSLY
; ---------------------------------------------------------
Function RippleImage()

Local x%, y%, r#
Local stp# = (360.0/size) * 2
Local y1% = size/2-1
Local y2% = size/2
Local amplitudeX% = 4 ; <- X DISTORTION STENGTH
Local amplitudeY% = 2 ; <- Y DISTORTION STENGTH

SetBuffer ImageBuffer(Img_Temp) : TileBlock Img_Original,size,size
   r = 0.0 : frequence = frequence + 1
   For x = 0 To size-1
   frequenciesY(x) = frequenciesY(x) + speedsY(x)
   y = Sin( frequenciesY(x) ) * amplitudeY
   y = y + Cos(r + frequence) * 10 ; <-- Y WOBBLE STRENGTH
   CopyRect x,size+y,1,size, x,0, ImageBuffer(Img_Temp),ImageBuffer(Img_Water)
Next
TileBlock Img_Water,size,size
r = 0.0
For y = 0 To size-1
   frequenciesX(y) = frequenciesX(y) + speedsX(y)
   x = Cos( frequenciesX(y) ) * amplitudeX
   x = x + Sin(r + frequence) * 10 ; <-- X WOBBLE STRENGTH
   CopyRect size+x,y,size,1, 0,y, ImageBuffer(Img_Temp),ImageBuffer(Img_Water)
   r = r + stp
Next
   SetBuffer BackBuffer()

End Function

• BLITZ SHOWCASE:
PARTICLE CANDY • PARTICLE CANDY FOR iPHONE • SPRITE CANDY • DON'T GET ANGRY! 2-3 • CLICK CLACK XL

	ke^kx	So, Jun 18, 2006 20:58 Antworten mit Zitat
Cool, gefällt mir sehr gut. Kommt gleich in die Codesnippet-Sammlung Mal rumprobieren, wie man das schön einsetzen kann. Jiriki
http://i3u8.blogspot.com Asus Striker II Intel Core2Quad Q9300 @ 2,5 GHz (aber nur zwei Kerne aktiv aufgrund der Instabilität -.-) Geforce 9800 GTX 2GB RAM

ke^kx

So, Jun 18, 2006 20:58
Antworten mit Zitat

Cool, gefällt mir sehr gut. Kommt gleich in die Codesnippet-Sammlung Smile

Mal rumprobieren, wie man das schön einsetzen kann.

Jiriki

http://i3u8.blogspot.com
Asus Striker II
Intel Core2Quad Q9300 @ 2,5 GHz (aber nur zwei Kerne aktiv aufgrund der Instabilität -.-)
Geforce 9800 GTX
2GB RAM