For-loop problem: space between rotating squares

Processing Coding Questions
1

Good day,

I am a beginner in Processing and programming in general, and recently my teacher gave me a task to implement the following thing in Processing: draw a big square consisting of smaller squares and move it across the screen . There are a couple of notes:

  1. Take the user input that is going to be the number of squares in one row and column.

  2. The bigger square must bounce when reaching the boundaries of the screen.

  3. Smaller squares have to rotate and there must be space between them.

Here is my code:

import processing.core.*;

import javax.swing.*;

public class Main extends PApplet {

    float size;
    int numberOfRect;
    float systemX;
    float systemY;
    float angle1;
    float dAngle1;
    float dx;
    float dy;
    float x ;
    float y;


    float maxSize;

    public void settings() {
        fullScreen();

    }

    public void setup() {
        String strNumberOfRect = JOptionPane.showInputDialog("Enter thew number of rectangles in a row[2, 8]");
        try {
            numberOfRect = Integer.parseInt(strNumberOfRect);
        } catch (NumberFormatException e) {
            JOptionPane.showMessageDialog(null, "Incorrect input: " + strNumberOfRect);
            System.exit(0);
        }
        if (numberOfRect < 2 || numberOfRect > 8) {
            JOptionPane.showMessageDialog(null, "Incorrect input: " + numberOfRect);
            System.exit(1);
        }

        dAngle1 = 0.004f;
        maxSize = width / 5f;

        systemX = width / 2f;
        systemY = height / 2f;
        dx = 5;
        dy = 5;
        noStroke();

        frameRate(50);


        rectMode(CENTER);
        x = 0;
        y = 0;

    }

    public void draw() {

        fill(0, 0, 0, 40);
        square(0, 0, width * 2);


        size = maxSize / numberOfRect;


        for (int i = 0; i < numberOfRect; i++) {
            pushMatrix();
            for (int j = 0; j < numberOfRect; j++) {
                pushMatrix();
                translate(systemX + size * i, systemY + size * j);
                rotate(angle1);
                angle1 += dAngle1;
                fill(255);
                rect(x, y, size, size);
                popMatrix();
            }
            popMatrix();
        }

        //rectMode(CENTER) is a problem?;
        systemX += dx;
        systemY += dy;

        if (systemX >= width - maxSize + size / 2) {
            dx = -dx;
        }
        if (systemX <= 0 + size / 2) {
            dx = -dx;
        }
        if (systemY >= height - maxSize + size / 2) {
            dy = -dy;
        }
        if (systemY <= 0 + size / 2) {
            dy = -dy;
        }

    }

    public static void main(String[] args) {
        PApplet.main("Main");
    }

}

So, I am struggling with adding space between the smaller squares. I tried to add additional values to x and y coordinates of square within for-loop, but in that case it starts to move not in the way it is supposed to. Please help me.

Thanks in advance.

2 
import static javax.swing.JOptionPane.*;          

float size, systemX, systemY, angle1, dAngle1, dx, dy, x, y, maxSize, numberOfRect;
float distance_factor_between_small_squares = 1.5; 

void setup() {
  size(1000, 700);
  String strNumberOfRect = showInputDialog("Enter thew number of rectangles in a row[2, 8]");
  try {
    numberOfRect = Integer.parseInt(strNumberOfRect);
  } 
  catch (NumberFormatException e) {
    showMessageDialog(null, "Incorrect input: "+strNumberOfRect, "Error", ERROR_MESSAGE);
    setup();
  }
  if (numberOfRect < 2 || numberOfRect > 8) {
    showMessageDialog(null, "Incorrect input: "+numberOfRect, "Error", ERROR_MESSAGE);
    setup();
  }
  dAngle1 = 0.004;
  maxSize = width/5;
  systemX = width/2;
  systemY = height/2;
  dx = 5;
  dy = 5;
  noStroke();
  frameRate(50);
  rectMode(CENTER);
}

void draw() {
  fill(0, 0, 0, 40);
  square(0, 0, width*2);
  size = maxSize/numberOfRect;
  for (int i = 0; i < numberOfRect; i++) {
    pushMatrix();
    for (int j = 0; j < numberOfRect; j++) {
      pushMatrix();
      translate(systemX+distance_factor_between_small_squares*size*i, systemY+distance_factor_between_small_squares*size*j);
      rotate(angle1);
      angle1 += dAngle1;
      fill(255);
      rect(x, y, size, size);
      popMatrix();
    }
    popMatrix();
  }
  systemX += dx;
  systemY += dy;
  if (systemX >= width-maxSize-size) dx = -dx;
  if (systemX <= size/2) dx = -dx;
  if (systemY >= height-maxSize-size) dy = -dy;
  if (systemY <= size/2) dy = -dy;
}
3

Thank you very much!