# Updating Squares

**URL:** https://discourse.processing.org/t/updating-squares/5849
**Category:** Coding Questions
**Created:** [November 23, 2018, 11:46am UTC](https://discourse.processing.org/t/updating-squares/5849 "2018-11-23T11:46:09Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![oscie24](https://avatars.discourse-cdn.com/v4/letter/o/f14d63/32.png) [@oscie24](https://discourse.processing.org/u/oscie24)
#### Post date: [November 23, 2018, 11:46am UTC](https://discourse.processing.org/t/updating-squares/5849/1 "2018-11-23T11:46:09Z")

</div>

This is for a project but i’m currently in a little oh cock moment.

My aim is to make a tessellator. Where you click on a small grid and that pattern tesselates on a bigger grid. the problem i’m having is that i don’t know how to update the array that has zeros and one’s that represent black and white.

Tessellator Viewer:

```auto

 Model myModel; 
 
void setup() {
  size(1300, 600);
  background(255);
  myModel = new Model();

}
 

 
void draw() {
  
  myModel.myPattern();

}

```

TessalatorControler (this section is what i’m stuck on):

```auto
class control {
  
  
  

  void draw() {
    update(mouseX, mouseY);
    if()
  }

  void update(int x, int y) {
    
    
  }

  void mousePressed() {
  }
  
}

```

TessalatolModel:

```auto
class Model
{
  
  void myPattern() {
    mydraw(1, 1, 0);
    for (int i = 0; i<10; i++) {
      for (int j = 0; j<10; j++){
        mydraw(i,j, 200);
      
      }
    }
  }
  
  int [][] myData ={
    {0, 0, 0, 0, 0 }, 
    {0, 1, 1, 1, 0 }, 
    {0, 1, 0, 1, 0 }, 
    {0, 1, 1, 1, 0 }, 
    {0, 0, 0, 0, 0 } 
  
  
  };
  
  void mydraw(int x, int y, int offset)
  {
    for (int i = 0; i<myData.length; i++)
    {
      for (int j = 0; j<myData.length; j++)
      {
        if (myData[i][j] == 1)
        fill(0, 0, 0);
        else
        fill(255);
        rect(i*12+(x*60)+offset, j*12+(y*60), 10, 10);
      }
    }
  }
}

```

---

<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: [November 24, 2018, 8:56pm UTC](https://discourse.processing.org/t/updating-squares/5849/2 "2018-11-24T20:56:59Z")

</div>

> [@oscie24](#):
>
> he problem i’m having is that i don’t know how to update the array that has zeros and one’s that represent black and white.

I’m not sure I understand your question. Are you asking how to update an array?

For example:

```auto
int [][] myData ={
    {0, 0, 0, 0, 0 }, 
    {0, 1, 1, 1, 0 }, 
    {0, 1, 0, 1, 0 }, 
    {0, 1, 1, 1, 0 }, 
    {0, 0, 0, 0, 0 } 
};

myData[0][4] = 5;
myData[4][0] = 5;
myData[2] = new int[]{9, 9, 9, 9, 9};

for (int[] line : myData){
  for (int cell : line){
    print(cell, " ");
  }
  println();
}

```

Output:

```auto
0 0 0 0 5  
0 1 1 1 0  
9 9 9 9 9  
0 1 1 1 0  
5 0 0 0 0

```

See:

- [[] (array access) / Reference / Processing.org](https://processing.org/reference/arrayaccess.html)
- [Array / Reference / Processing.org](https://processing.org/reference/Array.html)

---

<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: [November 24, 2018, 9:22pm UTC](https://discourse.processing.org/t/updating-squares/5849/3 "2018-11-24T21:22:02Z")

</div>

No, he’s asking how he can, given the mouse position, determine which square was clicked so that he can update the model’s `myData` for the cell that the click was over.

Here’s basically your own code back at you, but cleaned up a bit, with some minor modifications:

```auto
Model myModel;
Control myControl;
 
void setup() {
  size(1300, 600);
  background(255);
  myModel = new Model();
  myControl = new Control();
}

void draw() {
  myModel.myPattern();
}

void mousePressed(){
  myControl.onClick();
}

class Model {
  void myPattern() {
    mydraw(1, 1, 0);
    for (int i = 0; i<10; i++) {
      for (int j = 0; j<10; j++){
        mydraw(i,j, 200);
      }
    }
  }  
  int [][] myData ={
    {0, 0, 0, 0, 0 }, 
    {0, 1, 1, 1, 0 }, 
    {0, 1, 0, 1, 0 }, 
    {0, 1, 1, 1, 0 }, 
    {0, 0, 0, 0, 0 } 
  };
  void mydraw(int x, int y, int offset) {
    for (int i = 0; i<myData.length; i++) {
      for (int j = 0; j<myData.length; j++) {
        if (myData[i][j] == 1)
        fill(0, 0, 0);
        else
        fill(255);
        rect(i*12+(x*60)+offset, j*12+(y*60), 10, 10);
      }
    }
  }
  void toggle(int i, int j){
    println( "model.toggle(): " + i + " " + j );
    if( i >= 0 && i < 5 && j >= 0 && j < 5 ){
      myData[i][j] += 1;
      myData[i][j] %= 2;
    }
  }
}

class Control {  
  void onClick() {
    update(mouseX, mouseY);
  }
  void update(int x, int y) {
    println( "control.update(): " + x + " " + y );
    int ax = x - 60;
    int ay = y - 60;
    if( ax > 0 && ax < 60 && ay > 0 && ay < 60 ){
      myModel.toggle( ax/12, ay/12 );
    }    
  }
}

```

Notice that there is now a Control object call `myControl`, and when the mouse is pressed, it does some math on the mouse’s position to convert it back into an (i,j) index pair. Those values are then passed to the new `Model.toggle()` function, which does some boundary checking and then swaps the specified square from 0 to 1.

It’s a neat sketch! I hope you are learning a lot! 🍍🍍🍍🍍

---

<div class="post-metadata">

### Author: ![oscie24](https://avatars.discourse-cdn.com/v4/letter/o/f14d63/32.png) [@oscie24](https://discourse.processing.org/u/oscie24)
#### Post date: [November 24, 2018, 9:37pm UTC](https://discourse.processing.org/t/updating-squares/5849/4 "2018-11-24T21:37:42Z")

</div>

I am learning a lot. Thank-you very much. It’s hard but I never give up.😀😀😀😀
