“圆球池塘”——动态交互作品

一、灵感与背景

       在看完了《代码本色》这本书后，对其中描述的物理引擎box2d非常感兴趣。box2d有各种平台的移植版，包括c++，JavaScript，Python等等，作为一个优秀的开源引擎，被用于无数项目，尤其是一些成功的游戏，比如备受赞誉的益智游 戏“蜡笔物理学”，以及能在手机和平板上运行的“愤怒的小鸟”。 所以这次实验想借助box2d这个物理引擎创造一个有物理效果，包括重力弹力摩擦力，以及可以通过鼠标交互的小系统。

       之后通过提前预制好一些配色方案，之后进行球体的形状生成以及box2d的物理生成，做出了这个小系统。

 

二、演示效果

       实现效果：通过预设值生成不同颜色的球体，球体具有重力弹力以及摩擦力的效果，鼠标可以进行交互，分别是拖拽球体，长按生成新的球体，同时可以与窗口进行互动（摇晃窗口内部效果会进行重置），核心是利用物理引擎box2d来实现的。

 1. 初始化的效果

2.鼠标拖拽生成的球体

3.鼠标长按生成新的球体

 

 

4.进行窗口拖动

 

三、交互系统

1.鼠标点击并拖拽时：

设定鼠标点击事件，分为鼠标按下时的操作，鼠标拖动时的操作以及鼠标停下时的操作。

Touchstart: 这里还对双击属性做了判定，如果这个过程持续的时间比250小，就判定为双击，进行重置reset（），如果不是就进行touchmove的方法调用。

function onDocumentTouchStart( event ) {
	if( event.touches.length == 1 ) {
		event.preventDefault();
		var now = new Date().getTime();
		if ( now - timeOfLastTouch  < 250 ) {

			reset();
			return;
		}
		timeOfLastTouch = now