• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

Wobble Shader Demo

GTR

Member
Tutorial Author
Joined
Sep 23, 2020
Messages
13
Hello Again

Here is another shader demo called wobble, this effect is nice to make flag etc. It use texture.
I used Cerberus logo in Demo without permission .. sorry ! I can remove it if needed.

1601059989776.png


Live demo: http://gigatron3k.free.fr/html5/CX/wobble/CerberusGame.html
wobble.cxs file code;



Cerberus:
' Cerberus X - Wobble Shader
'
' V1.0 GTR 2020


Strict

Import mojo2

'Our custom shader
Class WobbleShader Extends Shader

    Private
    Global _instance:WobbleShader

    Method New()
        Build(LoadString("wobbleshader.glsl"))
    End

    ' this method must be implemented as it sets valid/default material parameters
    Method OnInitMaterial:Void( myMaterial:Material )
        myMaterial.SetTexture("Texture",Texture.White())
        myMaterial.SetScalar("timer", 1.0)
        myMaterial.SetScalar("speed", 10.0)
        myMaterial.SetScalar("freq",  2.0)
        myMaterial.SetScalar("amp",  0.005)
    End
   
    Function Instance:WobbleShader()
        If Not _instance _instance = New WobbleShader()
        Return _instance
    End
       
End


Class WobbleEffect

    Private
    Global _canvas:Canvas
    Field _material:Material  
   
    Method New()

        ' ensure there is a single instance of the canvas
        If Not _canvas _canvas = New Canvas()
        _material = New Material(WobbleShader.Instance())
    End

    Method SetTimer:Void( value:Float )
   
        _material.SetScalar("timer", value)
   
    End
   
    Method SetSpeed:Void( value:Float )
   
        _material.SetScalar("speed", value)
   
    End
   
    Method SetFreq:Void( value:Float )
   
        _material.SetScalar("freq", value)
   
    End
   
    Method SetAmp:Void( value:Float )
   
        _material.SetScalar("amp", value)
   
    End
       
    Method Render:Void(source:Image, target:Image )
   
        _material.SetTexture("Texture", source.Material.ColorTexture)
        _canvas.SetRenderTarget(target)
        _canvas.SetViewport(0, 0, target.Width(), target.Height())
        _canvas.SetProjection2d(0, target.Width(), 0, target.Height())
        _canvas.DrawRect(0, 0, target.Width(), target.Height(), _material)
        _canvas.Flush()
    End
   
End

Class MyApp Extends App

    Field sourceImage:Image
    Field targetImage:Image
    Field myCanvas:Canvas
    Field effect:WobbleEffect
    Field timer:Float = 0.0
    Field speed:Float = 5.0
    Field freq:Float = 32.0
    Field amp:Float = 0.009
'   Field sfx:Sound
   
    Method OnCreate:Int()
      '  sfx = LoadSound("byb.mp3")   
        sourceImage = Image.Load("logo.jpg")  ' Put your logo on wobble.data drawer and load image here like  Image.Load("your_logo.jpg")
        targetImage = New Image(sourceImage.Width(), sourceImage.Height())
        effect = New WobbleEffect()
        myCanvas = New Canvas()
      '  PlaySound(sfx,1,1)
        Return 0
    End
   
    Method OnUpdate:Int()
       
        ' infinite timer
        timer =   Millisecs()/1000.0
        ' frequency
        If KeyDown( KEY_UP )
            freq = Min(freq + 2.0, 256.0)
        Else If KeyDown( KEY_DOWN )
            freq = Max(freq - 2.0, 4.0)
        Endif
        'amplitude
        If KeyDown( KEY_RIGHT )
            amp = Min(amp + 0.001, 0.8)
        Else If KeyDown( KEY_LEFT )
            amp = Max(amp - 0.001, 0.001)
        Endif
       
       
        Return 0
    End
   
   
    Method OnRender:Int()
   
        effect.SetTimer(timer)
        effect.SetSpeed(speed)
        effect.SetFreq(freq)
        effect.SetAmp(amp)
       
        effect.Render(sourceImage, targetImage)
        myCanvas.Clear()
        myCanvas.DrawImage(targetImage, 280, 250, 0, 2, 2)
       
        myCanvas.DrawText("CX WOBBLE DEMO V1.0" , DeviceWidth()/2,450, 1.0)
        myCanvas.DrawText("KEYS : UP/DOWN & LEFT/RIGHT" , DeviceWidth()/2+80,10, 1.0)
       
        myCanvas.Flush()
        Return 0
    End
   
End


Function Main:Int()
    New MyApp()
    Return 0
End

wobbleshader.glsl code on the wobble.data drawer

Cerberus:
//Wobble shader for CX V1.0 GTR 2020

uniform sampler2D Texture;

uniform float timer;
uniform float speed;
uniform float freq;
uniform float amp;

vec2 wobble(vec2 uv, float amplitude, float frequence, float speed) {
    float offset = amplitude*sin(uv.y*frequence+timer*speed);
    return vec2(uv.x+offset, uv.y);
}


void shader(){

    //convert clip position to valid tex coords

    vec2 uv = (b3d_ClipPosition.st/b3d_ClipPosition.w)*0.5+0.5;
   
    uv = wobble(uv, amp, freq, speed );
    vec3 color=texture2D( Texture,uv ).rgb;
   
   
    //write output
    b3d_FragColor=vec4( color,1.0 );
}

You must have logo

Hope you like it
Regards
 
Back
Top Bottom