Making a matrix for a smuge/wobble effet ( see pictures ) in Android

Question

THANKS Torious, got it: ``` private void smudge() { for (int i = 0; i < COUNT*2; i += 2) { float xOriginal = matrixOriganal[i+0]; float yOriginal = matrixOriganal[i+1]; float distX = Math.abs(pointX-xOriginal); float distY = Math.abs(pointY-yOriginal); float dist = FloatMath.sqrt( distX*distX + distY*distY ); float coof = ( bubbleSize - dist ) / bubbleSize; float oc = (float) -Math.sin(coof * 2*Math.PI) * 0.15f ; if ( dist < bubbleSize ) { matrixVertsMoved[i+0] = xOriginal + smudgeAmount * (coof+oc); matrixVertsMoved[i+1] = yOriginal; } else { matrixVertsMoved[i+0] = xOriginal; matrixVertsMoved[i+1] = yOriginal; } } invalidate(); } ``` old: Right now I have this code that I made based on the api sample that comes with the SDK. ``` public class main extends Activity { //////////////////////////////////////////////////////// @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.requestWindowFeature(Window.FEATURE_NO_TITLE); setContentVie…

Accepted Answer

Ok, I got a (Flash) demo working that looks to be what you need.

I haven't transformed a textured mesh, but only vertices, so it's hard to verify if the effect is exactly as intended, but it looks to be a step in the right direction.

Anyway, here is the code; it's in AS3 but I doubt it'll be hard to understand.

Some notes:

- `CENTER` in the code below would be the starting point of the smudge operation, as you describe it above. The `controlPoint` would be the end point.

- I'm using `Vector3D`, but only using its 2D coordinates.

- `CENTER`, `controlPoint` and the input `vertex` are treated as if in the same coordinate system. You could instead pre-process `CENTER` to be relative to your mesh's local coordinate system. Then you could strip the transforms to/from the relative/local coordinate system that are in the code below.

- The logistic function is used for the transition from the edge of the circle of influence with no influence, to full influence. You could probably use several other functions for similar effect.

- I think using an additional, second "pull to control point" operation with a smaller strength and less steep transition would make the effect better; right now all vertices that are fully transitioned to (close to) 100% influence move towards the control point a bit too much in unison, I feel.

Try it out and let me know if you have trouble understanding the AS3 code.

```
    private function log(t:Number):Number {
        return 1 / (1 + Math.pow(Math.E, -t));
    }

private function transformVertex(vertex:Vector3D, controlPoint:Vector3D):Vector3D {

// get control point relative to center of influence
        // (this could actually be calculated in pre-processing, as
        // it doesn't change between vertices)
        var controlPointRel:Vector3D = controlPoint.subtract(CENTER);

// get vertex relative to center of influence
        var rel:Vector3D = vertex.subtract(CENTER);

// get distance of vertex from center
        var dst:Number = rel.length / RADIUS;
        if (dst > 1) return vertex; // vertex outside circle of influence

// PULL TO CONTROL POINT

// tScale controls the steepness of the transition from the
        // edge of the circle. 1 = logistic transition, >1 = steeper
        var tScale:Number = 1.7;
        var t:Number = (1 - dst) * 12 * tScale - 6; // [-6, 6]
        t = log(t);

controlPointRel = controlPointRel.clone();
        controlPointRel.scaleBy(t);
        // ALTERNATIVE, try this too:
        // controlPointRel.scaleBy(t * (1 - dst));

rel = rel.add(controlPointRel);

// relative to absolute
        return rel.add(CENTER);

}
```

Making a matrix for a smuge/wobble effet ( see pictures ) in Android

Solution

Problem