Create a button that changes strokeColor - Please help

Programming Questions

sofi_smith

Create a button that changes strokeColor - Please help

in Programming Questions • 1 year ago

Hi there, I'm new to processing and am trying to create a canvas in which you can edit and enhance a given image (roughly) using the draw Stroke tool and then save it at the end.

I've set up the scene so that there is my image on a background and I can draw on it. But I'd like there to be a button to change the Stroke colour from black to say, grey or any colour to be honest.

I was thinking I could just create a button and add a variable called colour and then 'on click' .push a value into the variable array like in Javascript. But I can't do it :/

Any suggestions would be absolutely great - I'd really appreciate it. Thankyou very much

This is the code I have to draw my character etc -

PImage img;
void setup() {
size(600,600);
background(#FF9999);
// Make a new instance of a PImage by loading an image file
img = loadImage("forprocessing.png");
image(img,0,0);
}
void draw() {
// Draw the image to the screen at coordinate (0,0)
stroke(0);
strokeWeight(2);
smooth();
// Draw if mouse is pressed
if (mousePressed) {
line(pmouseX, pmouseY, mouseX, mouseY);
}
}

Replies(2)

jbum

Re: Create a button that changes strokeColor - Please help

1 year ago

It isn't as brain-dead easy to make buttons in Processing as it is in Javascript. There are basically two methods:

1) You can draw a shape on the screen that is your button, and check to see if the user is clicking on that part of the screen. It's not too hard, but can be tedious if you want a lot of buttons. I've included a sample of how to do this, below.

2) You can use a library that provides user-interface (GUI) functionality, a popular one being controlP5.

I would suggest looking at the example code that comes with controlP5, if you want to try it.

If you want to do it from scratch here's a simple example.

color strokeColor = #000000;
class MyButton {
int x, y;
int buttonWidth = 64;
int buttonHeight = 32;
color clr;
boolean selected = false;
MyButton(int _x, int _y, color _clr)
{
x = _x;
y = _y;
clr = _clr;
}
void checkClick() {
if (mouseX >= x && mouseX < x+buttonWidth &&
mouseY >= y && mouseY < y+buttonHeight) {
strokeColor = clr;
selected = true;
} else {
selected = false;
}
}
void render() {
fill(clr);
if (selected) {
stroke(0);
} else {
stroke(clr);
}
rect(x,y,buttonWidth,buttonHeight);
}
}
MyButton b1, b2;
void setup()
{
size(800,600);
b1 = new MyButton(10,10,#FF0000);
b2 = new MyButton(100, 10, #00FF00);
}
void draw() {
b1.render();
b2.render();
}
void mouseDragged()
{
stroke(strokeColor);
line(pmouseX, pmouseY, mouseX, mouseY);
}
void mousePressed()
{
b1.checkClick();
b2.checkClick();
}

sofi_smith

Re: Re: Create a button that changes strokeColor - Please help

1 year ago

Thank-you so much for answering this - that's so helpful. I really underestimated processing haha - hopefully this will help me create what I'm after.

Top Reply