How to process an image for an android coloring book app?

Question

I have an idea for a coloring book kind of app for Android devices.

However, I have no experience in actually processing the images so that I could color them. I fear that my question may be too vague, but that's the best I can do with my experience, so please bear with me if you try to answer (:

So here is my question. At the moment I am not looking to use any sprite-based engine, as I don't have the means to pay for the ones I know how to work with. So that leaves me with using the basic Android framework.

The result I am seeking is having an image like this:

And have the user of the app choose a color and fill in the white spaces.

I can manage doing the ui and programing the other parts of the app, however I have NO IDEA AT ALL how to process an image like this so that the app could recognise the white spaces as segments and gain the ability to color them.

If you need more information regarding my question please ask away!

Thank you in advance, oh glorious stackoverflow community <3

Answer 1

Check this link : Android flood-fill algorithm

Use the QuickLinearFloodFilelr to fill the white areas.

Like this:

QueueLinearFloodFiller f = new QueueLinearFloodFiller(mBitmap,clr_int,mPaint.getColor());
            f.setFillColor(mPaint.getColor());
            f.setTargetColor(clr_int);
            f.setTolerance(10);
            f.floodFill(p1.x,p1.y); //fill bitmap, at p1 with p1's color and fill with Color from Switch

Answer 2

This question is too broad for Stack Overflow and will probably be closed, but as always, you should break your problem down into smaller pieces.

Step 1: Process the image so it only contains black and white. The image you posted now contains "off-white" artifacts that will make filling it more difficult, so get rid of them.

Step 2: Detect where the user clicks. When the user clicks, you need to know the position in the image of that click.

Step 3: Starting at that point, fill the (white) area surrounding it. Google is your friend, but the flood fill algorithm is a good place to start.

Step 4: Output the image.

You can break down any of those steps into even smaller steps. When you get stuck on a specific step, then you can post an MCVE showing what you've tried, and it'll be easier to help you out.

Answer 3

You can do the next:

1. Get bitmap instance for the image
   Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);
   
2. When user touch the screen get x,y of the touch point relative to the image
   
3. Use Flood fill algo to fill the white region https://en.wikipedia.org/wiki/Flood_fill
   

4. To get the pixel at position at position (x,y) use:

   myBitmap.getPixels(pixels, 0, myBitmap.getWidth(), 0, 0, myBitmap.getWidth(), myBitmap.getHeight());

5. To change pixel value at position (x,y) use: myBitmap.setPixel(x, y, Color.rgb(255, 255, 0));