水圧ピストン(パスカルの原理) 第二回

~プログラムによる水圧ピストンの再現~

1.HTML作成

実行時画像

水圧ピストン表示用のHTMLを作成します
divタグとcssを使い 長方形を組み合わせているだけです

ここから、JavaScriptを使ってピストンを動かします

▲TOP

2.javascript で class を作る

JavaScriptにはclassという言語仕様は存在しないのですが クラスっぽいものを作ることはできます

クラス宣言,インスタンス生成

    var CPiston = function(){
    };

    var Piston = new CPiston();
		    

グローバル領域にクラス名の変数を設定し、そこに無名関数を代入します
クラスのインスタンスを生成するにはnew演算子を使います

メンバ変数

    var CPiston = function(){
	this.w	= 0;
    };
		    

メンバ変数は 無名関数の中でthis.変数名 のように定義します
これにアクセスするには

    var Piston = new CPiston;
    Piston.w += 1000;
		    

のように記述します

メソッド

    var CPiston = function(){
	this.w = 0;
    };
    
    CPiston.prototype ={
	GetW:	function(){
	    return this.w;
	},
	SetW:	function(w){
	    this.w = w;
	}
    }
		    

メソッドは関数のプロトタイプに連想配列として代入します
メソッド中からメンバにアクセスするにはthis.メンバ のように記述します

    var Piston = new CPiston;
    Piston.SetW( 100 );
		    

メソッドを実行するには上記のように インスタンス.メソッド名 と記述します

▲TOP

3.プログラム解説

CPiston というクラスに 左右ピストンの幅、錘の重量、ピストンの高さ記憶させています

var CPiston = function(){
    this.s	= [200,100];
    this.w	= [0,0];
    this.h	= [H,H];
};
		    

左右のシリンダーをクリックすると、錘が追加され バランスが変わります

function main(){
    ...

    $("#s0").click( AddWeight0 );
    $("#s1").click( AddWeight1 );			
};

function AddWeight0()
{
    Piston.w[0] += 1000;
    Piston.Update();
}
function AddWeight1()
{
    Piston.w[1] += 1000;
    Piston.Update();
}
		    

錘が追加されたあと、CPiston.Update関数を呼んで 画面を更新します

CPiston.prototype ={
    Update: function(){
	this.UpdateData();
	this.UpdateView();
    },
    UpdateData:	function(){
	...
    },
    UpdateView: function(){
	...
    }
};
		    

ピストンの断面積をw 載せられた錘の重さをw とすると
各ピストンの上面にかかる圧力は

    pt = w / s 
		    

で求めることができます
底面にかかる圧力は 上面にかかる圧力+水の重さ なので
ピストンの高さをhとした場合

    pb = pt + h
		    

で求めることができます
左右シリンダーの底面はつながっているので

    pt0 + h0 = pt1 + h0		式1
		    

となります
また、シリンダー内の水の量は一定であり 右ピストンが下がると左ピストンは上がることになります
左右荷重0のとき、h0 = h1 = H で釣り合いがとれていたとすると

    (h0 - H) * s0 = - (h1 - H) * s1	式2
		    

の式が成り立ちます
式1と式2を使うと 各ピストンの高さを求めることができます

▲TOP

4.動作確認

実行時画像

画面下にあるテーブルの、シリンダー幅に適当な数値を入力し、resetボタンを押すと
シリンダー幅を変更できます
数値の正当性チェック等は行っていないため 極端な値を入れると表示が崩れます

▲TOP