Color wheel / A self made function

Hi everyone,

I am new to processing and I want to know that how to we convert an angle to color of the circle in processing function. I already have a function that converts low-high to min-max, know as the linearScale() function. The condition is that in the first third of the circle the color should change from red to blue, in the second third the colour should change from blue to green and in the last third the color should change from green to red. As the angle changes we angle changes from 0 to 1/3 of the color should change from 0 to 255. The another condition is that I have to use int c=(r,g,b); where r, g, b are separate variables. Please help me with writing the function that does this work. This is the code I have written. Please me write the return value for function int angleToColor(float);

loat linearScale(float x, float low, float hi, float newLow, float newHi)
{
  return newLow+((x-low)/(hi-low))*(newHi-newLow);
}
int angleToColor(float theta)
{
  int r=255;
  int g=255;
  int b=255;
}
1 Like

Since this is homework no one will do it for you

Instead go on by programming it step by step

You need to break the problem down into simple steps

So first you read: the first third of the circle… how do you translate this into code?

Then look at lerpColor() please

Good luck!

Chrisir

1 Like

Thank you Chrisir for your reply.

1 Like

We want to help but please ask concrete questions where you are stuck

1 Like

I have created the following function which changes the angle to color but I am not able to get the desired results please tell me where am I going wrong.

float linearScale(float x, float low, float hi, float newLow, float newHi)
{
  return newLow+((x-low)/(hi-low))*(newHi-newLow);
}
int angleToColor(float theta)
{
  
  float r=linearScale(theta,0,2*PI/3,0,255);
  float g=linearScale(theta,4*PI/3,2*PI,0,255);
  float b=linearScale(theta,2*PI/3,4*PI/3,0,255);
  return color(r,g,b);
}
1 Like

Make an if…else if … else… clause to distinguish between the 3 thirds of the circle


if(theta>0 && theta < TWO_PI / 3) {

}
else if(theta >= TWO_PI / 3 && theta < ..............) {

}
else {

}

Handle each third separately

make this color angleToColor...

You haven’t used lerpColor yet

1 Like

I did some modification to the code. According to my code I should be getting a value between 0 and 255 but instead I receive a large negative value. Please tell me the error in my code
for the colours:

float linearScale(float x, float low, float hi, float newLow, float newHi)
{
  return newLow+((x-low)/(hi-low))*(newHi-newLow);
}
int angleToColor(float theta)
{
  float r=0;
  float g=0;
  float b=0;
  if(theta>0 && theta<2*PI/3)
  {
   g=0;
   b=linearScale(theta,0,2*PI/3,0,255);
   r=255-b;
  }
  else if(theta>2*PI/3 && theta<4*PI/3)
  {
    r=0;
    g=linearScale(theta,2*PI/3,4*PI/3,0,255);
    b=255-g;
  }
  else 
  {
    b=0;
    r=linearScale(theta,4*PI/3,2*PI,0,255);
    g=255-r;
  }
  return color(r,g,b);
}
void setup()
{
  size(500,500);
  int test=angleToColor(PI/3);
  println(test);
}
1 Like

there is a other way to bring COLOR and ANGLE together, the
https://processing.org/reference/colorMode_.html

and even better look:

void setup() {
 size(200,200);
 colorMode(HSB, TWO_PI,100,100);
 background(0,0,100);
 strokeWeight(2);
 translate( width/2,height/2);
 for ( float c = 0; c <= TWO_PI; c +=0.005 ) {
   push();
   rotate(c);
   stroke(c,100,100);
   line(50,0,90,0);
   pop();
 }
 stroke(0,0,80);
 noFill();
 strokeWeight(5);
 circle(0,0,100);
 circle(0,0,180);
}

1 Like

Thanks kll that is very helpful.

I have written the following code for the color wheel using the separate function. The problem I am getting is that half of the color wheel is the green color. I believe that there is some error in the function angleToColor(). Here is my code please tell me the error in my code.

float angleBetweenPoints(float fromX, float fromY, float toX, float toY)//This function gives the angle between two points.
{
  return atan2(toY-fromY,toX-fromX); 
}
float distanceBetweenPoints(float fromX, float fromY, float toX, float toY)//This gives the distance between two points.
{
  return sqrt(sq(toX-fromX)+sq(toY-fromY));
}
float linearScale(float x, float low, float hi, float newLow, float newHi)//Function that converts one range value to another.
{
  return newLow+((x-low)/(hi-low))*(newHi-newLow);//The formula to convert the one range value to another.
}
int angleToColor(float theta)//Function that converts the angle to colour.
{
  float r=0;//Red colour
  float g=0;//Green colour
  float b=0;//Blue colour
  if(theta>0 && theta<2*PI/3)//If the angle is in the first third of the circle then the colour changes between the red and blue
  {
   g=0;//Green is then set to zero
   b=linearScale(theta,0,2*PI/3,0,255);//The blue colour changes from 0 to 255 as the angle goes from 0 to 2*PI/3
   r=255-b;//The red colour decreases as blue colour increases.
  }
  else if(theta>2*PI/3 && theta<4*PI/3)//If the angle is in the second third of the circle thenthe colour changes between 
  {
    r=0;//Red is then set to zero
    g=linearScale(theta,2*PI/3,4*PI/3,0,255);//The green colour changes from 0 to 255 as the angle goes from 2*PI/3 to 4*PI/3
    b=255-g;//The blue colour decreases as green colour increases.
  }
  else  // if the conditions are false or if the angle lies in the last third of the circle then the red colour changes from 0 to 255 as the angle changes from 4*PI/3 to 2*PI. 
  {
    b=0;//Blue is then set to zero
    r=linearScale(theta,4*PI/3,2*PI,0,255);//The red colour changes from 0 to 255 as the angle goes from 4*PI/3 to 2*PI
    g=255-r;//The green colour decreases as red colour increases.
  }
  return color(r,g,b);//Returns the color() function
}
float distanceToBrightness(float distance, float maxDistance)//This function converts the distance to brightness in the range of 0 to 1 inclusive.
{
 float brightnessValue=0;//The brightness value is initialised to 0
 if(distance<=maxDistance)//If the distance is smaller or equal to max distance then distance is converted to brightness in the range of 0 to 1 inclusive.
 {
   brightnessValue=linearScale(distance,0,maxDistance,0,1);//Converts the distance to brightness using linearScale() function. 
 }
 else if(distance>maxDistance)//If the distance is greater than the maxDistace then the brightness will always be 0.
 {
   brightnessValue=0;//Brightness gets zero.
 }
 return brightnessValue;//Returns the brightness value in the range of 0 to 1 inclusive.
}
int changeColorBrightness(float bright, int c)
{
  int colorBrightness=color(red(c)*bright,green(c)*bright,blue(c)*bright);
  return colorBrightness;
}
void setup()//For testing 
{
  size(500,500);
  noLoop();
  int test=angleToColor(PI/3);
  fill(test);
  rect(30,30,30,30);
}

void draw()
{
  drawWheel();
}

void drawWheel()
{
  for(int i=0; i<=width; i++)
  {
    for(int j=0;j<=height;j++)
    {
      float angle=angleBetweenPoints(width/2, height/2, i,j);
      float distance=distanceBetweenPoints(width/2,height/2,i,j);
      int colour=angleToColor(angle);
      float brightness=distanceToBrightness(distance,250);
      int colorBrightness=changeColorBrightness(brightness,colour);
      stroke(colorBrightness);
      point(i,j);
    }
  }
}

these should be int

float r=0;//Red colour
float g=0;//Green colour
float b=0;//Blue colour

https://processing.org/reference/atan2_.html

      int colour=angleToColor(angle+PI);

using my code:

int ri=30, ro=90;

void setup() {
  size(200, 200);
  colorMode(HSB, TWO_PI, 100, 100);
  background(0, 0, 100);
  strokeWeight(2);
  translate( width/2, height/2);
  for ( float c = 0; c <= TWO_PI; c +=0.005 ) {
    push();
    rotate(c);
    for ( int i = ri; i< ro; i++) {
      stroke(c, 100, map(i, ri, ro, 0, 100));
      point(i, 0);
    }
    pop();
  }
  stroke(0, 0, 80);
  noFill();
  strokeWeight(5);
  circle(0, 0, 2*ri);
  circle(0, 0, 2*ro);
}

SNAG-0017

please note that 0 degree in the circle is to the east (right side) not at the top


// for the text 
int section=-1; 

float linearScale(float x, float low, float hi, float newLow, float newHi)
{
  // the same as command map() btw.
  return newLow+((x-low)/(hi-low))*(newHi-newLow);
}

color angleToColor(float theta) {
  float r=0;
  float g=0;
  float b=0;

  if (theta>0 && theta<TWO_PI/3) {
    g=0;
    b=linearScale(theta, 0.0, TWO_PI/3.0, 0, 255);
    r=255-b;
    section = 1;
  } else if (theta>=TWO_PI/3 && theta<2*TWO_PI/3) {
    r=0;
    g=linearScale(theta, TWO_PI/3.0, 2.0*TWO_PI/3.0, 0, 255);
    b=255-g;
    section = 2;
  } else {
    b=0;
    r=linearScale(theta, 2.0*TWO_PI/3.0, TWO_PI, 0, 255);
    g=255-r;
    section = 3;
  }//else 
  return color(r, g, b);
}//func 

void draw() {

  background(0); 

  float r1= 300; 
  float r2= r1+70; 
  for (int angle = 0; angle<360; angle++) {

    float x= cos(radians(angle)) * r1 + width/2; 
    float y= sin(radians(angle)) * r1 + height/2;

    float x2= cos(radians(angle)) * r2 + width/2; 
    float y2= sin(radians(angle)) * r2 + height/2;

    fill(angleToColor(radians(angle))); 

    noStroke();
    ellipse(x, y, 
      10, 10);

    fill(222);    
    if (angle%2==0)
      text(section, 
        x2, y2);
  }
}

void setup()
{
  size(1500, 900);
  // int test=angleToColor(PI/3);
  //  println(test);
}
1 Like