Updating Squares

Processing Coding Questions
1

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:


 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):

class control {
  
  
  


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



  void update(int x, int y) {
    
    
  }


  void mousePressed() {
  }
  
}

TessalatolModel:

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);
      }
    }
  }
}
1 Like
2

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

For example:

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:

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:

3

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:

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! :pineapple::pineapple::pineapple::pineapple:

1 Like
4

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