2d array grid symmetry activity
in
Share your Work
•
9 months ago
This is for Kindergartners to learn about symmetry. They will do it on ipads with Processing.js. They tap on the left to get a random pattern of black squares and have to tap the corresponding mirrored squares on the right side. I used 2 two D arrays and 2-two d arrays of boolean variables to set them to white or black. If there is a better way to do this I welcome suggestions.:
- Box[][] boxesLeft
- Box[][] boxesRight;
- int cols = 6;
- int rows = 4;
- float bias = 0.7;
- boolean[][] isLeftWhite = new boolean[cols/2][rows];
- boolean[][] isRightWhite = new boolean[cols/2][rows];
- int[][] x = new int[cols/2][rows];
- int[][] y = new int[cols/2][rows];
- int cell = 100;
- void setup() {
- size(cols*cell,rows*cell);
- stroke(0);
- boxesLeft = new Box[cols/2][rows];
- boxesRight = new Box[cols/2][rows];
- for(int i=0;i<cols/2;i++) {
- for(int j=0;j<rows;j++) {
- x[i][j] = (i+cols/2)*width/cols;
- y[i][j] = j*height/rows;
- boxesLeft[i][j] = new Box(i*width/cols,j*height/rows,cell,cell);
- boxesRight[i][j] = new Box(x[i][j],y[i][j],cell,cell);
- isLeftWhite[i][j] = random(1) < bias;
- isRightWhite[i][j] = true;
- }
- }
- }
- void draw() {
- background(0);
- for(int i=0;i<cols/2;i++) {
- for(int j=0;j<rows;j++) {
- boxesLeft[i][j].display(isLeftWhite[i][j]);
- boxesRight[i][j].display(isRightWhite[i][j]);
- }
- }
- strokeWeight(4);
- stroke(150);
- line(width/2,0,width/2,height);
- }
- void mousePressed() {
- if(mouseX < width/2) {
- newSquares();
- } else {
- checkUserPick();
- }
- }
- void checkUserPick() {
- for(int i=0;i<cols/2;i++) {
- for(int j=0;j<rows;j++) {
- int indexOffset = -i-1+cols/2;
- if(mouseX > x[indexOffset][j] &&
- mouseX < x[indexOffset][j]+cell &&
- mouseY > y[indexOffset][j] &&
- mouseY < y[indexOffset][j]+cell) {
- if(isLeftWhite[i][j] == false) {
- isRightWhite[indexOffset][j] = false;
- }
- }
- }
- }
- }
- void newSquares() {
- for(int i=0;i<cols/2;i++) {
- for(int j=0;j<rows;j++) {
- isLeftWhite[i][j] = random(1) < bias;
- isRightWhite[i][j] = true;
- }
- }
- }
- class Box {
- int x,y,w,h;
- color c = 255;
- Box(int x_, int y_, int w_, int h_) {
- x = x_;
- y = y_;
- w = w_;
- h = h_;
- }
- void display(boolean isWhiteLeft) {
- stroke(0);
- strokeWeight(1);
- if(isWhiteLeft) {
- fill(c);
- } else {
- noFill();
- }
- rect(x,y,w,h);
- }
- }