let bounciness; //Ball bounciness

​

let position;

let gravity;

let speed;

​

let baseRippleDiameter;

let rippleDiameter;

let rippleNum = 5;

​

let outerDiam = 0;

​

function setup() {

  createCanvas(1600, 600);

​

  bounciness = 0.8;

  x = diameter;

  y = diameter;

  position = createVector(x, y);

  gravity = createVector(0, 0.3);

  speed = createVector(3, 0);

  rippleDiameter = 10;

}

​

function draw() {

  background(100);

  //Add gravity to velocity

  speed.add(gravity);

​

  // add velocity to the position

  position.add(speed);

​

  //background(50);

​

  // bounce by multiplying the speed by the bounciness

  if (position.y + diameter / 2 > height) {

    position.y = height - diameter / 2;

    speed.y *= -bounciness;

    speed.x *= bounciness;

  }

  if (position.y > height - 100) {

    for (var i = 0; i < rippleNum; i++) {

      var rippleDiam = outerDiam - 30 * i;

      if (rippleDiam > 0) {

        var rippleFade = map(rippleDiam, 0, width, 0, 255);

        stroke(rippleFade);

        noFill();

        ellipse(position.x, position.y, rippleDiam, 10);

      }

    }

  }

​

  if (position.y > height - 100) {

    outerDiam = 0;

  } else {

    outerDiam = outerDiam + 2;

  }

​

  // draw the ball

  fill(255);

  stroke(0);

  circle(position.x, position.y, diameter);

​

  //stop frameGen once speed < 0

  if (speed.y < 0 && speed.x <= 0.1) {

    noLoop();

  }

  //text for instruction

text("Click to bounce higher!", width/2, height/2, 32);

}

​

​

​

// any key to drop the ball again

function keyPressed() {

redraw();

}

​

function mousePressed() {

  bounciness += 0.02;

}

​