rainbow-paint-by-numbers

Rainbow Paint by Numbers

A wholesome paint-by-numbers app made with love, by a dad and daughter, for that daughter.

Why This Exists

Like many parents, I got tired of watching my daughter navigate through ad-riddled, in-app-purchase-laden colouring apps that seemed more interested in monetisation than providing a good experience. So we decided to make our own.

This app is tailored specifically to her taste, featuring cute designs that come to life when you complete a painting! The reward for finishing isn’t a popup asking for money — it’s watching your artwork animate into something magical.

Asset Generation

All artwork and animations in this app are AI-generated and post-processed into paintable segments. The entire pipeline runs locally on an NVIDIA RTX 5090 using ComfyUI.

Text-to-Image: Flux2 Dev

We use Flux2 Dev to generate the base artwork.

Positive Prompt:

(masterpiece), flat vector art, children's coloring book style, cute [SUBJECT], simple shapes, thick bold outlines, cel shaded, vibrant solid colors, white background, minimalist, high contrast, 2d game asset, no dithering

Negative Prompt:

shading, gradients, noise, texture, realistic, photography, 3d, rendering, complex details, fuzzy, sketch, watermark, text, greyscale

This produces clean, bold, child-friendly artwork with distinct color regions perfect for a paint-by-numbers game.

Image-to-Video: Wan2.2

When a painting is completed, we play an animation generated by Wan2.2 that brings the static artwork to life. This gives kids that satisfying “wow” moment as their finished work starts moving!

Post-Processing: Creating Paintable Segments

The generated images go through a post-processing pipeline to become usable game assets:

  1. Color Quantization — Reduce the image to a limited palette of distinct, solid colors
  2. Boundary Detection — Identify edges between color regions using contour detection
  3. Segment Extraction — Convert each color region into a discrete, fillable polygon
  4. Outline Generation — Create the thick black outlines that define each segment
  5. Metadata Export — Map each segment to its target color for gameplay validation

The result is a set of clearly defined regions that players can tap to fill, with the app tracking progress toward the original colored design.

Tech Stack

Built with modern React Native tooling for a smooth, performant experience:

Technology Purpose
React Native Cross-platform mobile framework
Expo Development platform & tooling
Shopify Skia High-performance 2D graphics rendering
Zustand Lightweight state management
React Native Reanimated Fluid animations
React Native Gesture Handler Touch interactions (tap, pan, pinch-to-zoom)
Expo Router File-based navigation
Expo Video Victory animation playback
Expo Haptics Tactile feedback on interactions

Getting Started

This app uses native modules (Skia, Reanimated, etc.) and requires a development build.

  1. Install dependencies: 
    npm install
  2. Build and run on Android: 
    npx expo run:android

    Or build and run on iOS:

    npx expo run:ios

License

Made with love. Feel free to use this as inspiration for your own family projects.