mousePressed changes stay the same when released

kimnguyen

Hi guys, I'm new to processing. I'm trying to make an interactive thing where someone can design a t-shirt. What I wanted to achieve is the mouse clicks on one of the color, the square changes color and stay that way. What I have so far is the square changes color but return back to normal after mouse is release. Thank you for the help.

color white = color(255);
color pink = color(255, 20, 147);
color darkBlue = color(0, 0, 205);
color yellow = color(255, 255, 0);

void setup(){
  size(500, 500);  
  background(255);
  smooth();
}

void draw(){
  fill(0);
  textSize(30)
  text("DESIGN YOUR T-SHIRT", 50,70);
  textSize(15)
  text("COLOR",360,180);

  text("PATTERN",360,230);

  //color options
  fill(yellow);
  rect(360,190,20,20);
  fill(pink);
  rect(390,190,20,20);
  fill(darkBlue);
  rect(420,190,20,20);
  fill(white);
  rect(450,190,20,20); 

  fill(255);
  if(mousePressed){
    if(mouseX >360 && mouseX<380 && mouseY > 190 && mouseY<210){
      fill(yellow);}
    else if(mouseX >390 && mouseX<410 && mouseY > 190 && mouseY<210){
      fill(pink);}
    else if(mouseX >420 && mouseX<440 && mouseY > 190 && mouseY<210){
    fill(darkBlue);}
  }
  rect(50,150,300,300);  
}

Caramazula

You have to save the current color somewhere. Add a new varibale color currentColor; and then change your code like this:

<

pre lang="java"> if(mousePressed){ if(mouseX >360 && mouseX<380 && mouseY > 190 && mouseY<210){ currentColor = yellow;} else if(mouseX >390 && mouseX<410 && mouseY > 190 && mouseY<210){ currentColor = pink;} else if(mouseX >420 && mouseX<440 && mouseY > 190 && mouseY<210){ currentColor = darkBlue;} } fill(currentColor); rect(50,150,300,300);

_vk

Hi, this is a way to do it:

color white = color(255);
color pink = color(255, 20, 147);
color darkBlue = color(0, 0, 205);
color yellow = color(255, 255, 0);
color drawingColor = color(255); // to hold the color to use

void setup(){
  size(500, 500);  
  background(255);
  smooth();
}

void draw(){
  fill(0);
  textSize(30);
  text("DESIGN YOUR T-SHIRT", 50,70);
  textSize(15);
  text("COLOR",360,180);

  text("PATTERN",360,230);

  //color options
  fill(yellow);
  rect(360,190,20,20);
  fill(pink);
  rect(390,190,20,20);
  fill(darkBlue);
  rect(420,190,20,20);
  fill(white);
  rect(450,190,20,20); 

  fill(255);
  // asign colors to drawingColor 
  if(mousePressed){
    if(mouseX >360 && mouseX<380 && mouseY > 190 && mouseY<210){
      drawingColor = yellow;}
    else if(mouseX >390 && mouseX<410 && mouseY > 190 && mouseY<210){
      drawingColor = pink;}
    else if(mouseX >420 && mouseX<440 && mouseY > 190 && mouseY<210){
    drawingColor = darkBlue;}
  }

  // fill with drawing color...
  fill(drawingColor);
  rect(50,150,300,300);  
}

_vk

ops, late : )

kimnguyen

Thank you so much. Helps a lot :)

_vk

If this is going much further, you might want to go for classes and arrays... It might seem complicated, but it is not. Actually makes things easier... Have you seen those?

http://wiki.processing.org/w/From_several_variables_to_arrays

http://wiki.processing.org/w/From_several_arrays_to_classes

PhiLho

In this kind of case, you should prefer mousePressed(), the callback function, to mousePressed, the boolean tested in draw().

It is called only once per click, while mousePressed is true as long as the mouse button is down, which can last over several frames / draw() calls (16 ms per frame, in average).