hey people.
i am working on a pixel icon editor but i am already encountering some basic problems.
i am creating a grid of different pixel. and change the color when hover over them with mouse pressed or click them. but
every time i do that it starts to flicker cause its turning on and off so fast
i guess that is because "on" is set several times a second,
but how can i do it, that it turns red when i click it ones, or turns red when i move the pressed mouse (dragged) over it.
so i want it to change red when i move over it, and only turn white again when i move over it a second time.
i just cant make it work.
here is my code so far.

1. int pSize = 10;
   int w = 800;
   int h = 600;
   int cols = w/pSize;
   int rows = h/pSize;
   int num = rows*cols;
   
   Pixel[] pixel = new Pixel[num];
   
   void setup() {
     size(800,600);
     smooth();
     background(0);
     rectMode(CENTER);
     int c = 0;
     for (int x=0; x<cols; x++){
       for (int y=0; y<rows; y++){
         pixel[c] = new Pixel((pSize/2)+x*pSize,(pSize/2)+y*pSize);
         c++  ;
       }
     }
   }
   
   
   void draw() {
     background(0);
   
     for (int i=0; i<pixel.length; i++){
       pixel[i].show();
      }
   }
   
   
   
   class Pixel{
   
   
     float x ;
     float y ;
     boolean on = false;
   
   
     Pixel(int _x, int _y){
       x = _x;
       y = _y;
   
     }
     void setOn(boolean t){
    
     }
   
     void show()  {
      float r = pSize/2.0;
       fill(255);
       if(mouseX >=x-r && mouseX<=x+r && mouseY >=y-r && mouseY<=y+r ){
       if(mousePressed)on = !on;
   
       }
       if(on)fill(255,0,0);
       rect(x,y,pSize,pSize);
     }
   
   }