I was asked in the comments how the "coffee-effect" is done.

It pretty much boils down to a screen space (fragment) shader that is driven by a float I call "phase". This was made in godot but should apply to any shader.

There is essentially a combination of 3 phases which define the amplitude, frequency and speed (time factor) of a sine function.

Based on the phase I interpolate between each phase, so e.g. phase 1 defines:

float amp_1 = 0.0075 float speed_1 = 3.0 float freq_1 = 10

I get the final value by interpolating (lerp/mix) between phase 0 and 1:

amp = mix(0, amp_1, phase1) speed = mix(0, speed_1, phase1) freq = mix(0, freq_1, phase1)

The real magic happens in the final function that takes the original screen space coordinate (uv) with the sine function:

uv.x = uv.x * (1 - 2 * amp) + amp uv.x = mix(uv.x - amp, uv.x + amp, (1 + sin(speed * TIME + uv.y * freq))*0.5)

What's up with al these offsets? Well the input uv coordinates range from 0.0-1.0f.

That means that if the sine is applied directly the wave goes below 0 in x and above 1. This ends up in a clamp or duplicate pixel which looks really bad.

So instead we offset the whole effect by the amplitude and scale the final image. Sine we gradually move the amplitude up it is barely noticeable but fixes the ugly effect on the edges of the screen.

That's it. Here the full effect visualized in an ideal world where the coffee cup is never empty:

Note how the heart beat also gets faster with the phase :)

Don't forget to play at:

https://ldjam.com/events/ludum-dare/40/need-more-coffee