• Tutorials
  • Blog
  • About
  • Contact
  • Multitouch Ripple Effect (Screencast)

    2010 - 01.06

    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.

    rippleEffect

    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>

    3 Responses to “Multitouch Ripple Effect (Screencast)”

    1. kelvin says:

      hi,

      I try compiler to your source, then I get error:
      ripple.addVelocity( event.localX, event.localY, (event.localX – touchMap[key].x),(event.localY – touchMap [ key ].y), 5, 1);
      Beschreibung Ressource Pfad Position Typ
      1084: Syntaxfehler: rightparen vor touchMap erforderlich. RippleEffectAir.mxml /RippleEffectAir/src Zeile 68 Flex-Problem

      sorry in german.
      what’s mean? can you solve?
      thanks

    2. admin says:

      Looks like it is missing something simple like a right parentheses but my German isn’t fantastic.

    3. visitou says:

      File not found: file:/D:/Documents%20and%20Settings/Administrator/桌面/RipplerV2/bin-debug/RipplerV2.html
      i have this error,i don’t understant

    Your Reply