Author Topic: OldSkool - 2D Twister FX (Read 2603 times)

va!n · « **on:** September 19, 2007 »

Here is a small example of an OldSkool Twister fx, based on a source by Jim... If you have any optimisation / modification ideas, just share it with us, thx

Code: [Select]

; -------- small PB example by Mr.Vain/Secretly! aka Thorsten Will in 2007 --------

lScreenW = 640            ; Width
lScreenH = 480            ; Height
lScreenD = 32             ; Depth
lCenterX = lScreenW / 2

InitSprite()
OpenScreen( lScreenW, lScreenH, lScreenD, "Twist Experience by va!n")
 
; -------- Define Colors in an array --------
 
    Dim aColor (4,3)
    
    aColor(0,0) =         255 : aColor(0,1) =           0 : aColor(0,2) =           0
    aColor(1,0) =           0 : aColor(1,1) =           0 : aColor(1,2) =         255
    aColor(2,0) =           0 : aColor(2,1) =         255 : aColor(2,2) =           0
    aColor(3,0) =         255 : aColor(3,1) =         255 : aColor(3,2) =           0
    aColor(4,0) = aColor(0,0) : aColor(4,1) = aColor(0,1) : aColor(4,2) = aColor(0,2)
    
; -------- Define some Twist settings --------

     ascale.f = 3.14/180 
     lTwistWidth = 100
     inc.f       =   1.0            ; drehungs start pos
     iinc.f      =   0.01           ; drehungs speed
     a.f         =   0.25

; -------- Mainloop --------

Repeat
  ClearScreen($0)
  StartDrawing(ScreenOutput())

      ; -------- Reset Values --------
       
    	a   = 0
    	inc = inc + iinc
    
    	For y = 0 To lScreenH+Abs(inc)
      		x1 = lTwistWidth * (4+Abs(inc))/4 * Sin(a*ascale)
      		x2 = lTwistWidth * (4+Abs(inc))/4 * Cos(a*ascale)
      		
      		x1 = Abs(x1)
      		x2 = Abs(x2)
      		
      		q = Int(a/90)
      
       		If q & 1 <> 0 
             Swap x1,x2        ;		t = x1 : x1 = x2 : x2 = t   
       	  EndIf
      
        	ow = lCenterX-((x1+x2)/2)
       		LineXY (   ow, y,    ow+x1, y, RGB( aColor(q+1,0), aColor(q+1,1), aColor(q+1,2) ))
      	  LineXY (ow+x1, y, ow+x1+x2, y, RGB( aColor(q  ,0), aColor(q  ,1), aColor(q  ,2) ))
      		
      		a = a + inc /2
      		
      		If Int(a) <=   0 : a = a + 360 : EndIf
      		If Int(a) >= 360 : a = a - 360 : EndIf
    	Next
    
    	If inc > 2 Or inc < -2 : iinc = -iinc : EndIf 
  StopDrawing()
  
  ; -------- Lets the show start --------
  
  FlipBuffers(1)
  Delay(1)

Until GetAsyncKeyState_(#VK_ESCAPE)
End

energy · « **Reply #1 on:** September 24, 2007 »

Cool Vain....

Works fine...

DeXtr0 · « **Reply #2 on:** November 19, 2007 »

Perfectly done vain.

Well coded, thanks for sharing

DeXtr0 · « **Reply #3 on:** November 25, 2007 »

Hey Va!n,

Can I adapt your code to use with sprites & textures and use it in an intro ?

If yes I'll try to adapt it (maybe not the best code but i'll try to let it work).

Regards,
DeX

P.S. I'll put a big thanks in the scroll lines

va!n · « **Reply #4 on:** November 26, 2007 »

@DeXtr0:
NIce you like the fx.... sure you can use the fx and its generated textures for your intro if you want... still looking forward to see your intro... credits would be nice.. thanks

DeXtr0 · « **Reply #5 on:** November 26, 2007 »

Credits will be the least I can do.

I'll will write a big thanks to you

Again, thanks for sharing...

DeX

va!n · « **Reply #6 on:** November 26, 2007 »

@detro:
ah i notice now... you talked about the simple twister fx... thanks must go to shockwave who inspired me and to... (check the source, forgot the name) of the original conversion

