Metaballs

Metaballs are organic-looking n-dimensional ( 2D in our case ) isosurfaces, characterised by their ability to meld together when in close proximity to create single, contiguous objects.

This is a simple metaballs simulation and it might look laggy depending on the computer, If you want to experience a better metaballs simulation using a more amazing algorithm, check out this example.

Code

            
    elem=document.querySelector(".example-container");
    setCanvas(elem);
            
    w=WIDTH;
    h=HEIGHT;
    
    
    t=0;
    i=0;
    pos={
        x:40,
        y:40,
        r:30
    }
    pos1={
        x:120,
        y:150,
        r:30
    }
    vel={
        x:random(4,5),
        y:random(1,4)
    }
    vel1={
        x:random(4,5),
        y:random(1,4)
    }
    
    
    
    function velOnCollision(pos,vel){
    
            if(pos.x+pos.r>w || pos.x-pos.r<0){
                vel.x*=-1
            }
            if(pos.y+pos.r>h || pos.y-pos.r<0){
                vel.y*=-1;
            }
        
    }
    ii=5;
    
    function draw() {
    
        clearCanvas();
    
        
            pos.x+=vel.x;
            pos.y+=vel.y;
            pos1.x+=vel1.x;
            pos1.y+=vel1.y;
    
            velOnCollision(pos,vel);
            velOnCollision(pos1,vel1);
            for(i=0;i<w;i+=ii){
                for(j=0;j<h;j+=ii){
                d=1/dist(pos.x,pos.y,i,j);
                d+=1/dist(pos1.x,pos1.y,i,j);
                d=9/d;
                d=clamp(d,200,360);
                if(d<280){
                new rect(i,j,ii,ii,`hsl(${d},100%,50%)`,1,`hsl(${d},100%,50%)`,1);}}
            }
            //new circle(pos.x,pos.y,pos.r,'red',1,'#ff0',2);
    
            
        t+=0.01;
        requestAnimationFrame(draw);
        
    }
    
    draw();