Bouncing Images around a container. How would you do this?

Question

The easiest way to visualise what I want want is by taking a look at this image => https://s3.amazonaws.com/bound2/example.png

Basically want the images to "bounce" round the website similar to this =>

http://next.plnkr.co/edit/HTHkXaD2BCFWTCK5tROi?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview

The example above uses canvas! But I'm not sure if you can drop images into canvas easily? I can't seem to find any library out there.

Any help massively appreciated!

Harry Dry · Accepted Answer

cheers man. ended up just about working it out!

Marc Köhlbrugge · Answer

Break up the problem in smaller bits and then tackle them one by one:

1. Create code example with image on canvas: https://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas
2. Make image move on canvas
3. Detect when image reaches edge of screen
4. Make image bounce when reaching end of screen

Go to Homepage	`g` `h`
Go to Done Todos	`g` `d`
Compose a New Todo	`n`
Go to Search	`/`
Show this dialog	`?`

Bouncing Images around a container. How would you do this?

Keyboard Shortcuts