Hello everyone,
I’m new to programming. I could use your help.
I want to create a simple interface to draw from a circle.
The problem is that I can’t draw on this circle. And I wish I could draw on it.
```auto
PImage gomme;
PImage save;
PImage delete;
PImage circle;
PFont font;
//PShape ellipse;
void setup() {
size(768, 1024);
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);
}
void draw(){
image(gomme, 600, 20, 64, 74);
image(save, 520, 20, 64, 74);
image(delete, 680, 20, 64, 74);
//shape(ellipse, 300, 380, 188, 188);
image(circle, 300, 380, 188, 188);
textSize(48);
text("un soleil", 20, 60);
fill(210);
stroke(0);
strokeWeight(6);
if (mousePressed == true) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
if(mousePressed){
if(mouseX > 600 && mouseX <664){
if (mouseY > 20 && mouseY <94){
background(255);
}
}
}
}
```
Solutions?
Thank you in advance
---
There’s a couple of things to consider.
1. Try changing the stroke color.
2. `mousePressed == true` means the same thing as `mousePressed`.
If you share the images you are loading as well, I might be able to make it work.
---
You draw over the lines from the last draw cycle with your images with each new cycle of draw();
Consider:
1. draw images once in setup and NOT in main loop of draw();
**OR** once in draw() but NOT at the start of every draw() (consider this later…)
2. draw images again with your background update with a mousePressed.
3. Put the images in an update() method; it would be easier to call that method as required.
That will work.
🙂
I just reduced your code so I could test it.
I did not provide a solution below; I left that for you.
```auto
void setup()
{
size(768, 1024, P2D);
background(255);
}
void draw()
{
fill(210);
stroke(0);
strokeWeight(6);
circle(300, 380, 188);
textSize(48);
text("un soleil", 20, 60);
if (mousePressed == true)
{
line(mouseX, mouseY, pmouseX, pmouseY);
}
if(mousePressed)
{
if(mouseX > 600 && mouseX <664)
{
if (mouseY > 20 && mouseY <94)
{
background(255);
// Good place to add other updates
}
}
}
}
```
---
Hey There!
Another suggestion is to use the method mousePresssed for your conditions within the if statement. But once you put it in the mouse pressed method you don’t have to have the if statements.
---
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/](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
```auto
PFont font;
//PShape ellipse;
ArrayList