# AYUDA -Hacer click en una zona y que pase algo (aplicación de dibujo)
**URL:** https://discourse.processing.org/t/ayuda-hacer-click-en-una-zona-y-que-pase-algo-aplicacion-de-dibujo/7329
**Category:** Español
**Created:** [January 8, 2019, 8:38pm UTC](https://discourse.processing.org/t/ayuda-hacer-click-en-una-zona-y-que-pase-algo-aplicacion-de-dibujo/7329 "2019-01-08T20:38:14Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@oriana](https://discourse.processing.org/u/oriana)
#### Post date: [January 8, 2019, 8:38pm UTC](https://discourse.processing.org/t/ayuda-hacer-click-en-una-zona-y-que-pase-algo-aplicacion-de-dibujo/7329/1 "2019-01-08T20:38:14Z")
```auto
// menú interfaz
PImage interimg;
// pinceles cursor
PImage pincel1;
PImage pincel2;
PImage pincel3;
PImage pincel4;
PImage pincel5;
PImage pincel6;
PImage pincel7;
PImage pincel8;
PImage pincel9;
PImage pincel10;
// color y opciones del menú
int []
colorACTUAL= {0,0,0};
int opcion;
void setup() {
size(554, 550);
smooth (3); //suaviza el trazo de los pinceles
// cargar img interfaz e img del cursor
interimg = loadImage("interfaz.png");
pincel1 = loadImage("pluma.png");
pincel2 = loadImage("spray.png");
pincel3 = loadImage ("borrador.png");
pincel4 = loadImage ("resaltador.png");
pincel5 = loadImage ("pincel.png");
pincel6 = loadImage ("crayon.png");
pincel7 = loadImage ("rodillo.png");
pincel8 = loadImage ("lapiz.png");
pincel9 = loadImage ("pfuente.png");
pincel10 = loadImage ("pmagico.png");
}
void draw() {
background(255);
// cordenadas del menú //
if(mousePressed==true)
{
// pluma
if(mouseX>20 && mouseY > 16 && mouseY<56)
{
opcion = 1;
}
// aerosol
if(mouseX> 22 && mouseY > 62 && mouseY<100)
{
opcion = 2;
}
// borrador
if(mouseX>...&& mouseY > ...&& mouseY<...)
{
opcion = 3;
}
// resaltador
if(mouseX>... && mouseY > ... && mouseY<...)
{
opcion= 4;
}
// pincel
if(mouseX>...&& mouseY > ... && mouseY<...)
{
opcion = 5;
}
// crayón
if(mouseX>... && mouseY > ... && mouseY<...)
{
opcion= 6;
}
// rodoillo
if(mouseX>... && mouseY > ... && mouseY<...)
{
opcion = 7;
}
// lápiz
if(mouseX>... && mouseY > ... && mouseY<...)
{
opcion = 8;
}
// pluma fuente
if(mouseX>... && mouseY > ...&& mouseY<...)
{}
opcion = 9;
}
// pincel mágico
if(mouseX>...&& mouseY > ... && mouseY..)
{
opcion= 10;
}
// disquete
if(mouseX> .. && mouseY > ... && mouseY<...
)
{ opcion= 11; }
////////////////////////////////////
// SCase_cambio de opciones_herramientas & colores
switch(opcion)
{
//pluma
case 1:
cursor (pincel1,0,0);
stroke(2);
fill(255,89,6);
rect(0, 0, 30, 30);
break;
// img interfaz
image (interimg,0,0);
}
```
Si pongo los valores X e Y tengo que tocar en esas cordenadas exactas para que cambie el cursor. ¿Existe alguna forma de que se pongan valores aproximados?, es decir:
de acá hasta acá se puede hacer click , cambia el cursor y se habilita el uso del pincel.
Abajo dejo una imagen de la interfaz
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [January 9, 2019, 5:35pm UTC](https://discourse.processing.org/t/ayuda-hacer-click-en-una-zona-y-que-pase-algo-aplicacion-de-dibujo/7329/2 "2019-01-09T17:35:10Z")
sorry, only english,
i understand that the “drawing tools”
needs to be buttons with pictures.
the buttons need to be of type toggle
more as a option group // only one can be selected…
it should be shown if it ( one ) is selected.
so i just modified a button group like that, using/testing transparent .png files
so still can show the status ( selected / unselected ) via a green blue background color
visible through the tool picture.
that button option group is
- a array
- of class
in 2 separate TABs
also there are 2 more, but UNUSED TABs ( slider and old test\_main )
more info
[http://kll.engineering-news.org/kllfusion01/articles.php?article\_id=154#here11b](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154#here11b)
for download only:
[http://kll.engineering-news.org/kllfusion01/downloads/MY\_class\_picturebuttons.zip](http://kll.engineering-news.org/kllfusion01/downloads/MY_class_picturebuttons.zip)
---
### Author:  [@oriana](https://discourse.processing.org/u/oriana)
#### Post date: [January 10, 2019, 9:41pm UTC](https://discourse.processing.org/t/ayuda-hacer-click-en-una-zona-y-que-pase-algo-aplicacion-de-dibujo/7329/3 "2019-01-10T21:41:15Z")
Thank you so much.
I will try later and post when it works 😃
---
### Author:  [@bryan](https://discourse.processing.org/u/bryan)
#### Post date: [January 10, 2019, 11:30pm UTC](https://discourse.processing.org/t/ayuda-hacer-click-en-una-zona-y-que-pase-algo-aplicacion-de-dibujo/7329/4 "2019-01-10T23:30:12Z")
Hola! según lo que entendí, necesitas que el cursor pueda seleccionar entre las opciones, con lo cual puedes checar el ejemplo del botón en processing [https://processing.org/examples/button.html](https://processing.org/examples/button.html) aquí, aquí estás verificando si te encuentras sobre el área que delimita el rectángulo o la circunferencia, si lo estás, entras a otro if en donde ahora verifica si estás presionando el mouse, y si sí, cambias el color del background.
Ahora respecto a cambiar entre cursor y el pincel. Primero debes de verificar que estás dentro del área de dibujo. por dar un ejemplo. si sí lo estás ahora te preguntas, está el mouse presionado? y bien, si si lo está, ahora haces que dibuje una linea tomando como puntos a la posición actual y a la posición anterior del cursor, sin actualizar el background para que no borres la linea. Y básicamente sería eso.
```auto
if(mouseX > 200 && mouseY > 200 && mouseX < 800 && mouseY < 800){//checas si estás dentro del área de dibujo
ellipse(mouseX, mouseY, 10, 10);//aparece un circulo cada que estás dentro de la región de dibujo
if(mousePressed == true) //lo estás, entonces ahora checas si estás presionando el cursor
//bien, ahora si estas condiciones se cumplen, entonces ahora si pones el algoritmo para dibujar la linea
```
Suerte!