i thought you wanted to use the RotoScope fx,hehe... if you want, you can use the fx too ^^ good luck...

Jim · « **Reply #7 on:** November 26, 2007 »

My 'original' yabasic version here - if you wanna use it, go for it...
http://dbfinteractive.com/index.php?topic=752.0

I'm sure Shockwave posted his version's source too.

Jim

Shockwave · « **Reply #8 on:** November 26, 2007 »

Here is my original source.

It's old now and unoptimised.

Code: [Select]

' ROTATING BAR THING BY SHOCKWAVE (C) 2006 --
'
'
'--------------------------------------------

'===============================================================================
'                      DEFINE CONSTANTS AND INITIALISE STUFF;
'===============================================================================

    OPTION STATIC
    OPTION EXPLICIT

    CONST   XRES = 640 :           ' SCREEN WIDTH.
    CONST   YRES = 480 :           ' SCREEN HEIGHT.
    
    CONST  XCENT = XRES / 2 :      ' X CENTRE OF SCREEN.
    CONST  YCENT = YRES / 2 :      ' Y CENTRE OF SCREEN.

    CONST RAD_2_DEG AS DOUBLE = ( (4*ATN(1)) / 180 )

    #define ptc_win
    #Include Once "tinyptc.bi"
    DIM SHARED AS UINTEGER BUFFER ( XRES * YRES ) :' THE SCREEN BUFFER.
    DECLARE SUB TWISTY()
    DIM SHARED GADD AS DOUBLE
'===============================================================================
'                               OPEN THE SCREEN;
'===============================================================================

        IF ( PTC_OPEN ( "DBF / GVY ADVERTRO", XRES, YRES ) = 0 ) THEN
        END -1
        END IF

'===============================================================================
'                               MAIN LOOP;
'===============================================================================

DO
    TWISTY
    PTC_UPDATE@BUFFER(0)
    ERASE BUFFER
LOOP UNTIL INKEY$=CHR$(27)
END

SUB TWISTY()
    DIM AS INTEGER X1,X2,X3,X4,L,V,RR
    DIM AS INTEGER Y1,Y2,Y3,Y4
    DIM Q AS INTEGER
    DIM AS DOUBLE QQ,VVV
    VVV=.7*SIN(GADD*RAD_2_DEG)
    GADD=GADD+.5
FOR Q =0 TO YRES-1
    X1=XCENT+(150*SIN((GADD+QQ)*RAD_2_DEG))
    X2=XCENT+(150*SIN((GADD+90+QQ)*RAD_2_DEG))
    X3=XCENT+(150*SIN((GADD+180+QQ)*RAD_2_DEG))
    X4=XCENT+(150*SIN((GADD+270+QQ)*RAD_2_DEG))   
    
    'BUFFER(XRES*Q+(X2))=&HFFFFFF
    'BUFFER(XRES*Q+(X3))=&HFFFFFF
    'BUFFER(XRES*Q+(X4))=&HFFFFFF
    IF X2>X1 THEN
        V=X2-X1
        RR=RGB(0,0,V)
        FOR L=X1 TO X2
            BUFFER(XRES*Q+(L))=RR
        NEXT
    END IF
    IF X3>X2 THEN
        V=X3-X2
        RR=RGB(V,0,0)
        FOR L=X2 TO X3
            BUFFER(XRES*Q+(L))=RR
        NEXT
    END IF
    IF X4>X3 THEN
        V=X4-X3
        RR=RGB(V,0,V)
        FOR L=X3 TO X4
            BUFFER(XRES*Q+(L))=RR
        NEXT
    END IF
    IF X1>X4 THEN
        V=X1-X4
        RR=RGB(0,V,0)
        FOR L=X4 TO X1
            BUFFER(XRES*Q+(L))=RR
        NEXT
    END IF



    QQ=QQ+VVV
NEXT Q
END SUB

DeXtr0 · « **Reply #9 on:** November 26, 2007 »

ah ok vain, thanks shockwave for sharing it with us.

This is what I made of it. (and i'll use it that's for sure

)

Cheers,
DeX

energy · « **Reply #10 on:** November 27, 2007 »

Super... Nice made Dex....

Shockwave · « **Reply #11 on:** November 27, 2007 »

