A way to make a rectangular image fit inside an ellipse.

Is there a way to resize a rectangular image from my photos, and have it fit inside an ellipse? The way I’m trying to approach this is to have the image scaled to about the size of the ellipse (in this case 100x100) and then place a circle in the middle. However, I do not know how to make the rest of the image that is outside the circle blend into the background or just not appear on screen. I didn’t know if my image would show up so I added a default one.
Here’s the sample code:


function setup()
    
end

function draw()
    background(210, 52, 57, 59)
    spriteMode(CENTER)
    sprite("Cargo Bot:Background Fade", WIDTH/2, HEIGHT/2, 100,100)
    fill(255, 255, 255, 43)
    ellipse(WIDTH/2, HEIGHT/2, 100,100)
end

Also as a side note, are images from your photos saved into the project once imported, and can I access these photos from Xcode.

You could use a shader, something like:


--# Main

function setup()
    m=mesh()
    img=m:addRect(WIDTH/2,HEIGHT/2,200,200)
    m.shader=shader(circShader.VS,circShader.FS)
    m.shader.texture=readImage("SpaceCute:Background")
    parameter.boolean("border")
end

function draw()
    background(0)
    m:draw()
    if border then
        stroke(255)
        strokeWidth(20)
        noFill()
        ellipseMode(CENTER)
        ellipse(WIDTH/2,HEIGHT/2,200+strokeWidth(),200+strokeWidth())
    end
end


--# Shader
circShader={
VS=[[
//
// A basic vertex shader
//

//This is the current model * view * projection matrix
// Codea sets it automatically
uniform mat4 modelViewProjection;

//This is the current mesh vertex position, color and tex coord
// Set automatically
attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;

//This is an output variable that will be passed to the fragment shader
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;

void main()
{
    //Pass the mesh color to the fragment shader
    vColor = color;
    vTexCoord = texCoord;
    
    //Multiply the vertex position by our combined transform
    gl_Position = modelViewProjection * position;
}

]],
FS=[[

//Default precision qualifier
precision highp float;

//This represents the current texture on the mesh
uniform lowp sampler2D texture;

//The interpolated vertex color for this fragment
varying lowp vec4 vColor;

//The interpolated texture coordinate for this fragment
varying highp vec2 vTexCoord;

void main()
{
    //Sample the texture at the interpolated coordinate
    lowp vec4 col = texture2D( texture, vTexCoord ) * vColor;
    vec2 center=vec2(0.5);
    vec2 dist=vTexCoord-center;
    float d=length(dist);
    if (d>=0.5) discard;
    
    //Set the output color to the texture color
    gl_FragColor = col;
}

]]
}

@Coder. Thank you for your response, but shaders are way out of my knowledge level regarding Lua and Codea. I think I’ll just crop the photo in Photoshop and import it into Codea.

No problem. But shaders aren’t that difficult one you get the hang of them. This shader is basically saying if the distance from the centre of the circle to this pixel is less than the radius of the circle(this pixel is within the circle) then draw it

@Ignatz has some great tutorials for shaders here