Two dimensional color ramp (256x256 matrix) interpolated from 4 corner colors
<p>What I want to achieve is to programmatically create a two-dimensional color ramp represented by a 256x256 matrix of color values. The expected result can be seen in the attached image. What I have for a starting point are the 4 corner colors of the matrix from which the remaining 254 colors inbetween should be interpolated. While I had some success for interpolating the colors for one axis, the two-dimensional calculation provides me some bad headaches. While the image seems to have a non-linear color gradient, I would be happy with a linear one.</p>

<p>If you could give me some hints how to do this with numpy or other tools I`ll be more than thankful.</p>

<p><a href="http://i.stack.imgur.com/o1BUK.png"><img src="http://i.stack.imgur.com/o1BUK.png" alt="enter image description here"></a></p>

<p>Here are 3 ways to do this bilinear interpolation. The first version does all the arithmetic in pure Python, the second uses <a href="https://python-pillow.org/" rel="nofollow">PIL</a> image composition, the third uses Numpy to do the arithmetic. As expected, the pure Python is significantly slower than the other approaches. The Numpy version (which was derived from code written by <a href="http://stackoverflow.com/users/5067311/andras-deak">Andras Deak</a>) is almost as fast as the PIL version for small images, but for larger images the PIL version is noticeably faster.</p>

<p>I also tried using jadsq's scaling technique in PIL but the results were not good - I suspect that PIL's interpolation code is a little buggy.</p>

<p>If you wanted to create lots of these bilinear gradient images of the same size, the PIL technique has another advantage: once you've created the composition masks you don't need to rebuild them for every image.</p>

<pre><code>#!/usr/bin/env python3

''' Simple bilinear interpolation 
    Written by PM 2Ring 2016.09.14
'''

from PIL import Image
from math import floor
import numpy as np

def color_square0(colors, size):
    tl, tr, bl, br = colors
    m = size - 1
    r = range(size)

    def interp_2D(tl, tr, bl, br, x, y):
        u0, v0 = x / m, y / m
        u1, v1 = 1 - u0, 1 - v0
        return floor(0.5 + u1*v1*tl + u0*v1*tr + u1*v0*bl + u0*v0*br)

    data = bytes(interp_2D(tl[i], tr[i], bl[i], br[i], x, y)
        for y in r for x in r for i in (0, 1, 2))
    return Image.frombytes('RGB', (size, size), data)

# Fastest
def color_square1(colors, size):
    #Make an Image of each corner color
    tl, tr, bl, br = [Image.new('RGB', (size, size), color=c) for c in colors]

    #Make the composition mask
    mask = Image.new('L', (size, size))
    m = 255.0 / (size - 1)
    mask.putdata([int(m * x) for x in range(size)] * size) 

    imgt = Image.composite(tr, tl, mask)
    imgb = Image.composite(br, bl, mask)
    return Image.composite(imgb, imgt, mask.transpose(Image.TRANSPOSE))

# This function was derived from code written by Andras Deak    
def color_square2(colors, size):
    tl, tr, bl, br = map(np.array, colors)
    m = size - 1
    x, y = np.mgrid[0:size, 0:size]
    x = x[..., None] / m
    y = y[..., None] / m
    data = np.floor(x*y*br + (1-x)*y*tr + x*(1-y)*bl + (1-x)*(1-y)*tl + 0.5)
    return Image.fromarray(np.array(data, dtype = 'uint8'), 'RGB')

color_square = color_square1

#tl = (255, 0, 0)
#tr = (255, 255, 0)
#bl = (0, 0, 255)
#br = (0, 255, 0)

tl = (108, 115, 111)
tr = (239, 239, 192)
bl = (124, 137, 129)
br = (192, 192, 175)

colors = (tl, tr, bl, br)
size = 256
img = color_square(colors, size)
img.show()
#img.save('test.png')
</code></pre>

<p><strong>output</strong></p>

<p><img src="http://i.stack.imgur.com/CswYU.png" alt="bilinear gradient"></p>

<hr>

<p>Just for fun, here's a simple GUI program using Tkinter which can be used to generate these gradients.</p>

<pre><code>#!/usr/bin/env python3

''' Simple bilinear colour interpolation
    using PIL, in a Tkinter GUI

    Inspired by http://stackoverflow.com/q/39485178/4014959

    Written by PM 2Ring 2016.09.15
'''

import tkinter as tk
from tkinter.colorchooser import askcolor
from tkinter.filedialog import asksaveasfilename

from PIL import Image, ImageTk

DEFCOLOR = '#d9d9d9'
SIZE = 256

#Make the composition masks
mask = Image.new('L', (SIZE, SIZE))
m = 255.0 / (SIZE - 1)
mask.putdata([int(m * x) for x in range(SIZE)] * SIZE) 
maskt = mask.transpose(Image.TRANSPOSE)

def do_gradient():
    imgt = Image.composite(tr.img, tl.img, mask)
    imgb = Image.composite(br.img, bl.img, mask)
    img = Image.composite(imgb, imgt, maskt)
    ilabel.img = img
    photo = ImageTk.PhotoImage(img)
    ilabel.config(image=photo)
    ilabel.photo = photo

def set_color(w, c):
    w.color = c
    w.config(background=c, activebackground=c)
    w.img = Image.new('RGB', (SIZE, SIZE), color=c)

def show_color(w):
    c = w.color
    newc = askcolor(c)[1]
    if newc is not None and newc != c:
        set_color(w, newc)
        do_gradient()

def color_button(row, column, initcolor=DEFCOLOR):
    b = tk.Button(root)
    b.config(command=lambda w=b:show_color(w))
    set_color(b, initcolor)
    b.grid(row=row, column=column)
    return b

def save_image():
    filetypes = [('All files', '.*'), ('PNG files', '.png')]
    fname = asksaveasfilename(title="Save Image",filetypes=filetypes)
    if fname:
        ilabel.img.save(fname)
        print('Saved image as %r' % fname)
    else:
        print('Cancelled')

root = tk.Tk()
root.title("Color interpolation")

coords = ((0, 0), (0, 2), (2, 0), (2, 2)) 
tl, tr, bl, br = [color_button(r, c) for r,c in coords]

ilabel = tk.Label(root, relief=tk.SUNKEN)
do_gradient()
ilabel.grid(row=1, column=1)

b = tk.Button(root, text="Save", command=save_image)
b.grid(row=3, column=1)

root.mainloop()
</code></pre>

python numpy image-processing