Help with image filter code - How do I enable the image to change but the filter results to stay the same?
in
Programming Questions
•
7 months ago
I'm a beginner to Processing and am creating a simple program that allows the user to overlay simple filters (such as black & white, invert etc.) onto an image.
I have created the code and have made it work for one image, but either:
A. The code allows the user to select any of the filters randomly, and the image only shows that filter but the code only works with that specific image.
or
B. The filters 'pile up' on top of each other so that they cannot be 'reset' but have the code work with any image.
(I apologise if that doesn't make sense, this is all very new to me!).
I have posted the code below, currently set up for B.
How do I allow the user to (like in A) select any filter and view the results but also allow for multiple images to be used?
Thanks,
Niall
NB: The image can be replaced with any example you may have, it shouldn't effect the GUI elements etc.
----
PImage img;
int dimension;
void setup(){
img = loadImage("Prince of Cats.jpg");
dimension = img.width*img.height;
size(img.width,img.height+80);
img.loadPixels();
}
void draw(){
image(img, 0, 40);
colorMode(HSB,360,100,255);
smooth();
// TOP RECTANGLE W/ GRADIENT
rectMode(CENTER);
noStroke();
fill(50);
rect(img.width/2, 20, img.width, 40);
fill(54);
rect(img.width/2, 20, img.width, 36);
fill(58);
rect(img.width/2, 20, img.width, 32);
fill(62);
rect(img.width/2, 20, img.width, 28);
fill(66);
rect(img.width/2, 20, img.width, 24);
fill(70);
rect(img.width/2, 20, img.width, 20);
fill(74);
rect(img.width/2, 20, img.width, 16);
fill(78);
rect(img.width/2, 20, img.width, 12);
fill(82);
rect(img.width/2, 20, img.width, 8);
// BOTTOM RECTANGLE W/ GRADIENT
rectMode(CENTER);
noStroke();
fill(30);
rect(img.width, img.height+40, img.width*2, 80);
fill(34);
rect(img.width, img.height+40, img.width*2, 76);
fill(38);
rect(img.width, img.height+40, img.width*2, 72);
fill(42);
rect(img.width, img.height+40, img.width*2, 68);
fill(46);
rect(img.width, img.height+40, img.width*2, 64);
fill(50);
rect(img.width, img.height+40, img.width*2, 60);
fill(54);
rect(img.width, img.height+40, img.width*2, 56);
fill(58);
rect(img.width, img.height+40, img.width*2, 52);
fill(62);
rect(img.width, img.height+40, img.width*2, 48);
fill(66);
rect(img.width, img.height+40, img.width*2, 44);
fill(70);
rect(img.width, img.height+40, img.width*2, 40);
fill(74);
rect(img.width, img.height+40, img.width*2, 36);
fill(78);
rect(img.width, img.height+40, img.width*2, 32);
fill(82);
rect(img.width, img.height+40, img.width*2, 28);
fill(86);
rect(img.width, img.height+40, img.width*2, 24);
fill(90);
rect(img.width, img.height+40, img.width*2, 20);
fill(88);
rect(img.width, img.height+40, img.width*2, 20);
// SEPARATORS
// TOP
rectMode(CENTER);
noStroke();
fill(0,0,200);
rect(img.width/2-img.width/2+4, img.height+40, 2, 65, 1);
rectMode(CENTER);
noStroke();
fill(0,0,200);
rect(img.width-5, img.height+40, 2, 65, 1);
// BOTTOM
rectMode(CENTER);
noStroke();
fill(0,0,200);
rect(img.width/2-img.width/2+4, img.height-img.height+20, 2, 31, 1);
rectMode(CENTER);
noStroke();
fill(0,0,200);
rect(img.width/2+img.width/2-4, img.height-img.height+20, 2, 31, 1);
// BUTTON GRAPHICS
ellipseMode(CENTER);
stroke(0);
strokeWeight(2);
fill(200,100,250);
ellipse(img.width/2-105, img.height+30, 30, 30);
fill(200,100,200);
ellipse(img.width/2-40, img.height+30, 30, 30);
fill(200,100,150);
ellipse(img.width/2+30, img.height+30, 30, 30);
fill(200,100,100);
ellipse(img.width/2+95, img.height+30, 30, 30);
// BUTTON LABELS
textSize(20);
fill(0,0,255);
text("Simple Filter Gallery", img.width/2-92, img.height-img.height+28);
textSize(20);
fill(0,0,255);
text("1", img.width/2-110, img.height+37);
text("2", img.width/2-45, img.height+37);
text("3", img.width/2+25, img.height+37);
text("4", img.width/2+88, img.height+37);
textSize(14);
fill(0,0,255);
text("Original", img.width/2-130, img.height+60);
text("B&W", img.width/2-55, img.height+60);
text("Threshold", img.width/2-3, img.height+60);
text("Invert", img.width/2+77, img.height+60);
}
void mousePressed() {
int button_onex = img.width/2-118;
int button_one_2x = img.width/2-92;
int button_oney = img.height+17;
int button_one_2y = img.height+43;
int button_twox = img.width/2-53;
int button_two_2x = img.width/2-27;
int button_twoy = img.height+17;
int button_two_2y = img.height+43;
int button_threex = img.width/2+17;
int button_three_2x = img.width/2+43;
int button_threey = img.height+17;
int button_three_2y = img.height+43;
int button_fourx = img.width/2+82;
int button_four_2x = img.width/2+108;
int button_foury = img.height+17;
int button_four_2y = img.height+43;
if ((mouseX>button_onex)&(mouseX<button_one_2x)&(mouseY>button_oney)&(mouseY<button_one_2y)) {
println("Original");
// CURSOR HIGHLIGHT
ellipseMode(CENTER);
noStroke();
fill(0,0,0);
ellipse(mouseX,mouseY,20,20);
}
if ((mouseX>button_twox)&(mouseX<button_two_2x)&(mouseY>button_twoy)&(mouseY<button_two_2y)) {
println("Black & White");
img.filter(GRAY);
// CURSOR HIGHLIGHT
ellipseMode(CENTER);
noStroke();
fill(0,0,0);
ellipse(mouseX,mouseY,20,20);
}
if ((mouseX>button_threex)&(mouseX<button_three_2x)&(mouseY>button_threey)&(mouseY<button_three_2y)) {
println("Threshold");
img.filter(THRESHOLD);
// CURSOR HIGHLIGHT
ellipseMode(CENTER);
noStroke();
fill(0,0,0);
ellipse(mouseX,mouseY,20,20);
}
if ((mouseX>button_fourx)&(mouseX<button_four_2x)&(mouseY>button_foury)&(mouseY<button_four_2y)) {
println("Invert");
img.filter(INVERT);
// CURSOR HIGHLIGHT
ellipseMode(CENTER);
noStroke();
fill(0,0,0);
ellipse(mouseX,mouseY,20,20);
}
}
I have created the code and have made it work for one image, but either:
A. The code allows the user to select any of the filters randomly, and the image only shows that filter but the code only works with that specific image.
or
B. The filters 'pile up' on top of each other so that they cannot be 'reset' but have the code work with any image.
(I apologise if that doesn't make sense, this is all very new to me!).
I have posted the code below, currently set up for B.
How do I allow the user to (like in A) select any filter and view the results but also allow for multiple images to be used?
Thanks,
Niall
NB: The image can be replaced with any example you may have, it shouldn't effect the GUI elements etc.
----
PImage img;
int dimension;
void setup(){
img = loadImage("Prince of Cats.jpg");
dimension = img.width*img.height;
size(img.width,img.height+80);
img.loadPixels();
}
void draw(){
image(img, 0, 40);
colorMode(HSB,360,100,255);
smooth();
// TOP RECTANGLE W/ GRADIENT
rectMode(CENTER);
noStroke();
fill(50);
rect(img.width/2, 20, img.width, 40);
fill(54);
rect(img.width/2, 20, img.width, 36);
fill(58);
rect(img.width/2, 20, img.width, 32);
fill(62);
rect(img.width/2, 20, img.width, 28);
fill(66);
rect(img.width/2, 20, img.width, 24);
fill(70);
rect(img.width/2, 20, img.width, 20);
fill(74);
rect(img.width/2, 20, img.width, 16);
fill(78);
rect(img.width/2, 20, img.width, 12);
fill(82);
rect(img.width/2, 20, img.width, 8);
// BOTTOM RECTANGLE W/ GRADIENT
rectMode(CENTER);
noStroke();
fill(30);
rect(img.width, img.height+40, img.width*2, 80);
fill(34);
rect(img.width, img.height+40, img.width*2, 76);
fill(38);
rect(img.width, img.height+40, img.width*2, 72);
fill(42);
rect(img.width, img.height+40, img.width*2, 68);
fill(46);
rect(img.width, img.height+40, img.width*2, 64);
fill(50);
rect(img.width, img.height+40, img.width*2, 60);
fill(54);
rect(img.width, img.height+40, img.width*2, 56);
fill(58);
rect(img.width, img.height+40, img.width*2, 52);
fill(62);
rect(img.width, img.height+40, img.width*2, 48);
fill(66);
rect(img.width, img.height+40, img.width*2, 44);
fill(70);
rect(img.width, img.height+40, img.width*2, 40);
fill(74);
rect(img.width, img.height+40, img.width*2, 36);
fill(78);
rect(img.width, img.height+40, img.width*2, 32);
fill(82);
rect(img.width, img.height+40, img.width*2, 28);
fill(86);
rect(img.width, img.height+40, img.width*2, 24);
fill(90);
rect(img.width, img.height+40, img.width*2, 20);
fill(88);
rect(img.width, img.height+40, img.width*2, 20);
// SEPARATORS
// TOP
rectMode(CENTER);
noStroke();
fill(0,0,200);
rect(img.width/2-img.width/2+4, img.height+40, 2, 65, 1);
rectMode(CENTER);
noStroke();
fill(0,0,200);
rect(img.width-5, img.height+40, 2, 65, 1);
// BOTTOM
rectMode(CENTER);
noStroke();
fill(0,0,200);
rect(img.width/2-img.width/2+4, img.height-img.height+20, 2, 31, 1);
rectMode(CENTER);
noStroke();
fill(0,0,200);
rect(img.width/2+img.width/2-4, img.height-img.height+20, 2, 31, 1);
// BUTTON GRAPHICS
ellipseMode(CENTER);
stroke(0);
strokeWeight(2);
fill(200,100,250);
ellipse(img.width/2-105, img.height+30, 30, 30);
fill(200,100,200);
ellipse(img.width/2-40, img.height+30, 30, 30);
fill(200,100,150);
ellipse(img.width/2+30, img.height+30, 30, 30);
fill(200,100,100);
ellipse(img.width/2+95, img.height+30, 30, 30);
// BUTTON LABELS
textSize(20);
fill(0,0,255);
text("Simple Filter Gallery", img.width/2-92, img.height-img.height+28);
textSize(20);
fill(0,0,255);
text("1", img.width/2-110, img.height+37);
text("2", img.width/2-45, img.height+37);
text("3", img.width/2+25, img.height+37);
text("4", img.width/2+88, img.height+37);
textSize(14);
fill(0,0,255);
text("Original", img.width/2-130, img.height+60);
text("B&W", img.width/2-55, img.height+60);
text("Threshold", img.width/2-3, img.height+60);
text("Invert", img.width/2+77, img.height+60);
}
void mousePressed() {
int button_onex = img.width/2-118;
int button_one_2x = img.width/2-92;
int button_oney = img.height+17;
int button_one_2y = img.height+43;
int button_twox = img.width/2-53;
int button_two_2x = img.width/2-27;
int button_twoy = img.height+17;
int button_two_2y = img.height+43;
int button_threex = img.width/2+17;
int button_three_2x = img.width/2+43;
int button_threey = img.height+17;
int button_three_2y = img.height+43;
int button_fourx = img.width/2+82;
int button_four_2x = img.width/2+108;
int button_foury = img.height+17;
int button_four_2y = img.height+43;
if ((mouseX>button_onex)&(mouseX<button_one_2x)&(mouseY>button_oney)&(mouseY<button_one_2y)) {
println("Original");
// CURSOR HIGHLIGHT
ellipseMode(CENTER);
noStroke();
fill(0,0,0);
ellipse(mouseX,mouseY,20,20);
}
if ((mouseX>button_twox)&(mouseX<button_two_2x)&(mouseY>button_twoy)&(mouseY<button_two_2y)) {
println("Black & White");
img.filter(GRAY);
// CURSOR HIGHLIGHT
ellipseMode(CENTER);
noStroke();
fill(0,0,0);
ellipse(mouseX,mouseY,20,20);
}
if ((mouseX>button_threex)&(mouseX<button_three_2x)&(mouseY>button_threey)&(mouseY<button_three_2y)) {
println("Threshold");
img.filter(THRESHOLD);
// CURSOR HIGHLIGHT
ellipseMode(CENTER);
noStroke();
fill(0,0,0);
ellipse(mouseX,mouseY,20,20);
}
if ((mouseX>button_fourx)&(mouseX<button_four_2x)&(mouseY>button_foury)&(mouseY<button_four_2y)) {
println("Invert");
img.filter(INVERT);
// CURSOR HIGHLIGHT
ellipseMode(CENTER);
noStroke();
fill(0,0,0);
ellipse(mouseX,mouseY,20,20);
}
}
1