how to make gradation ellipse using three color?

JJJJJJ

i can make gray gradation ellipse using this way

int x;
int y; 
int gray;

void setup() {
  size(500, 500);
  x = width / 2;
  y = height / 2; 
  noStroke(); 
} 

void draw() {
  gray = 0;
  for(int d = 100; d >= 10; d -= 10) {
    fill(gray);
    ellipse(x, y, d, d);
    gray += 25; 
  } 
}

but how to make gradation ellipse using 3 color (r,g,b)?

i mean, one ellipse with three color gradation

Lord_of_the_Galaxy

fill(r, g, b). Use three variables, r, g, and b.

JJJJJJ

this way can't make one ellipse with three gradation ;(

prince_polka

@JJJJJJ
If I understand you correctly you wan't it to look like this?

int x;
int y; 
int rgb;
float lerpamount;
int middle = #abcdef;
int edge = #fedcba;

void setup() {
  size(500, 500);
  x = width / 2;
  y = height / 2; 
  noStroke(); 
} 


void draw() {
  for(int d = 100; d >= 10; d -= 10) {
    lerpamount = norm(d,100,10);
    rgb = lerpColor(edge,middle,lerpamount);
    fill(rgb);
    ellipse(x, y, d, d);
  } 
}

JJJJJJ

oh!!!!!!!!!!! it looks similar!!!! but is this three color ? it looks like two color ellipse to me,. if you have any other way , plz teach me :) thank you so much X)!!

koogs

cab you draw what you want with photoshop?

prince_polka

@JJJJJJ

if you have any other way

Yes and I was going to ask you to show a picture how you wanted it like koogs, but then I ran your sketch and figured you wanted it like that but with colors.

Do you want it like A, B or something else?

A

B

JJJJJJ

@prince_polka @koogs i want like this! one ellipse with three gradation!

koogs

as per prince_polka's post but changing the colours halfway through

// original by prince polka
// modified for two gradiants

int x;
int y; 
int rgb;
float lerpamount;
int edge = #ff8888; // pinkish
int halfway = #ffff00;  // yellow
int centre = #00ff00;  // green

void setup() {
  size(500, 500);
  x = width / 2;
  y = height / 2; 
  noStroke(); 
} 

void draw() {
  // outer
  for(int d = 200; d >= 100; d -= 10) {
    // map radius to 0-1
    lerpamount = map(d, 200, 100, 0, 1);
    rgb = lerpColor(edge, halfway, lerpamount);
    fill(rgb);
    ellipse(x, y, d, d);
  } 
  // inner
  for(int d = 100; d >= 10; d -= 10) {
    // map radius to 0-1
    lerpamount = map(d, 100, 10, 0, 1);
    rgb = lerpColor(halfway, centre, lerpamount);
    fill(rgb);
    ellipse(x, y, d, d);
  } 
}

prince_polka

I took some time as I rewrote it taking a different approach

PImage circle_grad;
int edge = #ff00ff;
int middle = #ffff00;
int center= #00ff00;
int rgb;
void setup(){
size(500,500);
circle_grad = createImage(200,200,ARGB);
circle_grad.loadPixels();
for (int y=0; y<circle_grad.height; y++){
for (int x=0; x<circle_grad.width; x++){
  float dis = dist(x,y,circle_grad.width/2,circle_grad.height/2);
  dis = map(dis,0,circle_grad.width/2,0,2);
  if(dis<2){
    if(dis>1){ rgb = lerpColor(middle,edge,dis-1);}
    else{ rgb = lerpColor(center,middle,dis);}
  } else{ rgb=0x00000000; }
  circle_grad.pixels[x+circle_grad.width*y]=rgb;
}}
image(circle_grad,150,150);
}

JJJJJJ

@koogs @prince_polka thank you sooooo much!!!!! XD !!!!!!!

jeremydouglass

@JJJJJJJ --

Notice that the built-in function lerpColor() takes an amt from 0-1.0 and interpolates a color between them.

• https://processing.org/reference/lerpColor_.html

Here I've written a new function lerpColors() that takes any number of colors (2, 3, 4... 10 etc.) and then uses lerpColor to interpolate a color that appears somewhere between any two items in the list.

color lerpColors(float amt, color... colors) {
  if(colors.length==1){ return colors[0]; }
  float cunit = 1.0/(colors.length-1);
  return lerpColor(colors[floor(amt / cunit)], colors[ceil(amt / cunit)], amt%cunit/cunit);
}

