# Blend multiple shapes.

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.

• What is a metaball ? May 27 at 9:40
• Your question is too general. You should be more explicit about 1) The software you use. Do you want to stay with Desmos, switch to Geogebra or another software ? 2) Whether you want, out of a set of 2D points generate a of 3D points mesh, with for example which kind of lighting (are you familiar with Gouraud, Phong ?...) May 27 at 9:40
• Could you add the details of the software in the post so it has the maximum chance of being re-opened @HelloHumans Jun 2 at 10:22
• I've voted to open already. and posted a meta thread here math.meta.stackexchange.com/questions/34839/…. Hopefully there is some community support to open it. You yourself can cast one open vote I think Jun 2 at 15:25
• @Aplateofmomos your efforts to reopen have paid off! Jun 4 at 6:52

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:

• You use the (binary) log of the sum of 2 negative exponential to express the distance function ; interesting, I had never seen that before... May 27 at 21:13
• You will be possibly interested by this Wikipedia article on "LogSumExp" where the geometrical "blending" you use has a correspondence in the domain of deep learning May 27 at 22:39
• @JeanMarie It's amazing that such simple functions are used in diverse fields. May 28 at 3:01

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)|)$$

1. 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.

• Thanks, but this approach produces third intermediate shape P. I want M and N to slowly blend together like metaballs. I have updated my question to make it clear. May 27 at 11:03
• Yes but what I have displayed is a "didactic" example for a particular values of $s$ ; make $s$ vary now. May 27 at 11:46