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];
output.push(prev);
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);
output.push(temp);
}
last = next;
}
output.push(last);
return output
}
