[Released] Coloring Book Algorigthm (+Bradley Local Threshold for photos)

Hi,

I am happy to announce my first asset has just been released on Asset Store.

Check it out at https://www.assetstore.unity3d.com/en/#!/content/86803

Its an asset that will get you up and running with any Coloring project in a matter of minutes. Its a component I created for my coloring app (https://play.google.com/store/apps/details?id=pl.ayground.coloringbook). Well tested on both Android and iOS.

• There is no need to prepare coloring pages - any B&W PNG will do.
  
• On top of the Coloring script you will also get an implementation of Bradley Local Threshold to process a photo of a handmade coloring image.
• Sample App (Coloring Book Template) provided - give it a try at https://play.google.com/store/apps/details?id=pl.ayground.coloringalgorithm
  
• Add a set of pages, a color pallette of your choice and you are good to conquer the world with your coloring book.

Any question - let me know here on the forum.

PS. It works on Texture2D level so any Texture2D (and derivatives) usage ideas are possible.

 

You mention the " Bradley Local Threshold algorithm" that can be used to import a photo and binarize it for coloring book. I don't see anything on it's usage in the documentation. I created an image, made it into a sprite and put it in the same folder as the other coloring images but it didn't show.

Can you please explain it's usage and how I can change my photos into coloring pages?

Many Thanks!

 

Hi @SocialFreak

Happy to hear you purchased my component. Hope it will serve you well.

First - lets address the binarize algorithm - it can be enabled in DrawableBitmapContainer constructor:

public DrawableTextureContainer (Texture2D source, bool convertToPureBW, bool doBradleyTreshold)
​

When you initialize a new DrawableTextureContainer you need to provide it with a Unity Texture2D instance and you can either ask it to make a simple BW coversion (source, true, false) or ask for a Bradley binarize logic (source, true, true) - bear in mind the second will take some time to process vs the "dummy" one.

Now - if you want to see it in action using sample scene you need to place it in Samples list (see attached screenshot). I made the sample code quite error prone as it expects exactly 6 elements in that list so to check it on your image quickly just overwrite the photo1.jpeg - that would be the fastest way to test.

Finally - the sample scene is there to show how fast the coloring happens but should not be used as a starting point of a coloring book app. My coloring book app (linked in the asset description) is a combination of various assets - and my algorithm does handle the coloring ("paint bucket tool") piece.

Hope this helps - if any additional question do let me know.

Happy coloring

 

Thanks for the fast and very detailed response! Answered all my questions and I got it working. It also helped to look at the settings for your photo1 and see how it was setup. I set mine up the same.

I see in your example script ColoringController where you had it set to 6 so I changed it to 7 and see all plus mine.

Cheers,

Neil

 

Happy to hear you moved forward with your project Neil. Anything else let me know. And do not hesitate to rate my asset in asset store

PS. One watch out for photos import - current cameras have crazy resolutions (3000x2000 was already there on iPhone 4S) and coloring on such a large image is a computing and memory nightmare. All the images I use in my Coloring App are in the range of 1200x1200 max (rarely a square, quite often somewhere in the range of 800x1200) and the user experience is just fine. If you will working on some photo based coloring app do keep that in mind - for most of the images the 3k resolutions are not required. Happy coloring!

 

Hi,

Version 0.4 is on its way to Asset Store. I updated it to include a fully functional coloring book app project you can start with. Check the app at https://play.google.com/store/apps/details?id=pl.ayground.coloringalgorithm to see it in action.

 

Version 0.4 has just been approved and is available in Asset Store

Now this asset includes a fully functional coloring app template you can start with - check it live on Android https://play.google.com/store/apps/details?id=pl.ayground.coloringalgorithm just throw in your PNG coloring templates, review and update colors available in color picker if necessary and you are good to go.

Happy Coloring!

 

is this package have "proggress saving" feature?

 

Hi, sorry for late reply - I am away with my kids till early Sept. No - there is no progress saving here - but it's quite easy to achieve - either by saving the colored png or by save the series of coloring clicks (taps). This second way also gives you a way to implement undo function by reverting the last action.

 

Does this allow the user to draw/write on a 3D object surface only? I mean, say I have a 3D cube with a plane etc on the side can it allow the user to draw/write only in the confines of the plane area? Or is this Unity canvas UI only?

 

Hi, my algorithm operates on a Texture2D objects so if you have a place where you can use a Texture2D you can possibly use it. I have not tried using it in 3D context though and I use it in UI only. I am quite busy right now but will look into that later and get back to you with some samples of whats possible in 3D (e.g. cube with a material thats colored like a coloring page).

 

@elpuerco63 I made a quick and dirty check and seems that you can easily modity Texture on the fly. using my algorithm.

Below is a sample code I wrote minutes ago that makes crazy coloring of the GameObjects assigned into Targets List. Please bear in mind this is just a quick and dirty test and what is key is to use the right location on the texture (X,Y) to start the coloring.

Code (csharp):

1.  
2. using System.Collections;
3. using System.Collections.Generic;
4. using UnityEngine;
5. using pl.ayground;
6.  
7. public class ColoringMagician : MonoBehaviour {
8.  
9.     public List<GameObject> Targets;
10.  
11.     public void Update(){
12.    
13.         if (Input.GetKeyDown(KeyCode.Space)){
14.             foreach (GameObject o in Targets){
15.                 MeshRenderer mr = o.GetComponent<MeshRenderer>();
16.                 if (mr!=null){
17.                     Debug.Log("Running random coloring object :" + o.name);
18.                     Texture2D t2d = mr.material.mainTexture as Texture2D;
19.                     DrawableTextureContainer cnt = new DrawableTextureContainer(t2d, false, false); //Initialize
20.                     int x = Random.Range(0, cnt.getWidth());
21.                     int y = Random.Range(0, cnt.getHeight());
22.                     Color32 c = new Color32((byte)Random.Range(0, 255), (byte)Random.Range(0, 255), (byte)Random.Range(0, 255), (byte)255);
23.                     cnt.PaintBucketTool(x,y,c); // Color
24.                     mr.material.mainTexture = cnt.getTexture() as Texture; // Update Texture
25.                 }
26.             }
27.         }
28.     }
29. }
30.  

 

All - just an FYI - my asset is part of Mega Sale so you can get it 30% cheaper - go and create your coloring book (or explore coloring algorithm usage in 3D) now.

 

Hi, this is what i want something which work on Png i have 2 main Questions
1) so what all we have to do import png and your algorithm itself determine Hair and face other parts of body so when User click on hair only hair color is changed and when user click on face face color is changed ? please see attached image

