Processing.jsでフォームの値を参照したい

日経ソフトウエアのムックにProcessingの解説があり、自由落下や弾性衝突をシミュレートできるのは面白そうと思い取り掛かった。跳ね返り係数や摩擦を動的に変えられてらいいなと思って、フォームの値を参照できるようにするのに時間がかかり(jQueryでフォームの値を参照しようとしたができなかった)、結局シミュレーションはできず終い。また次回。

確認コード：changecirclesize.html
メモ

setupは1回だけ実行される。drawは繰り返し実行される。
draw内で独自関数のgetSizeをコールしている。getSizeでフォームの値を取得している。
javascriptには列挙型がない。オブジェクトを定義してswitch文で書いてみたがこういうふうに書くものなのか？

<canvas id="mycanvas"></canvas><br />
Circle Size: <input type="number" name="num" id="num" value="10" min="10" max="100" step="1" /><br />
<button onclick="startSketch();">Start</button>
<button onclick="stopSketch();">Stop</button>
<button onclick="clearSketch();">Clear</button>

<script src="processing-1.4.1.min.js" type="text/javascript"></script>
<script type="application/processing" data-processing-target="mycanvas">
	void setup() {
		size(300, 300);
	}

	void draw() {
		int x = random(0, 300);
		int y = random(0, 300);
		int r = getSize();
		ellipse(x, y, r, r);
	}
</script>
<script type="text/javascript">
    var processingInstance;
	SketchState = {
		START: 0,
		STOP: 1,
		CLEAR: 2,
	};

    function startSketch() {
		switchSketchState(SketchState.START);
    }

    function stopSketch() {
		switchSketchState(SketchState.STOP);
    }

	function clearSketch() {
		switchSketchState(SketchState.CLEAR);
	}

    function switchSketchState(on) {
        if (!processingInstance) {
            processingInstance = Processing.getInstanceById('mycanvas');
        }

		switch(on) {
			case SketchState.START:
	            processingInstance.loop();  // call Processing loop() function
				break;
			case SketchState.STOP:
   		         processingInstance.noLoop(); // stop animation, call noLoop()
				break;
			case SketchState.CLEAR:
				processingInstance.background();	// gray
				break;
			default:
				break;
    	}
	}

	function getSize() {
		var size = document.getElementById('num').value;
		return Number(size);
	}
</script>

参考サイト