2

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:

Mandala

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

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
bochko
  • 363
  • 4
  • 14

3 Answers3

1

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));
Mahmoud
  • 2,683
  • 1
  • 30
  • 32
  • Thank you Mahmoud. I now mostly understand the process now. The idea of the flood fill algorithm was what i was missing. – bochko Aug 10 '15 at 13:39
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
Community
  • 1
  • 1
Tristan G
  • 1,720
  • 2
  • 13
  • 22
0

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.

Community
  • 1
  • 1
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • I hope it doesn't get closed, I intend to update it as things get cleared out in my head. The image I posted is just an example. In reality I will be drawing mine in vectors, so no artifacts would be present. As much as I want to believe I have some experience in programming, I have never heard or thought about the flood fill algorithm. You mentioning it helps me immensly. Thank you, Kevin! – bochko Aug 10 '15 at 13:24
  • @NoodlesFromHell No problem. Note that Stack Overflow's format doesn't really lend itself to you updating this question and getting more answers as your problem evolves. Instead, try to keep your questions small and standalone: just post a new question when you have a more specific problem instead of updating this one with new information. – Kevin Workman Aug 10 '15 at 13:26