 # LerpColor on Arc?

Hi there,

I’m fairly new to Processing, and have been trying to make a single arc with a gradient style.

I tried searching around, but have only found gradient codes for straight line objects, such as rectangle, the full canvas, etc. Since I’m trying to make a “curve”, I’ve been struggling to use LerpColor to make it happen.

Any Ideas on how to handle?

So far I’ve come up only with this:

``````var c1;
var c2;
function setup() {
createCanvas(600,600);
c1 = color(0,0,0);
c2 = color(255,255,55);
angleMode(DEGREES);
}

function draw() {
background(15,15,15);
translate(width/2,height/2);

}

noFill();
for (var i = 0; i < 360; i++){
var colormap = map(i,0,360,0,1);
var strokeC = lerpColor(c1,c2,colormap);
x = 150 * cos(i);
y = 150 * sin(i);
stroke(strokeC);
ellipse(x,y,w,h);
}
}
``````

this is my circle for half circle

``````color start = color(255,0,0), end = color(0,0,255);
int age = 0, maxAge = 100,r=200, acc = 100;
void setup() {
size(600,600);
}
void draw() {
background(0);
translate(width/2,height/2);
age = 0;
for(int i = 0; i < acc; i++) {
age++;
float a = PI/acc; //half circle
fill( map(age,0,maxAge,red(start),red(end)),map(age,0,maxAge,green(start),green(end)),map(age,0,maxAge,blue(start),blue(end)));
ellipse(cos(a*i)*r,sin(a*i)*r,5,5);
}
}
``````
1 Like

Welcome to the forum! Here is a slightly different version of CodeMasterX, to draw a line instead of circles

``````int nPoints=500;
color from = color(255, 0, 0), to = color(0, 255, 0);
ArrayList<PVector> points;
void setup() {
size(600, 600);
points = new ArrayList();
for (int p = 0; p < nPoints; p++) {
float angle = PI*p/nPoints;
}
}
void draw() {
background(0);
translate(width/2, height/2);
noFill();
strokeWeight(3);
for (int i = 1; i < points.size(); i++) {
stroke(lerpColor(from, to, float(i)/nPoints));

line(points.get(i-1).x, points.get(i-1).y, points.get(i).x, points.get(i).y);
}
}
``````

Hope it helps!

Hello,

Example:

``````function setup()
{
createCanvas(600,600);
c1 = color(255, 0, 0);
c2 = color(0, 255, 55);
}

function draw()
{
background(15, 15, 15);
translate(width/2, height/2);

}

{
div = 15;
step = TWO_PI/div;

for (i = 0; i < div; i+= 1)
{
colormap = map(i, 0, div, 0, 1);
strokeC = lerpColor(c1, c2, colormap);

th = i * step;
x1 = 150 * cos(th);
y1 = 150 * sin(th);

stroke(strokeC);
strokeWeight(10);

noFill();
//point(x1, y1);
arc(0, 0, 2*150, 2*150, th, (i+1)*step);
}
}
``````

I removed the var and let… you can add them back as required.

`:)`

1 Like

my version

``````
color  c1;
color  c2;

void setup() {
size(600, 600);
c1 = color(0, 0, 0);
c2 = color(255, 255, 55);
}

void draw() {
background(15, 15, 15);
translate(width/2, height/2);

125, 125,
c1, c2);
}

float w, float h,
color c1, color c2) {

noFill();

for (int i = 0; i < 360; i++) {

float colormap = map(i, 0, 360, 0, 1);
color strokeC = lerpColor(c1, c2, colormap);