Making a color wheel with Processing

Programming Questions

turnedbar..

Making a color wheel with Processing

in Programming Questions • 3 months ago

Hello again,

I am trying to create a colour wheel which displays the selected (mouse clicked) colour in a box to the right using Processing. I was told that I should build a clock, and then solve for the mouse point using theta.

I am looking for some advice, constructive criticism and discussion on how to go about building this program.

How would I go about allowing users to select mono or complement colours?

Ideally it should look something like this.

http://colorschemedesigner.com/

I have the code for a clock interface but I'm not sure how to implement the colours into it.

//clock code

void setup() {

size(500, 500);

}

void draw() {

background(255);

// get the current time

int s = second(); // values from 0 - 59

int m = minute(); // values from 0 - 59

int h = hour(); // values from 0 - 23

// move origin to center of the screen

translate(250, 250);

// draw the seconds hand

pushMatrix();

rotate(radians(map(s, 0, 59, 0, 360)));

stroke(255, 0, 0);

strokeWeight(1);

line(0, 0, 0, -225);

popMatrix();

// draw the minutes hand

pushMatrix();

rotate(radians(map(m + s / 60.0, 0.0, 60.0, 0.0, 360.0)));

stroke(0, 0, 255);

strokeWeight(5);

line(0, 0, 0, -200);

popMatrix();

// draw the hours hand

pushMatrix();

if (h > 12) h -= 12;

rotate(radians(map(h + m / 60.0, 0.0, 24, 0.0, 360.0)));

strokeWeight(5);

stroke(0, 255, 0);

line(0, 0, 0, -100);

popMatrix();

// "button" at the center

fill(0);

noStroke();

ellipse(0, 0, 15, 15);

}

//Thanks for your wonderful help,

//turnedbarley

Replies(6)

tfguy44

Re: Making a color wheel with Processing

3 months ago

PImage m;void setup(){size(400,400);smooth();ellipseMode(CENTER);background(0);
colorMode(HSB,100);for(int x=0;x<width;x++){for(int y=0;y<height;y++){if(dist(200,200,x,y)<=190){
stroke(map(atan2(x-200,y-200),-PI,PI,0,100),map(dist(200,200,x,y),0,190,0,100),100);
point(x,y);}}}noFill();stroke(0);ellipse(200,200,380,380);m=get();}void draw(){image(m,0,0);
if(mousePressed){fill(get(mouseX,mouseY));stroke(0);ellipse(mouseX,mouseY,30,30);}}

antony74

Re: Making a color wheel with Processing

3 months ago

Yep, the main trick to it is to use the HSB color-space (hue, saturation and brightness), instead of RGB

http://www.openprocessing.org/sketch/62158

Best wishes,

Antony

PhiLho

Re: Making a color wheel with Processing

3 months ago

Or use get() to have the real color at the point the user clicked on...

turnedbar..

Re: Making a color wheel with Processing

3 months ago

Hey, using theta and mapping, I created my own colour wheel (!!)

that is able to display the mono color scheme in a color area.

I have a relatively beginner question -_- sigh** bare with me please!

However, regardless of where I click, the color area appears. How can i create a boolean that will return false if my point is not in the circle, when I made this wheel from arcs rather than an ellipse, so that if I don't click in the circle it won't display the rectangle?

*Also, i'm not sure how to get the complimentary color scheme box to function opposite? Any ideas?

Thanks. Here is my code so far!!^^ I think its kind of cool..

color orange = color(255, 165, 0);

color dark_green = color(0, 50, 0);

color white = color(255, 255, 255);

float rectColor;

float theta;

float r;

float x;

float y;

PImage m;

PFont font;

float hue;

float angle;

String RGBString = "";

float schemeDiam;

color backgroundColor = (0);

float monochromeColor;

float complementColor;

float monoX = 500;

float monoY = 60;

float compX = 600;

float compY = 60;

// - - - - S E T U P - - - - - -

void setup() {

size(800, 400);

theta = 0;

r=1;

smooth();

font = loadFont("MyriadArabic-It-30.vlw");

schemeDiam = 50;

}

// - - - - D R A W - - - - - - -

void draw() {

colorMode(HSB, 360, 100, 100);

background(backgroundColor); // background

textFont(font, 20); // monochrome button

noStroke();

fill(rectColor, 100,100);

ellipse(monoX, monoY, schemeDiam, schemeDiam);

fill(255);

text("monochrome", 465, 100);

if (isInSchemeIcon(mouseX, mouseY, monoX, monoY, schemeDiam)) {

println("show hand!");

cursor(HAND);

}

else {

cursor(ARROW);

}

fill(255);

ellipse(compX, compY, schemeDiam, schemeDiam); // complement button

fill(255);

text("complement", 570, 100);

if (isInSchemeIcon(mouseX, mouseY, compX, compY, schemeDiam)) {

cursor(HAND);

}

else {

cursor(ARROW);

}

textFont(font, 35);

text("Barley's Colour Wheel", 40, 30); // title

drawColorWheel();

// R E C T A N G L E - - - - - - - - - - - - - - - - - - - - - - - -

if(mousePressed){

//using theta, solve for the point where the mouse is to determine the point in the arc

fill(rectColor, 100, 100);

rect(600, 200, 100, 100);

}

void mousePressed()

{

theta = atan2((mouseY-200), (mouseX-200));

rectColor = map(theta, -PI, PI, 0, 360);

//fill with the color matching the wheel

//draw the rectangle

}

// MODIFY IT A LOT ~~~~~

/* if (mousePressed) {

int c = get(mouseX, mouseY);

int red = int(red(c));

int green = int(green(c));

int blue = int(blue(c));

if (!(red == backgroundColor && green == backgroundColor && blue == backgroundColor)) { //not if on the grey background colour

fill(255); //white

RGBString = str(red) + ',' + str(green) + ',' + str(blue);

textAlign(CENTER);

if (!(mouseX < 0 && mouseY > 255)) {

text(rectColor, mouseX, mouseY);

}

//show RGB values next to sample

textAlign(LEFT);

text(RGBString, 40, 15);

}

void drawColorWheel() {

ellipseMode(CENTER); // color wheel start

colorMode(HSB, 360, 100, 100); // HSB mode

//draw 30 circles around the center

for (theta = -PI; theta < PI; theta += TWO_PI/360) {

// x = r * cos(theta) + 250;

// y = r * sin(theta) + 250;

//map the color into the wheel using segments

hue = map(theta, -PI, PI, 0, 360);

//fill in the colour

fill(hue, 100, 100);

//create the arc

arc(200, 200, 150, 150, theta, theta + TWO_PI/360);

}

boolean isInSchemeIcon(float x, float y, float a, float b, float r) {

if (dist(x, y, a, b) <=r) {

return true;

}

else {

return false;

}

antony74

Re: Re: Making a color wheel with Processing

3 months ago

boolean withinWheel = (dist(mouseX, mouseY, 200, 200) <= 75);
color complement = color((rectColor + 180)%360, 100, 100);
fill(complement);
ellipse(compX, compY, schemeDiam, schemeDiam); // complement button

stanlepunk

Re: Making a color wheel with Processing

3 months ago

Hello, I try to make something with processing to start from the same web site like you http://colorschemedesigner.com/ few weeks ago. Chromatic Circle with three entry points. If you interesting the temporary result is here https://github.com/StanLepunK/GUI/tree/master/CercleChromatique3b

++

Top Reply