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

function setup()
end

function draw()
background(255)

pushMatrix()
translate(WIDTH / 4, HEIGHT / 4)
popMatrix()

pushMatrix()
translate(WIDTH * 3/4, HEIGHT * 3/4)
popMatrix()
end

-- Size is diameter of circle, bcol is color on bottom, tcol is color on top
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.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

self.mesh.colors = {bcol, bcol, tcol, tcol, tcol, bcol }
end

self.mesh:draw()
end
``````

@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

``````