[Newbie] switch to colorMode(HSB) to ColorMode(RGB)

Programming Questions

Fakeinven..

[Newbie] switch to colorMode(HSB) to ColorMode(RGB)

in Programming Questions • 3 months ago

Hi, I have started to learn processing recently and as an exercise I'm trying to make the classic Image Editor, I'm using ControlP5 to edit some values like Hue, saturation and Brightness and also red , green and blue...but I find difficult to switch in the same sketch from HSB to RGB in order to edit all the parameters. I think It's very easy using an "if", but I don't know how :D (I'm trying to resolve it without using functions or class, just becouse I have not studied yet these argouments)

here the code:

import controlP5.*;
ControlP5 cp5;
int bright = 20;
int hue = 20;
int saturation = 20;
int red = 50;
int green = 50;
int blue = 50;
PImage img;
PFont font;
void setup() {
img = loadImage("fagiano.jpg");
font = loadFont("Blanch-Caps-48.vlw");
textFont(font, 20);
size(img.width, img.height);
cp5 = new ControlP5(this);
cp5.addSlider("hue", -200, 200, 50, width-170, 30, 100, 10);
cp5.addSlider("saturation", -200, 200, 50, width-170, 50, 100, 10);
cp5.addSlider("bright", -200, 200, 20, width-170, 70, 100, 10);
cp5.addSlider("red", -200, 200, 50, width-170, 90, 100, 10);
cp5.addSlider("green", -200, 200, 50, width-170, 110, 100, 10);
cp5.addSlider("blue", -200, 200, 20, width-170, 130, 100, 10);
cp5.addButton("SAVE", 1, width-170, 150, 30, 20);
}
void draw() {
loadPixels();
image(img, 0, 0);
for (int x = 0; x < width; x++) {
for (int y = 0; y<height; y++) {
int loc = x + y*img.width;
float h = hue(img.pixels[loc]);
float s = saturation(img.pixels[loc]);
float b = brightness(img.pixels[loc]);
float r = red(img.pixels[loc]);
float g = green(img.pixels[loc]);
float u = blue(img.pixels[loc]);
h+=hue;
s+=saturation;
b+=bright;
r+=red;
g+=green;
u+=blue;
h = constrain(h, 0, 255);
s = constrain(s, 0, 255);
b = constrain(b, 0, 255);
r= constrain(r, 0, 255);
g = constrain(g, 0, 255);
u = constrain(u, 0, 255);
color c = color(h, s, b);
color d = color(r,g,u);
colorMode(HSB, 255, 255, 255, 100);
pixels[loc] = c;
colorMode(RGB, 255, 255, 255, 100);
pixels[loc] = d;
}
}
updatePixels();
noStroke();
smooth();
fill(0, 50);
rect(width-180, 0, width, 180);
fill(255);
text("Edit your photo, Bitch!", width-150, 18 );
}

Replies(3)

benj.n.su..

Re: [Newbie] switch to colorMode(HSB) to ColorMode(RGB)

3 months ago

you are correct that an if statement would probably do the trick. can you say a bit more about under what circumstances you want it to change from RGB to HSB and back again? is it when a key is pressed? a mouse? without that all I can say is this:

suppose it was when a mouse is pressed (I know you said no functions pleased but mousePressed is a freebie that comes with processing:

boolean HSB = true; //add this above
void setup(){
//your setup
}
//then in your draw() loop
void draw() {
loadPixels();
image(img, 0, 0);
for (int x = 0; x < width; x++) {
for (int y = 0; y<height; y++) {
int loc = x + y*img.width;
if(HSB){
float h = hue(img.pixels[loc]);
float s = saturation(img.pixels[loc]);
float b = brightness(img.pixels[loc]);
h+=hue;
s+=saturation;
b+=bright;
h = constrain(h, 0, 255);
s = constrain(s, 0, 255);
b = constrain(b, 0, 255);
color c = color(h, s, b);
pixels[loc] = c;
} else {
float r = red(img.pixels[loc]);
float g = green(img.pixels[loc]);
float u = blue(img.pixels[loc]);
r+=red;
g+=green;
u+=blue;
r= constrain(r, 0, 255);
g = constrain(g, 0, 255);
u = constrain(u, 0, 255);
color d = color(r,g,u);
pixels[loc] = d;
}
}
}
}
void mousePressed(){
HSB !=HSB //acts as toggle switch
if(HSB){
colorMode(HSB, 255, 255, 255, 100);
} else {
colorMode(RGB, 255, 255, 255, 100);
}
}

Fakeinven..

Re: Re: [Newbie] switch to colorMode(HSB) to ColorMode(RGB)

3 months ago

Hi Benj, thanks for reply :) you are right, I'll try to explain better what I want to obtain. On the sketch I have create 6 sliders, the first 3 are relative to Hue, Saturation and Brightness; instead the other 3 are relative to Red, green and blue, What i want to do is when I use the first 3sliders the colorMode is set to HSB and when I use the Red, green and blue slider the colorMode is set on RGB...Becouse if you let start my sketch you will notice that only RGB works and the first 3slider (HSB) doesn't work...

benj.n.su..

Re: [Newbie] switch to colorMode(HSB) to ColorMode(RGB)

3 months ago

okay. i'm not familiar with the p5 library but I imagine that each button has a "click" event that takes care of the question:

1) "Is the mouse on a slider and clicked."

then you also need to answer the question:

2) "Is that slider of the mode that is opposite the current mode."

then what you'll want in your mousePressed() is the following:

void mousePressed(){
if(/any of the sliders have been clicked on) {
if(//that slider is of the mode opposite than the current mode)
HSB !=HSB //acts as toggle to switch modes
}
}
if(HSB){
colorMode(HSB, 255, 255, 255, 100);
} else {
colorMode(RGB, 255, 255, 255, 100);
}
}

EDIT: a previous version of this made reference to the fact that the p5 slider could take care of both questions. in reality i only meant to imply that the p5 slider would handle the first question only.

Top Reply