Camera image on a circle

General
1

Hello experts,

I am trying to render the camera image sprite on a circle instead of a rectangle. The way I have imagined this would work is via an overlay. The problem I have is the circle is not transparent even if I set blend mode to transparent.

Furthermore, Is this the most efficient way to crop the camera image into a circle? Any help appreciated.

    imageOverlay = image(100,100)
    setContext( imageOverlay )
    fill(0, 0, 0, 255)
    rect(0, 0, 100, 100)    
    blendMode(ZERO, ZERO)
    ellipseMode(CORNER)
    local alpha = 0
    fill(0, 0, 0, 0)
    ellipse(0, 0, 100, 100)
    blendMode(NORMAL)
    setContext()

Then in the on draw function.

sprite( CAMERA, self.x, self.y, 100, 100 )
sprite(imageOverlay, self.x, self.y)

2

Here’s a way to do it using CircleMask class


--# Main
function setup()
    parameter.watch("1/DeltaTime")
    
    cameraSource(CAMERA_FRONT)
    
    cm = CircleMask( 200, 360 )
    cm:setTexture(CAMERA)
end

function draw()
    background(40, 40, 50)

    -- Do your drawing here
    translate(WIDTH/2, HEIGHT/2)    
    cm:draw()
end
--# CircleMask
CircleMask = class()

function CircleMask:init(rad, sides)
    -- you can accept and set parameters here
    self.mesh = mesh()

    local verts = {}
    local tex = {}

    for i=1,sides do
        local r1 = (i-1)/sides * math.pi * 2
        local r2 = i/sides * math.pi * 2

        local p1 = vec2( math.cos(r1), math.sin(r1) )
        local p2 = vec2( math.cos(r2), math.sin(r2) )

        -- Verts
        table.insert(verts, p1 * rad)
        table.insert(verts, p2 * rad)
        table.insert(verts, vec2(0,0)) -- center

        -- Tex Coords
        table.insert(tex, (p1 + vec2(1,1)) * 0.5)
        table.insert(tex, (p2 + vec2(1,1)) * 0.5)
        table.insert(tex, vec2(0.5,0.5))
    end

    self.mesh.vertices = verts
    self.mesh.texCoords = tex

    self.mesh:setColors( 255,255,255 )
end

function CircleMask:setDrawFunction(func, w, h)
    self.mesh.texture = image(w,h)
    self.drawFunction = func
end

function CircleMask:setTexture(tex)
    self.mesh.texture = tex
    self.drawFunction = nil
end

function CircleMask:draw()
    if self.drawFunction ~= nil then
        setContext( self.mesh.texture )
        pushMatrix()
        resetMatrix()

        self.drawFunction()

        popMatrix()
        setContext()
    end

    self.mesh:draw()
end
3

JakAttak,

Thanks works like a charm

4

I modified @JakAttak’s code to make circular-mesh-creation a simple function, not a class, so it can more easily be cut-and-pasted into other projects.

I needed to do that kind of thing with it, so I figure other people might want to also.

And because I just can’t stop putting icons on things, I’m attaching a zip that includes an icon. :slight_smile: