Wobble Shader Demo

GTR

New Member
Tutorial Author
Joined
Sep 23, 2020
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 X:
' 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 X:
//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
 
Top Bottom