Colour stuff online!!! With other people!!!

online_colouring.md

Context

https://magma.com provides a web interface for drawing and editing images and it seems to be collaborative, i.e. you can share a link with someone to work together on an image!

However, it can be kind of painful to do conventional 'drawing' by dragging a mouse. I think it might be more enjoyable to do a paint-by-numbers thing where you fill in white areas by clicking with a paint bucket tool. You can find a huge variety of black/white line drawings at https://www.justcolor.net/.

So we have the images and the colouring platform. What could go wrong? Well, most online images, including those in the link above, tend to have grey pixels between the black and white bits. This is manifested as the paint bucket 'not filling in the whitespace entirely', like this:

Solution

To solve this problem, we can use ... software!

1. HOMEBREW_NO_AUTO_UPDATE=1 brew install imagemagick (you're supposed to be having fun! Homebrew updates aren't fun.)

2. pip install Pillow (create venv first, etc.)

3. Save this script somewhere:

from PIL import Image
import os
import sys

def convert_to_black_and_white(input_image_path, threshold=160):
    # Open an image file
    with Image.open(input_image_path) as img:
        # Convert image to grayscale
        grayscale_with_alpha = img.convert("L")
        
        # Create a new image to store the binary result with alpha channel
        binary = Image.new("LA", grayscale_with_alpha.size)
        
        # Process each pixel
        width, height = grayscale_with_alpha.size
        for x in range(width):
            for y in range(height):
                # Get the pixel value (luminance and alpha)
                luminance = grayscale_with_alpha.getpixel((x, y))
                
                # Convert pixel to black or white and adjust alpha
                if luminance < threshold:
                    binary.putpixel((x, y), (0, 255))
                else:
                    binary.putpixel((x, y), (255, 255))
        
        # Save the new image
        output_image_path = input_image_path.replace('.jpg', '_INT.png')
        binary.save(output_image_path)

        # Convert to psd
        os.system(f'convert {output_image_path} {".".join(input_image_path.split(".")[:-1])}.psd')
        # Delete intermediate
        os.system(f'rm {output_image_path}')

convert_to_black_and_white(sys.argv[1])

4. Choose and download an image from https://www.justcolor.net/. NOTE: use right-click > 'save as image' in the browser instead of clicking the download button, as that will give you a PDF instead of a JPG.

5. Run python that_script.py your_image.jpg which will produce a PSD file in the same directory as the original image.

6. Import the PSD in https://magma.com.

7. The imported PSD will initially have a locked layer. At the bottom-right of the screen, select 'L1' and press the lock button to unlock it.

   

8. Use the paint bucket tool (or any other tool) on the left and start filling them in. If you accidentally paint the outline, just undo it :)