I came up with a small class with buttons
The buttons
- The delete button works,
- the circle button works (toggle between line and circle mode)
The buttons are stored in an ArrayList buttons
containing objects of type Button
(from the class Button
). There is a tutorial about classes and objects: https://www.processing.org/tutorials/objects/.
The buttons get an ID (0,1,2…) in the order they are created.
When evaluating the mouse in the function mousePressed()
we use the ID to trigger the function exec()
which executes the command for the ID (e.g. clear the canvas or set the draw mode mode
to circleMode
).
When using a button, the variable hold
is true; in draw()
we evaluate hold
so we avoid drawing a line on a button in this case.
The class Button
The class Button could in theory handle images and text, since I don’t have the images I tested it only with text.
In the constructor of the class (when defineButton()
would pass w and h to the constructor) you could handle resize
of images img
once and for all using w and h (usage of resize()
once is better than using image()
with 5 parameters which is doing a resize every time, very time consuming for the processor).
Chrisir
PFont font;
//PShape ellipse;
ArrayList<Button> buttons = new ArrayList();
boolean hold=false;
// define modes
final int lineMode = 0;
final int circleMode = 1;
//current mode
int mode = lineMode;
// names of modes
String[] stringMode={ "line", "circle (click, hold and move mouse)" };
// draw a circle variables
boolean drawNewCircle;
PVector startCircle=new PVector();
void setup() {
size(768, 1024);
PImage gomme;
PImage save;
PImage delete;
PImage circle;
background(255);
gomme = loadImage("gomme.png");
save = loadImage("save.png");
delete = loadImage("delete.png");
circle = loadImage("circle.png");
//ellipse = loadShape("ellipse.svg");
// font = loadFont("Grotex-Regular-48.vlw");
// textFont(font);
defineButton(gomme, "gomme", 600, 20, 64, 74);
defineButton(save, "save", 520, 20, 64, 74);
defineButton(delete, "delete", 680, 20, 64, 74);
//shape(ellipse, 300, 380, 188, 188);
defineButton(circle, "circle (on/off)", 300, 380, 188, 188);
}
void draw() {
textAlign(LEFT);
fill(255);
noStroke();
rect(0, 0, width, 30);
fill(0);
textSize(17);
text("mode is " + stringMode[mode], 22, 22);
fill(210);
for (Button b : buttons)
b.display();
textSize(48);
text("un soleil", 20, 60);
fill(210);
stroke(0);
strokeWeight(6);
if (!hold) {
switch(mode) {
case circleMode:
// ignore
break;
case lineMode:
if (mousePressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
break;
default:
//Error
break;
}//switch
}//if
if (drawNewCircle) {
float a1 = 2 * dist (mouseX, mouseY,
startCircle.x, startCircle.y);
stroke(0);
ellipse( startCircle.x, startCircle.y, a1, a1);
}//if
//
}
// -----------------------------------------------------
void mousePressed() {
for (Button b : buttons) {
if (b.over()) {
exec(b.id);
hold=true;
return;
}//if
}//for
if (mode==circleMode) {
startCircle.x=mouseX;
startCircle.y=mouseY;
drawNewCircle=true;
}
}
void mouseReleased() {
hold=false;
drawNewCircle=false;
}
// -------------------------------------------------------------------
void exec(int id) {
println(id);
switch (id) {
case 2:
background(255);
break;
case 3:
if (mode!=circleMode)
mode=circleMode;
else
mode=lineMode;
break;
default:
break;
}//switch
}
void defineButton(PImage img,
String s,
float x, float y,
float w, float h) {
buttons.add (new Button(img, s, x, y, buttons.size()));
}
//===================================================================
class Button {
PImage img=null;
String s;
float x, y;
int id;
Button(PImage img_,
String s_,
float x_, float y_,
int id_) {
img=img_;
s=s_;
x=x_;
y=y_;
id=id_;
}
void display() {
if (img!=null) {
imageMode(CENTER);
image(img, x, y);
return;
}
textAlign(CENTER);
textSize(17);
text(s, x, y);
textAlign(LEFT);
}//
boolean over() {
return
dist (mouseX, mouseY, x, y) < 30;
}
//
}//class
//