2) My main Question is Either social media sharing and save to gallery are also provided
Thanks in advance
Great Tool
Respect
From Lahore,Pakistan

 

Hi @ahmadshabbir

Sorry for a slight delay in response - I was out with my kids for a short winter break.

Here are the replies:

1) All you need is to import a PNG file. No further preparation required. Thrown in a black and white lineart and you should be good to go.The only caveat is that the file should not have any "open areas" that paint could "leak through".

2) The coloring algorithm operates on a Texture2D which you can easily export to PNG and then share to FB or save on the device. There is no "save to gallery" nor "media sharing" included - just the coloring. There are plenty of assets handling that in the Asset Store already.

Hope this helps.

regards,
Piotr

 

I really like the app but need free hand mode as well in order to fit our needs, would that be possible?

 

hi @jmayes sorry for the delay, right now its not available, and not something to be easily added. I will keep that in mind as a potential future request. thanks.

 

I absolutely love your App, guess it used to be called Coloring Expert. I think it's the most versatile coloring app in the world. I am trying to build my own but a little frustrated learning Unity. There seems to be no clear directions on where to start build a 2D app. Most instructions are for games. Any advice? I purchased the Coloring Book Algorigthm and understand how to run the demo but am not making progress beyond that. Would you ever consider a re-skin for clients. Your thoughts are much appreciated. Ed, Maryland USA

 

When I try to add my own image, I can not test in the Play Mode because I get a Compiler Error- Assets/ColoringBookAlgorithm/Examples/ColoringAppTemplate/Scripts/ColoringController.cs(46,52): error CS1501: No overload for method `Instantiate' takes `2' arguments. I do realize this may be way over my head so will respectfully accept being told to leave coding to professionals! thanks so much.

 

