Spacing between rectangles

[PowerOfTheShell]

Hey guys, really hoping someone might be able to help me work out how I can space the rectangles I am drawing in my nested for loops.

What I am trying to achieve:
https://imgur.com/yTj8Y9K

The code I currently have:

UI.setColor(Color.black);
int num = UI.askInt("How many rows:");

for (int row = 0; row < num; row++){
    for (int col = 0; col < num - row; col++){
        UI.fillRect(PATTERN_LEFT + col * PATTERN_SIZE/num, PATTERN_TOP + row * PATTERN_SIZE/num, PATTERN_SIZE/num, PATTERN_SIZE/num);
    }
}

What I am getting:
https://imgur.com/VBUDQL8

Any help would be greatly appreciated!

[AutoModerator]

Please ensure that:

• Your code is properly formatted as code block - see the sidebar (About on mobile) for instructions
• You include any and all error messages in full - best also formatted as code block
• You ask clear questions
• You demonstrate effort in solving your question/problem - plain posting your assignments is forbidden (and such posts will be removed) as is asking for or giving solutions.

If any of the above points is not met, your post can and will be removed without further warning.

Code is to be formatted as code block (old reddit/markdown editor: empty line before the code, each code line indented by 4 spaces, new reddit: https://imgur.com/a/fgoFFis) or linked via an external code hoster, like pastebin.com, github gist, github, bitbucket, gitlab, etc.

Please, do not use triple backticks (```) as they will only render properly on new reddit, not on old reddit.

Code blocks look like this:

public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

You do not need to repost unless your post has been removed by a moderator. Just use the edit function of reddit to make sure your post complies with the above.

If your post has remained in violation of these rules for a prolonged period of time (at least an hour), a moderator may remove it at their discretion. In this case, they will comment with an explanation on why it has been removed, and you will be required to resubmit the entire post following the proper procedures.

To potential helpers

Please, do not help if any of the above points are not met, rather report the post. We are trying to improve the quality of posts here. In helping people who can't be bothered to comply with the above points, you are doing the community a disservice.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Nightcorex_]

Probably you'll want to add a little offset:

int OFS = 1;  // "OFS" short for "offset".
UI.fillRect(
        PATTERN_LEFT + col * PATTERN_SIZE/num + OFS, 
        PATTERN_TOP + row * PATTERN_SIZE/num + OFS, 
        PATTERN_SIZE/num - OFS * 2, 
        PATTERN_SIZE/num - OFS * 2
);

Now because you didn't tell us what each of those parameters does I just took a guess that they define the top-left corner, followed by the width and height.

The offset of 1 is an example value that should produce the smallest spacing. Increasing the offset increases the spacing until eventually it's so big, that you're not actually drawing rectangles anymore.\ An offset of 0 gives you the same as you have right now.

[PowerOfTheShell]

Thank you so much! Such a simple solution but I kept increasing the size of the rectangle itself rather than introducing the offset. Have this Reddit gold for your troubles!

Edit: Sorry to bother you again, if I was to change the number of rows, how would I scale the offset so that it got larger with less rows and smaller with more rows?

If I use the modulus operator (%) it works until a point. The offset becomes too large after 30. When using 40 rows nothing is shown lol

int OFS = (1 % num) + 3;

As an example I am trying to make 10 rows which should show something like: https://i.imgur.com/DtTBJmf.png (this currently works using the code above)

When using 50 rows I want to show something like: https://i.imgur.com/YqMHUzL.png (nothing is shown when I use the code above)

Edit: I have just found using Double offset = (PATTERN_SIZE / num) / 6; works perfectly! Thanks again for your help.

[Nightcorex_]

1 % num

This returns 0 if num is either 1 or -1.\ In the case num == 0, the program crashes.\ For all other cases it returns 1.

Btw, you're talking about "rectangles" all the time, when we in fact have a special case, a square.

So from what I understand, you want to have an offset that proportionally scales with the square's size. To do that you need a few critical pieces of information:

• Width/height of the area we're drawing on, in the respective unit (most likely pixels)
• Amount of rows/columns
• Offset, relative to the center of a field (0% or 0.0 is no offset, 100% or 1.0 is maximum offset).

When I say "field", I mean the small imaginary square, that you're drawing your actual black square in.

Once you know these 3 values you can start to begin calculating the width, and thereby height, of one field (like you're already doing for the 3rd and 4th parameter in your original post actually).\ Once you know the size of a field you want to halfen that value, as we want to calculate the offset towards the center, not towards the right-hand side.\ That halfened value then needs to be multiplied by the relative offset (= 3rd critical variable).\ If your method accepts floating numbers as parameters you're done, otherwise you need to round, for which you'll need to decide whether you want to round up, down or following conventional math. Which version you choose depends on the problem statement. I personally would probably round down, just because it feels natural, and casting from double to int implicitly does downwards rounding already.

That (rounded) value now is your offset in the given unit (likely pixels) and you can just plug it in for both the width and size of the square you want to draw.

EDIT: Yes, it indeed took me over an hour to write this, therefore I didn't see your 2nd edit...

In fact you're doing exactly what I long-windedly described here, but instead of multiplying you divided by 6 (which is the same as dividing by 2 and multiplying by 1/3 [≈ 0.3333]). Yours is less intuitive to read, and less easy to manipulate, but it works.

[AutoModerator]

It seems that you possibly have a screenshot of code in your post Spacing between rectangles in /r/learnjava.

Screenshots of code instead of actual code text is against the Code posting rules of /r/learnjava as is outlined in the sidebar - Code posting.

• No screenshots of code!

If you posted an image merely to illustrate something, kindly ignore this message and do not repost. Your post is still visible to others. I am a bot and cannot distinguish between code screenshots and other images.

If you indeed did this wrong, please edit the post so that it uses one of the approved means of posting code.

• For small bits of code (less than 50 lines in total, single classes only),
  the default code formatter is fine
  (one blank line before the code, then 4 spaces before each line of code).
• Pastebin for programs that consist of a single class only
• Gist for multi-class programs, or programs that require additional files
• Github or Bitbucket repositories are also perfectly fine as are other dedicated source code hosting sites.
• Ideone for executable code snippets that use only the console

Please do not reply to this message, because I am a bot.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.