let ballstart;

let ball;

let position;

let force;

let gravity;

let tran = 200;

function setup() {

  createCanvas(800, 400);

  ball = new Ball();

  position = createVector(arcpos, height / 2);

  ballstart = createVector(arcpos, height / 2);

  gravity = createVector(0, 50);

}

class Ball {

  constructor() {

    this.velocity = createVector(0, 0);

    this.acceleration = createVector(0, 0);

  }

  applyForce(force) {

    this.acceleration.add(this.gravity);

    this.acceleration.add(force);

  }

  move() {

    this.velocity.add(this.acceleration);

    position.add(this.velocity);

    this.acceleration.mult(0);

  }

  show() {

    fill(20, 40, 100);

    ellipse(position.x, position.y, 20, 20);

  }

}

​

function draw() {

  background(220);

  position.x = mouseX;

  position.y = mouseY;

  ropetense(tran);

  if (mouseIsPressed) {

    force = p5.Vector.sub(ballstart, position);

    force.add(gravity);

    force.mult(0.1);

    ropeRelease(200);

    tran = 0;

  }

  ball.applyForce(force);

  ball.move();

  ball.show();

}

​

function ropetense(c) {

  stroke(200, 150, 100, c);

  line(arcpos, 0, position.x, position.y);

  line(arcpos, height, position.x, position.y);

}

function ropeRelease(c) {

  stroke(200, 150, 100, c);

  line(arcpos, 0, arcpos, height);

}

​