LerpColor on Arc?

Processing Coding Questions
1

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

this is my circle for half circle

image
image599×605 7.9 KB

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
3

Hi @toninhorodrigues

Welcome to the forum! :slight_smile:

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

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!

4

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);
 
  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
image592×591 10.1 KB

:)

1 Like
5

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

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

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

1 Like