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