Spray paint can

Shaders
1

Hey guys, I started on fragment shaders today and I’ve come up with an efficient solution to something was trying to achieve using image:set(), its a spray can, as you guessed by the title!
Have a look:


--# Main
--Spray demo

function setup()
    m = {}
    txtre = image(30,30)
    setContext(txtre)
    pushStyle()
        for i=1,15 do
        fill(255,255/10)
        ellipse(15,15,i*2)
        end
    popStyle()
    setContext()
    msh = mesh()
    msh.texture = txtre
    rsh = msh:addRect(1,1,1,1)
    msh.shader = shader(shadr.vS,shadr.fS)
    msh.shader.depth = 0.2
    img = image(WIDTH,HEIGHT)
    parameter.color("colour",color(255,255,255))
    parameter.integer("width",10,150,30)
end

function touched(t)
    setContext(img)
    msh:setRect(rsh,t.x,t.y,width,width)
    msh.shader.random = math.random(100,400)/100
    msh:setColors(colour)
    msh:draw()
    setContext()
end

function draw()
    background(255, 255, 255, 255)
    sprite(img,WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
end

--# SprayShader
shadr = {
vS = [[
uniform mat4 modelViewProjection;

attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;

varying lowp vec4 vColor;
varying highp vec2 vTexCoord;

void main()
{
    vColor = color;
    vTexCoord = texCoord;

    gl_Position = modelViewProjection * position;
}
]],
fS = [[

precision highp float;

uniform lowp sampler2D texture;

varying lowp vec4 vColor;

uniform highp float random;
uniform highp float depth;

varying highp vec2 vTexCoord;

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(13.0,79.0))) * 40000.0);
}

void main()
{
    //Sample the texture at the interpolated coordinate
    highp vec2 tc = vTexCoord.xy;
    vec2 dir = 0.5 - tc;
    float dist = sqrt(dir.x*dir.x + dir.y*dir.y);
    dist = (0.5-dist);
    lowp vec4 col = texture2D( texture, tc ) * vColor;
    if (rand(tc*random) > depth) discard;
    col = vec4(col.rgb,dist);
    //Set the output color to the texture color
    gl_FragColor = col;
}
]]}
2

@luatee Nice job. The results look real. EDIT: I spoke a little too soon on the real part. It seems that if you keep spraying the same area, the color should eventually fill in. But there seem to be some other color (black) that shows. To see what I’m talking about, set the background color to white (255) in draw() and do the white spray. You’ll see some other color that starts showing. Is there a way to just spray the selected color.

3

@dave1707 Updated, completely missed that in the shader lab. Thanks, my friend came up with the idea earlier so I thought I might as well get something done, came out better than expected after a few tweaks.

4

@Luatee That’s perfect. Now it looks real.

5

@Luatee I don’t know anything about coding with shaders, but I’m getting interested in it. I looked for shader documentation, but it doesn’t seem to fit with the code I see in this forum. Do you have a link that you used for info that might be of help.

6

@Dave1707 - just for you, start here. They are way easier than they seem at first.

http://coolcodea.wordpress.com/2013/06/01/72-shaders-what-are-they/

7

@dave1707 Well I only started on fragment shaders haven’t bothered checking out vertex but this http://dac.escet.urjc.es/rvmaster/rvmaster/asignaturas/g3d/glsl_quickref.pdf , has everything you need, I just read the syntax and played first before trying to write one.

8

@Luatee Thanks, I’ll look it over.

9

@Ignatz Thanks also.

10

@Luatee - good work, by the way :)>-

11

@luatee , I like it so much , the shader is really coll , nice work

12

@luatee thanks this is great!
Btw, do you know if all what is your pdf cheatsheet is supported by ipad?

13

This is the cheat sheet I use (but only the last 2 pages apply)

http://www.khronos.org/opengles/sdk/docs/reference_cards/OpenGL-ES-2_0-Reference-card.pdf

14

@dave1707 I wrote up a couple of shader examples at http://loopspace.mathforge.org/discussion/19/shader-examples. In that I go through one that is primarily a vertex shader and one that is primarily a fragment shader.

15

Good one @Luatee!

16

@Jmv38 its mainly the math functions and a few others, I’d use @ignatz cheat sheet, has more colour :wink: thanks guys hopefully there’ll be more to do with the shaders