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
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