/_posts/portfolio/coloring-book/2013-04-18-coloring-book.html

---
title: "Coloring Book"
description: false
date: 2013-04-18 00:09:45
category: portfolio
pagination_enabled: false
layout: portfolio-page
tags:
  - mobile
---

<div class="row">

  <!-- TITLE -->
  <div id="{{ page.title | downcase | replace:' ','-' | replace:'.','-' }}">

    <!-- The project content -->
    <div id="content">
      <div class="span8">
        <div class="blog">

          <div class="pagebody">
            <article>

              <header>
                <h2 class="title"><a href="{{ page.url }}" class="title-link">{{ page.title }}</a></h2>
              </header>

              <div class="project-tagline">
                <p>
                  An application fitted perfectly for both mobile devices and
                  tablets.
                </p>
              </div>

              <!-- SCREENSHOTS/CODE SNIPPETS -->
              <ul id="pikame" class="clearfix">

                <li>
                  <a href="/img/portfolio/coloring-book/coloring-book-01.png">
                    <img src="/img/portfolio/coloring-book/coloring-book-01.png"
                    class="project-screenshot"
                    alt="" />
                  </a>
                </li>

                <li>
                  <a href="/img/portfolio/coloring-book/coloring-book-02.png">
                    <img src="/img/portfolio/coloring-book/coloring-book-02.png"
                    class="project-screenshot"
                    alt="" />
                  </a>
                </li>

                <li>
                  <a href="/img/portfolio/coloring-book/coloring-book-03.png">
                    <img src="/img/portfolio/coloring-book/coloring-book-03.png"
                    class="project-screenshot"
                    alt="" />
                  </a>
                </li>

                <li>
                  <a href="/img/portfolio/coloring-book/coloring-book-04.png">
                    <img src="/img/portfolio/coloring-book/coloring-book-04.png"
                    class="project-screenshot"
                    alt="" />
                  </a>
                </li>

                <li>
                  <a href="/img/portfolio/coloring-book/coloring-book-05.png">
                    <img src="/img/portfolio/coloring-book/coloring-book-05.png"
                    class="project-screenshot"
                    alt="" />
                  </a>
                </li>

              </ul>

              <div class="project-description">

                <h3>Project Details</h3>

                <p>
                  Coloring Book is for anyone of any age and contains lots of pictures to color!
                  This application contains no ads.
                </p>

                <h3>Multiple books to choose from</h2>

                <p>
                  Coloring Book contains many different collections of images to
                  color.
                </p>

                <h4>Coloring Books</h4>

                <p>
                  Each coloring book, represented by a single canvas, contains a
                  set of 10 images. The application comes with a free set to
                  color. Should you decide you want more, you can always
                  purchase more sets in the application shop.
                </p>

                <p>
                  Each set is a purchase-once unlimited use item. All purchases
                  are restorable. So even if, one day, you uninstall the
                  application and decide to reinstall it in the future, you will
                  be able to color your purchased sets.
                </p>

                <p>
                  The pictures range from toys and games to farm animals and
                  cute pets. And more are on their way. As more sets get
                  released, there will be more and more images to color.
                </p>

                <h3>Paint or Fill? Brush or bucket?</h3>

                <p>
                  With these tools at your disposal, you can color your images
                  exactly how you want to.
                </p>

                <h4>Brush-mode</h4>

                <p>
                  With brush-mode, gone are the days where you just touch an
                  area to fill it with color. Brush-mode allows you to color an
                  image exactly the way you want to.
                </p>

                <p>
                  The brush-mode algoritms are constantly being improved in each
                  update to allow for ever-improving accuracy on mobile devices.
                </p>

                <h4>Fill-mode</h4>

                <p>
                  Fill-mode allows you to completely fill a bounded section with
                  color. The floodfill algorithm allows for pixel-perfect
                  accuracy when using the fill-bucket.
                </p>

                <h3>It's all in the layers...</h3>

                <p>
                  The coloring book rendering engine uses multiple layers for
                  rendering the image. This has many benefits and gives more
                  control with regards to the presentation of the coloring
                  pages.
                </p>

                <h4>Erase with ease</h4>

                <p>
                  Erasing your colors will not erase the picture. The colors a
                  user paints and the actual picture are drawn to two seperate
                  layers. The result is that the picture will always be
                  displayed, no matter how a user chooses to alter the image.
                </p>

                <h4>Layer maps make flood-filling a breeze</h4>

                <p>
                  Each picture is backed by a "layer map." These maps contain an
                  outline of the pictures, with the outline being 1 pixel in
                  width. The on-screen picture's stroke-widths vary, as can be
                  seen on the images to the left. The maps let the flood-fill
                  algorithm fill an area without producing aliasing artifacts.
                  The layering also allows for the fill to occur
                  "behind-the-scenes." The user only sees the result of the
                  algorithm.
                </p>

              </div>

            </article>
          </div> <!-- blogbody solo -->

        </div> <!-- blog -->
      </div> <!-- span8 bootstrap -->
    </div> <!--/content-->

    <div id="sidebar">
      <!-- The sidebar -->
      <div class="span4">

        <!-- DISTRIBUTION -->
        <div class="side">

          <div class="text-center">
            <h3 class="dark-title">Distribution</h3>
          </div>

          <ul class="nav nav-list">

            <li class="nav-header">iOS</li>

            <li>
              <a
                href="https://itunes.apple.com/us/app/coloring-book-collection-fun/id611799960?mt=8&amp;uo=4"
                rel="alternate">
                <img src="/img/icons/ios-icon-16x16.png"
                class="sidebar-icon" alt="iOS icon" />&nbsp;View in The App 
                Store
              </a>
            </li>

            <li>
              <a
                href="https://fossil.tehpotatoking.com/byronsanchez/coloring-book-ios"
                rel="alternate">
                <img src="/img/icons/sourcecode-icon-16x16.png"
                class="sidebar-icon" alt="Source Code icon" />&nbsp;View Source
                Code
              </a>
            </li>

            <li>
              <a href="https://github.com/byronsanchez/coloring-book-ios"
                rel="alternate">
                <img src="/img/icons/github-icon-16x16.png"
                class="sidebar-icon" alt="Github icon" />&nbsp;View on
                Github
              </a>
            </li>

            <li>
              <a
                href="https://bitbucket.com/byronsanchez/coloring-book-ios"
                rel="alternate">
                <img src="/img/icons/bitbucket-icon-16x16.png"
                class="sidebar-icon" alt="Bitbucket icon" />&nbsp;View on
                Bitbucket
              </a>
            </li>

            <li class="nav-header">Android</li>

            <li>
              <a
                href="https://play.google.com/store/apps/details?id=net.globide.coloring_book_08"
                rel="alternate">
                <img src="/img/icons/android-icon-16x16.png"
                class="sidebar-icon" alt="Android icon" />&nbsp;View on Google
                Play
              </a>
            </li>

            <li>
              <a
                href="https://fossil.tehpotatoking.com/byronsanchez/coloring-book-android"
                rel="alternate">
                <img src="/img/icons/sourcecode-icon-16x16.png"
                class="sidebar-icon" alt="Source Code icon" />&nbsp;View Source
                Code
              </a>
            </li>

            <li>
              <a href="https://github.com/byronsanchez/coloring-book-android"
                rel="alternate">
                <img src="/img/icons/github-icon-16x16.png"
                class="sidebar-icon" alt="Github icon" />&nbsp;View on
                Github
              </a>
            </li>

            <li>
              <a
                href="https://bitbucket.com/byronsanchez/coloring-book-android"
                rel="alternate">
                <img src="/img/icons/bitbucket-icon-16x16.png"
                class="sidebar-icon" alt="Bitbucket icon" />&nbsp;View on
                Bitbucket
              </a>
            </li>

          </ul>

        </div> <!-- side -->
        <p></p>

        <!-- TECHNOLOGY -->
        <div class="side">
          <div class="text-center">
            <h3 class="dark-title">Technology</h3>
          </div>

          <ul class="nav nav-list">

            <li>
              <img src="/img/icons/check-icon-16x16.png" class="sidebar-icon" alt="
              icon"alt="Check icon" />&nbsp;Objective-C, Java
            </li>

            <li>
              <img src="/img/icons/check-icon-16x16.png" class="sidebar-icon" alt="
              icon"alt="Check icon" />&nbsp;HTML, CSS, JavaScript
            </li>

            <li>
              <img src="/img/icons/check-icon-16x16.png" class="sidebar-icon" alt="
              icon"alt="Check icon" />&nbsp;SQLite
            </li>

            <li>
              <img src="/img/icons/check-icon-16x16.png" class="sidebar-icon" alt="
              icon"alt="Check icon" />&nbsp;Paint-bucket and brush modes
            </li>

            <li>
              <img src="/img/icons/check-icon-16x16.png" class="sidebar-icon" alt="
              icon"alt="Check icon" />&nbsp;Compatible with phones and tablets
            </li>

          </ul>

        </div> <!-- side -->
        <p></p>

        <!-- CODE SNIPPETS -->
        <div class="side">
          <div class="text-center">
            <h3 class="dark-title">Code Snippets</h3>
          </div>

          <ul class="nav nav-list">

            <li>
              <a class="fbox" href="/coloring-book-code-snippet-1/">
                <img
                src="/img/portfolio/coloring-book/coloring-book-06.png"
                alt="" class="sidebar-img" />
              </a>
            </li>

            <li>
              <a class="fbox" href="/coloring-book-code-snippet-2/">
                <img
                src="/img/portfolio/coloring-book/coloring-book-07.png"
                alt="" class="sidebar-img" />
              </a>
            </li>

          </ul>

        </div> <!-- side -->
        <p></p>

      </div> <!-- span bootstrap -->
    </div> <!-- /sidebar -->


  </div> <!-- project id -->
</div> <!-- row bootstrap -->