water (ripple) effect at touch position

Questions
1

I’m working on an app right now, and it would be cool if I could add a ripple (water) effekt from codeas shader lab, but instead of applying it to the center of an image - I want its center to be at a touch position… Is that possible?

2

evil clone? what do you mean? :smiley:

3

@se24vad - I’m sure it’s possible, but it will involve editing the shader lab ripple code. I’m not volunteering…

4

ok, it’s possible. at least, it sounds promising… but who is able to take that task? unfortunately I hate shaders, because I don’t understand them and thats why I cannot programm it myself… ((

5

Pretty easy to do, I think. In the ripple shader, changing the -1.0 in the assignment to highp vec2 p seems to offset the ripple point. (-1.5 is top right, -0.5 is bottom left.)

6

Is this the sort of effect you want in front of an image?
http://www.youtube.com/watch?v=OaFfCJwniIM

7

Perhaps you could draw the screen on an image, and apply that image to a mesh with the ripple shader? That wouldn’t work very well with moving objects though.

8

I assume you want to make it have the effect of dragging, though, correct? If you could find the formula for what @Luatee posted, you could probably make a shader out of that.

9

@se24vad - I had a go, below. However, the ripple effect doesn’t seem to start off at the centre and move outward, it starts off moving all over

-- Ripple

function setup()
    m=mesh()
    img=readImage("Cargo Bot:Codea Icon")
    scale=2
    m:addRect(0,0,img.width*scale,img.height*scale)
    m.texture=img
    m.shader=shader(ripple.v,ripple.f)
    m.shader.freq=1
    m.shader.centre=vec2(0.5,0.5)
    m.pos=vec2(WIDTH/2,HEIGHT/2)  --position of image on screen
    m.w,m.h=img.width*scale,img.height*scale
end

function draw()
    background(40, 40, 50)
    pushMatrix()
    translate(m.pos.x,m.pos.y)
    m.shader.time=ElapsedTime
    m:draw()
    popMatrix()
end

function touched(t)
    if t.state==ENDED and math.abs(t.x-m.pos.x)<=m.w/2 and math.abs(t.y-m.pos.y)<=m.h/2 then
       m.shader.centre=vec2((t.x-m.pos.x)/m.w+.5,(t.y-m.pos.y)/m.h+.5)
        print("touched",m.shader.centre)
    end
end

ripple={
v=[[
uniform mat4 modelViewProjection;
attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;

void main()
{
    gl_Position = modelViewProjection * position;
    vColor.rgb = color.rgb * color.a;
    vColor.a = color.a;
    vTexCoord = texCoord;
}
]],
f=[[
uniform lowp sampler2D texture;
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;
uniform highp float time;
uniform highp float freq;
uniform lowp vec2 centre;

void main()
{
    highp vec2 tc = vTexCoord.xy;
    highp vec2 p =  tc-centre; //-1.0 + 2.0 * tc;
    highp float len = length(p);
    highp vec2 uv = tc + (p/len)*freq*cos(len*24.0-time*4.0)*0.03;
    highp vec4 col = texture2D(texture,uv);
    gl_FragColor = vec4(col.rgb * vColor.rgb, col.a);
}
]]
}
10

I am quite interested in @luatee mesh wave: seem to behave like real waves, what is the formula for managing this?

11

@Jmv38 Well I was thinking of creating the same sort of effect he had in 2D using no fill circles with a stroke and then have them expand and fade, they wouldn’t bounce off walls but it wouldn’t look too bad, have a gradient in the stroke using the shader and apply this texture to I think it was tnlogy or space monkeys code for height mapping textures… That’s 3D though but it’s a fun idea.

12

I tried to add a uniform array to the shader to add some ripples to the vertex shader, but Codea doesnt seem to support uniform array.

But you can seach for grass simulation in the forum to see an example where touch points affect a vertex shader.

13

@Ignatz omg!!! \. that looks like exactly what I needed, I will explore the code now…))))) thanks a million times!

14

have you seen the free app fluid on the appstore-multitouch ripples
https://itunes.apple.com/gb/app/fluid/id312575632?mt=8