Circle Gradients

Code Sharing
1

I was looking for a simple way to do circle gradients, and I saw a few discussions on here but all of them were not solved or the solutions weren’t great. Here’s how I solved it: rather than making a mesh with 360 vertices, I just did a standard 6 vertice mesh, and to make it a circle, I set the texture to a plain white ellipse.

--# Main
-- CircleGradient

function setup()
    grad1 = CircleGradient(WIDTH / 3, color(255, 0, 0), color(0, 0, 255))
    grad2 = CircleGradient(WIDTH / 3, color(0, 0, 255), color(0, 255, 0))
end

function draw()
    background(255)
    
    pushMatrix()
    translate(WIDTH / 4, HEIGHT / 4)
    grad1:draw()
    popMatrix()
    
    pushMatrix()
    translate(WIDTH * 3/4, HEIGHT * 3/4)
    grad2:draw()
    popMatrix()
end


--# CircleGradient
CircleGradient = class()

-- Size is diameter of circle, bcol is color on bottom, tcol is color on top
function CircleGradient:init(size, bcol, tcol)
    local rad = size / 2
    
    -- Create blank circle texture
    local texture = image(size, size) setContext(texture) fill(255) noStroke() ellipse(rad, rad, size) setContext()
    
    -- Setup mesh
    self.mesh = mesh()
    self.mesh.texture = texture
    self.mesh.vertices = { vec2(-rad, -rad), vec2(rad, -rad), vec2(rad, rad), vec2(rad, rad), vec2(-rad, rad), vec2(-rad, -rad) }
    self.mesh.texCoords = { vec2(0, 0), vec2(1, 0), vec2(1,1), vec2(1,1), vec2(0, 1), vec2(0,0) }
    self.mesh.colors = {bcol, bcol, tcol, tcol, tcol, bcol }
end

function CircleGradient:setColors(bcol, tcol)
    self.mesh.colors = {bcol, bcol, tcol, tcol, tcol, bcol }
end

function CircleGradient:draw()
    self.mesh:draw()
end
2

@JakAttak Nice job. I’ll have to look over your code to see exactly how it’s working. Here is a version that I had. Move the white circle around the triangle to change the gradients on the outer circle. I didn’t have any idea what to use it for when I wrote it. But that’s probably how I feel about a lot of things I write.


supportedOrientations(LANDSCAPE_ANY)
displayMode(FULLSCREEN)

function setup()
    size=100
    dx=0
    dy=0
    mov=true
    rectMode(CENTER)
    img=image(WIDTH,HEIGHT)
    m2 = mesh()
    m2.vertices={vec2(10,100),vec2(WIDTH-10,100),vec2((WIDTH-20)/2,750)}
    m2:setColors(230,230,230,255)
    m2:color(1,255,0,0,255)
    m2:color(2,0,255,0,255)
    m2:color(3, 0, 0, 255,255)
    setContext(img)
    m2:draw()  
    setContext()
end

function draw()
    background(40,40,50)
    sprite(img,WIDTH/2,HEIGHT/2)
    noFill()
    stroke(255)
    strokeWidth(2)
    ellipse(350+dx,250+dy,size*2)
    if mov then
        getPoints()
        mov=false
    end
end

function getPoints()
    for x=-size,size do
        p=math.sqrt(size*size-x*x)
        for y=-p,p do
            r,g,b,a=img:get(x+350+dx,y+250+dy)  
            img:set(x+200,y+600,r,g,b,a)
        end
    end
end

function touched(t)
    if t.state==MOVING then
        dx=dx+t.deltaX
        dy=dy+t.deltaY
        mov=true
    else
        mov=false
    end        
end