Inpainting, image processing, complex functions

I’m trying to code a program that will visualize the effect of various polynomial functions on the complex plane. For example, the first image below shows a segment of the complex plane, centered on (0, 0), colored according to phase. The image below it shows the effect of the function w(z) = z^2. The coloring in this image is based on each point’s location before the function was applied.

My problem is that when I transform an image, I now have gaps. (See the third image for the output of my program.) Two adjacent pixels in the original image are not quite adjacent after the mapping.

I’m looking for advice for handling this problem. Googling around brought me to
this solution implemented in Python/Jupiter notebooks. It relies on something called “inpainting.” I was wondering if something equivalent exists for javascript.

One solution I’ve tried is writing a function to “stuff” the array that holds the mapped numbers. It generates artifacts in the image without really filling the holes. The last image shows the result when I implement it with a factor = 10;

function expandArray(arr, factor) {
  let output = [];
  let last;
  for (let i = 0; i < arr.length - 1; i++) {
    let prev = arr[i];
    let next = arr[i + 1];
    for (let j = 1; j < factor; j++) {
      let temp = {};
      temp.x = prev.x + j * (next.x - prev.x) / factor;
      temp.y = prev.y + j * (next.y - prev.y) / factor;
      temp.hue = lerpColor(prev.hue, next.hue, j / factor);
    last = next;
  return output


1 Like


One easy fix would be to sample more points from the original image hoping that you would sample enough to cover all your output but it can quickly become expensive.

Otherwise, if you can ensure that your transformation is continuous (not sure if that’s the right term in english) you can work with “quad”. You take 4 adjacent pixels in your input image and it will give you 4 points in you output image. you can then extrapolate values inside the output quad.

Or, if you can reverse your functions, work the other way around. For each pixel of the output, find out the right color from the original image.

Hope it can help =)

1 Like

It looks like your reference example of inpainting uses opencv. There is an opencv for processing library, and a tutorial that mentions inpainting – although I haven’t watched it:

You might be able to do something similar with opencv.js:

…which looks like it has inpainting in there:

Thanks! This is helpful.