It's almost there Dex, but because the textures do not scale horizontally they look like they are sliding which spoils the 3D look of the bar.. Also it runs kind of slow here...

The scaling can even be precalculated and I made a texturemapped twister before... If you darken the image as it precalculates you get light sourcing for free on your bar

Source:

Code: [Select]

' ROTATING BAR THING BY SHOCKWAVE (C) 2006 --
'
'
'--------------------------------------------

'===============================================================================
'                      DEFINE CONSTANTS AND INITIALISE STUFF;
'===============================================================================

    OPTION STATIC
    OPTION EXPLICIT

    CONST  XRES = 640 :           ' SCREEN WIDTH.
    CONST  YRES = 480 :           ' SCREEN HEIGHT.    
    CONST  XCENT = (XRES / 2)     ' X CENTRE OF SCREEN.
    CONST  YCENT = YRES / 2 :      ' Y CENTRE OF SCREEN.

    CONST RAD_2_DEG AS DOUBLE = ( (4*ATN(1)) / 180 )
    '-------------------------------------
    ' Includes.
    '-------------------------------------
    #include once "tinyptc.bi"
    #include "windows.bi"
    
    DIM SHARED AS UINTEGER BUFFER ( XRES * YRES ) :' THE SCREEN BUFFER.
    DIM SHARED AS UINTEGER TEXBUFFER ( 201 , YRES , 200)
    DIM SHARED AS UINTEGER LOGOBUFFER( 201 , YRES )
    
    DECLARE SUB PRECALC()
    DECLARE SUB TWISTY()
    DIM SHARED GADD AS DOUBLE   
    PRECALC()
'===============================================================================
'                               OPEN THE SCREEN;
'===============================================================================

        '#define VK_A   65       'Define key "VK_A" which the ASCII code is 65 (A)

        IF ( PTC_OPEN ( "TEST BY SHOCKWAVE^DBF^S!P", XRES, YRES ) = 0 ) THEN
        END -1
        END IF
    
'       DISABLE V-SYNC;    

        'ptc_setflip(0)  
'===============================================================================
'                               MAIN LOOP;
'===============================================================================
'WHILE(1)
    do
    TWISTY
    PTC_UPDATE@BUFFER(0)
    ERASE BUFFER
    loop until inkey$=chr$(27)
'WEND
END

SUB PRECALC()
    DIM X,Y,XXV,L,R,G,B,SA
    DIM AS DOUBLE INTR,LII,CCL,ALPH
    FOR Y=0 TO YRES-1
    FOR X=0 TO 200
        XXV= (INT(X XOR Y))
        'xxv=int(rnd*(25))+100
        'LOGOBUFFER(X,Y)=RGB(XXV,XXV,XXV)
        LOGOBUFFER(X,Y)=RGB(rnd*(155),xxv,xxv)
    NEXT
    NEXT

    FOR L=200 TO 1 STEP-1
    FOR Y=0 TO YRES-1
        INTR=200/L
        LII=1
        ALPH=.005*L
    FOR X=0 TO L      
    SA=LOGOBUFFER(INT(LII),Y) 
    r = (((SA Shr 16) And 255) * ALPH)
    g = (((SA Shr 8) And 255) * ALPH) 
    b = ((SA And 255) * ALPH) 
    TEXBUFFER(X,Y,L)=RGB(R,G,B)
    LII=LII+INTR
    NEXT
    NEXT
    NEXT
    
END SUB

SUB TWISTY()
    DIM AS INTEGER X1,X2,X3,X4,L,RR,VV
    DIM AS INTEGER Y1,Y2,Y3,Y4
    DIM Q AS INTEGER
    DIM AS DOUBLE QQ,VVV,V,VVVV
    VVV=.4*SIN((GADD)*RAD_2_DEG)
    GADD=GADD+2
