Extrapolation of pixels position - graphics

I have an image with some curve draw in it and I want to extrapolate positions of next few pixels based on already drawn ones. An example is shown in figure 1. For this situation it is easy to fit curve (some parabola) using the least square fit (figure 2) and then based on this fit rasterize the curve to find next pixels (I also need the vector curve for some further calculations).
The problem is that there is often situations like one shown in figure 3, where I can't use curves like parabola, because I can't define such function. Have you any idea how to extrapolate curve/pixels which will work in both cases?

Related

How to calculate what percentage of a pixel is within the bounds of a shape

I have a 2d grid where pixel centers are at the intersection of two half-grid lines, as shown below.
I also have a shape that is drawn on this grid. In my case the shape is a glyph, and is described by segments. Each segment has a start point, end point and a number of off-curve points. These segments can be quadratic curves or lines. What's important is that I can know the points and functions that make up the outline of the shape.
The rule for deciding which pixels should be turned on is simple: if the center of the pixel falls within the shape outline, turn that pixel on. The following image shows an example of applying this rule.
Now the problem I'm facing has to do with anti aliasing. What I'd like to do is to calculate what percentage of the area of a given pixel falls within the outline. As an example, in the image above, I've drawn a red square around a pixel that would be about 15% inside the shape.
The purpose of this would be so that I can then turn that pixel on only by 15% and thus get some cleaner edges for the final raster image.
While I was able to find algorithms for determining if a given point falls within a polygon (ray casting), I wasn't able to find anything about this type of problem.
Can someone can point me toward some algorithms to achieve this? Also let me know if I'm going about this problem in the wrong way!
This sounds like an X, Y problem.
You are asking for a way to calculate the perecentage of pixel coverage, but based on your question, it sounds that what you want to do is anti alias a polygon.
If you are working only with single color 2D shapes (i.e red, blue, magenta... squares, lines, curves...) A very simple solution is to create your image and blur the result afterwards.
This will automatically give you a smooth outline and is simple to implement in many languages.

Interpolated curves between existing curves do not look correct

I have a chart that has several existing curves on it that I have tried to interpolate new curves in between. I have used linear interpolation in the form of y = ((x - x1)(y2 - y1) / (x2 - x1)) + y1, however the new curves look out of place.
You can see in the picture that every second line (from the bottom) is the interpolated line. While the very second line data points are exactly centered between the first and third data points in the y axis, the third line data points are not centered between the second and fourth y data points, making the graph look skew.
So I am thinking linear interpolation may not be what I am after here. Can someone recommend another method that would create curves between the existing ones, but replicates the same form?
Sudden changes in gradient are hard to interpolate. When you're at the point where you want an interpolated line to suddenly change gradient, there is no information from the points in close proximity that give information as to where the sudden change in gradient should occur.
To replicate the pattern, you actually need to copy the gradient of the line below then smoothly transition to the gradient of the line above. Visually we can see that it should occur half way between the change in gradients for the lines above and below on either side, but detecting the locations of those changes is not trivial.
The points where the sudden change in gradient are occurring are separated by a large change in the x-axis by only a small change in the y-axis. When calculating y-values for x-values in between the the changes in gradient you get the aberrations. I suggest trying to interpolate x-values based on y-values instead. For each curve, for each small arbitrary step in the y-axis, find/calculate the closest x-values from the curve on either side and take the average to plot your interpolation.
An unconventional approach may be a piece-meal style of interpolation. It may be possible to model the 3 regions of different gradients separately.
Start by identifying the 2 lines that would be drawn through the 2 sets of kinks, creating 3 regions of space. The vertical line would stop at the horizontal line near the bottom right corner of the graph.
For each region (and potentially for each value of x in each region) determine the gradient of the lines. When you're doing your interpolation of a new line, for each starting point (x1, y1), look at which region it falls in. Use the gradient of that region as a significant factor when determining the next point. Keep doing this until you reach a region boundary. When the interpolated point crosses into a different region, then use the gradient of that region as a significant factor to interpolate the next point.
It will be quite pointy if you did this strictly, so graph with some smoothing (or incorporate a smoothing factor using weighted averages of the gradients as you transition between regions, but this could be a whole lot of effort without necessarily closer results!)

