Put Photo onto Ellipse

I’d like to take a photo with the camera, paste this onto a ellipse, and use this as one image. I thought setContext might work but I’ve failed so far. Any suggestions?

thanks

You’ve got several options here.

You could create a circular mask and use a mask shader, like this: http://codea.io/talk/discussion/6731/applying-blur-shader-to-a-circle-new-problem-implementing-code

You could write an ellipse shader that accepts a texture (I wonder whether this might be the easiest method. I might have a pop at this).

Or it could be possible to use some blendMode sorcery (I don’t understand blendMode very well. @Jmv38 is the one to ask about this).

blendMode’s will work as a masking technique … but I don’t have any parameters at hand, so search the forums and you’ll find quickly - we had a similar question already

Edit: 2sec search result: http://codea.io/talk/discussion/comment/52525/#Comment_52525

-- apply mask to image a, result in image b
    setContext(b)
        sprite(a,100,100)
        blendMode( ZERO, SRC_ALPHA)
        sprite(mask,100,100)
        blendMode(NORMAL)
    setContext()

Here’s an ellipse texture function:


--# Main
-- Ellipse Texture

function setup()
    anEllipse = EllipseTexture(WIDTH/2,HEIGHT/2,600,400, "Cargo Bot:Game Area")
end

function draw()
    background(40, 40, 50)
    anEllipse:draw()   
end


--# EllipseTexture
function EllipseTexture(x,y,w,h,tex)
    local m = mesh()
    m.texture = tex
    m.shader = shader(EllipseTextureShader.vert, EllipseTextureShader.frag)
    m:addRect(x,y,w,h)
    return m
end

EllipseTextureShader = {
vert=[[
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;
}
]],
frag=[[
precision highp float;

uniform lowp sampler2D texture;

varying lowp vec4 vColor;
varying highp vec2 vTexCoord;

void main()
{
    float dist = length(vTexCoord - vec2(0.5,0.5));
    lowp vec4 col = texture2D( texture, vTexCoord ) * vColor;
    if (dist>0.5) discard;
    else if (dist>0.495) gl_FragColor = col * smoothstep(0.5, 0.495, dist);
    else gl_FragColor = col;
}
]]
}

Here’s a version that doesn’t use much code.

function setup()
    original=image(300,300)
    mask=image(300,300)
    result=image(300,300)

    setContext(original)
    sprite("Cargo Bot:Startup Screen",150,150,200)
    setContext()
        
    setContext(mask)
    ellipse(150,150,200,100)
    setContext()
        
    setContext(result)
    sprite(original,150,150)
    blendMode( ZERO, SRC_ALPHA)
    sprite(mask,150,150)
    blendMode(NORMAL)
    setContext()        
end

function draw()
    background(195, 221, 222, 255)
    sprite(original,WIDTH/2, 600 )
    sprite(mask,WIDTH/2, 350 )
    sprite(result,WIDTH/2, 200 )
end

Thanks for all the help. I’ve managed to get what I want with the following code. When I put this into my app, the actual player graphic will be changeable. Will appreciate advice as I am a beginner. I’m still not clear on using image() in setup. I can’t figure out how the size set there should relate to the actual size of the graphic and ellipse. If I set these the same, the graphics don’t show.

function setup()
    ellipseMode(CENTER)
    spriteMode(CENTER)
    Player=image( 300, 300 ) -- Reserves width, height space for drawing or graphic
    PlayerIcon=image( 300, 300 )
    PlayerWidth, PlayerHeight = spriteSize("SpaceCute:Beetle Ship")
    
    if PlayerWidth < PlayerHeight then
      Biggest = PlayerHeight
    else
      Biggest = PlayerWidth
    end
    
     Adjustment = 60/Biggest

    setContext(Player) -- Causes drawing operations to happen on specified image rather than on screen
      sprite("SpaceCute:Beetle Ship", 150, 150, Biggest * Adjustment ) -- Image name, X, Y, Width, Height
    setContext()

    setContext(PlayerIcon)
      fill(67, 119, 201, 255)
      stroke(0, 0, 0, 255)
      strokeWidth(1)
      ellipse( 150, 150,75,75 ) -- X, Y, Width, Height
      blendMode( NORMAL )
      sprite(Player,150,150)
    setContext()

end

function draw()
    background(195, 221, 222, 255)
    sprite( PlayerIcon, WIDTH/2, HEIGHT/2 ) -- Draws Sprite
end