FOR Q =0 TO YRES-1
    VVVV=.2*SIN(((GADD+q)/2)*RAD_2_DEG)
    X1=XCENT+(140*(SIN((GADD+QQ)*RAD_2_DEG)))
    X2=XCENT+(140*(SIN((GADD+90+QQ)*RAD_2_DEG)))
    X3=XCENT+(140*(SIN((GADD+180+QQ)*RAD_2_DEG)))
    X4=XCENT+(140*(SIN((GADD+270+QQ)*RAD_2_DEG)))       
    IF X2>X1 THEN
        VV=X2-X1       
        V=0
        FOR L=X1 TO X2
            BUFFER(XRES*Q+(L))= TEXBUFFER (V,Q,VV)
            IF V<200 THEN V=V+1
        NEXT
    END IF
    IF X3>X2 THEN
        VV=X3-X2       
        V=0
        RR=RGB(V,0,0)
        FOR L=X2 TO X3
            BUFFER(XRES*Q+(L))= TEXBUFFER (V,Q,VV)
            IF V<200 THEN V=V+1
        NEXT
    END IF
    IF X4>X3 THEN
        VV=X4-X3       
        V=0
        FOR L=X3 TO X4
            BUFFER(XRES*Q+(L))= TEXBUFFER (V,Q,VV)
            IF V<200 THEN V=V+1
        NEXT
    END IF
    IF X1>X4 THEN
        VV=X1-X4       
        V=0
        FOR L=X4 TO X1
            BUFFER(XRES*Q+(L))= TEXBUFFER (V,Q,VV)
            IF V<200 THEN V=V+1
        NEXT
    END IF
    QQ=QQ+VVV+vvvv
NEXT Q
END SUB

And exe is attached..

Again the source above is really unoptimised, pointers would speed it up a huge amount.

DeXtr0 · « **Reply #12 on:** November 28, 2007 »

Wholy sh*t,

This is indeed what I was looking for.
Awesome job and runs very smooth here.

mm now i need to convert it to PB *lol*

I'll try that but i'm not an expert in conversion..

Again thanks for sharing...

regards,
DeXtr0

P.S. Vain, is the source above (the one from shockwave) the one you based yourself on for the PB conversion ? If yes I can match the 2 to see the difference and learn ...

energy · « **Reply #13 on:** November 28, 2007 »

Very good Shockwave......

Shockwave · « **Reply #14 on:** November 28, 2007 »

Dex, essentially the effect is very simple to code, you have the idea of having 4 points at 90 degree offsets that you draw between, to get to the textured version it really is quite simple, don't worry.

You just have to scale the picture between the points you are drawing and you're there. For example.

if the distance between point a and point b is 100 pixels then you scale that line of picture to be 100 pixels wide.

If the original picture was 200 pixels wide, that would mean that you'd draw the picture in steps of 2.

If the distance between the points is 50 pixels then you'd draw every 4th pixel and so on..

This technique is called linear interpolation and it's the same as you'd use in linear or affine texture mapping or even gourad shading.

If Purebasic has a command to scale a sprite then you don't have to worry about the mechanics of it, just use the scale command to scale the lines.

Please carry on asking questions if you're stuck.

DeXtr0 · « **Reply #15 on:** November 28, 2007 »

Thanks shock for the clear explanation.

Actually as you explain it it does not look that hard

What I have forgotten, and you are right about that, is the zoom command to resize the sprite when necessary.
Actually i just clip it and I don't care about the size *lol*

I'll try to recode that part !

1000x thanks and If I get stuck i'll let you know

Regards,
DeX

DeXtr0 · « **Reply #16 on:** November 28, 2007 »

Hey Shock, Vain,

This is what I coded today.
Looks a lot better !

Thanks for the tips, now I need to improve the speed

DeX

Dr.Death · « **Reply #17 on:** November 28, 2007 »

I like the twister dex

DeXtr0 · « **Reply #18 on:** November 29, 2007 »

Thanks buddy.

It's getting better thanks to the tips of Shock but it's still too slow

Cheers

Shockwave · « **Reply #19 on:** November 29, 2007 »

Looking a lot better now, the way you had it before was only a quarter of the way there, now you are half way there

Here's what you need to do now;

1: To boost the speed...

Precalculate all your scaling, this might mean having one or two hundred versions of your image in memory but who cares, PC's have loads of memory.

2: To make it look better:

If you are going to precalculate the scaling then you may as well make the brightness darker for each image as it gets narrower, this fake light sourcing will really give your twister a lot of depth.

Get rid of the movement you have, making it snap suddenly back and forth makes it look a little bit strange. Make a more imaginative movement.

Have a look at this old thing;

http://dbfinteractive.com/index.php?topic=746.0

Hopefully it will give you some ideas