Is it possible to smoothly change (like a photoshop gradient) the color of a plotted curve as a function of distance from a given point?

Suppose one has a plot like this, for which the peak is at (x,y) = (0,0.40). The distribution is plotted in blue. Is it possible to edit the color scheme of the distribution plot in such a way that the color is a gradient - the farther from x (or y or independently for both) the more the color changes - like this?
I've searched SO for help with this, but only found solutions in which line segments were different colors. But, I want the color transition to be smooth (like this but not 3-D) instead of rough, and I want the color to depend on its distance from a particular value rather than pre-determined "randomly". A different SO post did something similar (not quite what I want though), but could only do so as a scatter plot, which only works for changing colors based on x-value if the peak is at x=0 - I'd prefer it be generalized. As an example, the further from x=0 the redder the curve gets. Ideally, there's a way to do this with a matplotlib colormap.

Find contour of 2D unorganized pointcloud

I have a set of 2D points, unorganized, and I want to find the "contour" of this set (not the convex hull). I can't use alpha shapes because I have a speed objective (less than 10ms on an average computer).
My first approach was to compute a grid and find the outline squares (squares which have an empty square as a neighbor). So I think I downsized efficiently my numbers of points (from 22000 to 3000 roughly). But I still need to refine this new set.
My question is : how do I find the real outlines points among my green points ?
After a weekend full of reflexions, I may have found a convenient solution.
So we need a grid, we need to fill it with our points, no difficulty here.
We have to decide which squares are considered as "Contour". Our criteria is : at least one empty neighbor and at least 3 non empty neighbors.
We lack connectivity information. So we choose a "Contour" square which as 2 "Contour" neighbors or less. We then pick one of the neighbor. From that, we can start the expansion. We just circle around the current square to find the next "Contour" square, knowing the previous "Contour" squares. Our contour criteria prevent us from a dead end.
We now have vectors of connected squares, and normally if our shape doesn't have a hole, only one vector of connected squares !
Now for each square, we need to find the best point for the contour. We select the one which is farther from the barycenter of our plane. It works for most of the shapes. Another technique is to compute the barycenter of the empty neighbors of the selected square and choose the nearest point.
The red points are the contour of the green one. The technique used is the plane barycenter one.
For a set of 28000 points, this techniques take 8 ms. CGAL's Alpha shapes would take an average 125 ms for 28000 points.
PS : I hope I made myself clear, English is not my mothertongue :s
You really should use the alpha shapes. Maybe use only green points as inputs of the alpha alpha algorithm.

WebGL color mix calculation

What is WebGL color mix calculation algorithm? I need to draw quadrangle with 4-way gradient color fill and I decided to do it with 3-way gradient triangles (like this), calculating the center of quadrangle and using such point for 4 triangles to get the best result of gradient smoothness. To do it right, I need to calculate the color of the center of quadrangle by same way as WebGL calculates color mix for 3-way gradient fill. What is the formular for such calculation?
WebGL uses linear interpolation for vertex attributes. The formula for interpolating a value across a square given samples at the four corners is simply linear interpolation applied twice. In GLSL,
mix(mix(color00, color01, y), mix(color10, color11, y), x)
If you are interested in the center point in particular, this is just
0.25 * (color00 + color01 + color10 + color11)
However, if your goal is to interpolate the four colors smoothly across a square, in a WebGL application, then you don't actually need to perform this calculation yourself, and you don't need to use four triangles!
Create a 2×2 texture with your four colors.
Set its TEXTURE_MAG_FILTER to LINEAR.
Draw your square with that texture applied in the usual fashion, but with texture coordinates ranging from 0.25 to 0.75.
This performs the same interpolation you're looking for, but using built-in facilities. If you wanted, you could also skip using a texture, but still have “texture” coordinates, and use the mix formula above to map the coordinates to your four colors.
The reason this works is that texture coordinates, unlike arbitrary colors, are such that linearly interpolating between 3 points gives you non-degenerate results which you can then use to lookup the color taking into consideration all 4 color values.

Resources