This is a short screencast showing how to build a multitouch water ripple effect using David Lenaerts’s Shallow Water Container and pixel bender shadder classes.

Here’s David’s Blog post and the source for his flash app.

Here’s the code that we came up with for the screencast:

<?xml version=”1.0″ encoding=”utf-8″?>
<s:WindowedApplication xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/halo”
width=”1010″ height=”670″ creationComplete=”windowedapplication1_creationCompleteHandler(event)”>
<fx:Script>
<![CDATA[
import com.derschmale.fluids.ShallowWaterContainer;

import flash.events.TouchEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;

import mx.events.FlexEvent;

protected var ripple:ShallowWaterContainer;

[Embed (source='CloudyWaves.jpg')]
protected var CloudyWave:Class;

protected var touchMap : Array  = [];

protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
addRipple();
}

protected function addRipple() : void
{
ripple = new ShallowWaterContainer(1000,650, 200, 200);
ui.addChild(ripple);
ripple.timeStep = 1;
ripple.viscosity =0.2;
ripple.relaxation = 0.15;
ripple.relaxationSteps = 2;

ripple.addChild(new CloudyWave());

this.addEventListener(TouchEvent.TOUCH_BEGIN, touchBeginHandler);
this.addEventListener(TouchEvent.TOUCH_END, touchEndHandler);
this.addEventListener(TouchEvent.TOUCH_MOVE, touchMoveHandler);
}

protected function touchBeginHandler(event:TouchEvent):void
{
var key : String = event.touchPointID.toString();
var touchPoint:Object = {};
touchPoint.x = event.localX;
touchPoint.y = event.localY;
touchPoint.sizeX = event.sizeX;
touchPoint.sizeY = event.sizeY;
touchMap[ key ] = touchPoint;
}

protected function touchEndHandler(event:TouchEvent):void
{
var key : String = event.touchPointID.toString();
delete touchMap [ key ];
}

protected function touchMoveHandler(event:TouchEvent):void
{
var key : String = event.touchPointID.toString();
if(touchMap [ key ])
{
ripple.addVelocity( event.localX, event.localY,
(event.localX – touchMap[key].x),
(event.localY -  touchMap [ key ].y), 5, 1);
ripple.addPressure(event.localX, event.localY, 7, 1);

// update touchpoint in map

touchMap[key].x = event.localX;
touchMap[key].y = event.localY;
touchMap[key].sizeX = event.sizeX;
touchMap[key].sizeY = event.sizeY;
}
}
]]>
</fx:Script>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>

<mx:UIComponent id=”ui” width=”100%” height=”100%” />

</s:WindowedApplication>

This entry was posted on Wednesday, January 6th, 2010 at 9:58 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.