Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Free-to-Use Circular Texture Shader

in Shaders Posts: 160

Ever want to turn a rectangular image circular? Well, just use this shader. Easy!
Here's an example project that uses the shader. The fragment and vertex shaders are located at the bottom

--# Main
function setup()
    width,height = HEIGHT*0.9,HEIGHT*0.9 -- the initial width and height of the rect
    textures = {
    readImage("Cargo Bot:Codea Icon"),
    readImage("Platformer Art:Block Grass"),
    readImage("Cargo Bot:Background Fade"),
    readImage("Tyrian Remastered:Brown Capsule 1")
    }

    circleM = mesh()
    circleM:addRect(WIDTH/2,HEIGHT/2,width,height) -- add a square to the mesh
    circleM.texture = textures[1]
    circleM.shader = shader(CircleS.vertexShader,CircleS.fragmentShader)
    circleM.shader.circleSize = 1
    parameter.number("Circle_Size",0,1,0.5)
    parameter.integer("Texture",1,#textures)
end

function draw()
    background(255, 130, 0, 255)
    circleM.texture = textures[Texture] -- update the meshes texture
    circleM.shader.circleSize = Circle_Size -- update the shader's uniform, circleSize
    if circleM.texture.width*circleM.texture.height < 6400 then
        noSmooth()
        else
        smooth()
    end
    circleM:draw()
end

function touched(t)
    if t.state ~= ENDED then
        width,height = width + t.deltaX*2, height + t.deltaY*2
        circleM:setRect(1,WIDTH/2,HEIGHT/2,width,height)
    end
end

-- shaders below
CircleS = {
vertexShader = [[
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;
}
]],
fragmentShader = [[
precision highp float;

uniform lowp sampler2D texture;
uniform lowp float circleSize;

varying lowp vec4 vColor;
varying highp vec2 vTexCoord;

void main()
{
    highp vec4 col;
    lowp float dis = distance(vTexCoord,vec2(0.5,0.5)); //get the distance from the texCoord to the center

    if (dis < circleSize) { //circleSize is the size of the circle.
        //Turning a rectangular texture into a circle won't actually be that hard. All we have to do is remove
        //the pixels that are distant from the center. It's really that simple!
        col = texture2D(texture, vTexCoord); //sample the pixel in texture at the position vTexCoord
    }
    else {col = vec4(0,0,0,0);} //remove this pixel
    gl_FragColor = col;
}
]]
}

All I did to make it was re-use some of the rainbow circle shader code and changed it a bit to make this simple and easy-to-use shader.

by the way, am I posting too many of these? I feel like I am

Tagged:

Comments

  • dave1707dave1707 Mod
    Posts: 7,427

    @Kolosso I don't think you're posting too many. These are learning tools for anyone wanting to learn shaders. I think it's easier to learn from examples than trying to read about how something is supposed to work.

  • Posts: 160

    @dave1707 I think I'll put them all in one thread, to avoid spam and keep it neat since I'm probably going to make more of these.

Sign In or Register to comment.