# Random colours problem

**URL:** https://discourse.processing.org/t/random-colours-problem/6044
**Category:** Coding Questions
**Created:** [November 28, 2018, 8:56pm UTC](https://discourse.processing.org/t/random-colours-problem/6044 "2018-11-28T20:56:14Z")
**Posts on this page:** 3
**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 28, 2018, 8:56pm UTC](https://discourse.processing.org/t/random-colours-problem/6044/1 "2018-11-28T20:56:14Z")

</div>

For my tessellation project, I’m so near to finishing. I didn’t spot this problem until a friend of mine pointed it out. What I have I done is when I click anywhere within the small grid that will tessellate that onto the bigger grid, but the colour that is on the small grid is different to the colour on the big grid.

```auto
Model myModel;
Control myControl;

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

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, 0, 0, 0, 0 }, 
    {0, 0, 0, 0, 0 }, 
    {0, 0, 0, 0, 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(random(0, 255), random(0, 255), random(0, 255));
        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 );
      myModel.myPattern();
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [November 28, 2018, 9:09pm UTC](https://discourse.processing.org/t/random-colours-problem/6044/2 "2018-11-28T21:09:20Z")

</div>

It is because you are never saving the color you are using anywhere. You always just take random colors.

Consider this quick fix:

```auto
Model myModel;
Control myControl;

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

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

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

class Model {
  color[][] templateColors; // Save the colors of your template

  // Initialize the colors of the template to white
  Model() {
    templateColors = new color[myData.length][myData.length];
    for (int i = 0; i < myData.length; i++) {
      for (int j = 0; j < myData.length; j++) {
        templateColors[i][j] = color(255);
      }
    }
  }

  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, 0, 0, 0, 0 }, 
    {0, 0, 0, 0, 0 }, 
    {0, 0, 0, 0, 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(templateColors[i][j]); // Using the color of the template
        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;
      templateColors[i][j] = color(random(255), random(255), random(255)); // selecting a new color
    }
  }
}

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 );
      myModel.myPattern();
    }
  }
}

```

---

<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 28, 2018, 9:16pm UTC](https://discourse.processing.org/t/random-colours-problem/6044/3 "2018-11-28T21:16:18Z")

</div>

Thank-you very much!!!