Algorithm to calculate values based on width and height (coordinates and size)

Question

What I want is might be separated into several or one methods, whatever is best.

I have four values that are set (as fields):

Width of image the whole image (canvas so to speak)
Height of the whole image (height of the canvas)
Padding (how many pixels I want to have as padding)
How many images in i want in the width and height separately (can be separate values)

What I want is to have a whole image, that I'm putting small images inside (these are the bitmap sizes I want to get from the method).

I basically want to have the size of the images inside, both the width and height. And coordinates in of the small images in the whole image view.

A small example might be:

The width of the image is 200 and I want a padding of 4, and I want to have 3 images on one row of the image.
The calculation would might look like this:

(200 - (4*(3+1))) / 3 = 61,33;
The 3+1 is only because I want to have padding on either side of the small images.

But this is only for width, i would like to have a universal solution that applies to height as well.

And calculate the height and width of every image that is inside the canvas-image.

And just to put some sugar on top. I would like to have the x and y coordinates of every image that is inside.

How can this be done? And how do I get every value? The bitmaps (I'm developing android) is stored in an ArrayList.

Basically I want this, a basic grid layout: http://developer.android.com/images/ui/gridview.png The values I have based on this image:

I have the size of the light-blue area,
including the space between the dark-blue images (padding)
and how many dark blue spots I want in every row and column.

What I want is the size (width and height of the dark-blue spots), and the coordinates of those images (where they should be placed in the light-blue area, x and y coordinates).

Anybody have a good solution for this?

UPDATED THE TEXT FOR CLARITY

Have you tried anything of your own? This is a simple problem. — Antti Huima, Jul 17 '13 at 13:05
in lib gdx game engine there is a sprite packer it ll create the whole image frome sprite bits and ll have a file containing each images coordinates — Athul Harikumar, Jul 17 '13 at 13:27
@AnttiHuima I tried, but what I got was the simple caclulation from above, I could get the coordinate values from every image if I somehow keep an eye of which image is in the grid (position) and then caclulate from that, Which I'm not entirly sure how to do in a good way either. But if it's an easy answer can't you answer and then get the rep? — Joakim Engstrom, Jul 17 '13 at 14:20

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

What you're describing is what game developers call spritesheets, tilesheets, tilesets, or whatever.

The general idea behind all of these is you have one image file of a certain type and inside that image you create subimages which can be pulled out and used individually in your program. Usually in video games these are of a consistent size but they don't have to be.

Check out the answer on this link: How to extract part of this image in Java? The answer here explains how to split an image up into several parts.

If you can't find what you're looking for there look up how game developers handle spritesheets for example to get an idea of how they do it.

edited May 23 '17 at 11:49

Community

1
1

answered Jul 17 '13 at 13:10

Bryan Abrams

327
1
8

I think he wants the reverse of what you're suggesting. He already has a collection of identically sized images, and wants to arrange them into a single larger image. You're talking about how to extract subimages from a larger image. – Kevin Jul 17 '13 at 13:25
You could be right. To be honest though I don't really understand his post so I just took from it what I could. If you need to do it in the other direction there are image processing libraries you can use: http://stackoverflow.com/questions/2407113/open-source-image-processing-lib-in-java – Bryan Abrams Jul 17 '13 at 13:33
That is right I wanted it the other way around. I wanted one image out of several small ones. – Joakim Engstrom Jul 17 '13 at 14:16
Update the question now, there were some problems understanding. – Joakim Engstrom Jul 17 '13 at 15:04

score 1 · Accepted Answer · answered Jul 19 '13 at 08:08

This is the code of what I'm doing and wanted to do. If anyone has ideas how to improve the code I will change my accepted answer.

public class ClassName {

public static int bitmapSizeWidth;
public static int bitmapSizeHeight;
public static final int bitmapPadding = 8;
public static final int howManyImagesColumn = 3;
public static final int howManyImagesRows = 2;

public static Bitmap folderBitmap(ArrayList<Bitmap> bitmapArray, int imageViewWidth, int imageViewHeight) {
    bitmapSizeWidth = imageViewWidth;
    bitmapSizeHeight = imageViewHeight;

    Bitmap b = Bitmap.createBitmap(bitmapSizeWidth, bitmapSizeHeight, Bitmap.Config.RGB_565);
    Canvas c = new Canvas(b);

    //Lets do it in a set coordinate system now
    if (bitmapArray.size() >= 1)
        c.drawBitmap(bitmapArray.get(0), bitmapPadding, bitmapPadding, paint);

    if (bitmapArray.size() >= 2)
        c.drawBitmap(bitmapArray.get(1), calculateSecondCoord().xPos, bitmapPadding, paint);

    if (bitmapArray.size() >= 3)
        c.drawBitmap(bitmapArray.get(2), calculateThirdCoord().xPos, bitmapPadding, paint);

    if (bitmapArray.size() >= 4)
        c.drawBitmap(bitmapArray.get(3), bitmapPadding, calculateSecondCoord().yPos, paint);

    if (bitmapArray.size() >= 5) {
        c.drawBitmap(bitmapArray.get(4), calculateSecondCoord().xPos, calculateSecondCoord().yPos, paint);
    }

    if (bitmapArray.size() >= 6) {
        c.drawBitmap(bitmapArray.get(5), calculateThirdCoord().xPos, calculateSecondCoord().yPos, paint);
    }

    return b;
}

public static BitmapSize calculateSingleBitmapSize(int imageViewWidth, int imageViewHeight) {
    bitmapSizeWidth = imageViewWidth;
    bitmapSizeHeight = imageViewHeight;
    BitmapSize bsize = new BitmapSize();
    bsize.widthSize = (int) (bitmapSizeWidth -
            (bitmapPadding * (howManyImagesColumn + 1))) / howManyImagesColumn;
    bsize.heightSize = (int) (imageViewHeight - (bitmapPadding * (howManyImagesRows + 1))) / howManyImagesRows;
    return bsize;
}

/*
 * First coord = padding
 * Second coord (bitmapPadding) + calculateSingleBitmapSize(bitmapSizeWidth);
 * Third coord (bitmapPadding * 3) + (calculateSingleBitmapSize(bitmapSizeWidth) * 2)
 * The math is supposed to be correct but can perhaps be done in a more efficient way
 */
private static BitmapCoord calculateSecondCoord() {
    BitmapCoord bCoord = new BitmapCoord();
    bCoord.xPos = (int) (bitmapPadding * (howManyImagesColumn - 1)) + calculateSingleBitmapSize(bitmapSizeWidth, bitmapSizeHeight).widthSize;
    bCoord.yPos = (int) (bitmapPadding * (howManyImagesRows)) + calculateSingleBitmapSize(bitmapSizeWidth, bitmapSizeHeight).heightSize;

    return bCoord;
}

private static BitmapCoord calculateThirdCoord() {
    BitmapCoord bCoord = new BitmapCoord();
    bCoord.xPos = (int) (bitmapPadding * howManyImagesColumn) + calculateSingleBitmapSize(bitmapSizeWidth, bitmapSizeHeight).widthSize * 2;
    bCoord.yPos = (int) (bitmapPadding * howManyImagesRows - 1) + calculateSingleBitmapSize(bitmapSizeWidth, bitmapSizeHeight).heightSize * 2;

    return bCoord;
}

public static class BitmapSize {
    public int widthSize;
    public int heightSize;
}

static class BitmapCoord {
    int xPos;
    int yPos;
}
}

Algorithm to calculate values based on width and height (coordinates and size)

2 Answers2