Hi there @ercroft - as you have said its not that easy if you have no programming background. Unity does offer some training videos if I am not mistaken (start at https://unity3d.com/learn and see what you will find) which could get you started in the game programming world. But the learning curve for a non programmer may be quite steep as its not only Unity but the programming basics you need to learn.

I suggest you start from something easy before going into creating your own Coloring Book. Few ideas I have on my mind would be

1) write a rock / paper / scissors (random number based) game with a rudimentary UI
2) work on the UI a little bit to learn what Unity can do
3) write a single player memory game (match pairs) on a fixed board
4) rewrite it to use Instantiate and have any board size you can imagine
5) make it a two player game on a single device
6) add some menu into it that scales well on various mobile screens.

and so on and so on ... iteration by iteration you will learn something, and do not move to next step till you really know what you did in previous one.

as per your reskin question - catch me via private message or drop me an email at support (at) ayground.pl to let me know more.

PS. cannot troubleshoot the issue you stated right now as I am away from my main computer and cannot check the source.

 

thanks so much. I do appreciate your honesty and advice!

 

Hi, recently i bought your extension for Unity and used it for making a coloring book app, but I have a huge problem with the files that I import, there is a lot of white pixels on the edges that don't get colored. I tried every single solution out there, tried with different resolutions, tried cleaning my PNGs through photoshop, different settings for importing sprites but the result is always the same. Could you please somehow tell me how to fix this? Its getting annoying

 

hi @japanac, I will be happy to help - Could you please share the source image for that coloring page via an email to support(at)ayground.pl so I can have a look. I bet this is in result of some pixels on the border being neither black nor white but in all shades of gray and my algorithm treating them as separate areas and not coloring them. But lets see the source file.

Also - please clarify if you try to import then during runtime or add them in editor?

Looking forward to hear from you.

 

@japanac - I have not seen anything from you in my mailbox. Have you managed to get this sorted out on your own?

 

FYI - this asset is now part of Asset Store May Madness sale - get it with a discount now. Happy Coloring!

https://www.assetstore.unity3d.com/en/#!/content/86803

 

Hello there, is this asset can fill a gradient color and a pattern?

 

sorry for the delay @Anoa - no gradients or pattern here. sorry

 

I noticed a memory issue with ColoringAppTemplate example. I replaced the images with 2k res ones and noticed if I repeatedly open images (or even the same one), the memory will keep going higher and higher. After 30 openings it was at 2 GB of memory. If someone is browsing through the images I realize I shouldn't be getting the pixels just yet but wanted to share a small fix that still may be useful.

In the ColoringAppTemplate example, ColoringController.cs, at public void InitWithColoringPage(Texture2D texture) I added "if (Image.texture != null) Destroy(Image.texture);" at the beginning. That seems to have stopped the memory from ever going above .8 GB. I think the old textures were never "forgotten".

 

Hi @OreoSplitter - thanks for rising that, together with a bugfix! Looking at your story of memory going up endlessly for every new coloring page and a fix that destroys a non-null texture it looks fully correct.My bad. Will update the code when time allows (Unity does take a long time to review it as well). Happy coloring!

 

Found another. Crazy garbage.
In DrawableTextureContainer.cs in private Color32[] getDirtyAreaAsColorArray() is "Color32[] retVal = new Color32[w * h];" Creating a new array creates garbage. On a 2k image it was 16MB of garbage every single coloring click! So I removed that entire line and made it a global variable. Since you never rely on array.length (like in a for loop) as long as we keep the array bigger then what the code will ever expect no errors should occure. So why not use the image size.
Inside public DrawableTextureContainer (Texture2D source, bool convertToPureBW, bool doBradleyTreshold) added "retVal = new Color32[source.width * source.height];" a few lines in. Now the array is created only once and we change the index values with each click. No garbage.

For some reason I saw better performance calling the method and putting in the actual array instead of returning retVal. So I changed the name retVal to dirtyPixels since I am no longer returning it and it explaines what the variable holds. Then added/changed

getDirtyAreaAsColorArray();
texture.SetPixels32 (dirtyArea.x, dirtyArea.y, dirtyArea.width, dirtyArea.height, dirtyPixels);

 

Experiencing a strange 'blotching' issue, have you seen this before? Not sure what's causing it.. My source images are simple B+W (characters with a white outline of a few pixels) with the rest of the image fully transparent.