Bouncing

yscale cycles-per-screen count

To move the image, we let a variable "count" move back and forth between 0 and 2*Pi, in small increments."count", adjusted for screen-size, controls the x coordinate.

Math.sin(count) gives a number between -1 and 1 and (adjusted by y-scale, or amplitude) controls the y-coordinate. "period" adjusts the number of cycles-per-screen the curve will traverse.

  document.getElementById("c").style.left=(rightedge*count)/(2*Math.PI);
  document.getElementById("c").style.top=140+yscale*Math.sin(period*count);;

Click here to see effects of truncating the sine wave thusly:

  document.getElementById("c").style.top=140-yscale*Math.abs(Math.sin(period*count));

Perhaps the term "bouncing" is overly evocative of things physically scientific, for so simple a mathematical treatment as this. Yet, as most trained in the liberal arts will recall, physics do not always conform to the laws of humor -- a considerably deeper study of which physics is, itself, but a simplification.