So here's the code I found: RippleSprite.cpp
void RippleEffectSprite::update(float delta) { //called per frame
updateRippleParams();
// TODO: improve
float rippleSpeed = 0.25f;
float maxRippleDistance = 1;
m_rippleDistance += rippleSpeed * delta;
m_rippleRange = (1 - m_rippleDistance / maxRippleDistance) * 0.02f;
if (m_rippleDistance > maxRippleDistance) {
updateRippleParams();
unscheduleUpdate(); //stop updating
}
}
void RippleEffectSprite::updateRippleParams() {
getGLProgramState()->setUniformFloat("u_rippleDistance", m_rippleDistance);
getGLProgramState()->setUniformFloat("u_rippleRange", m_rippleRange);
}
Fragment Shader
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform float u_rippleDistance;
uniform float u_rippleRange;
float waveHeight(vec2 p) {
float ampFactor = 2;
float distFactor = 2;
float dist = length(p);
float delta = abs(u_rippleDistance - dist);
if (delta <= u_rippleRange) {
return cos((u_rippleDistance - dist) * distFactor) * (u_rippleRange - delta) * ampFactor;
}
else {
return 0;
}
}
void main() {
vec2 p = v_texCoord - vec2(0.5, 0.5);
vec2 normal = normalize(p);
// offset texcoord along dist direction
vec2 v_texCoord2 = v_texCoord + normal * waveHeight(p);
gl_FragColor = texture2D(CC_Texture0, v_texCoord2) * v_fragmentColor;
}
Now i'll try my best to describe it in English, when run this creates a small circle (well not really circle, more like oval) at the middle of the Sprite, then it slowly expands outward, the textures below get distorted a bit, like a wave. I've been reading stuff about Shaders for a week now and I understand how they work, but i don't understand this algorithm, can anyone explain to me how it created a oval and made it 'evenly',slowly expand?
here's the link of the tutorial: http://www.cocos.com/doc/tutorial/show?id=2121