# Color wheel / A self made function
**URL:** https://discourse.processing.org/t/color-wheel-a-self-made-function/9281
**Category:** Coding Questions
**Tags:** homework
**Created:** [March 13, 2019, 9:31pm UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281 "2019-03-13T21:31:46Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Aryan\_Pandhare](https://discourse.processing.org/u/Aryan_Pandhare)
#### Post date: [March 13, 2019, 9:31pm UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/1 "2019-03-13T21:31:46Z")
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);
```auto
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;
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 13, 2019, 10:09pm UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/2 "2019-03-13T22:09:56Z")
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
---
### Author:  [@Aryan\_Pandhare](https://discourse.processing.org/u/Aryan_Pandhare)
#### Post date: [March 13, 2019, 10:19pm UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/3 "2019-03-13T22:19:12Z")
Thank you Chrisir for your reply.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 13, 2019, 10:33pm UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/4 "2019-03-13T22:33:10Z")
We want to help but please ask concrete questions where you are stuck
---
### Author:  [@Aryan\_Pandhare](https://discourse.processing.org/u/Aryan_Pandhare)
#### Post date: [March 13, 2019, 11:43pm UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/5 "2019-03-13T23:43:42Z")
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.
```auto
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);
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 14, 2019, 8:09am UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/6 "2019-03-14T08:09:34Z")
> [@Chrisir](#):
>
> first you read: the first third of the circle… how do you translate this into code?
Make an if…else if … else… clause to distinguish between the 3 thirds of the circle
```auto
if(theta>0 && theta < TWO_PI / 3) {
}
else if(theta >= TWO_PI / 3 && theta < ..............) {
}
else {
}
```
Handle each third separately
> [@Aryan\_Pandhare](#):
>
> int angleToColor(float theta)
make this `color angleToColor...`
You haven’t used `lerpColor` yet
---
### Author:  [@Aryan\_Pandhare](https://discourse.processing.org/u/Aryan_Pandhare)
#### Post date: [March 15, 2019, 11:35pm UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/7 "2019-03-15T23:35:10Z")
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:
```auto
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);
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [March 16, 2019, 12:41am UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/8 "2019-03-16T00:41:55Z")
there is a other way to bring COLOR and ANGLE together, the
[https://processing.org/reference/colorMode\_.html](https://processing.org/reference/colorMode_.html)
and even better look:
```auto
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);
}
```
---
### Author:  [@Aryan\_Pandhare](https://discourse.processing.org/u/Aryan_Pandhare)
#### Post date: [March 16, 2019, 2:39am UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/9 "2019-03-16T02:39:41Z")
Thanks kll that is very helpful.
---
### Author:  [@Aryan\_Pandhare](https://discourse.processing.org/u/Aryan_Pandhare)
#### Post date: [March 20, 2019, 3:43am UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/10 "2019-03-20T03:43:12Z")
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.
```auto
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);
}
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 20, 2019, 8:54am UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/11 "2019-03-20T08:54:06Z")
these should be `int`
```auto
float r=0;//Red colour
float g=0;//Green colour
float b=0;//Blue colour
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [March 20, 2019, 9:50am UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/12 "2019-03-20T09:50:34Z")
[https://processing.org/reference/atan2\_.html](https://processing.org/reference/atan2_.html)
```auto
int colour=angleToColor(angle+PI);
```
using my code:
```auto
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);
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 20, 2019, 8:48pm UTC](https://discourse.processing.org/t/color-wheel-a-self-made-function/9281/13 "2019-03-20T20:48:26Z")
please note that 0 degree in the circle is to the east (right side) not at the top
```auto
// 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 && 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);
}
```