I was fooling around with some maths and realized that I could use a parabola to represent a bouncing ball. So, naturally, I decided to make it in code.

var Ball = function(r, v, a, y, x) {
    this.r = r;
    this.v = v;
    this.a = a;
    this.y = y;
    this.x = x;

Ball.prototype.draw = function() {
    this.y = this.v*this.r*this.r + this.a*this.r;
    var NewBallY = 380 - this.y;
    ellipse(this.x, NewBallY, 20, 20);
    if(this.y < 0) {
        this.r = 0;}
    this.r += 2;

var Ball1 = new Ball(0, random(-0.05, -0.02), random(2.0, 6.0), 40, random(20, 380));
var Ball2 = new Ball(0, random(-0.05, -0.02), random(2.0, 6.0), 40, random(20, 380));
var Ball3 = new Ball(0, random(-0.05, -0.02), random(2.0, 6.0), 40, random(20, 380));

var draw = function() {
    background(255, 255, 255);

The equation I used to calculate the parabola representing a ball's \$y\$ position is here, where \$y\$ is the y position of the ball, \$V\$ is the velocity, \$A\$ is the acceleration, and \$r\$ is the amount of time passed since the start of the bounce:



3 Answers 3


Using this.r to represent elapsed time is highly unconventional. I would have guessed that r stood for "radius". Why not use this.t like a sane programmer?

The draw() function ends with this.r += 2;, which is odd. Why should the drawing routine manage the passage of time? I would expect the time to be managed either in reference to the wall clock or to be passed in as a parameter by whatever code calls draw().

These don't look like parabolas to me. At best, they would be degenerate ones, since this.x never changes.

The placement of the closing brace here:

if(this.y < 0) {
    this.r = 0;}

is weird. Conventional formatting would be:

if (this.y < 0) {
    this.r = 0;
  • Regular variables and properties are camelCase, only constructor functions are PascalCase. So Ball is named well, but Ball1, Ball2, Ball3 and NewBallY should all just be camelCase (i.e. ball1, newBallY etc.).

  • Like 200_success above, I have no idea why r should represent "time", or why it's incremented by precisely 2 each iteration.

  • In general, I'm not a fan of 1-letter variables, the exceptions being things like x and y. Of course, forgetting the "r stands for 'elapsed time'" nonsense, things like v and a are, I'd say, allowable shorthands because of the context. However, the constructor arguments don't need to use those shorthands, and can be descriptive. E.g.

    function Ball(startTime, initialVelocity, acceleration, x, y)
  • However, why is r/time an argument (the first even) to your constructor? I can understand wanting to make the elapsed time configurable, but you can always just write ball.r = <some value>;. Your instantiation of Ball1 etc. doesn't use the argument for anything, so it seems like should just be left out.

  • What isn't settable (at all) from the outside is the size of the ball, though that, along with initial position, is be the minimum you'd need to draw it. So perhaps that should be a constructor argument. But the size is hardcoded within the draw function (which, as 200_success points out, also seems to doing more than just drawing)

  • Similarly, the height of the canvas/screen (380) is hard-coded inside draw

  • \$\begingroup\$ The reason r is incremented by two each time is because if it was incremented by any less, the simulation would be less realistic. \$\endgroup\$ Oct 17, 2014 at 18:40
  • 2
    \$\begingroup\$ @EthanBierlein That's not "time's fault" - if you use different values for v and a you'll get a "realistic" result too. \$\endgroup\$
    – Flambino
    Oct 17, 2014 at 18:52

Your formula for the height of the ball is wrong. The height of a ball at time \$t\$ acting only under gravity is $$y(t) = y_0 + v_0 t + \frac{1}{2} a t^2.$$ \$y_0\$ is the initial height, \$v_0\$ is the initial velocity, and \$a\$ is the acceleration (\$-9.8\,\,m/s^2\$ for Earth gravity). For the bounce, you'll need to find some way to reverse the ball's velocity when its height is zero.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.