Question

I was studying live wallpaper. But first i have to study canvas animation. I have a code here that works ok. It uses a math.random(). But what i want is some like this.

Here i want the image to move just like the path illustrated above. My idea is to use math.random for x and y. But the problem of using that is the image will appear anywhere in the screen. I want the image, to create a random path. I know its about x and y coordinates but i cant think of how the path will trigger randomly? I cant actualy explain it. But if you know about the bouncing ball, the ball has a random corrdinates. Just like that. here is my code.

public class MainActivity extends Activity {

    private Game game;
     public Handler updateHandler = new Handler(){
            /** Gets called on every message that is received */
            // @Override
            public void handleMessage(Message msg) {
                game.update();
                game.invalidate();
                super.handleMessage(msg);
            }
        };
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        game = new Game(this);
        setContentView(game);

        Thread myThread = new Thread(new UpdateThread());
        myThread.start();
    }

    public class UpdateThread implements Runnable {

        @Override
        public void run() {

             while(true){
                 try {
                    Thread.sleep(100);
                } catch (InterruptedException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                 MainActivity.this.updateHandler.sendEmptyMessage(0);
            }
        }

    }

}


public class Game extends View {

    private Bitmap image;
    private Paint paint;
    private int x=0;

    public Game(Context context) {
        super(context);
        image = Bitmap.createBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.ic_launcher));
        paint = new Paint();
    }

    // called every Frame
    protected void onDraw(Canvas canvas) {

        canvas.drawBitmap(image, x, 0, paint);
    }

    // called by thread
    public void update() {
            x = 1;
            x += Math.random() * 100;

    }

}

I hope you can help me here.. Thank you.

Answer 1

Here’s code for endless linear interpolation loop (you might want to change it to smooth curves later on);

PointF mImagePos = new PointF();
PointF mImageSource = new PointF();
PointF mImageTarget = new PointF();
long mInterpolateTime;

protected void onDraw(Canvas canvas) {
    canvas.drawBitmap(image, mImagePos.x, mImagePos.y, paint);
}

public void update() {
    final long INTERPOLATION_LENGTH = 2000;
    long time = SystemClock.uptimeMillis();
    if (time - mInterpolateTime > INTERPOLATION_LENGTH) {
        mImageSource.set(mImageTarget);
        mImageTarget.x = (float)(Math.random() * 100);
        mImageTarget.y = (float)(Math.random() * 100);
        mInterpolateTime = time;
    }

    float t = (float)(time - mInterpolateTime) / INTERPOLATION_LENGTH;
    // For some smoothness uncomment this line;
    // t = t * t * (3 - 2 * t);

    mImagePox.x = mImageSource.x + (mImageTarget.x - mImageSource.x) * t;
    mImagePos.y = mImageSource.y + (mImageTarget.y - mImageSource.y) * t;
}