js + p5
https://editor.p5js.org/kitasenjudesign/sketches/43JWJ7gZw
var balls = []; function setup() { createCanvas(window.innerWidth, window.innerHeight); for(var i=0;i<10;i++){ var b = new Ball(); balls.push(b); } } function draw() { background(220); //console.log(balls[0].x); balls[0].x = mouseX; balls[0].y = mouseY; for(var i=0;i<balls.length;i++){ if(i>=1){ var ballA=balls[i]; var ballB=balls[i-1]; var dx = ballA.x - ballB.x; var dy = ballA.y - ballB.y; var rad = Math.atan2(dy,dx); var size = balls[i].size/2 + balls[i-1].size/2; balls[i].x = ballB.x + size*Math.cos(rad); balls[i].y = ballB.y + size*Math.sin(rad); /* for(var j=0;j<balls.length;j++){ if(i==j)continue; var ddx = ballA.x - balls[j].x; var ddy = ballA.y - balls[j].y; var dd = sqrt(ddx*ddx+ddy*ddy); var ss = ballA.size/2+balls[j].size/2; if(dd<ss){ ballA.size=2*(dd-balls[j].size/2); } }*/ } balls[i].draw(); } }
class Ball { constructor() { this.x=random()*100; this.y=random()*100; this.size=random()*50+20; this.baseSize=this.size; } update() { } draw() { // stroke(col); circle(this.x,this.y,this.size); } }