矢印の表示／非表示は右のボタンで調整→
重心と軌跡の表示／非表示は右のボタンで調整→
バネでつながれた２つの物体の運動を表しています。物体はマウスや指（タッチパネルの場合）で動かすことができます。物体の重心、および重心の軌跡を表示（表示・非表示は↑のボタンで変更できる）するので、いろんな動きをさせてみて、重心がどのような運動をするかを見てください。
二物体の質量比も、下のスライダーで変化させることができます。
質量比=1
ここでは、通常のバネ（Spring）を拡張（extends）して、重心を表示するバネ（SpringWithCOM）を作っている。その部分が
class SpringWithCOM extends Spring {
constructor(gs,m1,m2,k,d,c) {
super(gs,m1,m2,k,d,c);
this.enableTrace();
this.traceOFF();
this.comDrawFlg =true;
}
drawAndTrace() {
this.pos=this.m1.pos.prod(this.m1.mass).sum(this.m2.pos.prod(this.m2.mass)).quot(this.m1.mass+this.m2.mass); // 重心を計算して位置（pos）に格納
super.drawAndTrace();
if( this.comDrawFlg ) {
this.ps.fillCircle(this.pos.x,this.pos.y,0.15,"rgba(100,100,100,0.3)");
}
};
である。constructorの部分は、SpringWithCOMが作られたときに呼ばれる。その中のsuper(gs,m1,m2,k,d,c);は、super（これは今の場合、Springのこと）を作るときに呼ばれる関数を呼ぶ。
SpringWithCOMはSpringの一種である。だから「作ったときにやるべき処理」もほぼ共通なので「super（すなわちSpring）を作るときにやったことをまずやって、その後で独自の部分をつけくわえている。独自の部分は、軌跡の表示をできるようにしておくことと、新しいフラグ（comDrawFlg）を作っておくことだけである。
SpringWithCOMとSpringの重要な違いは「重心を描くこと」なので、SpringWithCOMを「描く」ときは「まずSpringを描いて、その後で重心を描く」ということをする。だから、「描く」関数であるdrawAndTrace()の最初の方でsuper.drawAndTrace();（←これはSpringのdrawAndTrace()を呼べ、ということ）があって、まず普通にSpring（バネ）を描く。その後でSpringWithCOM特有の作業（comDrawFlgがtrueなら重心を描く）をする。