# ¿Cómo usar el Mouse en Processing?

**URL:** <https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280>\
**Category:** Español\
**Created:** [February 18, 2022, 11:10pm UTC](https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280 "2022-02-18T23:10:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![juan\_esteban](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@juan\_esteban](https://discourse.processing.org/u/juan_esteban)\
**Post date:** [February 18, 2022, 11:10pm UTC](https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280/1 "2022-02-18T23:10:58Z")

</div>

hola soy nuevo y quiero que me ayuden con lo siguiente 🤕

Cuando se de clic con el botón derecho del mouse en el cuadro central, este debe cambiar a negro (solo mientras esté oprimido).

Cuando se de clic con el botón izquierdo, en la misma parte, todos los cuadros deben convertirse en círculos del mismo color en el que se encuentren (sin que se vea ningún rastro del cuadro)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 19, 2022, 10:17am UTC](https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280/2 "2022-02-19T10:17:36Z")

</div>

?Ya tenés 1 código - y podrías mostrarlo?

---

<div class="post-metadata">

**Author:** ![juan\_esteban](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@juan\_esteban](https://discourse.processing.org/u/juan_esteban)\
**Post date:** [February 19, 2022, 12:12pm UTC](https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280/3 "2022-02-19T12:12:01Z")

</div>

```auto
boolean circulo = true;

void setup(){ 
  size(400,400); 
  fill(#ED0E2C);
  if (circulo == true)
    circle(150, 150, 100);
  else
    rect(100, 100, 100, 100);
}

void draw(){ 

  fill(245); 

  stroke(0); 

  rect(20,40,80,75); //1 

  fill(#F00F0F); 

  stroke(0); 

  rect(20,160,80,75);//2 

  fill(#DE38C2); 

  stroke(0); 

  rect(20,280,80,75);//3 

  fill(#817F81); 

  stroke(0); 

  rect(150,40,80,75);//4 

fill(#48E032); 

stroke(245); 

rect(150,160,80,75);//5 

fill(#C7F016); 

stroke(0); 

rect(150,280,80,75);//6 

fill(0); 

stroke(0); 

rect(280,40,80,75);//7 

fill(#1727C1); 

stroke(0); 

rect(280,160,80,75);//8 

  fill(#0FE9F2); 

stroke(0); 

rect(280,280,80,75); 
  
if(mousePressed){
  if(mouseButton == RIGHT){
      fill(0);
rect(150,160,80,75);//5 

 }  
 }
 }
 void mousePressed(){
     if (mouseButton==RIGHT && mouseX>80 && mouseX<150 && mouseY>75 && mouseY<160)
circulo = !circulo;
   }
 
 void mouseReleased()
{
  fill(#ED0E2C);
  if (circulo == true)
    circle(150, 150, 100);
  else
    rect(100, 100, 100, 100);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 19, 2022, 12:39pm UTC](https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280/4 "2022-02-19T12:39:11Z")

</div>

hola,

Tu es almost there!

background(111); at begin of draw es importante

with circulo you store the data whether to draw circles or rects

you can do the same for color negro with another variable negro (to make color negro permanent)

circulo: you must use for every rect! I did it for 2 rects.

I also use ellipseMode(LEFT);

**Example**

```auto

boolean circulo = true;

void setup() { 
  size(400, 400); 
  //fill(#ED0E2C);
  //if (circulo == true)
  // ellipse(150, 150, 100, 100);
  //else
  // rect(100, 100, 100, 100);
  ellipseMode(LEFT);
}

void draw() { 
  background(111); 

  fill(245); 
  stroke(0); 
  if (circulo)
    ellipse(20, 40, 80, 75); //1
  else 
  rect(20, 40, 80, 75); //1 

  fill(#F00F0F); 
  stroke(0);
  if (circulo)
    ellipse(20, 160, 80, 75);//2
  else 
  rect(20, 160, 80, 75);//2 

  fill(#DE38C2); 
  stroke(0); 
  rect(20, 280, 80, 75);//3 

  fill(#817F81); 
  stroke(0); 
  rect(150, 40, 80, 75);//4 

  fill(#48E032); 
  stroke(245); 
  rect(150, 160, 80, 75);//5 

  fill(#C7F016); 
  stroke(0); 
  rect(150, 280, 80, 75);//6 

  fill(0); 
  stroke(0); 
  rect(280, 40, 80, 75);//7 

  fill(#1727C1); 
  stroke(0); 
  rect(280, 160, 80, 75);//8 

  fill(#0FE9F2); 
  stroke(0); 
  rect(280, 280, 80, 75); 

  if (mousePressed) {
    if (mouseButton == RIGHT) {
      fill(0);
      rect(150, 160, 80, 75);//5
    }
  }
}
void mousePressed() {
  if (mouseButton==RIGHT &&
    mouseX>150 &&
    mouseX<150+80 && 
    mouseY>160 && mouseY<160+75) {
    println("here");
    // set variable negro?
  }

  if (mouseButton==LEFT &&
    mouseX>150 &&
    mouseX<150+80 && 
    mouseY>160 && mouseY<160+75) {
    println("here");
    circulo = !circulo;
  }
}

```

---

<div class="post-metadata">

**Author:** ![juan\_esteban](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@juan\_esteban](https://discourse.processing.org/u/juan_esteban)\
**Post date:** [February 20, 2022, 4:11am UTC](https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280/5 "2022-02-20T04:11:53Z")

</div>

hola muchas gracias  
pero no eh podido modificar el codigo  
que cuando le de click se cambien todos los 9 cuadrados a circulos porque necesito que todos cambien

```auto
boolean circulo = true;

void setup() { 
  size(400, 400); 
  //fill(#ED0E2C);
  //if (circulo == true)
  // ellipse(150, 150, 100, 100);
  //else
  // rect(100, 100, 100, 100);
  ellipseMode(LEFT);
}

void draw() { 
  background(111); 

  fill(245); 
  stroke(0); 
  if (circulo)
    ellipse(20, 40, 80, 75); //1
  else 
  rect(20, 40, 80, 75); //1 

  fill(#F00F0F); 
  stroke(0);
  if (circulo)
    ellipse(20, 160, 80, 75);//2
  else 
  rect(20, 160, 80, 75);//2 

  fill(#DE38C2); 
  stroke(0); 
  rect(20, 280, 80, 75);//3 

  fill(#817F81); 
  stroke(0); 
  rect(150, 40, 80, 75);//4 

  fill(#48E032); 
  stroke(245); 
  rect(150, 160, 80, 75);//5 

  fill(#C7F016); 
  stroke(0); 
  rect(150, 280, 80, 75);//6 

  fill(0); 
  stroke(0); 
  rect(280, 40, 80, 75);//7 

  fill(#1727C1); 
  stroke(0); 
  rect(280, 160, 80, 75);//8 

  fill(#0FE9F2); 
  stroke(0); 
  rect(280, 280, 80, 75); 

  if (mousePressed) {
    if (mouseButton == RIGHT) {
      fill(0);
      rect(150, 160, 80, 75);//5
    }
  }
}
void mousePressed() {
  if (mouseButton==RIGHT &&
    mouseX>150 && mouseX<150+80+280 && mouseY>160 && mouseY<160+75+75) {
    println("here");
    // set variable negro?
  }

  if (mouseButton==LEFT &&
    mouseX>150 &&
    mouseX<150+80 && 
    mouseY>160 && mouseY<160+75) {
    println("here");
    circulo = !circulo;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 20, 2022, 10:33am UTC](https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280/6 "2022-02-20T10:33:41Z")

</div>

I did the cambiar for the first two.  
You need to do it for the other 7

---

<div class="post-metadata">

**Author:** ![juan\_esteban](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@juan\_esteban](https://discourse.processing.org/u/juan_esteban)\
**Post date:** [February 20, 2022, 12:57pm UTC](https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280/7 "2022-02-20T12:57:35Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/ae57c3c1697750b77c2ea3373f95cb358e6641d9.png)

los que estan en el if () son los que hacen el cambio?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 20, 2022, 3:54pm UTC](https://discourse.processing.org/t/como-usar-el-mouse-en-processing/35280/8 "2022-02-20T15:54:08Z")

</div>

> [@juan\_esteban](#):
>
> ```auto
> if (circulo)
> ellipse(20, 40, 80, 75); //1
> else 
> rect(20, 40, 80, 75); 
> 
> ```

Si, correcto

Chrisir