Blend multiple shapes.

Question

Using circle and square equations I was able to draw this. Any way to blend these two shapes(equations) like this and this. I want to achieve metaballs like effect.

I'm using unity engine to render the above, I want a 2D version of it. I basically colored all pixels which are inside a circle. Eg: using unit circle at origin equation $x^2 + y^2 = 1$ I'm coloring all pixels if $p_x^2 + p_y^2 <= 1$, where $p_x$ and $p_y$ are position of pixel.So I want a equation(or method) which blends the shapes and determines if a pixel is inside the overall shape.

Answer 1

Finally got working pseudocode:

//distance between point p and circle with radius r
float sdCircle( vec2 p, float r )
{
    return length(p) - r;
}

//function to blend
float smin( float a, float b, float k )
{
    float res = exp2( -k*a ) + exp2( -k*b );
    return -log2( res )/k;
}

float circle1_Dis = sdCircle(...);
float circle2_Dis = sdCircle(...);
float k = 0.5; // how much to blend

if(smin(circle1_Dis ,circle2_Dis ,k) < 0)
{
    //draw
}

reference:

• https://iquilezles.org/articles/distfunctions2d/
• https://iquilezles.org/articles/smin/
• https://youtu.be/Cp5WWtMoeKg

Answer 2

Take a look at the Geogebra figure (sorry, I don't use that much Desmos) I just made in order to convey the two main ideas :

• 1. An angular parametrization of the circle and as well of the square by an angle in the range $[0, 2 \pi)$. For the circle, it is the very natural :

$$N=(\cos(t),\sin(t))$$

with an added horizontal shift as you have done.

For the square, you have to divide the previous expression by a tuned quantity shrinking the circle into the square by a certain factor depending on the angle $t$ ; this quantity can be given the closed form $\max(|\cos(t)|,|\sin(t)|)$ explaining coordinates:

$$M=N/\max(|\cos(t)|,|\sin(t)|)$$

• 2. Intermediate moving point generating the level line labelled $s$ with $0 \le s \le 1$ given by barycentric expression

$$P=(1-s)M+sN$$

(for example if $s=\frac12$, you get the midpoint of line segment $MN$ ; the smallest $s$, the closer you are to point $M$, etc.).

You see that the locus of point $P$ gives one (among many) intermediate shapes between the square and the circle.