# LerpColor on Arc?

**URL:** <https://discourse.processing.org/t/lerpcolor-on-arc/26880>\
**Category:** Coding Questions\
**Created:** [January 8, 2021, 11:08am UTC](https://discourse.processing.org/t/lerpcolor-on-arc/26880 "2021-01-08T11:08:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![toninhorodrigues](https://avatars.discourse-cdn.com/v4/letter/t/2acd7d/32.png) [@toninhorodrigues](https://discourse.processing.org/u/toninhorodrigues)\
**Post date:** [January 8, 2021, 11:08am UTC](https://discourse.processing.org/t/lerpcolor-on-arc/26880/1 "2021-01-08T11:08:37Z")

</div>

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:

```auto
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);
 
  setGradient(0,0,25,25,c1,c2);
  
}

function setGradient(x,y,w,h,c1,c2){
  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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 8, 2021, 1:30pm UTC](https://discourse.processing.org/t/lerpcolor-on-arc/26880/2 "2021-01-08T13:30:55Z")

</div>

this is my circle for half circle

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d24c9fa4785d0ee55e44353e3ad00a893db74dab.png)

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![MiguelSanches](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miguelsanches/32/11172_2.png) [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)\
**Post date:** [January 8, 2021, 3:59pm UTC](https://discourse.processing.org/t/lerpcolor-on-arc/26880/3 "2021-01-08T15:59:08Z")

</div>

Hi @toninhorodrigues

Welcome to the forum! 🙂

Here is a slightly different version of CodeMasterX, to draw a line instead of circles

```auto
int nPoints=500;
int radius = 200;
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;
    points.add(new PVector(radius*cos(angle), radius*sin(angle)));
  }
}
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!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 8, 2021, 4:38pm UTC](https://discourse.processing.org/t/lerpcolor-on-arc/26880/4 "2021-01-08T16:38:40Z")

</div>

Hello,

Example:

```auto
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);
 
  setGradient();
  }

function setGradient()
  {
  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.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/13d3bb46247584573438b7bed47f38a291acc29b.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 8, 2021, 6:03pm UTC](https://discourse.processing.org/t/lerpcolor-on-arc/26880/5 "2021-01-08T18:03:42Z")

</div>

my version

```auto

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

  setGradient(0, 0, 
    125, 125, 
    c1, c2);
}

void setGradient(float x, float y, 
  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);

    x = 150 * cos(radians(i));
    y = 150 * sin(radians(i));

    fill(strokeC);
    noStroke(); 
    ellipse(x, y, w, h);
  }
}

```

---

<div class="post-metadata">

**Author:** ![toninhorodrigues](https://avatars.discourse-cdn.com/v4/letter/t/2acd7d/32.png) [@toninhorodrigues](https://discourse.processing.org/u/toninhorodrigues)\
**Post date:** [January 9, 2021, 12:34pm UTC](https://discourse.processing.org/t/lerpcolor-on-arc/26880/6 "2021-01-09T12:34:15Z")

</div>

Thank you all for the support! Nearly all the solutions provided suits my needs.