garyhodgson/mousehandlingexample.html

## mousehandlingexample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="processing.js" type="text/javascript" charset="utf-8"></script>
		<title>asd</title>
</head>

<body>

<script type="text/javascript" charset="utf-8">

var asd = 50;

// Mouse handling from http://adomas.org/javascript-mouse-wheel/


/** This is high-level function.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
	asd += delta * 5;
}

/** Event handler for mouse wheel event.
 */
function wheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
                /** In Opera 9, delta differs in sign as compared to IE.
                 */
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}

/** Initialization code.
 * If you use your own event management code, change it as required.
 */
if (window.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;

$(document).ready(function() {
	var width = window.innerWidth - 26;
	var height = window.innerHeight - 26;


	var canvas = document.getElementById('asd');
	var p = new Processing(canvas);

	p.setup = function() {
		p.size( width, height );
		p.strokeWeight( 10 );
		p.frameRate( 15 );
	};

	p.draw = function() {
		for(var i=0; i<500; i++){
		 var x = i;
		 var y = p.int(asd * p.sin(p.PI/180.* i) );
		 p.point(x, y+asd);
		}
	};

	p.init();

});
</script>

<canvas id="asd"></canvas>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="processing.js" type="text/javascript" charset="utf-8"></script>
	<title>asd</title>
	</head>

	<body>

	<script type="text/javascript" charset="utf-8">

	var asd = 50;

	// Mouse handling from http://adomas.org/javascript-mouse-wheel/


	/** This is high-level function.
	* It must react to delta being more/less than zero.
	*/
	function handle(delta) {
	asd += delta * 5;
	}

	/** Event handler for mouse wheel event.
	*/
	function wheel(event){
	var delta = 0;
	if (!event) /* For IE. */
	event = window.event;
	if (event.wheelDelta) { /* IE/Opera. */
	delta = event.wheelDelta/120;
	/** In Opera 9, delta differs in sign as compared to IE.
	*/
	if (window.opera)
	delta = -delta;
	} else if (event.detail) { /** Mozilla case. */
	/** In Mozilla, sign of delta is different than in IE.
	* Also, delta is multiple of 3.
	*/
	delta = -event.detail/3;
	}
	/** If delta is nonzero, handle it.
	* Basically, delta is now positive if wheel was scrolled up,
	* and negative, if wheel was scrolled down.
	*/
	if (delta)
	handle(delta);
	/** Prevent default actions caused by mouse wheel.
	* That might be ugly, but we handle scrolls somehow
	* anyway, so don't bother here..
	*/
	if (event.preventDefault)
	event.preventDefault();
	event.returnValue = false;
	}

	/** Initialization code.
	* If you use your own event management code, change it as required.
	*/
	if (window.addEventListener)
	/** DOMMouseScroll is for mozilla. */
	window.addEventListener('DOMMouseScroll', wheel, false);
	/** IE/Opera. */
	window.onmousewheel = document.onmousewheel = wheel;

	$(document).ready(function() {
	var width = window.innerWidth - 26;
	var height = window.innerHeight - 26;


	var canvas = document.getElementById('asd');
	var p = new Processing(canvas);

	p.setup = function() {
	p.size( width, height );
	p.strokeWeight( 10 );
	p.frameRate( 15 );
	};

	p.draw = function() {
	for(var i=0; i<500; i++){
	var x = i;
	var y = p.int(asd * p.sin(p.PI/180.* i) );
	p.point(x, y+asd);
	}
	};

	p.init();

	});
	</script>

	<canvas id="asd"></canvas>

	</body>
	</html>