GUI is shaking (SOLVED)

Questions
#21

That’s really great, thank you very much.

1 Like
#22

I bet that @roccosaienz would know how to do it better / properly.

1 Like
#23

Thanks @Pkeod! Although I’m sure you’re joking, let me tell you that I’m not an expert in shaders, only in math (maybe…) :slight_smile:

Your code seems perfect to me! Only I had to replace “2” by “2.0” in line 11 of the fragment shader:

return x == 0.0 ? sign(y) * PI / 2.0 : atan(y, x);

otherwise I get an error on runtime about “division does not operate on float and int”. The unique improvement I see: I would not use discard… but this is an old story! :slight_smile:

Ciao!

2 Likes
#24

Not joking. I know you have skills and knowledge! :slight_smile:

You’re right! I wish the if could somehow be removed too.

varying mediump vec2 var_texcoord0;

uniform lowp sampler2D texture_sampler;
uniform lowp vec4 tint;
uniform highp vec4 start_stop;

#define PI 3.141592653584

float atan2(in float y, in float x)
{
    return x == 0.0 ? sign(y)*PI/2.0 : atan(y, x);
}

void main()
{
    lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);

    vec4 color = texture2D(texture_sampler, var_texcoord0.xy) * tint_pm;
    
    float angle = atan2( var_texcoord0.y - 0.5, var_texcoord0.x - 0.5 );

    if ( angle > (start_stop.x) && angle < (start_stop.y )  ) {
       color = color * 0.0;
    }

    gl_FragColor = color;
}
2 Likes
#25

@Pkeod you know how to make me work :grinning:

A new version of the same fragment shader without “if” and “discard”. I have tried to add some comments. Is this really an improvement of the filling time? I am not sure and probably depends on the device.

uniform lowp vec4 tint;
uniform highp vec4 start_stop;

#define PI 3.141592653584

float atan2(in float y, in float x)
{
    return x == 0.0 ? sign(y) * PI / 2.0 : atan(y, x);
}

void main()
{
    // angle of the current fragment with respect to the center of the sprite
    float angle = atan2( var_texcoord0.y - 0.5, var_texcoord0.x - 0.5);
    // minimum clipping angle
    float min_angle = start_stop.x;
    // maximum clipping angle
    float max_angle = start_stop.y;
    // a is negative only when angle is in the interval [min_angle, max_angle]
    float a = -(angle - min_angle) * (max_angle - angle);
    // alpha is zero when a is negative and it is tint.w when a is positive
    float alpha = step(0.0, a) * tint.w;
    // premultiply    
    lowp vec4 tint_pm = vec4(tint.xyz * alpha, alpha);
    // sample the texture color and apply tint
    vec4 color = texture2D(texture_sampler, var_texcoord0.xy) * tint_pm;
    
    gl_FragColor = color;
}
3 Likes
#26

Thank you all very much, the code works perfectly. I would just like to ask how is it possible to set the angle of the cake cut directly from the script?

#27

I’m sorry to bother you. I’ve already figured it out. This code sets the angle to 270 degrees:

function init(self)
angle = math.pi / 180 *90
go.set("#sprite", "start_stop.x", -math.pi)
go.set("#sprite", "start_stop.y", -math.pi + angle)
go.animate("#sprite", "start_stop.y", go.PLAYBACK_LOOP_BACKWARD, math.pi, go.EASING_INOUTSINE, 5)
end
#28

I also noticed that when I use the camera following the game object, the inside of the cake is still shaking. Would it be possible to solve this somehow or will I have to come to terms with it if I want to use a camera?

#29

Could you make an isolated project where you can demonstrate the shaking to share? There might still be other options.

1 Like
#30

Hi, I created a simple project to represent a cake shake. When you click somewhere, the ship floats there and only then can you see that the inside of the cake is shaking. Next to the cake is a GO so that the shake is clearly visible.
Thank you all very much for your answers.

synapse - kopie.zip (287.3 KB)

#31

I think it’s because it’s aligning to the pixel grid? Possibly using smoothstep to make the pie mask would be enough to make it not look so bad. Maybe sample direction a little before and behind and try to smooth them.

If you observe the X has similar artifacts but because the sprite is blended with smooth edges it’s harder to notice.

1 Like
#32

Thank you very much, but I have no idea how I could achieve this, don’t you know of an example?