Changing images while bouncing

yscale cycles-per-screen change frequency

As in the previous example, "count" oscillates between 0 and 2*Pi and, adjusted for screen-size, controls the x coordinate. Math.sin(count) (with amplitude adjusted by "yscale") controls the y-coordinate.

Every n-th time (controlled by the variable "change") through the setTimeout loop, we change the image to the next image in the preloaded array:

  if ((c%change)==0) {document.images[0].src=Ball[c%imgnum].src}

You may wish to investigate why certain numerical constraints govern the relationship between "imgnum" and "change" in this example.

Click here to see effects of truncating the sine wave.