Change color with click or touch

Processing Beginners
1

Good day, everyone! A beginner here.

I’m trying to change the colors of a few squares whenever the mouse click upon them but can’t figure out a working solution. Here is what I’ve done so far:

I created four values and assigned those to the fills inside void draw().

int color1 = 0;
int color2 = 0;
int color3 = 0;
int color4 = 0;

void setup() {
  size(400,400);
  background(255);
}

void draw(){
  fill(color1);
  stroke(0);
  rect(20,20,40,40);
  fill(color2);
  rect(60,20,40,40);
  fill(color3);
  rect(100,20,40,40);
  fill(color4);
  rect(140,20,40,40);
}

After this, I writed a void mousePressed() with if statements that checks for the mouse position. I tried the switch/case but with no result. The if statement works only for the fist square; if I try to add more statements it stops working and most importantly it only works if the mouse is placed upon a tiny pixel.

void mousePressed() {
  if(color1 == 0 && pmouseY == 20){
    color1 = 255;
  } else {
    color1 = 0;
  }
}

My intentions are:

  • Having a bigger number of squares and other shapes that can change color with mouse click or touch
  • Change the size of the mouse selection if possible

Thanks in advance for any help!

1 Like
2

Hello,

There are resources (tutorials, references, examples, etc.) here:
https://processing.org/

I always look there first. :)

There is a tutorial on Interactivity.
Take a look at the GUI section in examples and the Input references.

:)

1 Like
3

Hi!

First I’ll address the bigger selection.
Currently you are using pmouseX=20.

First of all, using pmouseX is not reccomended. Use mouseX instead. pmouseX is the previous X position of mouse (in previous frame), while mouseX reffers to current frame.

Secondly you need to define the area where mouse can click on the square.
Look at this image for help

image
image946×649 30.6 KB

Not much of an artist but it should do.

  1. Altho integers CAN store color values, it is hard to memorise the numbers. That’s why there is a color varriable. You can use #RRGGBB to tell the color or color clr = new color(RRR,GGG,BBB)
1 Like
4

Thank you, both!

I was able to make a workable sketch:

int color1 = 255;
int color2 = 255;
int color3 = 255;
int color4 = 255;

void setup() {
  size(400,400);
  background(255);
}

void draw(){
  println(mouseX + " : " + mouseY);
  fill(color1);
  stroke(0);
  rect(20,20,40,40);
  fill(color2);
  rect(60,20,40,40);
  fill(color3);
  rect(100,20,40,40);
  fill(color4);
  rect(140,20,40,40);
}

void mousePressed() {
  if(color1 == 255 && mouseX>20 && mouseY>20 && mouseX<20+40 && mouseY<20+40) {
    color1 = color(255,0,0);
  } else {
    color1 = 255;
   }
  if(color2 == 255 && mouseX>60 && mouseY>20 && mouseX<20+80 && mouseY<20+40) {
    color2 = color(0,0,255);
  } else {
    color2 = 255;
  }
  if(color3 == 255 && mouseX>100 && mouseY>20 && mouseX<20+120 && mouseY<20+40) {
    color3 = color(0,255,255);
  } else {
    color3 = 255;
  }
  if(color4 == 255 && mouseX>140 && mouseY>20 && mouseX<20+160 && mouseY<20+40) {
    color4 = color(0,255,0);
  } else {
    color4 = 255;
  }
}

Now I would like to have more than one color active, i.e. it should remember if something is on or off. Can I keep posting here since it is related or should I open another topic if I can’t find a solution on my own?

3 Likes
5

So you want to create on/off buttons of sort?

If you want to do that, than on every click execute

boolean active = true;

//on click:
active = !active;

//while displaying the button
if(active) {
  fill(255,0,0);
} else {
  fill(0,0,255);
}
1 Like
6

Hi there,

i would recommend to write a class for this type of problem. Otherwise you’ll quickly run into if ladders, which can be quite confusing.

I whipped up an example. It might not be very elegant, but it does what you want to do. Feel free to change it however you want.

class ColorRect {
 
  int c1x, c1y;
  int c2x, c2y;
  color col;
  boolean active;
  
  ColorRect(int x1, int y1, int x2, int y2, color c) {
    this.c1x = x1;
    this.c1y = y1;
    this.c2x = x2;
    this.c2y = y2;
    this.col = c;
    this.active = false;
  }
  
  boolean isHit(int x, int y) {
    if(c1x <= x && x <= c2x && c1y <= y && y <= c2y) {
      println("something hit me!");
      active = !active;
      return true;
    }
    else {
      return false;
    }
  }
  
  void display() {
    if(active) {
      fill(200,0,0);
    }
    else {
      fill(col);
    }
    rect(c1x, c1y, c2x-c1x, c2y-c1y);
  }
  
}

ArrayList<ColorRect> rects = new ArrayList<ColorRect>();

void setup() {
  size(800,800);
  
  ColorRect r1 = new ColorRect(10,10,150,150,color(0,200,0));
  ColorRect r2 = new ColorRect(160,160,210,210,color(0,0,200));
  
  rects.add(r2);
  rects.add(r1);
  
}

void draw() {
  for( ColorRect r : rects) {
    r.display();
  }
}

void mouseClicked() {
  for( ColorRect r : rects) {
    r.isHit(mouseX, mouseY);
  }
}

Regards, Peter

1 Like
7

Hi Peter, thanks for joining in.
I’m indeed trying to learn classes. This part from your code is interesting:

void setup() {
  size(800,800);
  
  ColorRect r1 = new ColorRect(10,10,150,150,color(0,200,0));
  ColorRect r2 = new ColorRect(160,160,210,210,color(0,0,200));
  
  rects.add(r2);
  rects.add(r1);
  
}

Can you point out some reference material so I can get a better understanding of the logic?

As of now, I’m trying to implement the boolean suggested by @CodeMasterX on the previous code without success, but I will update about it on the following days.

8

:)

1 Like