Back
Question
Asked

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

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!


Break up the problem in smaller bits and then tackle them one by one:

  1. Create code example with image on canvas: stackoverflow.com/questions/6…
  2. Make image move on canvas
  3. Detect when image reaches edge of screen
  4. Make image bounce when reaching end of screen

cheers man. ended up just about working it out!