<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js" type="text/javascript">
</script><script language="javascript" type="text/javascript">

function setup() {
  createCanvas(601, 601);
  stroke(0);// 線の白さ
  fill(250, 20, 20);
 // fill(0, 0, 0);
}

function draw() {
  background(200);// 背景の白さ
  mouseDragged(x);

}

function mouseDragged(x) {
 var X=mouseX; var Y=mouseY;
  ellipse(X, Y , 10); // 線の太さ
var L=pow(pow(X-width/2,2)+pow(Y-height/2,2),0.5);
var angle=atan2(height/2-Y,X-width/2);
for (var i=1; i<4; i++) {
a=angle-PI/4*i*2;
 ellipse(width/2+L*cos(a),height/2-L*sin(a),10);
}
for (var i=0; i<4; i++) {
a=PI/2-angle+PI/4*i*2;
 ellipse(width/2+L*cos(a),height/2-L*sin(a),10);
}
}
</script>

javascript, p5.jsのプログラムは「java phpなど」のページにあります。