This function solves the "3 color" problem, but also the "n color" problem.

Here is a simple demo sketch showing how lerpColors() can be used -- either with any number of arguments, or by passing an array of colors as a single argument.

/** lerpColors -- interpolates any list of colors rather than just two
  * Jeremy Douglass 2017-03-27 Processing 3.2.3
 **/

color RED =   color(255,   0,   0);
color GREEN = color(  0, 255,   0);
color BLUE =  color(  0,   0, 255);
color BLACK = color(  0,   0,   0);
color WHITE = color(255, 255, 255);
color[] colors = {RED,GREEN,BLUE,BLACK,WHITE};

void setup() {
  size(400, 400);
  noStroke(); 
  noLoop();
} 

void draw() {
  lerpBar(20, 20, 360, 40, BLACK, WHITE);
  lerpBar(20, 80, 360, 40, RED, GREEN, BLUE);
  lerpBar(20,140, 360, 40, BLUE, GREEN, RED);
  lerpBar(20,200, 360, 40, RED, WHITE, RED, BLACK, RED);
  lerpBar(20,260, 360, 40, GREEN, WHITE, GREEN, WHITE, GREEN, WHITE, GREEN, WHITE, GREEN);
  lerpBar(20,320, 360, 40, colors);
}

void lerpBar(int x, int y, int w, int h, color... colors) {
  pushStyle();
  for (int i=0; i<w; i++) {
    stroke(lerpColors(float(i)/w, colors));
    line(x+i, y, x+i, y+h);
  }
  popStyle();
}

color lerpColors(float amt, color... colors) {
  if(colors.length==1){ return colors[0]; }
  float cunit = 1.0/(colors.length-1);
  return lerpColor(colors[floor(amt / cunit)], colors[ceil(amt / cunit)], amt%cunit/cunit);
}

prince_polka

@Jeremydouglas, that's very cool and easy to use, I made some disco stuff with it

PImage g0,g1,g2,g3;
color alpha = 0x00000000;
void setup(){
size(400,400);
}
void keyPressed(){
loop();
}
void draw(){
  background(32);
  fill(0x0);
  rect(100,100,200,200);
  g0 = radGrad(0,alpha,RC(),RC(),alpha);
  g1 = radGrad(1,RC(),alpha);
  g2 = radGrad(2,0x0,RC(),RC(),RC(),0xffffff);
  g3 = radGrad(3,alpha,RC(),alpha);
  noiseSeed(int(random(0xffffff)));
  image(g3,200,200,200,200);
  image(g2,0,000,200,400);
  image(g1,200,0,200,200);
  image(g0,100,100,200,200);

  noLoop();
}
color lerpColors(float amt, color... colors) {
  if(colors.length==1){ return colors[0]; }
  float cunit = 1.0/(colors.length-1);
  return lerpColor(colors[floor(amt / cunit)], colors[ceil(amt / cunit)], amt%cunit/cunit);
}
int RC(){return int(random(0xffffff))*int(random(256));};
PImage radGrad(int mode, color... colors){
  float dia = 200;
  float rad = 100;
  PImage foo = createImage(int(dia),int(dia),ARGB);
  int rgb=0x0;
  float dis=0.5;
  boolean square=false;
  foo.loadPixels();
  for (int y=0; y<foo.height; y++){
  for (int x=0; x<foo.width; x++){
  switch(mode){
  case 0:dis = sqrt((sq(x-rad)+sq(y-rad))/(rad*rad));break; //dis = min(1.0,norm(dis,0,foo.width/2));
  case 1:dis = abs(x+y-dia)/dia;break;
  case 2:dis = (cos(x*0.1)+PI)/TAU;break;
  case 3:dis = noise(x/rad,y/rad);break;
  default:break;
  }
  if(dis<1 || square){
    rgb=lerpColors(dis,colors);
  } else if(!square){ rgb=alpha; }
  foo.pixels[x+foo.width*y]=rgb;
  }}
  return foo;
}

jeremydouglass

@prince_polka -- Nice use of random color generation, transparency, and noise.

I particularly enjoyed playing with the noise mode.

kfrajer

Impressive! Great work you two \m/

Kf

Lord_of_the_Galaxy

Beautiful. Some lines of code can produce wonderful effects. ^:)^

prince_polka

@jeremydouglas I made a "recolouring" shader that can do gradients (or other patterns) using a spritesheet of grayscale images, instead of switch/case. Transparency needs adjusting though gradients.zip