# Simple filling issue

**URL:** <https://discourse.processing.org/t/simple-filling-issue/3171>\
**Category:** Coding Questions\
**Created:** [September 1, 2018, 4:12pm UTC](https://discourse.processing.org/t/simple-filling-issue/3171 "2018-09-01T16:12:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rennorb](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@Rennorb](https://discourse.processing.org/u/Rennorb)\
**Post date:** [September 1, 2018, 4:12pm UTC](https://discourse.processing.org/t/simple-filling-issue/3171/1 "2018-09-01T16:12:05Z")

</div>

Hi. I have tried to write a really simple board game, but the simplest code just refused to work.  
Here is the full code

```auto
int cell = 30;

int W = 1;
int B = -W;
int E = 0;

int selectorX = -1;
int selectorY = -1;

int [][]board = 
{{E,W,E,W,E,W,W,W,W,W,W,W,W,E,W,E,W,E},
 {W,W,W,E,W,E,W,W,W,W,E,W,E,W,E,W,W,W},
 {E,W,E,W,E,W,W,W,W,W,W,W,W,E,W,E,W,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,W,E,E,W,E,E,W,E,E,W,E,E,W,E,E,W,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,B,E,B,E,E,B,E,E,B,E,E,E,B,E,E,B,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E,E},
 {E,B,E,B,E,B,B,B,B,B,B,B,B,E,B,E,B,E},
 {B,B,B,E,B,E,B,B,B,B,E,B,E,B,E,B,B,B},
 {E,B,E,B,E,B,B,B,B,B,B,B,B,E,B,E,B,E},};

void setup()
{
  size(540, 540);
  ellipseMode(CORNERS);
  noSmooth();
  noLoop();
}

void draw()
{
   background(0);
   
   for(int x=0; x<18; x++)
   {
     for(int y=0; y<18; y++)
     {
       stroke(255);
       
       if((x == selectorX || x == selectorX+1 || x == selectorX-1) && 
          (y == selectorY || y == selectorY+1 || y == selectorY-1))
       {
           fill(0, 255, 0);
           println(x, y);
       }
       
       
       else noFill();
       
       rect(x*cell, y*cell, (x+1)*cell, (y+1)*cell);
       noFill();
       
       
       if(board[y][x] == W)
       {
         fill(255, 0, 0);
         noStroke();
         ellipse(x*cell, y*cell, (x+1)*cell, (y+1)*cell);
       }
       
       if(board[y][x] == B)
       {
         fill(0, 0, 255);
         noStroke();
         ellipse(x*cell, y*cell, (x+1)*cell, (y+1)*cell);
       }
     }
   }
   
   println();
}

void mouseMoved()
{
  int x = int(mouseX/cell);
  int y = int(mouseY/cell);
  if(x != selectorX || y != selectorY)
  {
    selectorX = x;
    selectorY = y;
    
    redraw();
  }
} 

```

The idea is the following: 3x3 square with 1x1 point at the cursor should be selected (painted green).  
While the program prints out right coordinate for green squares, it draws some additional ones.  
What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [September 1, 2018, 6:06pm UTC](https://discourse.processing.org/t/simple-filling-issue/3171/2 "2018-09-01T18:06:16Z")

</div>

🍍🍍

You are trying to draw your `rect()`s as if you were using `rectMode(CORNERS)`, but the default is `rectMode(CORNER)`.

Add this line to `setup()`:

```auto
rectMode(CORNERS);

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 3, 2018, 3:41pm UTC](https://discourse.processing.org/t/simple-filling-issue/3171/3 "2018-09-03T15:41:36Z")

</div>

For reference, if you are unfamiliar with rectMode:

> Modifies the location from which rectangles are drawn by changing the way in which parameters given to **rect()** are intepreted.

> The default mode is **rectMode(CORNER)** , which interprets the first two parameters of **rect()** as the upper-left corner of the shape, while the third and fourth parameters are its width and height.

> **rectMode(CORNERS)** interprets the first two parameters of **rect()** as the location of one corner, and the third and fourth parameters as the location of the opposite corner.

- [rectMode() / Reference / Processing.org](https://processing.org/reference/rectMode_.html)
- [rect() / Reference / Processing.org](https://processing.org/reference/rect_.html)